@extends('layouts.app')

@section('content')

<div class="row justify-content-center row-margin">
    <div class="col-md-12">
        <div class="page page-md comman-page-height-main user-listing">
            <div class="header-box py-5">
            </div>
            <div class="content-box bg-white">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <a class="btn btn-sm btn-edit btn-outline-secondary" href="{{ route('my-account') }}">{{ __('message_lang.BUTTON_BACK') }}</a>
                    </div>
                </div>
                <h3 class="section-title">{{ __('message_lang.CHOOSE_DEPOSIT_COMPANY') }}
                </h3>


                <form method="post" id="add_account_detail_deposit_cmp_form" name="add_account_detail_deposit_cmp_form" action="{{ route('save-deposit-company-account-number') }}">
                    @csrf

                    <div class="alert alert-danger error_msg_save_dc_ac_no" role="alert" style="display: none;">
                    </div>

					<div class="form-row">
						@isset($deposit_companies)
                            @foreach ($deposit_companies as $key => $value)
                                <div class="col-6 col-md-4 choice-item-content-data" data-manual-id="{{ $value->available_for_manual_txn }}" data-company-code ="{{ $value->company_code }}" data-company-name="{{ $value->company_name }}" data-company-id="{{ $value->id }}">
                                    <div class="choice-item">
                                        <input type="radio" id="choice0{{ $key }}" data-account_number="{{ $value->account_number }}" name="deposit_company_id" 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 class="companyName">{{ $value->company_name }}</span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @endisset
                    </div>
                    <div class="acnt-details" style="display: none">
                        <div class="divider"></div>
                        <h3 class="section-title" id="lbl-section-title">{{ __('message_lang.ACCOUNT_DETAILS') }}</h3>
                        <div class="form-group">
                            <label for="account_number" id="act1">{{ __('message_lang.LBL_MOMO_ACCOUNT_NUMBER') }} <span style="color: red;">*</span></label>
                            <input class="form-control custom-field" id="account_number" name="account_number" type="text" placeholder="{{ __('message_lang.PLACEHOLDER_MOMO_ACCOUNT_NUMBER') }}"  value="{{ old('account_number') }}">
                        </div>
                        <div class="form-group">
                            <label for="confirm_account_number" id="act2">{{ __('message_lang.LBL_RE_ENTER_MOMO_ACCOUNT_NUMBER') }} <span style="color: red;">*</span></label>
                            <input class="form-control custom-field" id="confirm_account_number" name="confirm_account_number" type="text" placeholder="{{ __('message_lang.PLACEHOLDER_CONFIRM_MOMO_ACCOUNT_NUMBER') }}"  value="{{ old('account_number') }}">
                        </div>
                        <!-- <div class="form-group">
                            <label for="">{{ __('message_lang.LBL_SEND_VERIFICATION_CODE') }}</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="send_verification_code" id="emailRadio" value="0" {{ ($checkCommunication == 1) ? 'disabled' : '' }}>
                                <label class="form-check-label" for="emailRadio">Email</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="send_verification_code" id="smsRadio" value="1" checked>
                                <label class="form-check-label" for="smsRadio">SMS</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="send_verification_code" id="bothRadio" value="2" {{ ($checkCommunication == 1) ? 'disabled' : '' }}>
                                <label class="form-check-label" for="bothRadio">Both</label>
                            </div>
                        </div> -->
                        <div class="form-group">
                            <p>{{ __('message_lang.LBL_NOTE') }} : {{ __('message_lang.LBL_CODE_SEND_BY_SMS') }}</p>
                        </div>
                        <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 btnSubmit" id="addAccountDetailSubmit">{{ __('message_lang.BTN_SAVE') }}</button>
                        </div>
                    </div>
				</form>

            </div>
        </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>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </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="da_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">

    // Disable save or submit button after one click
    $('#add_account_detail_deposit_cmp_form').submit(function(){
        $('#addAccountDetailSubmit').attr('disabled', 'disabled');
    });
    $('#frm_uda_verification_code').submit(function(){
        $('#da_verification_code_submit').attr('disabled', 'disabled');
    });

    // Remove disabled attr on model close
    $("#da_verification_code").on('hide.bs.modal', function(){
        $('#addAccountDetailSubmit').removeAttr('disabled');
    });

    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();
        }
    }

    jQuery.validator.addMethod(
        "regex",
        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_MTN_ACCOUNT_NO') }}',
    );

    jQuery.validator.addMethod(
        "regexgn",
        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_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(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_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') }}',

    );

    $('form#add_account_detail_deposit_cmp_form input[type=radio][name=deposit_company_id]').change(function() {
        $(".help-block").remove();
        var account_number = $(this).data("account_number");
        $('form#add_account_detail_deposit_cmp_form #account_number').val(account_number);
        $('form#add_account_detail_deposit_cmp_form #confirm_account_number').val(account_number);

        var hdn_deposit_company_id = $('input[name="deposit_company_id"]:checked').val();
        var acnt = $("#account_number").val();
        var confrm = $("#confirm_account_number").val();

        if(hdn_deposit_company_id!='' && acnt != '' && confrm!='') {
            $(".btnSubmit").prop("disabled",false);
        } else {
            $(".btnSubmit").prop("disabled",true);
        }
    });

    var company_code = '';
    // $(".choice-item-content-data").unbind('click');
    $(document).on("click",".choice-item-content-data",function() {
        $(".acnt-details").show();
        var manualId = $(this).data("manual-id");
        var company_id = $(this).data("company-id");
        company_code = $(this).data("company-code");
        var countryId = "