@extends('layouts.student')

@section('content')
<style>
    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>
<div class="app-content  my-3 my-md-5">
    <div class="side-app">
        <x-page.header>@lang('student.wallet-page.recharge your balance')</x-page.header>
        <!--/Page-Header-->
        @include('admin.errors.form-errors')
        <div class="w-100 m-auto">
            @if ($has_salfny)
                @if ($paymentGateway == 2 && $has_salfny->total > 0)
                <div class="alert alert-outline alert-outline-secondary" role="alert"><button type="button" class="close" data-bs-dismiss="alert" aria-hidden="true">×</button>
                    <span class="font-weight-bold">Attention:</span> You have {{$has_salfny->total}} EGP for salfny, it will be taken once you recharge
                </div>
                @elseif ($paymentGateway == 1 && $has_salfny->total_aed > 0)
                <div class="alert alert-outline alert-outline-secondary" role="alert"><button type="button" class="close" data-bs-dismiss="alert" aria-hidden="true">×</button>
                    <span class="font-weight-bold">Attention:</span> You have {{$has_salfny->total_aed}} AED for salfny, it will be taken once you recharge
                </div>
                @endif
            @endif
            @if (!$stop_recharging || auth()->id() == 199)
                @if (strlen(auth()->user()->phone) <= 15 )
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label class="form-label" for="recharge">@lang('student.wallet-page.enter the amount')</label>
                            <input style="-webkit-appearance: none;" name="amount"  type="number" class="form-control" id="recharge_amount"
                                placeholder="120" min="1" step="1"
                                oninput="this.value = this.value.replace(/\D/g, '')"
                                required
                            >
                            <span id="error_amount" class="text-danger font-weight-bold d-none"></span>
                        </div>
                    </div>
                </div>
                @endif
                @if (strlen(auth()->user()->phone) > 15 )
                <div class="card">
                    <div class="card-header">
                        <h2 class=" card-title text-danger">Phone number in Invalid</h2>
                    </div>
                    <div class="card-body">
                        <span>Please update your phone number in order to be able to recharge your balance.</span>
                        <div class="mt-2">
                            <a href="javascript:void(0)"><span class="font-weight-bold text-default-dark">Phone :</span> <span class="user-1">{{auth()->user()->phone}} </span></a>
                            <button type="button"
                                class="modal-effect btn btn-outline-primary btn-sm ms-3 waves-effect waves-light"
                                data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Update" data-bs-target="#edit_phone">
                                Update <i class="fa fa-edit fs-16"></i>
                            </button>
                        </div>
                    </div>
                </div>
                @endif
                <div class="row">
                    @if ($paymentGateway == 1)
                    <div class="col-sm-12 col-lg-12">
                        <div class="card overflow-hidden text-white">
                            <div class="card-status bg-success"></div>
                            @if (isset($bonus) && $bonus->bonus != 0)
                            <div class="ribbon ribbon-top-left text-primary">
                                <span class="bg-success">Bonus {{ round($bonus->bonus,0)}} %</span>
                            </div>
                            @endif
                            <div class="text-start p-5 pricing pricing1">
                                <div class="card-category text-primary fw-bold text-center fs-25 bg-transparent p-0">
                                    <span class="text-success">@lang('student.AED')</span>
                                    <img src="{{env('SECURE_ASSETS').'/images/flags/ae.svg'}}" alt="ae" class="avatar bg-transparent rounded me-3">
                                </div>
                                <div class="display-3 my-1">
                                <p class="lead text-center  fs-30"><strong class="fs-30 font-weight-bold text-center" id="amount_aed"></strong></p></div>
                                {{-- <ul class="list-unstyled leading-loose">
                                    <li class="border-bottom-0 text-success"><i class="fa fa-check-circle me-2"></i><strong class="fs-16">{{ isset($bonus)  ? $bonus->bonus .' %' : '0' }} </strong> Bonus</li>
                                </ul> --}}
                                <div class="text-center">
                                    <form action="{{route('student.paymob.uae.pay')}}" method="post">
                                        @csrf
                                        @if ($has_salfny)
                                            @if ($has_salfny->total_aed > 0)
                                            <input type="hidden" name="has_salfny" value="{{$has_salfny->total_aed}}">
                                            @endif
                                        @endif
                                        <input type="hidden"  class="amount_value" name="amount">
                                        <div class="form-group payment_method d-none">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="paymob_recharge_type" id="paymob_recharge_type" value="BankCard" checked readonly>
                                                <label class="form-check-label" for="paymob_recharge_type">BankCard</label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-success btn-block recharge_btn w-75 mx-auto" disabled>Recharge Now <img src="{{env('SECURE_ASSETS').'/images/payments/PayMob.png'}}" class="ms-1" width="40" alt=""></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    @elseif ($paymentGateway == 2)
                        @if ($opay_gateway)
                            {{-- Opay --}}
                            <div class="col-sm-12 col-lg-12">
                                <div class="card overflow-hidden">
                                    <div class="card-status bg-danger"></div>
                                    <div class="text-start p-5 pricing pricing1">
                                        <div class="card-category text-center fs-25 fw-bold p-0">
                                            <span class="text-danger">@lang('student.EGP')</span>
                                            <img src="{{env('SECURE_ASSETS').'/images/flags/ar.svg'}}" alt="egp" class="avatar bg-transparent rounded me-3 ">
                                        </div>
                                        <div class="display-3 my-1">
                                        <p class="lead text-center fs-30"><strong class="fs-30 font-weight-bold text-center" id="amount_egp"></strong></p></div>
                                        {{-- <ul class="list-unstyled leading-loose">
                                            <li class="border-bottom-0 text-danger"><i class="fa fa-check-circle me-2"></i><strong class="fs-16">0</strong> Bonus</li>
                                        </ul> --}}
                                        <div class="text-center">
                                            <form action="{{route('student.opay.pay')}}" method="post">
                                                @csrf
                                                @if ($has_salfny)
                                                    @if ($has_salfny->total > 0)
                                                    <input type="hidden" name="has_salfny" value="{{$has_salfny->total}}">
                                                    @endif
                                                @endif
                                                <input type="hidden"  class="amount_value" name="amount">
                                                <div class="form-group payment_method d-none">
                                                    @foreach ($opay_gateway_details as $key=>$item)
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="recharge_type" id="opay_recharge_type_{{ $key }}" value="{{$item->feature_name}}" {{ $key==0 ? 'checked':''}}>
                                                        <label class="form-check-label" for="opay_recharge_type_{{ $key }}">{{$item->feature_name}}</label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                <button type="submit" class="btn btn-secondary btn-block recharge_btn w-75 mx-auto" disabled>Recharge Now
                                                    <img src="{{env('SECURE_ASSETS').'/images/payments/opayts.png'}}" class="ms-1" width="30" alt="">
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @elseif ($paymob_eg_gateway)
                            {{-- paymob eg --}}
                            <div class="col-sm-12 col-lg-12">
                                <div class="card overflow-hidden">
                                    <div class="card-status bg-danger"></div>
                                    <div class="text-start p-5 pricing pricing1">
                                        <div class="card-category text-center fs-25 fw-bold p-0">
                                            <span class="text-danger">@lang('student.EGP')</span>
                                            <img src="{{env('SECURE_ASSETS').'/images/payments/PayMob.png'}}" class="ms-3" width="50" alt="">
                                        </div>
                                        <div class="display-3 my-1">
                                        <p class="lead text-center fs-30"><strong class="fs-30 font-weight-bold text-center" id="amount_egp"></strong></p></div>
                                        {{-- <ul class="list-unstyled leading-loose">
                                            <li class="border-bottom-0 text-danger"><i class="fa fa-check-circle me-2"></i><strong class="fs-16">0</strong> Bonus</li>
                                        </ul> --}}
                                        <div class="text-center">
                                            <form action="{{route('student.paymob.pay')}}" method="post">
                                                @csrf
                                                @if ($has_salfny)
                                                    @if ($has_salfny->total > 0)
                                                    <input type="hidden" name="has_salfny" value="{{$has_salfny->total}}">
                                                    @endif
                                                @endif
                                                <input type="hidden"  class="amount_value" name="amount">
                                                <div class="form-group payment_method d-none">
                                                    @foreach ($paymob_eg_gateway_details as $key=>$item)
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" name="recharge_type" id="paymob_recharge_type_{{ $key }}" value="{{$item->feature_name}}" {{ $key==0 ? 'checked':''}}>
                                                        <label class="form-check-label" for="paymob_recharge_type_{{ $key }}">{{$item->feature_name}}</label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                <div class="form-group d-none"  id="wallet_num">
                                                    <label for="phone_input">Phone number <span class="text-danger">*</span></label>
                                                    <div class="d-flex flex-row justify-content-center">
                                                        <div class="form-group w-10">
                                                            <select disabled class="form-control select2-flag-search" data-placeholder="Select Contry">
                                                                <option value="EG">+2</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group w-25 ms-2">
                                                            <input type="number" name="phone"  id="phone_input" class="form-control bg-light" placeholder="01115672364">
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-secondary btn-block recharge_btn w-75 mx-auto" disabled>Recharge Now
                                                    {{-- <img src="{{env('SECURE_ASSETS').'/images/payments/PayMob.png'}}" class="ms-1" width="40" alt=""> --}}
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                    @endif
                </div>
            @else
            <div class="border-0">
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-5">
                        <div class="card">
                            <div class="card-header bg-danger">
                                <h4 class="text-light">Attention <i class="ms-2 fa fa-exclamation-triangle"></i></h4>

                            </div>
                            <div class="card-body">
                                <span class="fs-6">
                                    Please note that the payment system is not available from
                                    <b class="text-primary">11 PM </b> to <b class="text-primary">1 AM </b> CLT.
                                    Sorry for any inconvenience, if you need any assistance please contact us through
                                    <i class="fa fa-whatsapp text-success"></i> WhatsApp +201110001677
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
        {{-- <div class="col-lg-6">
            <div class="card">
                <div class="card-header bg-primary">
                    <h3 class="card-title">@lang('student.wallet-page.note')</h3>
                </div>
                <div class="card-body">
                    <blockquote>
                    <p class="lead">@lang('student.wallet-page.note-message')</p>
                    <p>@lang('student.wallet-page.note-message-second line')</p>
                        <div><cite title="Source Title"> Eshra7ly</cite></div>
                    </blockquote>
                </div>
            </div>
        </div> --}}
    </div>
</div>

{{-- Edit Phone --}}
<div class="modal fade" id="edit_phone">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title">Edit Phone</h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{route('student.account-settings.editPhone')}}" id="" name=""  enctype="multipart/form-data">
                    @csrf
                    <div class="form-group ">
                        <div class="row">
                            <label class="form-control-label">@lang('auth.whatsapp'):</label>
                            <div class="col-md-5 col-lg-5 mb-4">
                                <!-- country codes (ISO 3166) and Dial codes. -->
                                <select name="phoneCountryCode" id="phoneCountryCode" name="phoneCountryCode"
                                    class="form-control select2-show-search">
                                    @foreach ($countries as $country)
                                     <option data-countryCode="{{$country->iso}}" value="{{$country->phonecode}}">{{$country->nicename}} ({{$country->phonecode}})</option>
                                    @endforeach
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-md-7 col-lg-7 mb-4">
                                <input id="phone"  placeholder="12373202736" type="phone"
                                    class="form-control  @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}"
                                    required autocomplete="phone" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('student-js')
<script>
    $("#recharge_egp").on("input", function() {
        var result = Math.floor((($(this).val())/9) * 100) / 100;
        $("#recharge_aed").val(result+' AED');
    });

    $('#recharge_amount').on("input", function() {
        var exchange_rate = {{ isset($exchange_rate) ? $exchange_rate->rate : 0 }}
        var bonus = {{ isset($bonus) ? $bonus->bonus  : 0 }}
        var bonus_value = Math.floor((($(this).val()) * bonus)) / 100
        var amount_aed= Math.floor((($(this).val()) / exchange_rate) * 100) / 100

        // change price in uae card
        // $('#amount_aed').html(amount_aed + ' AED' + '<br>' +
        // '<div class="badge badge-success fs-6 mt-2">' +
        //     (bonus == 0 ? 'Balance = '+ $(this).val() + ' EGP'
        //     :
        //     'Balance= '+ $(this).val() + ' + ' + bonus_value +' = '+ (eval($(this).val()) + eval(bonus_value)) + ' EGP'
        //     ) +
        // '</div>'
        // )

        $('#amount_aed').html($(this).val() + ' AED' )
        $('#amount_egp').html($(this).val() + ' EGP' )

        // change price in egp card
        // $('#amount_egp').html($(this).val() + ' EGP' + '<br>' +
        // '<div class="badge badge-danger fs-6 mt-2">' +
        //     'Balance = '+ $(this).val() + ' EGP' +
        // '</div>')

        // assign entered amount to the hidden input value
        $('.amount_value').val($(this).val())
        // check if input is empty
        if(!$('input').val() || $('input').val() == 0){
            $(this).addClass('empty');
            $('#amount_egp').html('')
            $('#amount_aed').html('')
            $('.payment_method').addClass('d-none')
            // disable and enable pay btn
            $('.recharge_btn').attr('disabled',true)

            $('#error_amount').removeClass('d-none')
            $('#error_amount').text('*The amount must be a number greater than 0')
        }
        else{
            $(this).removeClass('empty');
            $('.payment_method').removeClass('d-none')
            // disable and enable pay btn
            $('.recharge_btn').removeAttr('disabled')

            $('#error_amount').addClass('d-none')
        }
    })

    $("input[name='recharge_type']").on('change',function(){
        var value=$(this).val();
        if(value == 'MWALLET'){
            $('#wallet_num').removeClass('d-none')
            $('#phone_input').attr('required',true)
        }else{
            $('#wallet_num').addClass('d-none')
            $('#phone_input').attr('required',false)
        }
    })

</script>
{{-- prevent inspect --}}
@if (env('APP_DEBUG') == false)
<script>
    document.addEventListener('contextmenu', (e) => e.preventDefault());

    function ctrlShiftKey(e, keyCode) {
    return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
    }

    document.onkeydown = (e) => {
    // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
    if (
        event.keyCode === 123 ||
        ctrlShiftKey(e, 'I') ||
        ctrlShiftKey(e, 'J') ||
        ctrlShiftKey(e, 'C') ||
        (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
    )
        return false;
    };
</script>
@endif
@endsection