@extends("agentportal.layouts.layout")

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

@section("page_style")
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <style>
        .exchange_rate_value {
            background: #ddd;
            text-align: center;
            font-size: 20px;
            padding: 5px 0;
            margin-bottom: 10px;
            display: none;
        }
        .receiving_rate_value {
            background: #ddd;
            text-align: center;
            font-size: 20px;
            padding: 5px 0;
            margin-bottom: 10px;
            display: none;
        }
        .hidden{
            display: none;
        }
        .discount_coupon input#discount {
            width: 83%;
            margin-right: 2%;
        }
        .discount_coupon {
            display: flex;
            flex-wrap: wrap;
        }
        .discount_coupon a {
            width: 15%;
        }
    </style>

@endsection

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

@section("content")
<script type="text/javascript">
    // DO NOT DELETE THIS VAR
    var globalReceiveCompanyData = '';
    var globalAgentBalanceData = '';
    var globalCompliaceConfig = 0;
    var AgentBalance = 0.00;
    var selectCustomerNext = 0;
    var selectBeneficiaryTransferMethod = '';
    var selectBeneficiaryId = 0;
    var selectBeneficiaryNext = 0;
</script>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--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">
                        <div class="card-header">
                            <div class="card-title">
                                <h3 class="card-label">
                                    {{ trans('message_lang.LBL_SEND_MONEY') }}
                                </h3>
                            </div>
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <button type="button" class="btn btn-primary btn-lg float-right estimate_fee">{{ trans('message_lang.BTN_ESTIMATE_FEES') }}</button> &nbsp;&nbsp;
                                <!--end::Button-->
                            </div>
                        </div>
                        <div class="card-body">
                            <!--begin::Example-->
                                <div class="example-preview">
                                    <form method="post" name="form_agent_send_txn" id="form_agent_send_txn" action="{{ route('agentportal.send-money.store') }}" enctype="multipart/form-data">

                                        @csrf
                                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link {{ empty($tabName) || $tabName == 'select_customer' ? 'active' : '' }}" id="select_customer-tab" data-toggle="tab" href="#select_customer" role="tab" aria-controls="select_customer-tab" aria-selected="true" disabled aria-disabled="true">
                                                    {{ trans('message_lang.LBL_SELECT_CUSTOMER') }}
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link disabled {{ empty($tabName) || $tabName == 'select_beneficiary' ? 'active' : '' }}" id="select_beneficiary-tab" data-toggle="tab" href="#select_beneficiary" role="tab" aria-controls="select_beneficiary" aria-selected="false">
                                                    {{ trans('message_lang.LBL_SELECT_BENEFICIARY') }}
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link disabled {{ empty($tabName) || $tabName == 'amount' ? 'active' : '' }}" id="amount-tab" data-toggle="tab" href="#amount" role="tab" aria-controls="amount" aria-selected="false">
                                                    {{ trans('message_lang.LBL_AMOUNT') }}
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link disabled {{ empty($tabName) || $tabName == 'summary' ? 'active' : '' }}" id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary" aria-selected="false">
                                                    {{ trans('message_lang.LBL_SUMMARY') }}
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content mt-5" id="myTabContent">
                                            @include('agentportal.send-money.select_customer')

                                            @include('agentportal.send-money.select_beneficiary')

                                            @include('agentportal.send-money.amount')

                                            @include('agentportal.send-money.summary')
                                        </div>
                                    </form>

                                    @include('agentportal.send-money.customers.create')
                                    @include('agentportal.send-money.beneficiaries.create')

                                </div>
                            <!--end::Example-->
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>

<!-- Modal -->
<div class="modal fade" id="EstimateFeeModal" tabindex="-1" role="dialog" aria-labelledby="EstimateFeeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" name="form" action="" enctype="multipart/form-data" autocomplete="off" id="formEstimateFee">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="EstimateFeeModalLabel">{!! trans('message_lang.LBL_ESTIMATE_SEND_MONEY') !!}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label class="" for="receiving_country">{!! trans('message_lang.LBL_RECEIVING_COUNTRY') !!}<span style="color:red;">*</span></label>
                            <select name="receiving_country" id="receiving_country_id" class="form-control custom-field">
                                <option>Select</option>
                            </select>
                            <a href="javascript:;" class="change_country" style="display: none">{!! trans("message_lang.LBL_CHANGE_COUNTRY") !!}?</a>
                            <span class="get-receiving_country-err errClass" style="display: none;"></span>
                        </div>

                        <div class="col-md-6">
                            <label class="" for="receiving_option_code">{!! trans('message_lang.LBL_DELIVERY_METHOD') !!}<span style="color:red;">*</span></label>
                            <select name="receiving_option_code" id="receiving_option_code" class="form-control custom-field">
                                <option value="">Select Option</option>
                            </select>
                            <span class="get-receiving_option_code-err errClass" style="display: none;"></span>
                        </div>

                        <div class="col-md-6 mt-5">
                            <label class="" for="amount">{!! trans('message_lang.LBL_SENDING_AMOUNT') !!} <span style="color:red;">*</span></label>
                            <input type="number" name="amount" id="send_amount" placeholder="" class="form-control custom-field estimateAmtField"/>
                            <span class="get-send_amount-err errClass" style="display: none;"></span>
                        </div>

                        <div class="col-md-6 mt-5">
                            <label class="" for="receive_amt">{!! trans('message_lang.LBL_RECEIVING_AMOUNT') !!} <span style="color:red;"></span></label>
                            <input type="number" name="receive_amt" id="receive_amt" placeholder="" class="form-control custom-field estimateAmtField"/>
                            {{-- <span class="get-send_amount-err errClass" style="display: none;"></span> --}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="selected_country col-md-12" style="display: none;"></div>
                    </div>
                    <div class="form-group row">
                        <div class="exchange_rate_value col-md-12" style="display: none;"></div>
                    </div>
                    <div class="transfer_methods_options" style="display: none;"></div>
                    <span class="get-countries-err errClass" style="display: none;"></span>
                    <span class="error-no-fees errClass" style="display: none;"></span>
                </div>
                <div class="modal-footer" style="display: block;">
                    <div class="row justify-content-between">
                        <div class="col-12 col-md-4 px-5">
                            <button type="button" id="fetchExchangeDetails" class="btn btn-primary btn-block my-2">
                                <i class="fas fa-calculator"></i>
                                {!! trans("message_lang.BTN_ESTIMATE") !!}
                            </button>
                        </div>

                        <div class="col-12 col-md-4 px-0">
                            <button type="reset" class="btn btn-primary btn-block my-2 reset" data-dismiss="modal">
                                <i class="fas fa-eraser"></i>
                                {!! trans("message_lang.BTN_CLOSE") !!}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section("page_vendors")
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/additional-methods.js') }}"></script>
<script src="{{ asset('ex_plugins/toastr/js/toastr.min.js') }}"></script>
<link href="{{ URL::to('/') }}/ex_plugins/toastr/css/toastr.min.css" rel="stylesheet">

<script src="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>

<!-- BootstrapFormHelpers -->
<link href="{{ URL::to('/') }}/ex_plugins/bootstrap-form-helpers/dist/css/bootstrap-formhelpers.min.css" rel="stylesheet">
<script src="{{ URL::to('/') }}/ex_plugins/bootstrap-form-helpers/dist/js/bootstrap-formhelpers.min.js" type='text/javascript'></script>

@endsection

@section("page_script")
<script type="text/javascript">
    $(document).ready(function() {
        $(".estimateAmtField").click(() => {
            $(".estimateAmtField").val("")
        });

        $(document).on("click", ".estimate_fee", function() {
            $("#loading").show();
            var enableLibSendmoney = "{!! app('App\Http\Controllers\SysConfController')->getConfig('ENABLE_LOCAL_LIB_SENDMONEY')  !!}";
            var countryCode = "{!! Auth::guard('agentportal')->user()->agentLocation->agentCountry->isoname !!}";
            var formData    = new FormData();
            formData.append("sending_country_code", countryCode);
            formData.append("is_from_agent_portal", 1);
            formData.append('_token', '{{csrf_token()}}');
            $.ajax({
                type:'POST',
                url: "{{ url('api/customer/web/v2/getSendingCountryCurrencyAndRate')}}",
                data: formData,
                contentType: false,
                processData: false,
                success: (data) => {
                    $("#loading").hide();
                    console.log("The global receiving company data is :: ", data.data)
                    if(data.status == 1) {
                        // NOTICE : DO'T DELETE THIS LINE. THIS GLOBAL VARIABLE WILL USE ANYWHERE DURING SEND MONEY STEP FORM.
                        globalReceiveCompanyData = data.data;

                        // Set the destination country dropdown
                        var destinationCountry = '<option value="">{!! trans("message_lang.OPTION_SELECT_RECEIVING_COUNTRY") !!}</option>';
                        var myArray = [];
                        if(globalReceiveCompanyData.transfer.countries.receive.length) {
                            $.each(globalReceiveCompanyData.transfer.countries.receive, function (receiveKey, receiveValue) {
                                if(enableLibSendmoney && countryCode == "LBR") {
                                    if(receiveValue.country_code == "LBR"){
                                        if(receiveKey != 0) {
                                            if($.inArray(receiveValue.country_code, myArray) == -1) {
                                                myArray.push(receiveValue.country_code);
                                                destinationCountry += '<option value="'+receiveValue.country_code+'" data-country="'+receiveValue.country_name+'">'+receiveValue.country_name+'</option>';
                                            }
                                        } else {
                                            myArray.push(receiveValue.country_code);
                                            destinationCountry += '<option value="'+receiveValue.country_code+'" data-country="'+receiveValue.country_name+'">'+receiveValue.country_name+'</option>';
                                        }
                                    }
                                } else {
                                    if(receiveKey != 0) {
                                        if($.inArray(receiveValue.country_code, myArray) == -1) {
                                            myArray.push(receiveValue.country_code);
                                            destinationCountry += '<option value="'+receiveValue.country_code+'" data-country="'+receiveValue.country_name+'">'+receiveValue.country_name+'</option>';
                                        }
                                    } else {
                                        myArray.push(receiveValue.country_code);
                                        destinationCountry += '<option value="'+receiveValue.country_code+'" data-country="'+receiveValue.country_name+'">'+receiveValue.country_name+'</option>';
                                    }
                                }
                            });
                        }
                        $("#receiving_country_id").html(destinationCountry);
                        $('#EstimateFeeModal').modal('show');
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: '{!! trans("message_lang.SOMETHING_WENT_WRONG") !!}!',
                        });
                    }
                },
                error: function(data){
                    $("#loading").hide();
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: '{!! trans("message_lang.SOMETHING_WENT_WRONG") !!}!',
                    });
                }
            });
        });

        $(document).on("click", "#fetchExchangeDetails", function(e) {
            $("#loading").show();
            if(validateEstimateForm()){
                $("#receiving_country_id").attr('disabled','disabled');
                $(".change_country").show();
                estimateFeesCalculation();
                // $("#fetchExchangeDetails").parent().addClass('hidden');
                // $("#fetchExchangeDetails").parents(".row").addClass("justify-content-center").removeClass("justify-content-between");
            }
            $("#loading").hide();
        });

        $(document).on("change", "#receiving_country_id", function() {
            var countryId           = $(this).val();
            var receivingCountryId  = $("#receiving_country_id").val();
            var html = '<option value="" selected>Select Option</option>';
            $.each(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options, function (optionKey, optionValue) {
                if (typeof(optionValue.receiving_countries[receivingCountryId]) != "undefined") {
                    html += '<option value="'+optionKey+'">'+optionValue.receiving_option_name+'</option>';
                }
            });
            $("#receiving_option_code").html(html);
        });

        $(document).on("change", "#exchanged_currency", function(e) {
            $("#loading").show();
            if(validateEstimateForm()){
                estimateFeesCalculation($(this).val());
            }
            $("#loading").hide();
        });

        $("#send_amount").bind('keyup',function(){
            $("#loading").show();
            if(validateEstimateForm() && $("#fetchExchangeDetails").parent().hasClass("hidden")){
                estimateFeesCalculation();
            }
            $("#loading").hide();
        });

        $('#EstimateFeeModal').on('hidden.bs.modal', function (e) {
            resetEstimateForm();
        });

        $(".change_country").click(function(){
            resetEstimateForm();
        });

        function resetEstimateForm(){
            $(".transfer_methods_options").html("").hide();
            $(".exchange_rate_value").html("").hide();
            $(".selected_country").html("").hide();
            $(".get-countries-err").html("").hide();
            $("#receiving_country_id").removeAttr('disabled');
            $(".change_country").hide();
            $("#formEstimateFee")[0].reset();
            $(".get-receiving_country-err, .get-send_amount-err, .get-receiving_option_code-err").html("").hide();
            $("#fetchExchangeDetails").parent().removeClass('hidden');
            $("#send_amount").unbind('keyup');
            $("#fetchExchangeDetails").parents(".row").removeClass("justify-content-center").addClass("justify-content-between");
            $(".error-no-fees").html("").hide();
        }

        function validateEstimateForm(){
            var is_valid = true;
            $(".get-receiving_country-err, .get-send_amount-err, .get-receiving_option_code-err").html("").hide();
            if($("#receiving_country_id").val() == "") {
                $(".get-receiving_country-err").html("{!! trans('message_lang.RECEIVING_COUNTRY_IS_REQUIRED') !!}").show();
                is_valid = false;
            }
            if($("#send_amount").val() == "") {
                $(".get-send_amount-err").html("{!! trans('message_lang.SENDING_AMOUNT_IS_REQUIRED') !!}").show();
                is_valid = true;
            }
            if($("#receiving_option_code").val() == "" || $("#receiving_option_code").val() == null) {
                $(".get-receiving_option_code-err").html("{!! trans('message_lang.LBL_SELECT_DELIVERY_METHOD') !!}").show();
                is_valid = false;
            }
            return is_valid;
        }

        function estimateFeesCalculation(currency = ""){
            var receivingCountryId = $("#receiving_country_id").val();
            var listed_currency = [];
            var available_currency = "";
            var exchange_rate_html = "";
            var selected_country_text = "";
            var is_error = false;
            var receivingCountryCode = $("#receiving_country_id option:selected").val();

            selected_country_text += '<h3><center>{!! trans("message_lang.LBL_SEND_MONEY_TO") !!} <strong>'+$("#receiving_country_id option:selected").data('country')+'</strong></center></h3>';

            // Prepare the receiving currencies options
            if(globalReceiveCompanyData.transfer.countries.receive.length) {
                $.each(globalReceiveCompanyData.transfer.countries.receive, function (key,value) {
                    if(value.country_code == receivingCountryId) {
                        listed_currency.push(value.currency_code);
                    }
                });
                if(listed_currency.length > 1)
                {
                    available_currency = '<select id="exchanged_currency">'
                    $.each(listed_currency, function (key,value) {
                        if(currency == ""){
                            currency = value;
                        }
                        if(value == currency)
                        {
                            available_currency += '<option value="'+value+'" selected>'+value+'</option>';

                        }
                        else
                        {
                            available_currency += '<option value="'+value+'">'+value+'</option>';
                        }
                    });
                    available_currency += '</select>';
                }
                else if(listed_currency.length > 0) {
                    currency = listed_currency[0];
                    available_currency = listed_currency[0];
                }

            }
            // Managing the transaction summary content as well as third tab prefilled content
            if(globalReceiveCompanyData.transfer.countries.send.length) {
                var receivingCurrencyCountryCode    = currency;
                var sendingCurrency                 = globalReceiveCompanyData.transfer.countries.send[0].currency_code;
                var exchange_rate                   = getFxRate(globalReceiveCompanyData.transfer.countries.send[0], receivingCountryCode, sendingCurrency, receivingCurrencyCountryCode);
                var sendingAmount                   = $("#send_amount").val();
                var receivingAmount                 = $("#receive_amt").val();

                var exchangeRate = parseFloat(exchange_rate).toFixed(6);

                if(sendingAmount && !receivingAmount){
                    receivingAmount = parseFloat(sendingAmount * exchangeRate).toFixed(2);
                    $("#receive_amt").val(receivingAmount);
                }
                else if(receivingAmount && !sendingAmount){
                    sendingAmount = parseFloat(receivingAmount / exchangeRate).toFixed(2);
                    $("#send_amount").val(sendingAmount);
                }

                exchange_rate_html +=  '1 <strong>'+sendingCurrency+'</strong> <i class="fas fa-exchange-alt"></i> ' +exchangeRate+'<strong> '+available_currency+'</strong>';
            }

            // Set the available receiving options
            var html = "";
            var showMethodsFlag = true;
            var sendingCountryCode = "{!! Auth::guard('agentportal')->user()->agentLocation->agentCountry->isoname !!}";
            var uemoa = @json($uemoa);

            if(globalReceiveCompanyData.transfer.countries.send.length) {
                $.each(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options, function (optionKey, optionValue) {
                    if(optionValue.receiving_option_code == $("#receiving_option_code").val()) {
                        if (typeof(optionValue.receiving_countries[receivingCountryId]) != "undefined") {

                            var length = (typeof(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode]) != "undefined") ? Object.keys(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].fee_range).length : 0;

                            if(length == 0) {
                                is_error = true;
                                showMethodsFlag = false;
                                if(is_error) {
                                    $(".exchange_rate_value").html(exchange_rate_html).hide();
                                    $(".selected_country").html(selected_country_text).hide();
                                    $(".error-no-fees").html("{!! trans('message_lang.NO_PAYMENT_METHOD_IS_AVAILABLE') !!}.").show();
                                }
                                return;
                            } else if(length == 1) {
                                var maxAmount = globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].fee_range;
                            } else {
                                var maxFees = globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].fee_range;
                                var maxAmount = Object.values(maxFees).pop();
                            }

                            // if(maxAmount.max_amount < sendingAmount) {
                            //     var errorMsg = maxAmount.max_amount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                            //     $('.get-send_amount-err').html("Please select less than "+errorMsg+" "+sendingCurrency).show();
                            //     is_error = true;
                            //     showMethodsFlag = false;
                            // } else {
                                var text = "";
                                if(optionValue.receiving_option_code == "MW") {
                                    var text = optionValue.receiving_option_name;
                                } else if(optionValue.receiving_option_code == "BD") {
                                    var text = "{!! trans('message_lang.LBL_BANK_DEPOSIT') !!}";
                                } else if(optionValue.receiving_option_code == "CP") {
                                    var text = "{!! trans('message_lang.LBL_CASH_PICKUP') !!}";
                                } else if(optionValue.receiving_option_code == "BW") {
                                    var text = "{!! trans('message_lang.LBL_BNB_CASHAPP') !!}";
                                }
                                html += '<div class="form-group row"> <div class="col-md-12"> <h5>'+text+'</h5>\
                                        <span>{!! trans("message_lang.LBL_YOU_SEND") !!} : '+parseFloat(sendingAmount).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")+" <strong>"+sendingCurrency+'</strong></span> <br>\
                                        <span>{!! trans("message_lang.LBL_RECIPIENT_GETS") !!} : '+parseFloat(receivingAmount).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")+" <strong>"+receivingCurrencyCountryCode+'</strong></span> <br>';

                                if(typeof(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey]) != "undefined" && typeof(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode]) != "undefined") {

                                    // Calculate minimum configured amount for the country
                                    minCountryAmount = globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].min_country_amount;

                                    // Calculate maximum configured amount for the country
                                    maxCountryAmount = globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].max_country_amount;
                                    // Check sending amount is in between the min and max configured limit for the country
                                    if(sendingAmount < minCountryAmount) {
                                        var errorMsg = minCountryAmount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                                        $('.get-send_amount-err').html( "Please select more than "+errorMsg+" "+sendingCurrency).show();
                                        is_error = true;
                                    } else if(sendingAmount > maxCountryAmount) {
                                        var errorMsg = maxCountryAmount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                                        $('.get-send_amount-err').html("Please select less than "+errorMsg+" "+sendingCurrency).show();
                                        is_error = true;
                                    } else {
                                        $('.get-send_amount-err').html("").hide();
                                        is_error = false;
                                    }

                                    $.each(globalReceiveCompanyData.transfer.countries.send[0].fees.receiving_options[optionKey].receiving_countries[receivingCountryId][receivingCurrencyCountryCode].fee_range, function(key, value) {
                                        if(sendingAmount >= value.min_amount && sendingAmount <= value.max_amount) {
                                            fee = 0; // initializing the fee
                                            if(value.fee_type == "1") { // Flat Fee
                                                fee = value.fee_value;
                                            } else { // Percentage Fee
                                                fee = (sendingAmount * (value.fee_value/100));
                                                if(value.min_fee > fee) {
                                                    fee = value.min_fee;
                                                } else if(value.max_fee < fee) {
                                                    fee = value.max_fee;
                                                }
                                            }
                                            var tax = getTax(sendingCountryCode, receivingCountryId, sendingAmount, fee);
                                            console.log(tax);
                                            if ((sendingCountryCode == 'SEN' || sendingCountryCode == 'CIV') && tax.tax_parts.TAF){
                                                fee += tax.tax_parts.TAF;
                                                html += "<span>{!! trans('message_lang.LBL_FEES_INCLUDING_TAX') !!} : "+parseFloat(fee).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")+"  <strong>"+sendingCurrency+'</strong><span><br>';
                                            } else {
                                                html += "<span>{!! trans('message_lang.LBL_FEES') !!} : "+parseFloat(fee).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")+"  <strong>"+sendingCurrency+'</strong><span><br>';
                                            }
                                            if (tax.tax != 0){
                                                var tooltip = 'Tax';
                                                if(sendingCountryCode == 'SEN' || sendingCountryCode == 'CIV'){
                                                    if(tax.tax_parts.TTHU){
                                                        tooltip = "{!! trans('message_lang.LBL_TTHU') !!}";
                                                        tax.tax = tax.tax_parts.TTHU;
                                                    }
                                                } else if (sendingCountryCode == 'GIN'){
                                                    tooltip = 'TVA';
                                                }
                                                var title = '<i class="flaticon2-information icon-md text-muted taxTootip" data-toggle="tooltip" data-placement="right" title="'+tooltip+'"></i>';
                                                html += "<span>{!! trans('message_lang.LBL_TAX') !!} "+title+" : "+tax.tax+"  <strong>"+sendingCurrency+'</strong><span><br>';
                                            }

                                            // calculate and update the total fee to be paid
                                            var total_paymentFee = Number(sendingAmount) + Number(fee) + Number(tax);
                                            html += '<span>{!! trans("message_lang.LBL_TOTAL_AMOUNT") !!} : '+parseFloat(total_paymentFee).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")+"  <strong>"+sendingCurrency+'</strong><span><br>';
                                        }
                                    });
                                } else {
                                    html += `<span class="errClass"> {!! trans('message_lang.SENDING_FEES_IS_NOT_CONFIGURED') !!}.</span>`;
                                }
                                html += '</div></div>';
                            // }
                        }
                    }
                });
            }
            if(html == "" && showMethodsFlag == true) {
                $(".get-countries-err").html("{!! trans('message_lang.NO_PAYMENT_METHOD_IS_AVAILABLE') !!}.").show();
            } else {
                $(".get-countries-err").html("").hide();
                $(".error-no-fees").html("").hide();
            }
            if(!is_error && html != ""){
                $(".transfer_methods_options").html(html).show();
                $(".exchange_rate_value").html(exchange_rate_html).show();
                $(".selected_country").html(selected_country_text).show();
            }

            if(is_error) {
                $(".transfer_methods_options").html(html).hide();
                $(".exchange_rate_value").html(exchange_rate_html).hide();
                $(".selected_country").html(selected_country_text).hide();
            }
        }

        $("#form_agent_send_txn").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) { // render error placement for each input type
                // Custom position: first name
                // $("#errUserId").text(error);
            },
            ignore: "",
            rules: {
                user_id: {
                    required: true
                },
                hdn_sending_country_id: {
                    required: true
                },
                destination_country_id: {
                    required: true,
                },
                receiving_option_code: {
                    required: true,
                },
                radioBtn: {
                    required: true,
                },
                sending_currency: {
                    required: true
                },
                receiving_currency: {
                    required: true
                },
                sending_amount: {
                    required: true
                },
                receiving_amount: {
                    required: true
                },
                hdn_sending_fee: {
                    required: true
                },
                hdn_exchange_rate: {
                    required: true
                },
                payment_method_type: {
                    required: true
                },
                // purpose: {
                //     required: true,
                // },
                // occupation: {
                //     required: true
                // }
            },
            messages: {
                user_id: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_CUSTOMER') }}'
                },
                hdn_sending_country_id: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_SENDING_COUNTRY') }}'
                },
                destination_country_id: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_DESTINATION_COUNTRY') }}',
                },
                receiving_option_code: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_RECEIVING_OPTION') }}',
                },
                radioBtn: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_BENEFICIARY_USER') }}',
                },
                sending_currency: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_SENDING_CURRENCY') }}'
                },
                receiving_currency: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_RECEIVING_CURRENCY') }}'
                },
                sending_amount: {
                    required: '{{ trans('message_lang.PLEASE_ENTER_SENDING_AMOUNT') }}'
                },
                receiving_amount: {
                    required: '{{ trans('message_lang.PLEASE_ENTER_RECEIVING_AMOUNT') }}'
                },
                hdn_sending_fee: {
                    required: '{{ trans('message_lang.PLEASE_PROVIDE_SENDING_FEE') }}'
                },
                hdn_exchange_rate: {
                    required: '{{ trans('message_lang.PLEASE_PROVIDE_EXCHANGE_RATE') }}'
                },
                payment_method_type: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_PAYMENT_METHOD_TYPE') }}'
                },
                purpose: {
                    required: '{{ trans('message_lang.PLEASE_PROVIDE_PURPOSE') }}'
                },
                occupation: {
                    required: '{{ trans('message_lang.PLEASE_PROVIDE_OCCUPATION') }}'
                },
            },
            invalidHandler: function (event, validator) { //display error alert on form submit
                //successHandler1.hide();
                //errorHandler1.show();
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element).closest('.form-group').removeClass('has-error');
            },
            success: function (label, element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
            },
            // submitHandler: function (frmadd) {
            // }
        });

        $('form input').keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });

        function getTax(sendingCountry, receivingCountry, amount, fees) {
            var tax = 0;
            var taxData = new FormData();
            taxData.append("sending_country_code", sendingCountry);
            taxData.append("receiving_country_code", receivingCountry);
            taxData.append("amount", amount);
            taxData.append("fees", fees);
            taxData.append('_token', '{{csrf_token()}}');
            $.ajax({
                type:'POST',
                url: "{{ route('agentportal.send-money.getTax')}}",
                data: taxData,
                async: false,
                contentType: false,
                processData: false,
                success: (data) => {
                    tax = data;
                },
                error: function(data){
                    console.log(data)
                }
            });
            return tax;
        }

        function getFxRate(sendData, selectedBnfCountryCode, sendingCurrency, receivingCurrency) {
            var result = sendData.exchange.find(item => item.country_code === selectedBnfCountryCode);
            if(typeof (result) != "undefined") {
                var exchangeRate = result.rate;
            } else {
                if(sendingCurrency == receivingCurrency) {
                    var exchangeRate = 1;
                } else {
                    var result = sendData.exchange.find(item => item.currency === receivingCurrency);
                    var exchangeRate = result.rate;
                }
            }
            return exchangeRate;
        }
    });
</script>
@endsection