@extends("agentportal.layouts.layout")

@section("title", trans("message_lang.LBL_WALLET_REPAYMENT"))

@section("page_style")

@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@section("content")
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                {!! trans("message_lang.LBL_WALLET_REPAYMENT") !!}
                            </h3>
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <a href="{{ url('agentportal/repayment-requests') }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--begin::Form-->
                        <form method="post" name="form" action="{{ url('agentportal/repayment-requests/store') }}" enctype="multipart/form-data" autocomplete="off" id="form" class="confirm">
                            @csrf
                            <div class="card-body">
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <h5 class="text-center">{!! trans("message_lang.LBL_BALANCE") !!}: {{ number_format($agentLocation->balance, 2) }} {{ $agentLocation->currency }}</h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label class="" for="amount">{!! trans("message_lang.LBL_AMOUNT") !!} <span style="color:red;">*</span></label>
                                                <input onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')" type="text" name="amount" placeholder="Amount" value="{{ old('amount') }}" id="amount" class="form-control @error('amount') is-invalid @enderror custom-field" />
                                                <span class="txn-limit-reached errClass" style="display: none;"></span>
                                                @error('amount')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-12">
                                                <label class="" for="currency">{!! trans("message_lang.LBL_CURRENCY") !!} <span style="color:red;">*</span></label>
                                                <select name="currency" id="currency" class="form-control @error('currency') is-invalid @enderror custom-field">
                                                    <option value="{{ $agentLocation->currency }}" @if (old('currency', $agentLocation->currency)) selected @endif>{{ $agentLocation->currency }}</option>
                                                </select>
                                                @error('currency')
                                                <span class="invalid-feedback" style="display: block;" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <!-- wallet type selector -->
                                            <div class="form-group col-md-12">
                                                <label for="walletType">{!! trans("message_lang.LBL_WALLET_TYPE") !!}</label>
                                                <select name="walletType" id="walletType" class="form-control" required>
                                                    <option value="">{!! trans("message_lang.LBL_WALLET_TYPE_SELECT") !!}</option>
                                                    @foreach($walletProviders as $key => $provider)
                                                    <option value="{{ $key }}" @if (old('walletType') == $key) selected @endif>{{ $provider }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger" id="locationProviderError"></span>
                                            </div>

                                            @if(isset($walletType) && $walletType == 2)
                                                <input type="hidden" name="method" value="Manual Wallet">
                                            @else
                                                <input type="hidden" name="method" value="Wallet">
                                            @endif
                                            <input type="hidden" name="fees" id="fees" value="">
                                            <div class="form-group col-md-12">
                                                <label class="" for="agent_comment">{!! trans("message_lang.LBL_COMMENT") !!} <span style="color:red;"></span></label>
                                                <input type="text" name="agent_comment" placeholder="Comment" value="{{ old('agent_comment') }}" id="agent_comment" class="form-control @error('agent_comment') is-invalid @enderror custom-field" />
                                                @error('agent_comment')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card mt-8 mt-md-0">
                                            <div class="card-header">
                                                <h6 class="mb-0 py-1">{!! trans('message_lang.LBL_SUMMARY') !!}</h6>
                                            </div>
                                            <ul class="list-group list-group-flush text-md">
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_MOBILE_WALLET_NUMBER") !!}</span>
                                                    <span class="walletSpan"></span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_AMOUNT") !!}</span>
                                                    <span class="amountSpan"></span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_FEES") !!}</span>
                                                    <span class="feeSpan"></span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_YOUR_TOTAL") !!}</span>
                                                    <span class="totalSpan"></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">

                                <div class="row">
                                    <div id="otpDiv" class="col-12 col-lg-6 shadow-sm bg-white rounded-1 p-5 mb-4" style=" display: none;">
                                        <h6>{!! trans("message_lang.LBL_ENTER_PASSCODE") !!}</h6>
                                        <div class="form-group row mb-2">
                                            <div class="col-12">
                                                <input type="password" name="userPasscode" placeholder="{{ trans('message_lang.LBL_USER_SIGNATURE') }}" value="{{ old('userPasscode') }}" id="userPasscode" class="form-control @error('userPasscode') is-invalid @enderror custom-field" required/>
                                                <span class="errPwd" style="color: red;"></span>
                                                @error('userPasscode')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-12">
                                                <small>{{ trans('message_lang.LBL_FORGOT_PASSCODE') }} <a href="{{ url('agentportal/signature/create') }}">{{ trans('message_lang.LBL_HERE') }}</a></small>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-12">
                                                <button type="button" id="validate" class="btn btn-info btn-sm mr-2">
                                                    {{ trans('message_lang.BTN_VALIDATE') }}
                                                    <span id="validateLoader"></span>
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <button type="button" id="save" class="btn btn-primary mr-2">{{ trans('message_lang.BTN_INITIATE') }} <span id="submitLoader"></span></button>
                                <button type="reset" id="reset" class="btn btn-secondary">{{ trans('message_lang.BUTTON_CANCEL') }}</button>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
<script src="{{ url('js/select2.min.js') }}"></script>
<script src="{{ url('js/sweetalert2.min.js') }}"></script>
@endsection

@section("page_script")
<script type="text/javascript">
    var locationId = @json($agentLocation->id);
    var otpShown = false;
    var otpValid = false;
    var currency = "{{ $agentLocation->currency }}"
    var messageConfirm = "{{trans("message_lang.CONF_REPAYMENT_SUBMIT")}}"
    var messageContinue = "{{trans("message_lang.CONF_REPAYMENT_INITIATE")}}"
    var message = '-'
    var fees = @json($fees);
    var balance = @json($agentLocation->balance);
    var wallet_number = ""; //@json($agentLocation->wallet_number);
    $('.walletSpan').html(wallet_number)
    $('.errPwd').hide()
    $('.errPwd').html('')
    var min = 0; var max = 0;
    if (fees != undefined && fees.length !== 0){
        min = Math.min(...fees.map(item => item.minimum_amount));
        max = Math.max(...fees.map(item => item.maximum_amount));
    }

    $(document).ready(function () {
        // countdown()
        $('#save').attr("disabled", true);
        $('#resend').hide()
        resetAlert()
        checkSelectedProvider();

        $('#amount').on('keyup', function () {
            $('#save').attr("disabled", false);
            hideOtp()
            var amount = $(this).val();
            var fee = '';
            var total = 0;
            if (amount != '' && !isNaN(amount) && amount != 0){

                // if(parseFloat(amount) > parseFloat(balance)) {
                //     $('.txn-limit-reached').show()
                //     $('.txn-limit-reached').html('{{ __('message_lang.LBL_INSUFFICIENT_BALANCE') }}');
                //     $('#save').attr("disabled", true);
                //     return;
                // }

                for (let i = 0; i < fees.length; i++) {
                    const f = fees[i];
                    if (f.minimum_amount <= amount && f.maximum_amount >= amount){
                        if(f.charges_type == 1) { // percentage
                            fee = amount * (f.charges/100);
                        } else {
                            fee = f.charges
                        }
                        break;
                    }
                }
                if (amount < min){
                    resetAlert()
                } else if (amount > max){
                    $('.txn-limit-reached').show()
                    $('.txn-limit-reached').html(getAlertMsg('max', max))
                } else {
                    $('.txn-limit-reached').hide()
                    $('.txn-limit-reached').html('')
                }
            } else {
                resetAlert()
            }

            if(isNaN(amount) || amount == '') $('.amountSpan').html(amount)
            else $('.amountSpan').html(number_format(amount, 2))
            if(fee !== '') $('.feeSpan').html(number_format(fee, 2))
            else $('.feeSpan').html(fee)
            $("#fees").val(fee);
            total = (!isNaN(amount) && !isNaN(fee)) ? (+amount +fee) : total
            $('.totalSpan').html(number_format(total, 2))

            // if(fee === '') {
            //     $('#save').attr("disabled", true);
            // }

            checkInitiateButton();
        });

        $('#save').on('click', async function (e) {

            // check provider configuration status
            var isProviderConfig = await checkSelectedProvider();
            if(!isProviderConfig){
                // provider not configured
                $("#save").prop("disabled", false);
                $("#submitLoader").removeClass("spinner spinner-border spinner-border-sm");

                return;
            }

            var amount = $('#amount').val();
            if (isNaN(amount) || amount == 0){
                alert('{{ __('message_lang.PLEASE_ENTER_AMOUNT') }}');
                return;
            }
            var chkLimits = checkLimits(amount);
            if (chkLimits !== ''){
                return;
            }

            if(parseFloat(amount) > parseFloat(balance)) {
                alert('{{ __('message_lang.LBL_INSUFFICIENT_BALANCE') }}');
                return;
            }

            var fees = $("#fees").val();
            if (isNaN(fees) || fees == ''){
                alert('{{ __('message_lang.LBL_FEE_NOT_FOUND') }}');
                return;
            }
            if (otpValid == true) {
                var html = "<br><span style='font-size: 13px;'>{{trans("message_lang.CONF_REPAYMENT_SUBMIT")}}</span>";
                html += "<div style='text-align:center;'> <span style='font-size:16px;'> <strong>"+ ` ${number_format(amount, 2)} ${currency}` + "</strong></span>";
                html += " {{trans("message_lang.CONF_REPAYMENT_TO")}} <span style='font-size:16px;'> <strong>"+ ` ${wallet_number} </span> ?` + "</strong></div>";

                Swal.fire({
                title: "{{ trans('message_lang.LBL_PAY_REPAYMENT') }}",
                confirmButtonText: "{{trans("message_lang.YES_I_CONFIRM")}}",
                showCancelButton: true,
                cancelButtonText: "{{ trans('message_lang.BUTTON_CANCEL') }}",
                html: html,
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#form').submit();
                    } else {
                        $("#save").attr("disabled", false);
                        $("#submitLoader").removeClass("spinner-border spinner-border-sm");
                    }
                });
            } else {
                var html = "<br><span style='font-size: 13px;'>{{trans("message_lang.CONF_REPAYMENT_INITIATE")}}</span>";
                html += "<div style='text-align:center;'> <span style='font-size:16px;'> <strong>"+ ` ${number_format(amount, 2)} ${currency}` + "</strong></span>";
                html += " {{trans("message_lang.CONF_REPAYMENT_TO")}} <span style='font-size:16px;'> <strong>"+ ` ${wallet_number} </span> ?` + "</strong></div>";

                Swal.fire({
                title: "{{ trans('message_lang.LBL_PAY_REPAYMENT') }}",
                confirmButtonText: "{{trans("message_lang.YES")}}",
                showCancelButton: true,
                cancelButtonText: "{{ trans('message_lang.BUTTON_CANCEL') }}",
                html: html,
                }).then((result) => {
                    if (result.isConfirmed) {
                        showOtp()
                    } else {
                        $("#save").attr("disabled", false);
                        $("#submitLoader").removeClass("spinner-border spinner-border-sm");
                    }
                });
            }
        });

        $('#reset').on('click', function (e) {
            window.location.href = "{{ route('agentportal.repayment-requests.index')}}";
        });

        $('#validate').on('click', function (e) {

            // initiate the loading activity on the button
            $('#validate').prop("disabled", true);
            $('#validateLoader').addClass("spinner-border spinner-border-sm");

            // get the entered passcode
            const submittedPasscode = $("#userPasscode").val();

            // submit the passcode for validation
            let verifyUrl = "{{ url('agentportal/validatePasscode') }}";
            $.ajax({
                "url": verifyUrl,
                type: "POST",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: {
                    "passcode" : submittedPasscode
                },
                success: function (response) {
                    if (response.success) {
                        hideOtp()
                        $('#save').attr("disabled", false);
                        $('#save').html('{{ __('message_lang.BTN_SUBMIT') }} <span id="submitLoader"></span>');
                        otpValid = true;

                        toastr.success('{{ __('message_lang.LBL_OTP_VALID') }}', 'Success');
                    } else {
                        toastr.error('{{ __('message_lang.LBL_OTP_INVALID') }}', 'Error');

                        // stop the loading activity on the button
                        $('#validate').prop("disabled", false);
                        $('#validateLoader').removeClass("spinner-border spinner-border-sm");
                        $("#save").attr("disabled", false);
                        $("#submitLoader").removeClass("spinner-border spinner-border-sm");
                    }
                },
                error: function (error) {
                    $("#loading").hide();
                    $("#save").attr("disabled", false);
                    $("#submitLoader").removeClass("spinner-border spinner-border-sm");
                }
            });
        });

        $('#walletType').change(() => {
            checkInitiateButton();
        })

    });

    $(window).on('load', function() {
        var otpError = @json("{{$errors ?? ''}}");
        if (otpError.includes('otp')){
            showOtp()
        }
    });

    async function checkInitiateButton(){
        // check the balance
        $("#save").prop("disabled", true);

        let provider = $("#walletType").val();
        let amt = $("#amount").val();
        let bal = balance;
        let fees = $("#fees").val();
        const isProviderValid = await checkSelectedProvider();

        const variables = {
            "provider": provider,
            "amount": amt,
            "balance": bal,
            "fees": fees,
            "isProviderValid": isProviderValid
        }

        if(fees !== "" && provider !== "" && (Number(amt) < Number(bal)) && isProviderValid){
            $("#save").prop("disabled", false);
        }
    }

    function showOtp(){
        $('#otpDiv').fadeIn("slow");
        otpShown = true;

        // disable the save btn
        $("#save").prop("disabled", true);
    }

    function hideOtp(){
        $('#otpDiv').fadeOut("slow");
        otpShown = false;
    }

    function resetAlert() {
        $('.txn-limit-reached').show()
        $('.txn-limit-reached').html(getAlertMsg('min', min))
    }

    function getAlertMsg(type, val) {
        if (type == 'min'){
            return "{{ __('message_lang.LBL_MIN_AMOUNT') }}"+number_format(val)+" "+currency
        } else if (type == 'max'){
            return "{{ __('message_lang.LBL_MAX_AMOUNT') }}"+number_format(val)+" "+currency
        }
    }

    const number_format = (num, decimals) => parseFloat(num).toLocaleString('en', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });

    $(document).on("click","#save",function(){
        $("#save").attr("disabled", true);
        $("#submitLoader").addClass("spinner-border spinner-border-sm");
    });

    async function checkSelectedProvider(){
        $(".walletSpan").html('');
        $("#locationProviderError").html('');

        // get the selected provider
        const providerId = $("#walletType").val();
        if(providerId == ""){
            $(".walletSpan").html("");
            $("#locationProviderError").html("{{ __('message_lang.LBL_PROVIDER_SELECT') }}");
            return false;
        }

        let url = `{{ url('agentportal/repayment-requests/checkProvider/${locationId}/${providerId}') }}`;
        return $.get(url).then(res => {
            if(!res.success){
                // wallet number could not be found for provider
                $("#locationProviderError").html(res.message);
                $(".walletSpan").html(wallet_number); // set default wallet number
                return false;
            }

            if(res.data && res.data.providerId == 0){
                // location No. configured but not for selected provider
                $("#locationProviderError").html("{{ __('message_lang.ERR_NO_WALLET_PROVIDER') }}");
                $(".walletSpan").html(wallet_number); // set default wallet number
                return false;
            }

            // update the wallet span
            $(".walletSpan").html(res.data.walletNumber);
            return true;
        })
    }

</script>
@include('agentportal.repayment-requests.utilities')
@endsection