@extends('voyager::master')

@section('page_title', checkAndReturnValue($customerDetails, 'en_name'))

@section('page_header')
    <div class="page-header">
        <div class="row align-items-center py-2">
            <div class="col-sm mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}"
                        src="{{ asset('icon/customer.png') }}" width="38" alt="img">
                    <div class="w-0 flex-grow pl-2 mt-2">
                        <h1 class="page-header-title mb-0">
                            {{ !empty(checkAndReturnValue($customerDetails, 'en_name')) ? checkAndReturnValue($customerDetails, 'en_name') : checkAndReturnValue($customerDetails, 'ar_name') }}
                            <span class="badge badge-info">
                                {{ __('datatable.' . strtolower(checkAndReturnValue($customerDetails, 'status'))) }}</span>
                        </h1>
                        <p class="page-header-text m-0">{{ __('datatable.testotpn.sub_title') }}
                            {{ !empty(checkAndReturnValue($customerDetails, 'en_name')) ? checkAndReturnValue($customerDetails, 'en_name') : checkAndReturnValue($customerDetails, 'ar_name') }}
                            {{ __('datatable.testotpn.user') }} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
<style>
    .file-display-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .content {
        max-width: 100% !important;
    }
</style>

@section('content')

    <div class="page-content browse">
        @include('_partials.alerts')
        <form action="{{ route('customer.update', $customerDetails['_id']) }}" id="customerForm" method="POST"
            enctype="multipart/form-data" class="row">
            @csrf
            <input type="hidden" name="is_draft" value="">
            <input type="hidden" name="status" value="">
            <ul class="nav nav-tabs customer-tab-section mb-3 border-0">
                <li class="nav-item">
                    <button type="button" class="nav-link active general-info-section-tab"
                        data-target="general-info-section">{{ __('datatable.top_up.general_information') }}</button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link bank-detail-section-tab" data-target="bank-detail-section">
                        {{ __('datatable.bank.bank_detail') }} </button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link documents-section-tab"
                        data-target="documents-section">{{ __('datatable.bank.document') }}</button>
                </li>
            </ul>
            <div class="col-md-12">
                @include('_partials.loader')
                <div class="card card card-bordered card-warning">
                    <div class="card-body">
                        <div class="customer-tab-content-section general-info-section">
                            <div class="row">
                                <div class="form-group  col-md-12">
                                    <h4>{{ __('datatable.top_up.application') }}
                                        {{ checkAndReturnValue($customerDetails, 'application_number') ? checkAndReturnValue($customerDetails, 'application_number') : '-' }}
                                    </h4>
                                    <h4>{{ __('datatable.top_up.general_information') }}</h4>
                                </div>
                                {{-- <div class="form-group  col-md-6">
                                <label>Name in English <span class="required">*</span></label>
                                <input type="text" class="form-control" value="{{checkAndReturnValue($customerDetails,'en_name')}}" name="en_name">
                            </div> --}}
                                <div class="form-group  col-md-6">
                                    <label>{{ __('voyager::form.name_arabic') }} <span class="required">*</span></label>
                                    <input type="text" class="form-control"
                                        value="{{ checkAndReturnValue($customerDetails, 'ar_name') }}" name="ar_name">
                                </div>
                                <div class="form-group  col-md-6">
                                    <label> {{ __('voyager::form.mobile_number') }} <span class="required">*</span></label>
                                    <input type="text"
                                        value="{{ checkAndReturnValue($customerDetails, 'mobile_number') }}"
                                        class="form-control" name="mobile_number">
                                </div>
                                <div class="form-group  col-md-6">
                                    <label> {{ __('voyager::form.email_address') }} <span class="required">*</span></label>
                                    <input type="email" class="form-control" name="email"
                                        value="{{ checkAndReturnValue($customerDetails, 'email') }}">
                                </div>

                                <div class="form-group col-md-6">
                                    <label>{{ __('form.gender.gender') }}</label>
                                    <div class="disp-flex">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" value="ذكر"
                                                id="male" @if (checkAndReturnValue($customerDetails, 'gender') == 'Male' ||
                                                        checkAndReturnValue($customerDetails, 'gender') == 'ذكر') checked @endif>
                                            <label class="form-check-label" for="male">
                                                {{ __('form.gender.male') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" value="أنثى"
                                                id="female" @if (checkAndReturnValue($customerDetails, 'gender') == 'Female' ||
                                                        checkAndReturnValue($customerDetails, 'gender') == 'أنثى') checked @endif>
                                            <label class="form-check-label" for="female">
                                                {{ __('form.gender.female') }}
                                            </label>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group  col-md-6">
                                    <label>{{ __('form.birth_place') }}</label>
                                    <input type="text" class="form-control" name="place_of_birth"
                                        value="{{ checkAndReturnValue($customerDetails, 'place_of_birth') }}">
                                </div>
                                <div class="form-group  col-md-6">
                                    <label>{{ __('form.nationality') }}</label>
                                    <input type="text" class="form-control" name="nationality"
                                        value="{{ checkAndReturnValue($customerDetails, 'nationality') ? checkAndReturnValue($customerDetails, 'nationality') : 'Libya' }}">
                                </div>



                                <div class="form-group  col-md-6">
                                    <label>{{ __('form.dob') }}</label>
                                    <input type="string" id="toDate"
                                        value="{{ checkAndReturnValue($customerDetails, 'date_of_birth') }}"
                                        class="form-control" name="date_of_birth"
                                        placeholder="{{ __('datatable.dd_mm_yy') }}">
                                </div>
                                <div class="col-md-12 disp-flex">
                                    <div class="form-group mr5">
                                        <label for="nationalID">{{ __('form.national_id') }} <span
                                                class="required">*</span></label>
                                        <input type="text" class="form-control" name="national_id"
                                            value="{{ checkAndReturnValue($customerDetails, 'national_id') }}">
                                    </div>
                                    <div class="form-group mr5 ">
                                        <label for="nationalID">{{ __('form.issue_date') }}</label>
                                        <input type="date" name="nid_issue_date" class="form-control"
                                            value="{{ formatTimestamp(checkAndReturnValue($customerDetails, 'nid_issue_date'), 'Y-m-d') }}">
                                    </div>
                                    <div class="form-group ">
                                        <label for="nationalID">{{ __('form.expire_date') }}</label>
                                        <input type="date" name="nid_expiry_date" class="form-control"
                                            value="{{ formatTimestamp(checkAndReturnValue($customerDetails, 'nid_expiry_date'), 'Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-12 disp-flex">
                                    <div class="form-group mr5">
                                        <label for="nationalID">{{ __('form.passport_number') }}</label>
                                        <input class="form-control" name="passport_number"
                                            value="{{ checkAndReturnValue($customerDetails, 'passport_number') }}">
                                    </div>
                                    <div class="form-group mr5">
                                        <label for="nationalID">{{ __('form.issue_date') }}</label>

                                        <input type="date" name="passport_issue_date" class="form-control"
                                            value="{{ formatTimestamp(checkAndReturnValue($customerDetails, 'passport_issue_date'), 'Y-m-d') }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="nationalID">{{ __('form.expire_date') }}</label>
                                        <input type="date" name="passport_expiry_date" class="form-control"
                                            value="{{ formatTimestamp(checkAndReturnValue($customerDetails, 'passport_expiry_date'), 'Y-m-d') }}">
                                    </div>
                                </div>
                                {{-- <div class="form-group  col-md-12">
                                    <label>Address <span class="required">*</span></label>
                                    <input type="text" class="form-control" name="address"
                                        value="{{ checkAndReturnValue($customerDetails, 'address') }}">
                                </div> --}}
                            </div>
                        </div>
                        <div class="customer-tab-content-section d-none bank-detail-section">
                            <div class="row">
                                <div class="form-group  col-md-12">
                                    <h4>{{ __('datatable.bank.bank_detail') }}</h4>
                                </div>
                                {{-- <div class="form-group  col-md-6">
                                    <label>Registered Mobile Number</label>
                                    <input type="text" name="registered_mobile_number" class="form-control"
                                        value="{{ checkAndReturnValue($customerDetails, 'registered_mobile_number') }}">
                                </div> --}}

                                <div class="form-group  col-md-6">
                                    <label>{{ __('datatable.bank.bank_name') }}</label>
                                    <input type="text" name="bank_name" class="form-control"
                                        value="{{ checkAndReturnValue($customerDetails, 'bank_name') }}">
                                </div>
                                <div class="form-group  col-md-6">
                                    <label>{{ __('datatable.bank.branch') }}</label>
                                    <input type="text" name="branch" class="form-control"
                                        value="{{ checkAndReturnValue($customerDetails, 'branch') }}">
                                </div>
                                <div class="form-group  col-md-6">
                                    <label>{{ __('datatable.bank.bank_acc_number') }}</label>
                                    <input type="text" name="bank_account_number" class="form-control"
                                        value="{{ checkAndReturnValue($customerDetails, 'bank_account_number') }}">
                                </div>

                            </div>
                        </div>
                        <div class="customer-tab-content-section d-none documents-section">
                            <div class="disp-flex">
                                <div class="form-group mr5">
                                    <label>{{ __('form.national_id_front') }}</label>
                                    <input type="file" data-file="nid_front"
                                        data-id="{{ checkAndReturnValue($customerDetails, 'nid_doc_id') }}"
                                        data-model="customer_documents" data-col="nid_front"
                                        data-name="{{ checkAndReturnValue($customerDetails, 'ar_name') }}"
                                        data-field="en_name" accept="image/*">
                                    <input type="hidden" name="nid_front"
                                        value="{{ checkAndReturnValue($customerDetails, 'nid_front') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ __('form.national_id_back') }}</label>
                                    <input type="file" data-file="nid_back"
                                        data-id="{{ checkAndReturnValue($customerDetails, 'nid_doc_id') }}"
                                        data-model="customer_documents" data-col="nid_back"
                                        data-name="{{ checkAndReturnValue($customerDetails, 'ar_name') }}"
                                        data-field="en_name" accept="image/*">
                                    <input type="hidden" name="nid_back"
                                        value="{{ checkAndReturnValue($customerDetails, 'nid_back') }}">
                                </div>
                            </div>
                            <div class="disp-flex">
                                <div class="form-group mr5">
                                    <label>{{ __('form.passport_first_page') }}</label>
                                    <input type="file" data-file="passport_front"
                                        data-id="{{ checkAndReturnValue($customerDetails, 'passport_doc_id') }}"
                                        data-model="customer_documents" data-col="passport_front"
                                        data-name="{{ checkAndReturnValue($customerDetails, 'ar_name') }}"
                                        data-field="en_name" accept="image/*">
                                    <input type="hidden" name="passport_front"
                                        value="{{ checkAndReturnValue($customerDetails, 'passport_front') }}">
                                </div>
                                <div class="form-group hidden">
                                    <label>{{ __('form.passport_sec_page') }}</label>
                                    <input type="file" data-file="passport_back"
                                        data-id="{{ checkAndReturnValue($customerDetails, 'passport_doc_id') }}"
                                        data-model="customer_documents" data-col="back"
                                        data-name="{{ checkAndReturnValue($customerDetails, 'ar_name') }}"
                                        data-field="en_name" accept="image/*">
                                    <input type="hidden" name="passport_back"
                                        value="{{ checkAndReturnValue($customerDetails, 'passport_back') }}">
                                </div>
                            </div>
                            <div class="disp-flex">
                                <div class="form-group mr5">
                                    <label>{{ __('form.kyc_form') }} <span class="required">*</span></label>
                                    <input type="file" data-file="kyc_form" name="kyc_form_picker"
                                        data-id="{{ checkAndReturnValue($customerDetails, 'local_id') }}"
                                        data-model="customers" data-col="kyc_form"
                                        data-name="{{ checkAndReturnValue($customerDetails, 'ar_name') }}"
                                        data-field="ar_name" accept="image/*">
                                    <input type="hidden" name="kyc_form"
                                        value="{{ checkAndReturnValue($customerDetails, 'kyc_form') }}">
                                </div>
                            </div>
                            <div id="fileDisplay" class="file-display-group disp-flex">
                                <div class="fileDisplay block">
                                    <p class="title">{{ __('form.national_id_front') }}</p>
                                    <img src="{{ checkAndReturnValue($customerDetails, 'nid_front') ? checkAndReturnValue($customerDetails, 'nid_front') : asset('img/default.png') }}"
                                        data-src="{{ checkAndReturnValue($customerDetails, 'nid_front') ? checkAndReturnValue($customerDetails, 'nid_front') : asset('img/default.png') }}"
                                        class="nid_front_src" style="width: 290px; height: auto;"
                                        onclick="imgModal(this)">
                                </div>
                                <div class="fileDisplay block">
                                    <p class="title">{{ __('form.national_id_back') }}</p>
                                    <img src="{{ checkAndReturnValue($customerDetails, 'nid_back') ? checkAndReturnValue($customerDetails, 'nid_back') : asset('img/default.png') }}"
                                        data-src="{{ checkAndReturnValue($customerDetails, 'nid_back') ? checkAndReturnValue($customerDetails, 'nid_back') : asset('img/default.png') }}"
                                        class="nid_back_src" style="width: 290px; height: auto;"
                                        onclick="imgModal(this)">
                                </div>
                                <div class="fileDisplay block">
                                    <p class="title">{{ __('form.passport_first_page') }}</p>
                                    <img src="{{ checkAndReturnValue($customerDetails, 'passport_front') ? checkAndReturnValue($customerDetails, 'passport_front') : asset('img/default.png') }}"
                                        data-src="{{ checkAndReturnValue($customerDetails, 'passport_front') ? checkAndReturnValue($customerDetails, 'passport_front') : asset('img/default.png') }}"
                                        class="passport_front_src" style="width: 290px; height: auto;"
                                        onclick="imgModal(this)">
                                </div>
                                {{-- <div class="fileDisplay block d-none">
                                    <p class="title">{{ __('form.passport_sec_page') }}</p>
                                    <img src="{{ checkAndReturnValue($customerDetails, 'passport_back') ? checkAndReturnValue($customerDetails, 'passport_back') : asset('img/default.png') }}"
                                        data-src="{{ checkAndReturnValue($customerDetails, 'passport_back') ? checkAndReturnValue($customerDetails, 'passport_back') : asset('img/default.png') }}"
                                        class="passport_back_src" style="width: 290px; height: auto;"
                                        onclick="imgModal(this)">
                                </div> --}}
                                <div class="fileDisplay block">
                                    <p class="title">{{ __('form.kyc_form') }} </p>
                                    <img src="{{ checkAndReturnValue($customerDetails, 'kyc_form') ? checkAndReturnValue($customerDetails, 'kyc_form') : asset('img/default.png') }}"
                                        data-src="{{ checkAndReturnValue($customerDetails, 'kyc_form') ? checkAndReturnValue($customerDetails, 'kyc_form') : asset('img/default.png') }}"
                                        class="kyc_form_src" style="width: 290px; height: auto;"
                                        onclick="imgModal(this)">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group  col-md-12">
                                <label> {{ __('voyager::form.comments') }}</label>
                                <textarea name="comments" id="comments" class="form-control">{{ checkAndReturnValue($customerDetails, 'comments') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <input type="hidden" name="id">
                     @if (!in_array(strtoupper(checkAndReturnValue($customerDetails, 'status')), ['ACTIVE', 'VERIFIED']))

                        <div class="col-md-12">
                            <button type="submit" class="btn btn-sm submit-confirm btn-info" data-action="approval">
                                {{ __('voyager::form.submit_approval') }}
                            </button>
                            <button type="submit" class="btn btn-sm submit-confirm btn-success" data-action="draft">
                                {{ __('voyager::generic.save') }}
                            </button>
                        </div>
                        @if (hasPermission('reject', 'Customer') &&
                                !in_array(checkAndReturnValue($customerDetails, 'status'), ['REJECTED', 'DEACTIVE', 'ACTIVE']))
                            <button title="Reject" class="btn btn-sm btn-danger pull-right reject" type="button"
                                data-toggle="modal" data-target="#rejectModal" style="margin-top: -2rem;">
                                <i class="voyager-x"></i> <span
                                    class="hidden-xs hidden-sm">{{ __('voyager::datatable.reject') }}</span>
                            </button>
                        @endif
                      @endif

                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade modal-danger" tabindex="-1" id="rejectModal" role="dialog"
        aria-labelledby="rejectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content ">
                <div class="modal-header ">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="closeModel()"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="rejectModalLabel">{{ __('form.rejection_reason') }}</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <textarea class="form-control" rows="5" id="rejectionReason"
                            placeholder="{{ __('voyager::form.comments') }} ..." name="rejection_reason" required>{{ checkAndReturnValue($customerDetails, 'rejection_reason') }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default close-btn pull-right" data-dismiss="modal"
                        onclick="closeModel()">{{ __('voyager::generic.cancel') }}</button>
                    <button type="button" class="btn btn-danger submit-confirm"
                        id="submitReject">{{ __('voyager::datatable.reject') }}</button>
                </div>
            </div>
        </div>
    </div>

@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            $(".customer-tab-section .nav-link").on('click', function() {
                activateTab($(this).data('target'));
            });
        });

        function activateTab(target = '', isError = false) {
            $(".nav-tabs button").removeClass('active').removeClass('error');
            $('.customer-tab-content-section').addClass('d-none')
            $(`.${target}`).removeClass('d-none')
            $(`.customer-tab-section .nav-link`).removeClass('active')
            $(`.${target}-tab`).addClass(isError == true ? 'error' : 'active')
        }

        $("input[type='file']").on('change', function(event) {
            const fileIndicator = $(this).data('file');
            let name = $(this).data('name')?.toLowerCase()?.replaceAll(" ", "_");
            let fieldName = $(this).data('field');
            if (!name) {
                name = $(`input[name='${fieldName}']`).val()?.toLowerCase()?.replaceAll(" ", "_");
            }
            const model = $(this).data('model')
            const id = $(this).data('id')
            const col = $(this).data('col')
            if (name) {
                loaderEvent(true);
                $(`input[name='${fileIndicator}']`).val('')
                $(`.${fileIndicator}_src`).attr('src', $(this).data('src'))
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.onload = function() {
                    const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
                    var base64String = reader.result.split(',')[1];
                    const url = "{{ route('files.request') }}";
                    const data = {
                        image: base64String,
                        name: name,
                        process: "USER_KYC",
                        model: model,
                        id: id,
                        col: col,
                        _token: csrfToken
                    };
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        headers: {
                            'X-CSRF-Token': csrfToken
                        },
                        success: function(response) {
                            if (response.success == true) {
                                console.log(fileIndicator)
                                $(`input[name='${fileIndicator}']`).val(response.data)
                                $(`.${fileIndicator}_src`).attr('src', response.data)
                                updateImages(response.data, `${fileIndicator}_src`);
                            } else {
                                toastr.error(response.message);
                            }
                            loaderEvent(false);
                        },
                        error: function(xhr, status, error) {
                            toastr.error(error);
                            console.error('Error:', error);
                            loaderEvent(false);
                        }
                    });
                };
                reader.readAsDataURL(file);

            } else {
                fieldName = fieldName.replaceAll("en_", '').replaceAll("_", " ")
                toastr.error(`Please update ${fieldName} information first.`);
            }
        });

        $("#customerForm .submit-confirm ").on('click', function(event) {
            const action = $(this).data('action');
            let is_draft = true;
            let status = "{{ statusVal('DRAFT') }}";
            switch (action) {
                case "approval":
                    is_draft = false;
                    status = "{{ statusVal('PENDING') }}";
                    break;
                case "draft":
                    is_draft = true;
                    status = "{{ statusVal('DRAFT') }}";
                    break;
                default:
                    break
            }
            $("#customerForm input[name=is_draft]").val(is_draft);
            $("#customerForm input[name=status]").val(status);
        });

        document.getElementById("customerForm").addEventListener("submit", function(event) {
            event.preventDefault();
            let formData = new FormData(this);
            let en_name = $("#customerForm input[name=en_name]").val();
            $("#customerForm input").removeClass('border-warning');
            // if (!en_name) {
            //     toastr.error("The english name field is required.");
            //     $("#customerForm input[name=en_name]").addClass('border-warning');
            //     activateTab('general-info-section', true)
            //     return false;
            // }
            let ar_name = $("#customerForm input[name=ar_name]").val();
            if (!ar_name) {
                toastr.error("The arabic name field is required.");
                $("#customerForm input[name=ar_name]").addClass('border-warning');
                activateTab('general-info-section', true)
                return false;
            }
            let email = $("#customerForm input[name=email]").val();
            if (!email) {
                toastr.error("The email address field is required.");
                $("#customerForm input[name=email]").addClass('border-warning');
                activateTab('general-info-section', true)
                return false;
            }
            let mobile_number = $("#customerForm input[name=mobile_number]").val();
            if (!mobile_number) {
                toastr.error("The mobile number field is required.");
                $("#customerForm input[name=mobile_number]").addClass('border-warning');
                activateTab('general-info-section', true)
                return false;
            }
            // let address = $("#customerForm input[name=address]").val();
            // if (!address) {
            //     toastr.error("The address field is required.");
            //     $("#customerForm input[name=address]").addClass('border-warning');
            //     activateTab('general-info-section', true)
            //     return false;
            // }
            let kyc_form = $("#customerForm input[name=kyc_form]").val();
            if (!kyc_form) {
                toastr.error("The kyc is required.");
                $("#customerForm input[name=kyc_form_picker]").addClass('border-warning');
                activateTab('documents-section', true)
                return false;
            }
            let National_ID = $("#customerForm input[name=national_id]").val();
            if (National_ID) {
                if (
                    National_ID.length !== 12 ||
                    !["1", "2"].includes(National_ID[0])
                ) {
                    toastr.error("The national number is incorrect.");
                    $("#customerForm input[name=national_id]").addClass('border-warning');
                    activateTab('general-info-section', true)
                    return false;
                }

                const year = parseInt(National_ID.slice(1, 3)) + 1900;

                const currentYear = new Date().getFullYear();
                if (year > currentYear || currentYear - year > 120) {
                    toastr.error("The national number is incorrect.");
                    $("#customerForm input[name=national_id]").addClass('border-warning');
                    activateTab('general-info-section', true)
                    return false;
                }
            } else {
                toastr.error("The national id field is required.");
                $("#customerForm input[name=national_id]").addClass('border-warning');
                activateTab('general-info-section', true)
                return false;
            }
            loaderEvent(true);
            this.submit()
        });



        $(document).ready(function() {
            $('#submitReject').click(function() {
                console.log('submitReject');
                $('<input>').attr({
                    type: 'hidden',
                    name: 'status',
                    value: 'REJECTED'
                }).appendTo('#customerForm');

                const rejectionReason = $('#rejectionReason').val();
                $('<input>').attr({
                    type: 'hidden',
                    name: 'rejection_reason',
                    value: rejectionReason
                }).appendTo('#customerForm');

                $('#customerForm').submit();
            });
        });
    </script>


@stop