@extends('layouts.app')
@section('page_style')
<style type="text/css">
    .overlay{
        position: fixed; /* Sit on top of the page content */
        display: block; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 999999; /* Specify a stack order in case you're using a different order for other elements */
    }
    .btn-overlay{
        padding: 15px 32px;
    }
    .overlay-content{
            margin: 0 auto;
            max-width: 700px;
            /* height: 100px; */
            /* background-color: #ccc; */
            border-radius: 3px;
            top:220px;
            width:50%;
        }
    @media screen and (max-width: 992px) {
        .overlay-content{
            margin: 0 auto;
            max-width: 700px;
            /* height: 100px; */
            /* background-color: #ccc; */
            border-radius: 3px;
            top:200px;
            width:50%;
        }
    }

    @media screen and (max-width: 600px) {
        .overlay-content{
            margin: 0 auto;
            max-width: 700px;
            /* height: 100px; */
            /* background-color: #ccc; */
            border-radius: 3px;
            top:220px;
            width:95%;
        }
    }

    @media screen and (max-width: 720px) {
        .overlay-content{
            margin: 0 auto;
            max-width: 700px;
            /* height: 100px; */
            /* background-color: #ccc; */
            border-radius: 3px;
            top:220px;
            width:80%;
        }
    }

    @media screen and (max-width: 1024px) {
        .overlay-content{
            margin: 0 auto;
            max-width: 700px;
            /* height: 100px; */
            /* background-color: #ccc; */
            border-radius: 3px;
            top:230px;
            width:90%;
        }
    }

</style>
@endsection
@section('content')


<div class="row justify-content-center">
    <div class="col-md-12">
        <div class="page page-md comman-page-height-main">
            <div class="header-box py-5">
            </div>
                                    <div class="overlay">
                            <div class="col-12">
                                <div class="overlay-content content-box bg-white py-4 text-center mb-4" >
                                  <h4 class="alert-heading">{{ __('message_lang.ID_VERIFICATION') }}</h4>
                                    <p class="text-muted">{{ __('message_lang.VERIFY_ACCOUNT_OVELAY_TEXT') }}</p>

                                    <a class="btn btn-primary btn-overlay" href="{{ route('verification') }}">{{ __('message_lang.BUTTON_SUBMIT_ID') }}</a>
                                </div>
                            </div>
                        </div>
                    <!-- </div>   -->

            
            <div class="steps">
                <a class="step-item current" href="javascript:void(0)">
                    <span class="step-number">1</span>
                    <span class="hidden-xs">{{ __('message_lang.RECEIVER_INFORMATION') }}</span>
                </a>
                <a class="step-item" 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">
                <h3 class="section-title">{{ __('message_lang.SELECT_SENDING_COMPANY') }}</h3>
                <form method="post" id="receiver_info_form" name="receiver_info_form" action="{{ route('receiver-info-post') }}">
                    @csrf
                    <div class="form-row">
                        @isset($sending_companies)
                            @foreach ($sending_companies as $key => $value)
                                <div class="col-6 col-md-4">
                                    <div class="choice-item">
                                    <input type="radio" id="choice0{{ $key }}" class="sendingComp" manual-id="{{ $value->available_for_manual_txn }}" company-code="{{ $value->company_code }}" name="sending_company_id" value="{{ $value['id'] }}" @if(old('sending_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>{{ $value['company_name'] }}</span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @endisset
                    </div>
                    <div class="divider"></div>
                    <div class="form-row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="reference_no">{{ __('message_lang.LBL_PICKUP_CODE') }} <span style="color: red;">*</span></label>
                                <input class="form-control custom-field" id="reference_no" name="reference_no" type="text" placeholder="{{ __('message_lang.LBL_PICKUP_CODE') }}" value="{{ old('reference_no') }}">
                                <span id="reference_no_error" class="help-block" style="display: none;"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-row amount-manual" style="display: none;">
                        <div class="col-md-9">
                            <div class="form-group">
                                <label for="amounts">{{ __('message_lang.LBL_AMOUNT') }} <span style="color: red;">*</span></label>
                                <input class="form-control custom-field" id="amounts" name="amount" type="number" placeholder="{{ __('message_lang.LBL_AMOUNT') }}" value="{{ old('amount') }}">
                                <!-- <input class="form-control custom-field" id="amount" name="amount" type="hidden" placeholder="{{ __('message_lang.LBL_AMOUNT') }}" value="{{ old('amount') }}"> -->
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="reference_no">{{ __('message_lang.LBL_CURRENCY') }} <span style="color: red;">*</span></label>
                                <select class="form-control @error('currency_id') is-invalid @enderror custom-field" name="currency_id" id="currency_id" autocomplete="currency_id">
                                    @foreach($currencies as $key => $currency)
                                        <option value="{{ $key }}">{{ $currency }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <!-- <a class="btn btn-primary btn-lg btn-block" href="{{-- route('deposit-account') --}}">Next</a> -->
                        <button type="submit" class="btn btn-primary btn-lg btn-block">{{ __('message_lang.BUTTON_CONTINUE') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    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();
        }
    }
    var enabledManual = 0;
    var companyCode = "";

    window.onload = function() {
        var enabledManual = sessionStorage.getItem("SelItem");
        companyCode = sessionStorage.getItem("companyCode");
        if(enabledManual == 1) {
            $(".amount-manual").show();
        } else {
            $(".amount-manual").hide();
        }
    }

    $(document).on('click',".sendingComp", function() {
        $("#receiver_info_form").validate().resetForm();
        enabledManual = $(this).attr("manual-id");
        companyCode = $(this).attr("company-code");
        sessionStorage.setItem("SelItem", enabledManual);
        sessionStorage.setItem("companyCode", companyCode);
        if(enabledManual == 1) {
            $(".amount-manual").show();
        } else {
            $(".amount-manual").hide();
        }

        var len = $("#reference_no").val().length;
        var a = document.getElementById("reference_no-error");

        if(a != null) {
            a = a.innerHTML;
        }
        if(len != 0 && a == '') {
            if(companyCode == RIA){
                if(len != 11) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else if(companyCode == MG){
                if(len != 8) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else if(companyCode == WU){
                if(len != 10) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else {
                $("#reference_no_error").hide();
            }
        }
    });

    $(document).on("focusout","#reference_no",function (event) {
        var a = document.getElementById("reference_no-error");
        var len = $("#reference_no").val().length;
        if(a != null) {
            a = a.innerHTML;
        }
        if(len != 0 && a == '') {
            if(companyCode == RIA){
                if(len != 11) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else if(companyCode == MG){
                if(len != 8) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else if(companyCode == WU){
                if(len != 10) {
                    $("#reference_no_error").html("{{ __('message_lang.INVALID_PICKUP_CODE') }}").show();
                } else {
                    $("#reference_no_error").hide();
                }
            } else {
                $("#reference_no_error").hide();
            }
        }
    });

    var YHW = "