@extends('layouts.app')

@section('content')

<div class="row justify-content-center">
	<div class="col-md-12">
		<div class="page page-md">
			<div class="header-box py-5">
			</div>
			<div class="steps"> <a class="step-item completed" href="javascript:void(0);"><span class="step-number"><i class="bx bx-check"></i></span><span class="hidden-xs">{{ __('message_lang.RECEIVER_INFORMATION') }}</span></a><a class="step-item current" href="javascript:void(0);"><span class="step-number">2</span><span class="hidden-xs">{{ __('message_lang.DEPOSIT_ACCOUNT_DETAILS') }}</span></a><a class="step-item" href="javascript:void(0);"><span class="step-number">3</span><span class="hidden-xs">{{ __('message_lang.CONFIRMATION') }}</span></a></div>
			<div class="content-box bg-white">
				<div class="mb-4">
					<h4 class="h5">{{ $transaction_info->beneficiary_name }}</h4>
					<p>{{ __('message_lang.LBL_PICKUP_CODE') }}: <b>{{ $transaction_info->reference_no }}</b> <br>{{ __('message_lang.LBL_AMOUNT_RECIEVED') }}: <b>{{ number_format($transaction_info->receive_amount,2) }} {{ $transaction_info->receive_currency }}</b></p>
				</div>
				<h3 class="section-title">{{ __('message_lang.CHOOSE_WHERE_TO_DEPOSIT') }}</h3>
				<form method="post" id="deposit_account_form" name="deposit_account_form" action="{{ route('deposit-account-post') }}">
                    @csrf
					<div class="form-row">
						@isset($deposit_companies)
                            @foreach ($deposit_companies as $key => $value)
                                <div class="col-6 col-md-4">
                                    <div class="choice-item">
                                        <input type="radio"                                                 disabled
                                         id="choice0{{ $key }}" class="choice_deposit_company" name="deposit_company_id" data-multi-currency={{ $value->is_available_for_multi_currency }} value="{{ $value->id }}"
                                                                                        @if(old('deposit_company_id') == $value->id) checked @endif
                                                                                 />

                                        <label for="choice0{{ $key }}">

                                            <div class="choice-item-content">
                                                <div class="check-state"><i class="bx bx-check"></i></div>
                                                <img src="{{ URL::to('/') }}/img/{{ $value->logo_file_storage_location }}" alt="{{ $value->company_name }}"/>
                                            </div>

                                            <span>
                                                                                                        <a href="javascript:void(0)" data-company_id="" data-manual-id="{{ $value->available_for_manual_txn }}" data-company_name=""
                                                            data-company-code="" onclick="add_account(this);">{{ __('message_lang.ADD_YOUR') }}  {{ __('message_lang.ACCOUNT') }}</a>
                                                                                            </span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @endisset
                    </div>

                    <div class="form-group show-multicurrency-option" style="display: none;">
                        <p class="mt-2 show-multicurrency-option" style="display: none">
                            {{ __('message_lang.LBL_EXCHANGE_RATE') }}: <b>1 {{ config('constants.USD') }} = {{ $exchangeRate." ".$currency }}</b>
                        </p>
                        <li style="list-style: none; font-size:20px;">
                            <label class="" for="is_available_for_multi_currency">{{ __('message_lang.LBL_EXCHANGE_TO_LRD') }} <input style="height:20px; width:20px; vertical-align: text-bottom;" id="multi-currency-id" name="multi_currency" type="checkbox" value="0" /></label>
                       </li>
                        <p class="show-exchange-rate" style="display: none; font-size:20px;">
                            {{ __('message_lang.LBL_RECEIVER_AMOUNT') }}: <b>{{ (number_format($exchangeRate * $transaction_info->receive_amount,2))." ".$currency }}</b>
                        </p>
                    </div>

                    <input type="hidden" name="hdn_payout_currency" value="{{ $currency }}">
                    <input type="hidden" name="hdn_exchange_rate" value="{{ $exchangeRate }}">
                    <input type="hidden" name="hdn_payout_amount" value="{{ ($exchangeRate * $transaction_info->receive_amount) }}">

					<div class="mt-5">
                        <!-- <a class="btn btn-primary btn-lg btn-block" href="{{ route('confirmation') }}">Next</a> -->
                        <button type="submit" class="btn btn-primary btn-lg btn-block">{{ __('message_lang.BUTTON_NEXT') }}</button>
                    </div>
				</form>
			</div>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel"></h5>
                <button type="button" onclick="pageRedirect();" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="save_deposit_company_account_number_form" name="save_deposit_company_account_number_form" action="{{ route('save-deposit-company-account-number') }}">
                @csrf
                <div class="modal-body">
                    <h3 class="section-title">{{ __('message_lang.ACCOUNT_DETAILS') }}</h3>
                    <div class="alert alert-danger error_msg_save_dc_ac_no" role="alert" style="display: none;">
                    </div>
                    <input type="hidden" name="hdn_deposit_company_id">
                    <div class="form-group">
                        <label for="account_number" id="lbl-account-number"></label>
                        {{-- {{ __('message_lang.LBL_MOMO_ACCOUNT_NUMBER') }} --}}
                        <input class="form-control custom-field" id="account_number" name="account_number" type="text" placeholder=""  value="">
                        {{-- {{ __('message_lang.PLACEHOLDER_MOMO_ACCOUNT_NUMBER') }} --}}
                    </div>
                    <div class="form-group">
                        <label for="confirm_account_number" id="lbl-account-number-confirm"></label>
                        {{-- {{ __('message_lang.LBL_RE_ENTER_MOMO_ACCOUNT_NUMBER') }} --}}
                        <input class="form-control custom-field" id="confirm_account_number" name="confirm_account_number" type="text" placeholder=""  value="">
                        {{-- {{ __('message_lang.PLACEHOLDER_CONFIRM_MOMO_ACCOUNT_NUMBER') }} --}}
                    </div>
                    <div class="form-group">
                        <p>{{__('message_lang.LBL_NOTE')}}: {{__('message_lang.LBL_CODE_SEND_BY_SMS')}}</p>
                    </div>
                </div>
                <input type="hidden" name="hdn_reference_no" value="{{ $transaction_info->reference_no }}">
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="save_deposit_company_account_number_form_submit">{{ __('message_lang.BTN_SAVE') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="da_verification_code" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="da_verification_codeLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="da_verification_codeLabel"></h5>
                <a href="{{ route('deposit-account') }}"><button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button></a>
            </div>
            <!-- uda = user deposit account -->
            <form id="frm_uda_verification_code">
                @csrf
                <input type="hidden" name="uda_id">
                <input type="hidden" name="hdn_deposit_company_id">
                <input type="hidden" name="hdn_edit">
                <div class="modal-body">
                    <div class="alert alert-danger error_msg" role="alert" style="display: none;">
                    </div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="hdn_dep_cmp_acc_no_verif_code">{{ __('message_lang.LBL_VERIFICATION_CODE') }} <span style="color:red;">*</span></label>
                                    <input type="text" class="form-control @error('hdn_dep_cmp_acc_no_verif_code') is-invalid @enderror custom-field" id="hdn_dep_cmp_acc_no_verif_code" name="hdn_dep_cmp_acc_no_verif_code" placeholder="{{ __('message_lang.LBL_VERIFICATION_CODE') }}" value="">

                                    @error('hdn_dep_cmp_acc_no_verif_code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: center">
                        <span id="timer">
                          Resend Code in <b>00:<span id="time">60</span> </b>Seconds
                        </span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="frm_uda_verification_code_submit">{{ __('message_lang.BTN_SUBMIT') }}</button>
                    <div class="resend-code" style="width: 100%;"></div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".choice_deposit_company").on("click", function() {
            var companyId = $(this).attr("id");
            var currency = $("#"+companyId).data("multi-currency");

            if(currency == 1) {
                $(document).on("change", '#multi-currency-id', function() {
                    if(this.checked) {
                        $(".show-exchange-rate").show();
                    } else {
                        $(".show-exchange-rate").hide();
                    }
                });
                $(".show-multicurrency-option").show();
            } else {
                $("#multi-currency-id").prop("checked", false);
                $(".show-multicurrency-option").hide();
                $(".show-exchange-rate").hide();
            }
        });
    });

    function pageRedirect() {
        window.location.reload();
    }
    function FilterInput(event)
    {
        var keyCode = ('which' in event) ? event.which : event.keyCode;
        isNotWanted = (keyCode == 69 || keyCode == 101);
        return !isNotWanted;
    }
    function handlePaste(e)
    {
        var clipboardData, pastedData;

        // Get pasted data via clipboard API
        clipboardData = e.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text').toUpperCase();

        if(pastedData.indexOf('E')>-1) {
            //alert('found an E');
            e.stopPropagation();
            e.preventDefault();
        }
    }

    $("#deposit_account_form").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
            if(element[0].name && element[0].name == "deposit_company_id")
            {
                error.insertAfter(element.parent().parent().parent());
            }
            else
            {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
                // for other inputs, just perform default behavior
            }
        },
        ignore: "",
        rules: {
            "deposit_company_id": {
                required: true,
            }
        },
        messages: {
            "deposit_company_id": {
                required: '{{ __('message_lang.PLEASE_SELECT_DEPOSIT_COMPANY') }}',
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit
            // successHandler1.hide();
            // errorHandler1.show();
        },
        highlight: function (element) {
            $(element).closest('.help-block').removeClass('valid');
            // display OK icon
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
            // add the Bootstrap error class to the control group
        },
        unhighlight: function (element) { // revert the change done by hightlight
            $(element).closest('.form-group').removeClass('has-error');
            // set error class to the control group
        },
        success: function (label, element) {
            label.addClass('help-block valid');
            // mark the current input as valid and display OK icon
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
        },
        submitHandler: function (frmadd) {
            frmadd.submit();
        }
    });

    jQuery.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
        },'{{ __('message_lang.INVALID_MTN_ACCOUNT_NO') }}',

    );

    jQuery.validator.addMethod(
        "regexgn",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
        },'{{ __('message_lang.INVALID_MTN_ACCOUNT_NO_MTN') }}',
    );

    jQuery.validator.addMethod(
        "regexornglib",
        function(value, element, regexp) {
            if(value == "") {
                return true;
            } else if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
        },'{{ __('message_lang.INVALID_ORANGE_ACCOUNT_NO_LIB') }}',

    );

    jQuery.validator.addMethod(
        "regexgnol",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
        },'{{ __('message_lang.INVALID_GN_ACCOUNT_NO_GN') }}',

    );

    jQuery.validator.addMethod(
        "regextipmelbr",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
        },'{{ __('message_lang.INVALID_TIPME_ACCOUNT_NO_LBR') }}',

    );

    function add_account(a_tag_object)
    {
        $(".help-block").remove();
        var company_id = $(a_tag_object).data("company_id");
        var company_name = $(a_tag_object).data("company_name");
        var company_code = $(a_tag_object).data("company-code");
        var manual_id = $(a_tag_object).data("manual-id");

        var mtnliberia = "