@extends("agentportal.layouts.layout")

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

@section("page_style")

@endsection

@section("content")
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <!--end::Subheader-->
    <!--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 example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                {!! trans("message_lang.LBL_SUBMIT_PAID_TRANSACTION") !!}
                            </h3>
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <a href="{{ url('agentportal/dashboard') }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--begin::Form-->
                        <form method="post" name="form" id="form" action="{{ url('agentportal/payment-requests/store') }}" enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <div class="card-body">
                                <div class="form-group row justify-content-md-center">
                                    @foreach ($agentCompanies as $key => $agentCompany)
                                        @if($agentCompany->code == "MTN" && $agentLocation->agentCountry->isoname != "LBR")
                                            @php continue; @endphp
                                        @endif
                                        <label for="company_{{ $agentCompany->id }}" class="col-6 col-md-2">
                                            <div class="card p-3 h-100 @if (old('company') == $agentCompany->id) border-primary @endif" style="min-height: 150px;">
                                                <input type="radio" name="company" value="{{ $agentCompany->id }}" id="company_{{ $agentCompany->id }}" class="company" @if (old('company', isset($agentTransaction->agent_company_id) ? $agentTransaction->agent_company_id : '') == $agentCompany->id) checked @endif>
                                                <img src="{{ url($agentCompany->logo) }}" alt="{{ $agentCompany->name }}" class="img-fluid m-auto d-block" />
                                            </div>
                                        </label>
                                    @endforeach
                                    <div class="col-md-12">
                                        @error('company')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="code">{!! trans("message_lang.LBL_PICKUP_CODE") !!} <span style="color:red;">*</span></label>
                                        <input onKeypress="return event.charCode != 32" type="text" pattern="[0-9a-zA-Z_.-]*" name="code" placeholder="{!! trans("message_lang.LBL_PICKUP_CODE") !!}" value="{{ old('code', isset($agentTransaction->pickup_code) ? $agentTransaction->pickup_code : '') }}" id="code" class="form-control @error('code') is-invalid @enderror custom-field" />
                                        @error('code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label class="" for="mamount">{!! trans("message_lang.LBL_AMOUNT") !!} <span style="color:red;">*</span></label>
                                        <input onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')" type="text" pattern="[0-9.]*" name="mamount" placeholder="{!! trans("message_lang.LBL_AMOUNT") !!}" value="{{ old('mamount', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->mamount) ? $agentTransaction->agentPaidTransaction->mamount : '') }}" id="mamount" class="form-control @error('mamount') is-invalid @enderror custom-field" />
                                        <span id="mamount_show">{{ number_format(old('mamount', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->mamount)
                                        ? $agentTransaction->agentPaidTransaction->mamount : 0.00), 2) }}</span>
                                        @error('mamount')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <label class="" for="government_id_type">{!! trans("message_lang.LBL_GOVERNMENT_ID_TYPE") !!} <span style="color:red;"></span></label>
                                        <select name="government_id_type" id="government_id_type"
                                            class="form-control @error('government_id_type') is-invalid @enderror custom-field">
                                            <option value="">Select</option>
                                            @foreach($governmentIdTypes as $key => $governmentIdType)
                                            <option value="{{ $governmentIdType->id_type_description }}" @if (old('government_id_type', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->government_id_type) ? $agentTransaction->agentPaidTransaction->government_id_type : '') == $governmentIdType->id_type_description) selected @endif>{{ trans("message_lang.".$governmentIdType->LangCode) }}</option>
                                            @endforeach
                                        </select>
                                        @error('government_id_type')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="" for="government_id_no">{!! trans("message_lang.LBL_GOVERNMENT_ID_NUMBER") !!} <span style="color:red;"></span></label>
                                        <input onKeypress="return event.charCode != 32" type="text" pattern="[0-9a-zA-Z_.-]*" name="government_id_no" placeholder="Id Number" value="{{ old('government_id_no', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->government_id_no) ? $agentTransaction->agentPaidTransaction->government_id_no : '') }}" id="government_id_no" class="form-control @error('government_id_no') is-invalid @enderror custom-field" />
                                        @error('government_id_no')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="" for="id_issuing_country">{!! trans("message_lang.LBL_ISSUING_COUNTRY") !!} <span style="color:red;"></span></label>
                                        <select name="id_issuing_country" id="id_issuing_country"
                                            class="form-control @error('id_issuing_country') is-invalid @enderror custom-field">
                                            <option value="">{!! trans("message_lang.PLACEHOLDER_SELECT") !!}</option>
                                            @if ($idIssuingCountries)
                                            @foreach ($idIssuingCountries as $key => $idIssuingCountry)
                                            <option value="{{ $key }}" @if (old('id_issuing_country', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->id_issuing_country) ? $agentTransaction->agentPaidTransaction->id_issuing_country : '') == $key) selected @endif>{{ $idIssuingCountry }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                        @error('id_issuing_country')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row" style="display: none;">
                                    <div class="col-md-4">
                                        <label for="government_id_photo">{!! trans("message_lang.LBL_GOVERNMENT_ID_PHOTO") !!} <span style="color:red;"></span></label>
                                        <div class="custom-file">
                                            <input type="file" accept="image/*" onchange="readURL(this, '#logoImg');" name="government_id_photo" id="government_id_photo" class="custom-file-input" />
                                            <label class="custom-file-label" for="government_id_photo">{{ trans('message_lang.CHOOSE_FILE') }}</label>
                                        </div>
                                        <small class="form-text text-muted">{{ trans('message_lang.JPG_PNG_MAX_FILE_SIZE') }}</small>
                                        @error('government_id_photo')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-2">
                                        <img onError="this.onerror=null;this.src='{{ url('public/uploads/default/100_no_img.jpg') }}'" src="{{ url('public/uploads/default/100_no_img.jpg') }}" id="logoImg" class="img-fluid w-100 m-auto d-block" alt="Government Id Photo" />
                                    </div>

                                    <div class="col-md-4">
                                        <label for="receipt_photo">{!! trans("message_lang.LBL_RECEIPT_PHOTO") !!} <span style="color:red;"></span></label>
                                        <div class="custom-file">
                                            <input type="file" accept="image/*" onchange="readURL(this, '#receiptImg');" name="receipt_photo" id="receipt_photo" class="custom-file-input" />
                                            <label class="custom-file-label" for="receipt_photo">{{ trans('message_lang.CHOOSE_FILE') }}</label>
                                        </div>
                                        <small class="form-text text-muted">{{ trans('message_lang.JPG_PNG_MAX_FILE_SIZE') }}</small>
                                        @error('receipt_photo')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-2">
                                        <img onError="this.onerror=null;this.src='{{ url('public/uploads/default/100_no_img.jpg') }}'" src="{{ url('public/uploads/default/100_no_img.jpg') }}" id="receiptImg" class="img-fluid w-100 m-auto d-block" alt="Receipt Photo" />
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label class="" for="receiver_address">{!! trans("message_lang.LBL_ADDRESS") !!}<span style="color:red;"></span></label>
                                        <input type="text" name="receiver_address" placeholder="Address" value="{{ old('receiver_address', isset($agentTransaction->receiver_address) ? $agentTransaction->receiver_address : '') }}" id="receiver_address" class="form-control @error('receiver_address') is-invalid @enderror custom-field" />
                                        @error('receiver_address')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label class="" for="notes">{!! trans("message_lang.LBL_NOTES") !!}<span style="color:red;"></span></label>
                                        <textarea name="notes" placeholder="Notes" id="notes" class="form-control @error('notes') is-invalid @enderror custom-field">{{ old('notes', isset($agentTransaction->agentPaidTransaction) && isset($agentTransaction->agentPaidTransaction->notes) ? $agentTransaction->agentPaidTransaction->notes : '') }}</textarea>
                                        @error('notes')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <!-- Modal -->
                                <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-md" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="confirmModalLabel">Confirm Submit</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>

                                            <div class="modal-body">
                                                Are you sure you want to submit the following details?
                                                <table class="table table-striped">
                                                    <tbody>
                                                        <tr>
                                                            <td>{!! trans("message_lang.LBL_COMPANY") !!}:</td>
                                                            <th id="company"></th>
                                                        </tr>
                                                        <tr>
                                                            <td>{!! trans("message_lang.LBL_PICKUP_CODE") !!}:</td>
                                                            <th id="pickup_code"></th>
                                                        </tr>
                                                        <tr>
                                                            <td>{!! trans("message_lang.LBL_AMOUNT") !!}:</td>
                                                            <th><span id="amount"></span> {{ auth('agentportal')->user()->agentLocation->agentCountry->currency }}</th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="modal-footer" style="display: block;">
                                                <div class="row justify-content-between">
                                                    <div class="col-12 col-md-4 px-0">
                                                        <button type="button" id="confirmButton" class="btn btn-primary btn-block my-2">
                                                            <i class="fas fa-user-check"></i>
                                                            {!! trans("message_lang.BTN_CONFIRM") !!} 
                                                            <span class="submitLoader"></span>
                                                        </button>
                                                    </div>
                                                    <div class="col-12 col-md-4 px-0">
                                                        <button type="button" class="btn btn-outline-primary btn-block my-2" data-dismiss="modal">
                                                            <i class="fas fa-eraser"></i>
                                                            {!! trans("message_lang.BUTTON_CANCEL") !!}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row justify-content-between">
                                    <div class="col-12 col-md-4">
                                        <button type="submit" class="btn btn-primary btn-block btn-submit">{{ trans('message_lang.BTN_SUBMIT') }} 
                                            <span class="submitLoader"></span>
                                        </button>
                                    </div>

                                    <div class="col-12 col-md-4" style="display: none;">
                                        <button type="reset" class="btn btn-outline-primary btn-block">{{ trans('message_lang.BUTTON_CANCEL') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
@endsection

@section("page_script")
<script type="text/javascript">
    $(document).ready(function () {
        $('.company').on('click', function () {
            $('.company').parent().removeClass('border-primary');
            $(this).parent().addClass('border-primary');
        });

        $('.company').on('change', function () {
            $('#validation_request').show();
            if ($(this).val() == 1) {
                $('#is_validation_request').prop('checked', false);
                $('#validation_request').hide();
            }
        });

        $('#mamount').on('keyup', function () {
            let amount = number_format($(this).val() || 0.00);
            $('#mamount_show').html(amount);
        });

        $('#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.hasClass('select2') && element.next('.select2-container').length) {
                    error.insertAfter(element.next('.select2-container'));
                } else if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
                    error.insertAfter(element.parent().parent());
                } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.insertAfter(element);
                }
                // for other inputs, just perform default behavior
            },
            // ignore: [],
            rules: {
                company: {
                    required: true
                },
                code: {
                    required: true
                },
                mamount: {
                    required: true,
                    number: true
                }
            },
            messages: {
                company: {
                    required: '{!! trans("message_lang.PLEASE_SELECT_COMPANY")!!}'
                },
                code: {
                    required: '{!! trans("message_lang.PLS_ENT_PU_CODE")!!}'
                },
                mamount: {
                    required: '{!! trans("message_lang.PLEASE_ENTER_AMOUNT")!!}',
                    number: '{!! trans("message_lang.PLEASE_ENTER_DECIMAL_NUMBER_ONLY")!!}'
                }
            },
            submitHandler: function(form) {
                $('#loading').show();
                $('#company').text($('.company:checked').next().prop('alt') || 'NULL');
                $('#pickup_code').text($('#code').val() || 'NULL');
                $('#amount').text(number_format($('#mamount').val() || 0.00));
                $('#confirmModal').modal('show');

                $('#confirmButton').on('click', function () {
                    // Disable submit button
                    $(".btn-submit").attr("disabled", true);
                    $("#confirmButton").attr("disabled", true);
                    $(".submitLoader").addClass("spinner-border spinner-border-sm");

                    form.submit();
                    $('#loading').hide();
                });
            }
        });
    });

    const number_format = (num, decimals) => parseFloat(num).toLocaleString('en', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });

    function readURL(input, selector) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(selector).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection