@extends("agentportal.layouts.layout")

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

@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_NEW_CASH_REPAYMENT_REQUEST") !!}
                            </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="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>

                                        <div class="form-group col-md-12">
                                            <label class="" for="send_to">{{ trans('message_lang.LBL_SEND_TO') }} <span style="color:red;">*</span></label>
                                            <select name="send_to" id="send_to" class="form-control @error('send_to') is-invalid @enderror custom-field">
                                                @foreach($sendTos as $key => $st)
                                                <option value="{{ $key }}">{{ $st }}</option>
                                                @endforeach
                                            </select>
                                            @error('send_to')
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="form-group col-md-12 beneficiaryDiv" style="display: none;">
                                            <label class="" for="beneficiary_first_name">{{ __('message_lang.LBL_BENEFICIARY_FIRST_NAME') }}<span style="color:red;">*</span></label>
                                            <input type="text" name="beneficiary_first_name" placeholder="{{ __('message_lang.LBL_BENEFICIARY_FIRST_NAME') }}" value="{{ old('beneficiary_first_name') }}" id="beneficiary_first_name" class="form-control @error('beneficiary_first_name') is-invalid @enderror custom-field" />
                                            <span class="noBenef noBenef_firstname errClass" style="display: none;"></span>
                                            @error('beneficiary_first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="form-group col-md-12 beneficiaryDiv" style="display: none;">
                                            <label class="" for="beneficiary_last_name">{{ __('message_lang.LBL_BENEFICIARY_LAST_NAME') }}<span style="color:red;">*</span></label>
                                            <input type="text" name="beneficiary_last_name" placeholder="{{ __('message_lang.LBL_BENEFICIARY_LAST_NAME') }}" value="{{ old('beneficiary_last_name') }}" id="beneficiary_last_name" class="form-control @error('beneficiary_last_name') is-invalid @enderror custom-field" />
                                            <span class="noBenef noBenef_lastname errClass" style="display: none;"></span>
                                            @error('beneficiary_last_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="form-group col-md-12">
                                            <label class="" for="reception_location">{{ trans('message_lang.LBL_RECEIVE_AT') }} <span style="color:red;">*</span></label>
                                            <select name="reception_location" id="reception_location" class="form-control @error('reception_location') is-invalid @enderror custom-field">
                                                <option value=""></option>
                                                @foreach($receptionLocations as $key => $rl)
                                                <option value="{{ $key }}">{{ $rl }}</option>
                                                @endforeach
                                            </select>
                                            <span class="reception-message errClass" style="display: none;"></span>
                                            @error('reception_location')
                                            <span class="invalid-feedback" style="display: block;" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <input type="hidden" name="method" value="CashPickUp">
                                        <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 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_BENEFICIARY") !!}</span>
                                                    <span class="beneficiary"></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 class="form-group row">

                                </div>
                            </div>

                            <div class="card-footer">

                                {{-- <div id="otpDiv" style="background-color: lightgray; padding: 10px 10px 1px 10px; margin-bottom: 20px; display: non;">
                                    <h6>{!! trans("message_lang.LBL_ENTER_OTP") !!}</h6>
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <label class="" for="otp">{!! trans("message_lang.LBL_OTP") !!} <span style="color:red;"></span></label>
                                            <input type="number" name="otp" placeholder="OTP" value="{{ old('otp') }}" id="otp" class="form-control @error('otp') is-invalid @enderror custom-field" />
                                            <span class="errPwd" style="color: red;"></span>
                                            @error('otp')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <button type="button" id="validate" class="btn btn-info btn-sm mr-2">{{ trans('message_lang.BTN_VALIDATE') }}</button>
                                    <span id="demo"></span> &nbsp; &nbsp;
                                    <br>
                                    <br>
                                </div> --}}

                                <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>

                                <button type="button" id="save" class="btn btn-primary mr-2">{{ trans('message_lang.BTN_INITIATE') }} <span id="submitLoader"></span></button>
                                <button type="button" id="resend" style="display: none;" class="btn btn-danger btn-sm">{{ trans('message_lang.BTN_RESEND') }}</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 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 mainFees = @json($fees);
    var fees = [];
    filterFees('')
    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));
    }*/
    var balance = "{{ $agentLocation->balance }}";

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

        $('#amount').on('keyup', function () {
            $('#save').attr("disabled", false);
            hideOtp()
            var reception = $('#reception_location').val();
            if (reception == undefined || reception === ''){
                $('.feeSpan').html('')
                $('.totalSpan').html('')
                return;
            }
            var amount = $(this).val();
            var fee = ''
            var total = 0
            if (amount != '' && !isNaN(amount) && amount != 0){
                var bnbOwned = "{{ auth()->guard('agentportal')->user()->agentLocation->bnb_owned }}";
                var maxCredit = "{{ auth()->guard('agentportal')->user()->agentLocation->max_credit_limit ?? 0 }}";
                if (bnbOwned == 1){
                    if (parseFloat(amount) > parseFloat(balance) + parseFloat(maxCredit)){
                        $('.txn-limit-reached').show()
                        $('.txn-limit-reached').html('{{ __('message_lang.LBL_MAX_CREDIT_AMOUNT_REACHED') }}');
                        $('#save').attr("disabled", true);
                        return;
                    }
                } else {
                    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('')
                    // $('#save').attr("disabled", false);
                }
            } 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)
                $('#save').attr("disabled", true);
            }
            $("#fees").val(fee);
            total = (!isNaN(amount) && !isNaN(fee)) ? (+amount +fee) : total
            $('.totalSpan').html(number_format(total, 2))

        });

        $('#save').on('click', function (e) {
            $('.noBenef').hide();
            var amount = $('#amount').val();
            if (isNaN(amount) || amount == 0){
                alert('{{ __('message_lang.PLEASE_ENTER_AMOUNT') }}');
                return;
            }

            var reception = $('#reception_location').val();
            if (reception == undefined || reception === ''){
                $('.reception-message').html('{{ __('message_lang.LBL_RECEIVE_AT_REQUIRED') }}');
                $('.reception-message').show();
                return;
            }
            var suffix = (reception === 'agent') ? 'Agent' : '';
            var chkLimits = checkLimits(amount, suffix);
            if (chkLimits !== ''){
                return;
            }

            var sendTo = $('#send_to').val();
            if (sendTo != 'Me'){
                var beneficiary_firstname = $('#beneficiary_first_name').val();
                var beneficiary_lastname = $('#beneficiary_last_name').val();
                if (beneficiary_firstname == null || beneficiary_firstname.trim() == '') {
                    $('.noBenef_firstname').html('{{ __('message_lang.LBL_BENEFICIARY_FIRST_NAME_REQUIRED') }}')
                    $('.noBenef_firstname').show();
                    return;
                }
                if (beneficiary_lastname == null || beneficiary_lastname.trim() == '') {
                    $('.noBenef_lastname').html('{{ __('message_lang.LBL_BENEFICIARY_LAST_NAME_REQUIRED') }}')
                    $('.noBenef_lastname').show();
                    return;
                }
            }
            var fees = $("#fees").val();
            if (isNaN(fees)){
                alert('{{ __('message_lang.LBL_UNDEFINED_FEE') }}');
                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>";

                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) {
                        $("#save").attr("disabled", true);
                        $("#submitLoader").addClass("spinner-border spinner-border-sm");
                        $('#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>";

                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')}}";
        });

        $('#send_to').on('change', function () {
            var sendTo = $(this).val();
            console.log(sendTo)
            if (sendTo == 'Me'){
                resetBeneficiary()
            } else {
                $('.beneficiary').html($('#beneficiary_first_name').val()+" "+$('#beneficiary_last_name').val())
                $('.beneficiaryDiv').show()
            }
        });

        $('#reception_location').on('change', function () {
            displayReceptionLocation();
            var reception = $(this).val();
            if (reception == undefined || reception === ''){
                $('.reception-message').html('{{ __('message_lang.LBL_RECEIVE_AT_REQUIRED') }}');
                $('.reception-message').show();
            } else {
                $('.reception-message').hide();
            }
            filterFees(reception);
            $('#amount').keyup();
        });

        $('#beneficiary_first_name, #beneficiary_last_name').on('keyup', function () {
            var beneficiary = $('#beneficiary_first_name').val()+" "+$('#beneficiary_last_name').val();
            $('.beneficiary').html(beneficiary)
        });

    });

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

    function showOtp(){
        $('#otpDiv').show();
        otpShown = true;

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

    function hideOtp(){
        $('#otpDiv').hide();
        otpShown = false;
    }

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

    function resetBeneficiary() {
        $('.beneficiaryDiv').hide()
        $('.beneficiary').html("{{ auth()->guard('agentportal')->user()->first_name.' '.auth()->guard('agentportal')->user()->last_name }}")
    }

    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
        }
    }

    function displayReceptionLocation() {
        $('.receptionSpan').html($("#reception_location option:selected").text());
    }

    function filterFees(reception) {
        var suffix = 'undefined';
        if (reception != undefined && reception !== ''){
            suffix = (reception === 'agent') ? 'Agent' : '';
        }
        if (mainFees != undefined && mainFees.length != 0){
            fees = mainFees.filter(fee => fee.type === 'CashPickUp'+suffix);
            min = Math.min(...fees.map(item => item.minimum_amount));
            max = Math.max(...fees.map(item => item.maximum_amount));
        }
    }

    $('#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;
                    $('#resend').hide()
                    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);
                    $("#save").attr("disabled", false);
                    $("#submitLoader").removeClass("spinner-border spinner-border-sm");
                    $('#validateLoader').removeClass("spinner-border spinner-border-sm");
                }
            },
            error: function (error) {
                $("#loading").hide();
                $("#save").attr("disabled", false);
                $("#submitLoader").removeClass("spinner-border spinner-border-sm");
            }
        });
    });

    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");
    });
</script>
@include('agentportal.repayment-requests.utilities')
@endsection