@extends('voyager::master')



@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('icon/thumb.png') }}"
                        src="{{ asset('icon/merchant.png') }}" width="38" alt="img">
                    <div class="w-0 flex-grow pl-2 mt-2">
                        @php
                            $page_headers = __('company.title'); // Get the translated title string
                            $page_header = str_replace(
                                ['{company_name}'],
                                [checkAndReturnValue($agentDetails, 'company_name')], // Replace with actual company name
                                $page_headers,
                            );
                        @endphp
                        <h1 class="page-header-title mb-0">
                            {{ checkAndReturnValue($agentDetails, 'company_name') }}
                            <span class="badge badge-info">
                                {{ __('datatable.' . strtolower(checkAndReturnValue($agentDetails, 'status'))) }}</span>
                        </h1>
                        <p class="page-header-text m-0">
                            {{ $page_header }} <!-- Use $page_header here to display the replaced string -->
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </div>
@stop


@section('content')

    <div class="page-content browse">
        @include('_partials.alerts')
        <form action="{{ route('merchant.update', $agentDetails['_id']) }}" id="merchantForm" method="POST"
            enctype="multipart/form-data" class="row">

            @csrf

            <ul class="nav nav-tabs merchant-tab-section">
                <li class="nav-item">
                    <button type="button" class="nav-link company-info-section-tab active"
                        data-target="company-info-section">{{ __('company.company_info') }}
                    </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 authorized-persion-info-section-tab"
                        data-target="authorized-persion-info-section">{{ __('form.authorize.heading') }}</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">

                <div class="card card card-bordered card-warning">
                    @include('_partials.loader')
                    <div class="card-body merchant-tab-content-section company-info-section">
                        <div class="form-group  col-md-12">
                            <h4>{{ __('company.company_info') }}</h4>
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('company.company_name') }} <span class="required">*</span></label>
                            <input type="text" name="company_name" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyName') }}">
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('company.commercial_registration') }}<span class="required">*</span></label>
                            <input type="text" name="commercial_reg_number" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'commercialRegNumber') }}">
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('form.phone_number') }} <span class="required">*</span></label>
                            <input type="text" name="contact_number" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyContactNumber') }}">
                        </div>
                        <div class="form-group col-md-6">
                            <label>{{ __('form.email_address') }} </label>
                            <input type="email" name="company_email" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyEmail') }}">
                        </div>

                        <div class="form-group col-md-6">
                            <input type="number" name="wallet_id" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'walletId') }}" hidden>
                        </div>
                        <div class="form-group col-md-6">
                            <input type="number" name="national_id" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'national_id') }}" hidden>
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('form.website_url') }}</label>
                            <input type="text" name="website_url" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyWebsiteUrl') }}">
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('form.pan_card') }}</label>
                            <input type="text" name="pan_tax_number" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyPanTaxNumber') }}">
                        </div>
                        <div class="form-group  col-md-6">
                            <label> {{ __('form.establish_date') }}</label>
                            <input type="date" name="establish_date" id="fromDate" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyEstablishDate') }}">
                        </div>

                        <div class="form-group  col-md-6">
                            <label>{{ __('datatable.registration_date') }}</label>
                            <input type="date" name="place_of_registration" id="toDate" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'registration_date') }}">
                        </div>

                        <div class="form-group  col-md-6">
                            <label>{{ __('form.geolocation') }} <span class="required">*</span></label>
                            <input type="text" name="geolocation" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'companyGeolocation') }}">
                        </div>

                        <div class="form-group  col-md-6">
                            <label>{{ transWithFallback('form.category_name_merchant') }}</label>
                                <select name="category_id" class="form-control">
                                    <option value="">{{ __('form.select') }}</option>
                                    @php
                                        $selectedCategoryId = checkAndReturnValue($agentDetails, 'category_id');
                                        $selectedSectorTypeId = checkAndReturnValue($agentDetails, 'sectorTypeId');
                                        $companySectorType = checkAndReturnValue($agentDetails, 'companySectorType');
                                        $isMatched = false;
                                    @endphp

                                    @if ($companySectorType)
                                        <option value="{{ $selectedSectorTypeId }}" selected>
                                            {{ $companySectorType }}
                                        </option>
                                        @php $isMatched = true; @endphp
                                    @endif

                                    @foreach ($categories as $type)
                                        @php
                                            $typeId = checkAndReturnValue($type, 'id');
                                            if (!$isMatched && ($selectedCategoryId == $typeId || $selectedSectorTypeId == $typeId)) {
                                                $isMatched = true;
                                            }
                                        @endphp

                                        <option value="{{ $typeId }}"
                                            @if (!$isMatched && ($selectedSectorTypeId == $typeId || (empty($selectedCategoryId) && $selectedCategoryId == $typeId)))
                                                selected
                                            @endif>
                                            {{ checkAndReturnValue($type, 'categoryName') }}
                                        </option>
                                    @endforeach
                                </select>


                        </div>

                        {{-- <div class="form-group  col-md-6">
                            <label>{{ __('form.sector_type') }}</label>
                            <select name="sector_type" class="form-control">
                                <option value="">{{ __('form.select_sector_type') }}</option>
                                <option value="Public" @if (checkAndReturnValue($agentDetails, 'company_sector_type') == 'Public') selected @endif>Public</option>
                                <option value="Private" @if (checkAndReturnValue($agentDetails, 'company_sector_type') == 'Private') selected @endif>Private</option>
                            </select>
                        </div>
                        <div class="form-group  col-md-6">
                            <label>{{ __('form.activity_type') }}</label>
                            <select name="activity_type_id" class="form-control">
                                <option value="">{{ __('form.select_activity_type') }}</option>
                                @foreach ($activityTypes as $type)
                                    <option value="{{ $type->id }}" @if (checkAndReturnValue($agentDetails, 'activity_id') == $type->id) selected @endif>
                                        {{ $type->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div> --}}


                    </div>

                    <div class=" merchant-tab-content-section d-none bank-detail-section">
                        <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($agentDetails, '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($agentDetails, '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($agentDetails, '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($agentDetails, 'bank_account_number') }}">
                        </div>


                    </div>
                    <div class="card-body merchant-tab-content-section d-none authorized-persion-info-section">
                        <div class="form-group  col-md-12">
                            <h4>{{ __('form.authorize.heading') }}</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($agentDetails, '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($agentDetails, '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" name="mobile_number" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'mobile_number') }}">
                        </div>

                        <div class="form-group  col-md-6">
                            <label> {{ __('form.email_address') }} </label>
                            <input type="email" name="contact_person_email" class="form-control"
                                value="{{ checkAndReturnValue($agentDetails, 'contact_person_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($agentDetails, 'gender') == 'Male' || checkAndReturnValue($agentDetails, '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($agentDetails, 'gender') == 'Female' || checkAndReturnValue($agentDetails, 'gender') == 'أنثى') checked @endif>
                                    <label class="form-check-label" for="female">
                                        {{ __('form.gender.female') }}
                                </div>

                            </div>
                        </div>


                        <div class="form-group  col-md-6">
                            <label>{{ __('form.dob') }}</label>
                            <input class="form-control" type="string" id="toDate"
                                name="date_of_birth"value="{{ checkAndReturnValue($agentDetails, 'date_of_birth') }}"
                                placeholder="{{ __('datatable.dd_mm_yy') }}">
                        </div>

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


                        <div class="col-md-12 disp-flex">
                            <div class="form-group">
                                <label>{{ __('form.national_id') }}</label>
                                <input type="text" name="national_id" class="form-control"
                                    value="{{ checkAndReturnValue($agentDetails, '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($agentDetails, '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($agentDetails, 'nid_expiry_date'), 'Y-m-d') }}">
                            </div>
                        </div>

                        <div class="col-md-12 disp-flex">
                            <div class="form-group  ">
                                <label>{{ __('form.passport_number') }} </label>
                                <input type="text" name="passport_number" class="form-control"
                                    value="{{ checkAndReturnValue($agentDetails, '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($agentDetails, '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($agentDetails, 'passport_expiry_date'), 'Y-m-d') }}">
                            </div>
                        </div>

                    </div>
                    <div class="p-3 merchant-tab-content-section d-none documents-section">
                        <div class="disp-flex">
                            <div class="form-group mr5">
                                <label>{{ __('form.authorize.national_id_front') }}</label>
                                <input type="file" data-file="nid_front"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'nid_doc_id') }}"
                                    data-model="merchant_documents" data-col="nid_front"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'ar_name') }}" data-field="ar_name"
                                    accept="image/*">
                                <input type="hidden" name="nid_front"
                                    value="{{ checkAndReturnValue($agentDetails, 'nid_front') }}">
                            </div>
                            <div class="form-group ">
                                <label>{{ __('form.national_id_back') }}</label>
                                <input type="file" data-file="nid_back"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'nid_doc_id') }}"
                                    data-model="merchant_documents" data-col="nid_back"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'ar_name') }}" data-field="ar_name"
                                    accept="image/*">
                                <input type="hidden" name="nid_back"
                                    value="{{ checkAndReturnValue($agentDetails, 'nid_back') }}">
                            </div>
                            <div class="form-group">
                                <label>{{ __('form.passport_first_page') }}</label>
                                <input type="file" data-file="passport_front"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'passport_doc_id') }}"
                                    data-model="merchant_documents" data-col="front"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'ar_name') }}"
                                    data-field="passport_front" accept="image/*">
                                <input type="hidden" name="passport_front"
                                    value="{{ checkAndReturnValue($agentDetails, 'passport_front') }}">
                            </div>
                            <div class="form-group hidden">
                                <label>{{ __('form.passport_sec_page') }}</label>
                                <input type="file" data-file="passport_back"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'passport_doc_id') }}"
                                    data-model="merchant_documents" data-col="back"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'ar_name') }}" data-field="en_name"
                                    accept="image/*">
                                <input type="hidden" name="passport_back"
                                    value="{{ checkAndReturnValue($agentDetails, 'passport_back') }}">
                            </div>
                        </div>
                        <div class="disp-flex">
                            <div class="form-group mr5">
                                <label>{{ __('company.company_regist_certificate') }}
                                </label>
                                <input type="file" data-file="company_registration_certificate"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'certificate_doc_id') }}"
                                    data-model="merchant_documents" data-col="front"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'company_name') }}"
                                    data-field="company_name" accept="image/*">
                                <input type="hidden" name="company_registration_certificate"
                                    value="{{ checkAndReturnValue($agentDetails, 'company_registration_certificate') }}">
                            </div>
                            <div class="form-group">
                                <label>{{ __('company.company_pan_tax') }}</label>
                                <input type="file" data-file="pan_tax_card"
                                    data-id="{{ checkAndReturnValue($agentDetails, 'certificate_doc_id') }}"
                                    data-model="merchant_documents" data-col="back"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'company_name') }}"
                                    data-field="company_name" accept="image/*">
                                <input type="hidden" name="pan_tax_card"
                                    value="{{ checkAndReturnValue($agentDetails, 'pan_tax_card') }}">
                            </div>
                            <div class="disp-flex">
                                <div class="form-group mr5"> <label> {{ __('company.power_autonomy') }} </label>
                                    <input type="file" data-file="proof_of_address"
                                        data-id="{{ checkAndReturnValue($agentDetails, 'proof_of_address') }}"
                                        data-model="merchant_documents" data-col="back"
                                        data-name="{{ checkAndReturnValue($agentDetails, 'proof_of_address') }}"
                                        data-field="proof_of_address" accept="image/*">
                                    <input type="hidden" name="proof_of_address"
                                        value="{{ checkAndReturnValue($agentDetails, 'proof_of_address') }}">
                                </div>
                            </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($agentDetails, 'local_id') }}" data-model="merchants"
                                    data-col="kyc_form"
                                    data-name="{{ checkAndReturnValue($agentDetails, 'company_name') }}"
                                    data-field="company_name" accept="image/*">
                                <input type="hidden" name="kyc_form"
                                    value="{{ checkAndReturnValue($agentDetails, '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($agentDetails, 'nid_front') ? checkAndReturnValue($agentDetails, 'nid_front') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'nid_front') ? checkAndReturnValue($agentDetails, 'nid_front') : asset('img/default.png') }}"
                                    class="nid_front_src" style="width: 275px; height: auto;" onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block ">
                                <p class="title">{{ __('form.national_id_back') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'nid_back') ? checkAndReturnValue($agentDetails, 'nid_back') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'nid_back') ? checkAndReturnValue($agentDetails, 'nid_back') : asset('img/default.png') }}"
                                    class="nid_back_src" style="width: 275px; height: auto;" onclick="imgModal(this)">
                            </div>

                            <div class="fileDisplay block">
                                <p class="title">{{ __('form.passport_first_page') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'passport_front') ? checkAndReturnValue($agentDetails, 'passport_front') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'passport_front') ? checkAndReturnValue($agentDetails, 'passport_front') : asset('img/default.png') }}"
                                    class="passport_front_src" style="width: 275px; height: auto;"
                                    onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block d-none">
                                <p class="title">{{ __('form.passport_sec_page') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'passport_back') ? checkAndReturnValue($agentDetails, 'passport_back') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'passport_back') ? checkAndReturnValue($agentDetails, 'passport_back') : asset('img/default.png') }}"
                                    class="passport_back_src" style="width: 275px; height: auto;"
                                    onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block">
                                <p class="title">{{ __('company.company_regist_certificate') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'company_registration_certificate') ? checkAndReturnValue($agentDetails, 'company_registration_certificate') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'company_registration_certificate') ? checkAndReturnValue($agentDetails, 'company_registration_certificate') : asset('img/default.png') }}"
                                    class="company_registration_certificate_src" style="width: 275px; height: auto;"
                                    onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block">
                                <p class="title">{{ __('company.company_pan_tax') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'pan_tax_card') ? checkAndReturnValue($agentDetails, 'pan_tax_card') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'pan_tax_card') ? checkAndReturnValue($agentDetails, 'pan_tax_card') : asset('img/default.png') }}"
                                    class="pan_tax_card_src" style="width: 275px; height: auto;"
                                    onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block">
                                <p class="title">{{ __('form.kyc_form') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'kyc_form') ? checkAndReturnValue($agentDetails, 'kyc_form') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'kyc_form') ? checkAndReturnValue($agentDetails, 'kyc_form') : asset('img/default.png') }}"
                                    class="kyc_form_src" style="width: 275px; height: auto;" onclick="imgModal(this)">
                            </div>
                            <div class="fileDisplay block">
                                <p class="title">{{ __('company.power_autonomy') }}</p>
                                <img src="{{ checkAndReturnValue($agentDetails, 'proof_of_address') ? checkAndReturnValue($agentDetails, 'proof_of_address') : asset('img/default.png') }}"
                                    data-src="{{ checkAndReturnValue($agentDetails, 'proof_of_address') ? checkAndReturnValue($agentDetails, 'proof_of_address') : asset('img/default.png') }}"
                                    class="proof_of_address_src" style="width: 275px; height: auto;"
                                    onclick="imgModal(this)">
                            </div>

                        </div>
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="id">
                        <input type="hidden" name="status" value="">
                        @if (!in_array(strtoupper(checkAndReturnValue($agentDetails, 'status')), ['ACTIVE', 'VERIFIED']))
                            <div class="col-md-12">
                                <button type="submit" class="btn submit-confirm btn-info btn-sm">
                                    {{ __('form.submit_approval') }}
                                </button>
                                <button type="button" class="btn btn-sm  submit-confirm btn-success"
                                    id="saveBtn">
                                    {{ __('voyager::generic.save') }}
                                </button>
                                @if (hasPermission('reject', 'Merchant') &&
                                        !in_array(checkAndReturnValue($agentDetails, 'status'), ['REJECTED', 'DEACTIVE', 'VERIFIED']))
                                    <button title="Reject" class="btn btn-sm  mr-1 btn-danger pull-right reject"
                                        type="button" data-toggle="modal" data-target="#rejectModal">
                                        <i class="voyager-x"></i> <span
                                            class="hidden-xs hidden-sm">{{ __('voyager::datatable.reject') }}</span>
                                    </button>
                                @endif
                            </div>
                         @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" name="rejection_reason"
                            placeholder="{{ __('voyager::form.comments') }}..." required>{{ checkAndReturnValue($agentDetails, '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>
        alertMessage()
        $(document).ready(function() {
            $(".merchant-tab-section .nav-link").on('click', function() {
                activateTab($(this).data('target'));
            });
            $("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: "MERCHANT_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(reader)
                                    $(`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.`);
                }
            });
        });

        function activateTab(target = '', isError = false) {
            $(".nav-tabs button").removeClass('active').removeClass('error');
            $('.merchant-tab-content-section').addClass('d-none')
            $(`.${target}`).removeClass('d-none')
            $(`.merchant-tab-section .nav-link`).removeClass('active')
            $(`.${target}-tab`).addClass(isError == true ? 'error' : 'active')
        }
        document.getElementById("merchantForm").addEventListener("submit", function(event) {
            event.preventDefault();
            let formData = new FormData(this);
            $("#merchantForm input").removeClass('border-warning');
            let company_name = $("#merchantForm input[name=company_name]").val();
            if (!company_name) {
                toastr.error("The company name is required.");
                $("#merchantForm input[name=company_name]").addClass('border-warning');
                activateTab('company-info-section', true)
                return false;
            }

            let contact_number = $("#merchantForm input[name=contact_number]").val();
            if (!contact_number) {
                toastr.error("The contact number is required.");
                $("#merchantForm input[name=contact_number]").addClass('border-warning');
                activateTab('company-info-section', true)
                return false;
            }
            // let company_email = $("#merchantForm input[name=company_email]").val();
            // if (!company_email) {
            //     toastr.error("The company email is required.");
            //     $("#merchantForm input[name=company_email]").addClass('border-warning');
            //     activateTab('company-info-section', true)
            //     return false;
            // }
            let geolocation = $("#merchantForm input[name=geolocation]").val();
            if (!geolocation) {
                toastr.error("The geolocation is required.");
                $("#merchantForm input[name=geolocation]").addClass('border-warning');
                activateTab('company-info-section', true)
                return false;
            }
            let commercial_reg_number = $("#merchantForm input[name=commercial_reg_number]").val();
            if (!commercial_reg_number) {
                toastr.error("The commercial registration number is required.");
                $("#merchantForm input[name=commercial_reg_number]").addClass('border-warning');
                activateTab('company-info-section', true)
                return false;
            }
            // let en_name = $("#merchantForm input[name=en_name]").val();
            // if (!en_name) {
            //     toastr.error("The authorized person name is required.");
            //     $("#merchantForm input[name=en_name]").addClass('border-warning');
            //     activateTab('authorized-persion-info-section', true)
            //     return false;
            // }
            let en_name = $("#merchantForm input[name=ar_name]").val();
            if (!en_name) {
                toastr.error("The authorized person name is required.");
                $("#merchantForm input[name=ar_name]").addClass('border-warning');
                activateTab('authorized-persion-info-section', true)
                return false;
            }

            let mobile_number = $("#merchantForm input[name=mobile_number]").val();
            if (!mobile_number) {
                toastr.error("The authorized person mobile number is required.");
                $("#merchantForm input[name=mobile_number]").addClass('border-warning');
                activateTab('authorized-persion-info-section', true)
                return false;
            }
            let kyc_form = $("#merchantForm input[name=kyc_form]").val();
            if (!kyc_form) {
                toastr.error("The KYC is required.");
                $("#merchantForm input[name=kyc_form_picker]").addClass('border-warning');
                activateTab('documents-section', true)
                return false;
            }

            loaderEvent(true);
            this.submit()
        });



        $(document).ready(function() {
            $("#saveBtn").on("click", function() {
                $("#merchantForm input[name='status']").val(5);
                $("#merchantForm").submit();
            });

        });


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

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

                $('#merchantForm').submit();
            });
        });
    </script>
@stop
@section('css')
    <style>
        /* Flexbox container with flex-wrap */
        .file-display-group {
            display: flex;
            flex-wrap: wrap;
        }

        /* Styling for each file display block */
        .fileDisplay {
            flex: 1 1 23%;
            /* Adjust width as needed for spacing */
            margin: 10px;
            /* Adjust margin for spacing between elements */
        }

        .block {
            flex: 1 0 calc(25% - 20px);
            /* Adjust width to fit 4 items per row with margin */
            margin: 10px;
        }
    </style>
@stop