@extends('layouts.app')

@section('content')

<div class="row justify-content-center">
    <div class="col-md-12" style="padding-top: 60px;">
        <div class="page page-md comman-page-height-main">
            <div class="header-box py-5">
            </div>
                                <div class="content-box bg-white py-4 text-center mb-4">
                        <h4 class="alert-heading text-success">{{ __('message_lang.PROFILE_CREATED') }}</h4>
                        <p class="text-muted">{{ __('message_lang.VERIFY_ACCOUNT_TEXT') }}</p>
                        <hr>
                        <a class="btn btn-success" href="{{ route('verification') }}">{{ __('message_lang.BUTTON_VERIFY_NOW') }}</a>
                    </div>
            
            <div class="steps">
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">1</span>
                    <span class="hidden-xs">{{ __('message_lang.LBL_SELECT_BENEFICIARY') }}</span>
                </a>
                <a class="step-item current" href="javascript:void(0)">
                    <span class="step-number">2</span>
                    <span class="hidden-xs">{{ __('message_lang.RECEIVER_INFORMATION') }}</span>
                </a>
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">3</span>
                    <span class="hidden-xs">{{ __('message_lang.DEPOSIT_ACCOUNT_DETAILS') }}</span>
                </a>
                <a class="step-item" href="javascript:void(0)">
                    <span class="step-number">4</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 }}" 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') }}</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') }}">
                            </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_NEXT') }}</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();
        }
    }

    $("#receiver_info_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 == "sending_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: {
            "sending_company_id": {
                required: true,
            },
            "reference_no": {
                required: true,
            }
        },
        messages: {
            "sending_company_id": {
                required: '{{ __('message_lang.PLS_SEL_SEND_CO') }}',
            },
            "reference_no": {
                required: '{{ __('message_lang.PLS_ENT_PU_CODE') }}',
            },
        },
        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();
        }
    });
</script>
@endsection