@extends('layouts.paymentLayout')
@section('head')
    {{trans('user.wallet')}}
@endsection
@section('content')
    <style>
        .wpwl-container{
            z-index: 99;
            color : rgb(15, 13, 13);
        }
        .wpwl-control, .wpwl-group-registration{
            color:#333;
        }
        .pay-link{
            position: relative;
            z-index: 99;
        }
        .pay-link ul{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pay-link ul li{
            margin: 10px;
        }
        .pay-link ul li img{
            width: 120px;
            height: 50px;
            max-width: 100%;
        }
        .wpwl-form-card {
            min-height: 0px !important;
        }
        .wpwl-label-brand{
            display: none !important;
        }
        .wpwl-control-brand{
            display: none !important;
        }
        .wpwl-brand-MASTER {
            margin-top: -10;
            margin-right: -10;
        }

        @media only screen and (max-width: 479px) {
            .wpwl-brand-card {

                right: 178px;
                top: 38px;
                margin: 0px;
                left: 0px;
                margin-left: 5px;
            }
        }



    </style>
    @if(setting('online_payment_commission') > 0)
        <p class="text-center">{{trans('user.onlinePaymentAmount')}}  {{setting('online_payment_commission')}} {{trans('user.onlinePaymentWallet')}}</p>
    @endif
    <form action="{{route('madaTransferBalanceResult')}}" class="paymentWidgets" data-brands="{{$mada->type}}">
        <input style="display:none;" name="language" value="{{$language}}">
    </form>
    @if(isset($language)&&$language == 'ar')
        <script>
            var wpwlOptions = {
                locale: "ar",
            }
        </script>
    @endif
    @if(setting('hyperpay_mode') && setting('hyperpay_mode') == 'live')
        <script src="https://oppwa.com/v1/paymentWidgets.js?checkoutId={{$checkoutId}}"></script>
    @else
        <script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={{$checkoutId}}"></script>
    @endif
    <script>

        var wpwlOptions = {
            locale: "{{$language}}",
            onReady: function(){
                $(".wpwl-brand").css("display","none");
                if (wpwlOptions.locale == "ar") {
                    $(".wpwl-group").css('direction', 'ltr');
                    $(".wpwl-control-cardNumber").css({'direction': 'ltr' , "text-align":"right"});
                    $(".wpwl-brand-card").css('right', '160px');
                }else {
                    $(".wpwl-group").css('direction', 'ltr');
                    $(".wpwl-control-cardNumber").css({'direction': 'ltr' , "text-align":"left"});
                    $(".wpwl-brand-card").css('left', '270px');
                }
            },onDetectBrand: function(brands){
                $(".wpwl-brand").css("display","block");
            }
        };
        console.log(wpwlOptions)
    </script>
@endsection