@extends('front.layouts.master-auth')

@section('css')
<style>
.iv-page-inner{max-width:760px;width:100%;margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box;}
.iv-card{background:#fff;padding:15px;border-radius:0;box-shadow:none;}
.iv-card .add-project-form.identity-verification-form{background:transparent;padding:0;box-shadow:none;max-width:100%;width:100%;overflow-x:hidden;}
.iv-card--success{text-align:center;border-top:4px solid #22c55e;}
.iv-card__icon{margin-bottom:16px;}
.iv-card__header{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:#1e293b;}
.iv-card__title{font-size:1.4rem;font-weight:700;margin:0;}
.iv-card__subtitle{color:#64748b;margin:8px 0 15px;}
.identity-verification-form .form-group{margin-bottom:16px;}
.identity-verification-form .input-line{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-bottom:16px;}
.identity-verification-form .input-line .form-group{margin-bottom:0;min-width:0;}
.identity-verification-form .input-line .form-group .form-control,
.identity-verification-form .input-line .form-group .select2-container{width:100%!important;max-width:100%;}
.iv-input-hint--row{margin:-8px 0 16px;}
@media(max-width:767px){
.identity-verification-form .input-line{grid-template-columns:1fr;gap:0;}
.identity-verification-form .input-line .form-group{margin-bottom:16px;}
.identity-verification-form .input-line .form-group:last-child{margin-bottom:0;}
.iv-input-hint--row{margin-top:0;}
}
.identity-verification-form .form-control.is-invalid,
.identity-verification-form select.form-control.is-invalid{border-color:#dc3545;}
.identity-verification-form .form-control::placeholder{color:#94a3b8;opacity:1;}
.identity-verification-form input.form-control[type="date"]{padding:8px 12px;line-height:1.35;min-height:46px;}
.identity-verification-form select.form-control{line-height:1.3;min-height:46px;padding:8px 12px;padding-inline-end:36px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;}
[dir="rtl"] .identity-verification-form select.form-control{background-position:left 12px center;}
.identity-verification-form .alert.alert-danger{margin-top:8px;margin-bottom:0;padding:8px 12px;font-size:13px;line-height:1.45;}
.iv-input-hint{margin:6px 0 0;font-size:.8rem;color:#94a3b8;line-height:1.45;}
.iv-images-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;}
.iv-images-grid.iv-images-grid--passport{grid-template-columns:repeat(2,1fr);}
@media(max-width:600px){.iv-images-grid,.iv-images-grid.iv-images-grid--passport{grid-template-columns:1fr;}}
.iv-upload-box{border:2px dashed #e2e8f0;padding:20px 12px;text-align:center;transition:border .2s;position:relative;border-radius:0;}
.iv-upload-box.has-file{border-color:#60d049;background:#f0fdf4;}
.iv-upload-box.iv-upload-box--has-error{border-color:#dc3545;}
.iv-upload-box--back[hidden]{display:none !important;}
.iv-upload-label{display:flex;flex-direction:column;align-items:center;gap:8px;}
.iv-upload-icon{font-size:2rem;}
.iv-upload-text{font-size:.9rem;font-weight:600;color:#374151;}
.iv-upload-hint{font-size:.75rem;color:#94a3b8;}
.iv-upload-preview{width:100%;height:120px;object-fit:cover;margin-top:8px;border-radius:0;}
.iv-file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.iv-submit-wrap{display:flex;justify-content:flex-start;margin-top:4px;}
.iv-btn-submit{width:auto;padding:10px 22px;background-color:var(--primary-color,#14965A);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s ease,opacity .2s ease;border-radius:0;box-shadow:none;line-height:1.2;}
.iv-btn-submit:hover:not(:disabled){background-color:var(--secondery-color,#19B36B);color:#fff;}
.iv-btn-submit:disabled{opacity:.88;cursor:wait;}
.iv-btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:iv-btn-spin .65s linear infinite;flex-shrink:0;}
.identity-verification-form .select2-container{width:100%!important;max-width:100%!important;box-sizing:border-box;}
.identity-verification-form .select2-container .select2-selection--single{min-height:46px;border:1.5px solid #e2e8f0;border-radius:0;display:flex;align-items:center;}
.identity-verification-form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.35;padding:8px 12px;}
.identity-verification-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;}
.identity-verification-form .select2-container--default.select2-container--focus .select2-selection--single,
.identity-verification-form .select2-container--default.select2-container--open .select2-selection--single{border-color:#60d049;}
.identity-verification-form .select2-container--default.select2-container--invalid .select2-selection--single{border-color:#dc3545;}
@keyframes iv-btn-spin{to{transform:rotate(360deg);}}
</style>
@endsection

@section('content')
@php
    $profileBirth = '';
    if (!empty($user->birth_date)) {
        try {
            $profileBirth = \Illuminate\Support\Carbon::parse($user->birth_date)->format('Y-m-d');
        } catch (\Throwable $e) {
            $profileBirth = '';
        }
    }
    // بعد الرفض أو عند العودة للصفحة: البيانات في آخر طلب، وليس في old() (الذي يعمل فقط بعد redirect من التحقق)
    $ivIdType = old('id_type', isset($verification) && $verification ? ($verification->id_type ?? '') : '');
    $ivFirstNameAr = old('first_name_ar', isset($verification) && $verification ? ($verification->first_name_ar ?? '') : ($user->first_name ?? ''));
    $ivLastNameAr = old('last_name_ar', isset($verification) && $verification ? ($verification->last_name_ar ?? '') : ($user->last_name ?? ''));
    $ivFirstNameEn = old('first_name_en', isset($verification) && $verification ? ($verification->first_name_en ?? '') : '');
    $ivLastNameEn = old('last_name_en', isset($verification) && $verification ? ($verification->last_name_en ?? '') : '');
    $ivCountryId = old('country_id', isset($verification) && $verification ? ($verification->country_id ?? '') : ($user->country_id ?? ''));
    $ivIdNumber = old('id_number', isset($verification) && $verification ? ($verification->id_number ?? '') : '');
    $ivBirthDate = old(
        'birth_date',
        isset($verification) && $verification && $verification->birth_date
            ? $verification->birth_date->format('Y-m-d')
            : $profileBirth
    );
    $ivGender = old(
        'gender',
        isset($verification) && $verification && $verification->gender
            ? $verification->gender
            : ($user->gender ?? '')
    );
    $ivPassport = \App\Models\IdentityVerification::isPassport($ivIdType);
@endphp
<!-- Start Page Content -->
<section class="page-content">
<div class="container iv-page-inner" style="max-width:760px;width:100%;margin-inline:auto;">

    {{-- ────────────── حالة: هوية موثّقة ────────────── --}}
    @if(!empty($user->identity_verified_at))
        <div class="iv-card iv-card--success">
            <div class="iv-card__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 20 20" fill="none">
                    <circle cx="10" cy="10" r="10" fill="#22c55e"/>
                    <path d="M6 10L9 13L14 7" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h2 class="iv-card__title">هويتك موثَّقة ✓</h2>
            <p class="iv-card__subtitle">تم توثيق هويتك بتاريخ
                <strong>{{ \Carbon\Carbon::parse($user->identity_verified_at)->translatedFormat('d F Y') }}</strong>.
            </p>
        </div>

    {{-- ────────────── حالة: طلب pending ────────────── --}}
    @elseif(isset($verification) && $verification && $verification->isPending())
        @include('front.user.identity-verification._status_card', ['verification' => $verification])

    {{-- ────────────── حالة: طلب مرفوض أو لا يوجد طلب ────────────── --}}
    @else
        @if(isset($verification) && $verification && $verification->isRejected())
            @include('front.user.identity-verification._status_card', ['verification' => $verification])
        @endif

        {{-- نموذج الإرسال --}}
        <div class="iv-card">
            <div class="iv-card__header">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                <h1 class="iv-card__title">توثيق الهوية</h1>
            </div>
            <p class="iv-card__subtitle">أرسل بياناتك وصور هويتك لنراجعها ونوثّق حسابك. هذا يزيد من ثقة أصحاب المشاريع.</p>

            <form action="{{ route('user.identity-verification.store') }}" method="POST" enctype="multipart/form-data" class="add-project-form identity-verification-form" id="iv-form">
                @csrf

                @if ($errors->has('general'))
                    <div class="alert alert-danger">{{ $errors->first('general') }}</div>
                @endif

                <div id="iv-form-errors" class="alert alert-danger" role="alert" style="display:none;margin-bottom:16px;"></div>

                <div class="input-line">
                    <div class="form-group">
                        <label for="first_name_ar">الاسم الأول (عربي) <span style="color: red;">*</span></label>
                        <input type="text" id="first_name_ar" name="first_name_ar" class="form-control"
                               value="{{ $ivFirstNameAr }}" maxlength="50"
                               placeholder="كما في الهوية">
                        @error('first_name_ar')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="last_name_ar">اسم العائلة (عربي) <span style="color: red;">*</span></label>
                        <input type="text" id="last_name_ar" name="last_name_ar" class="form-control"
                               value="{{ $ivLastNameAr }}" maxlength="50"
                               placeholder="كما في الهوية">
                        @error('last_name_ar')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="input-line">
                    <div class="form-group">
                        <label for="first_name_en">الاسم الأول (إنجليزي) <span style="color: red;">*</span></label>
                        <input type="text" id="first_name_en" name="first_name_en" class="form-control"
                               value="{{ $ivFirstNameEn }}" maxlength="50"
                               placeholder="كما في الهوية">
                        @error('first_name_en')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="last_name_en">اسم العائلة (إنجليزي) <span style="color: red;">*</span></label>
                        <input type="text" id="last_name_en" name="last_name_en" class="form-control"
                               value="{{ $ivLastNameEn }}" maxlength="50"
                               placeholder="كما في الهوية">
                        @error('last_name_en')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="input-line">
                    <div class="form-group">
                        <label for="id_type">نوع الهوية <span style="color: red;">*</span></label>
                        <select id="id_type" name="id_type" class="form-control no-select2"
                                title="حدّد نوع الوثيقة التي ستُرفق صورها (هوية، جواز، رخصة، إقامة، أو وثيقة أخرى)">
                            <option value="" disabled @selected($ivIdType === '' || $ivIdType === null)>اختر نوع الوثيقة</option>
                            @foreach(\App\Models\IdentityVerification::idTypeLabels() as $typeValue => $typeLabel)
                                <option value="{{ $typeValue }}" @selected($ivIdType === $typeValue)>{{ $typeLabel }}</option>
                            @endforeach
                        </select>
                        @error('id_type')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="id_number"><span id="iv-label-id-number">{{ \App\Models\IdentityVerification::idNumberLabel($ivIdType ?: null) }}</span> <span style="color: red;">*</span></label>
                        <input type="text" id="id_number" name="id_number" class="form-control"
                               value="{{ $ivIdNumber }}" maxlength="50"
                               placeholder="{{ \App\Models\IdentityVerification::idNumberPlaceholder($ivIdType ?: null) }}"
                               title="رقم الوثيقة كما هو مسجّل عليها">
                        @error('id_number')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="input-line">
                    <div class="form-group">
                        <label for="country_id">الدولة <span style="color: red;">*</span></label>
                        <select id="country_id" name="country_id" class="form-control select2 iv-country-select">
                            <option value="" @selected(empty($ivCountryId))>اختر الدولة</option>
                            @foreach($countries ?? [] as $country)
                                <option value="{{ $country->id }}" @selected((string) $ivCountryId === (string) $country->id)>{{ $country->name }}</option>
                            @endforeach
                        </select>
                        @error('country_id')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="gender">الجنس <span style="color: red;">*</span></label>
                        <select id="gender" name="gender" class="form-control no-select2">
                            <option value="" disabled @selected(empty($ivGender))>اختر الجنس</option>
                            <option value="male" @selected($ivGender === 'male')>@lang('Male')</option>
                            <option value="female" @selected($ivGender === 'female')>@lang('Female')</option>
                        </select>
                        @error('gender')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <label for="birth_date">تاريخ الميلاد <span style="color: red;">*</span></label>
                    <input type="date" id="birth_date" name="birth_date" class="form-control"
                           value="{{ $ivBirthDate }}" max="{{ \Carbon\Carbon::yesterday()->format('Y-m-d') }}">
                    @error('birth_date')
                        <div class="alert alert-danger">{{ $message }}</div>
                    @enderror
                </div>

                {{-- صور الهوية --}}
                <div class="iv-images-grid @if($ivPassport) iv-images-grid--passport @endif" id="iv-images-grid">
                    <div class="iv-upload-box @error('id_front') iv-upload-box--has-error @enderror" id="box-id_front">
                        <label for="id_front" class="iv-upload-label" style="cursor:pointer;">
                            <span class="iv-upload-icon">🪪</span>
                            <span class="iv-upload-text" id="iv-label-front">{{ \App\Models\IdentityVerification::frontUploadLabel($ivIdType ?: null) }}</span>
                            <span class="iv-upload-hint" id="iv-hint-front">{{ \App\Models\IdentityVerification::frontUploadHint($ivIdType ?: null) }}</span>
                            <img class="iv-upload-preview" id="preview-id_front" src="" alt="" style="display:none;">
                        </label>
                        <input type="file" id="id_front" name="id_front"
                               class="iv-file-input form-control-file" accept="image/jpeg,image/png,image/webp"
                               title="ارفع صورة واضحة للوجه الأمامي للهوية أو لصفحة جواز السفر الرئيسية"
                               onchange="previewImage(this, 'preview-id_front', 'box-id_front')">
                        @error('id_front')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="iv-upload-box iv-upload-box--back @error('id_back') iv-upload-box--has-error @enderror" id="box-id_back" @if($ivPassport) hidden @endif>
                        <label for="id_back" class="iv-upload-label" style="cursor:pointer;">
                            <span class="iv-upload-icon">🔁</span>
                            <span class="iv-upload-text">الوجه الخلفي للوثيقة</span>
                            <span class="iv-upload-hint">صورة واضحة للوجه الخلفي (التوقيع أو الباركود أو البيانات الإضافية إن وُجدت) · JPG أو PNG أو WEBP · حتى 5 ميجا — غير مطلوب لجواز السفر.</span>
                            <img class="iv-upload-preview" id="preview-id_back" src="" alt="" style="display:none;">
                        </label>
                        <input type="file" id="id_back" name="id_back"
                               class="iv-file-input form-control-file" accept="image/jpeg,image/png,image/webp"
                               title="الوجه الخلفي للوثيقة (غير مطلوب لجواز السفر)"
                               onchange="previewImage(this, 'preview-id_back', 'box-id_back')">
                        @error('id_back')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="iv-upload-box @error('selfie_with_id') iv-upload-box--has-error @enderror" id="box-selfie_with_id">
                        <label for="selfie_with_id" class="iv-upload-label" style="cursor:pointer;">
                            <span class="iv-upload-icon">🤳</span>
                            <span class="iv-upload-text" id="iv-label-selfie">{{ \App\Models\IdentityVerification::selfieLabel($ivIdType ?: null) }}</span>
                            <span class="iv-upload-hint" id="iv-hint-selfie">{{ \App\Models\IdentityVerification::selfieHint($ivIdType ?: null) }}</span>
                            <img class="iv-upload-preview" id="preview-selfie_with_id" src="" alt="" style="display:none;">
                        </label>
                        <input type="file" id="selfie_with_id" name="selfie_with_id"
                               class="iv-file-input form-control-file" accept="image/jpeg,image/png,image/webp"
                               title="صورة سيلفي وأنت تمسك الهوية أو جواز السفر بجانب وجهك بوضوح"
                               onchange="previewImage(this, 'preview-selfie_with_id', 'box-selfie_with_id')">
                        @error('selfie_with_id')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="iv-submit-wrap">
                    <button type="submit" class="iv-btn-submit" id="btn-submit-identity">
                        <span class="iv-btn-submit__label">إرسال طلب التوثيق</span>
                    </button>
                </div>
            </form>
        </div>
    @endif
</div>
</section>
<!-- End Page Content -->

<script>
function previewImage(input, previewId, boxId) {
    const preview = document.getElementById(previewId);
    const box     = document.getElementById(boxId);
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            preview.style.display = 'block';
            box.classList.add('has-file');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

(function () {
    const IV_TYPE_UI = @json(\App\Models\IdentityVerification::idTypeUiForClient());
    const IV_DEFAULT_UI = {
        numberLabel: 'رقم الوثيقة',
        numberPlaceholder: 'أدخل الرقم بعد اختيار نوع الوثيقة',
        labelFront: 'الوجه الأمامي للوثيقة',
        hintFront: 'صورة واضحة للوجه الأمامي للوثيقة بالكامل دون قصّ (JPG أو PNG أو WEBP · حتى 5 ميجا).',
        labelSelfie: 'سيلفي مع الوثيقة (إلزامي)',
        hintSelfie: 'التقط صورة لنفسك وأمسك الوثيقة بجانب وجهك بحيث تظهر أنت والوثيقة واضحتين دون تغطية الوجه.',
    };
    const typeSel = document.getElementById('id_type');
    const backBox = document.getElementById('box-id_back');
    const backInput = document.getElementById('id_back');
    const grid = document.getElementById('iv-images-grid');
    const labelFront = document.getElementById('iv-label-front');
    const labelSelfie = document.getElementById('iv-label-selfie');
    const hintFront = document.getElementById('iv-hint-front');
    const hintSelfie = document.getElementById('iv-hint-selfie');
    const labelIdNumber = document.getElementById('iv-label-id-number');
    const inputIdNumber = document.getElementById('id_number');
    if (!typeSel || !backBox || !backInput || !grid) return;

    function syncIdType() {
        const val = typeSel.value;
        const isPassport = val === 'passport';
        const ui = IV_TYPE_UI[val] || IV_DEFAULT_UI;
        if (labelFront) labelFront.textContent = ui.labelFront;
        if (labelSelfie) labelSelfie.textContent = ui.labelSelfie;
        if (hintFront) hintFront.textContent = ui.hintFront;
        if (hintSelfie) hintSelfie.textContent = ui.hintSelfie;
        if (labelIdNumber) labelIdNumber.textContent = ui.numberLabel;
        if (inputIdNumber) inputIdNumber.placeholder = ui.numberPlaceholder;
        if (isPassport) {
            backBox.setAttribute('hidden', '');
            grid.classList.add('iv-images-grid--passport');
            backInput.disabled = true;
            backInput.value = '';
            const prev = document.getElementById('preview-id_back');
            if (prev) { prev.src = ''; prev.style.display = 'none'; }
            backBox.classList.remove('has-file');
        } else {
            backBox.removeAttribute('hidden');
            grid.classList.remove('iv-images-grid--passport');
            backInput.disabled = false;
        }
    }

    typeSel.addEventListener('change', syncIdType);
    syncIdType();
})();

(function () {
    const form = document.getElementById('iv-form');
    const btn = document.getElementById('btn-submit-identity');
    if (!form || !btn) return;
    const IV_ALLOWED_TYPES = @json(\App\Models\IdentityVerification::allowedIdTypes());
    const labelEl = btn.querySelector('.iv-btn-submit__label');
    const defaultLabel = labelEl ? labelEl.textContent : btn.textContent;
    const MAX_FILE_BYTES = 5120 * 1024;
    const OK_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];

    function ivClearClientErrors() {
        const summary = document.getElementById('iv-form-errors');
        if (summary) {
            summary.style.display = 'none';
            summary.textContent = '';
        }
        form.querySelectorAll('.iv-js-error-msg').forEach(function (n) { n.remove(); });
        form.querySelectorAll('.form-control').forEach(function (el) { el.classList.remove('is-invalid'); });
        form.querySelectorAll('.iv-upload-box').forEach(function (el) { el.classList.remove('iv-upload-box--has-error'); });
        if (typeof jQuery !== 'undefined') {
            jQuery('#country_id').next('.select2-container').removeClass('select2-container--invalid');
        }
    }

    function ivAddTextError(inputId, msg) {
        const el = document.getElementById(inputId);
        if (!el) return;
        el.classList.add('is-invalid');
        if (inputId === 'country_id' && typeof jQuery !== 'undefined') {
            jQuery('#country_id').next('.select2-container').addClass('select2-container--invalid');
        }
        const wrap = el.closest('.form-group');
        if (!wrap) return;
        const div = document.createElement('div');
        div.className = 'alert alert-danger iv-js-error-msg';
        div.textContent = msg;
        wrap.appendChild(div);
    }

    function ivAddBoxError(boxId, msg) {
        const box = document.getElementById(boxId);
        if (!box) return;
        box.classList.add('iv-upload-box--has-error');
        const div = document.createElement('div');
        div.className = 'alert alert-danger iv-js-error-msg';
        div.style.marginTop = '10px';
        div.textContent = msg;
        box.appendChild(div);
    }

    function ivImageFileOk(file) {
        if (!file || !file.size) return { ok: false, msg: 'required' };
        if (file.size > MAX_FILE_BYTES) return { ok: false, msg: 'size' };
        const name = (file.name || '').toLowerCase();
        if (OK_IMAGE_TYPES.indexOf(file.type) !== -1) return { ok: true };
        if (/\.(jpe?g|png|webp)$/.test(name)) return { ok: true };
        return { ok: false, msg: 'mime' };
    }

    function ivValidateForm() {
        ivClearClientErrors();
        let hasError = false;
        const mark = function (fn) {
            const r = fn();
            if (!r) hasError = true;
            return r;
        };

        function ivValidateNameField(id, label) {
            const val = (document.getElementById(id).value || '').trim();
            if (!val) {
                ivAddTextError(id, label + ' مطلوب.');
                return false;
            }
            if (val.length < 2) {
                ivAddTextError(id, label + ' يجب أن يكون حرفين على الأقل.');
                return false;
            }
            if (val.length > 50) {
                ivAddTextError(id, label + ' طويل جداً.');
                return false;
            }
            return true;
        }

        mark(function () { return ivValidateNameField('first_name_ar', 'الاسم الأول (عربي)'); });
        mark(function () { return ivValidateNameField('last_name_ar', 'اسم العائلة (عربي)'); });
        mark(function () { return ivValidateNameField('first_name_en', 'الاسم الأول (إنجليزي)'); });
        mark(function () { return ivValidateNameField('last_name_en', 'اسم العائلة (إنجليزي)'); });

        mark(function () {
            const countryEl = document.getElementById('country_id');
            if (!countryEl || !countryEl.value) {
                ivAddTextError('country_id', 'الدولة مطلوبة.');
                return false;
            }
            return true;
        });

        mark(function () {
            const genderEl = document.getElementById('gender');
            if (!genderEl || !genderEl.value || (genderEl.value !== 'male' && genderEl.value !== 'female')) {
                ivAddTextError('gender', 'الجنس مطلوب.');
                return false;
            }
            return true;
        });

        const idTypeEl = document.getElementById('id_type');
        const idType = idTypeEl ? idTypeEl.value : '';
        mark(function () {
            if (!idType || IV_ALLOWED_TYPES.indexOf(idType) === -1) {
                ivAddTextError('id_type', 'نوع الوثيقة مطلوب.');
                return false;
            }
            return true;
        });

        const idNum = (document.getElementById('id_number').value || '').replace(/\s+/g, '');
        mark(function () {
            if (!idNum) {
                ivAddTextError('id_number', 'رقم الوثيقة مطلوب.');
                return false;
            }
            if (idNum.length > 50) {
                ivAddTextError('id_number', 'رقم الوثيقة طويل جداً.');
                return false;
            }
            return true;
        });

        const birthEl = document.getElementById('birth_date');
        mark(function () {
            if (!birthEl || !birthEl.value) {
                ivAddTextError('birth_date', 'تاريخ الميلاد مطلوب.');
                return false;
            }
            const v = birthEl.value;
            const maxA = birthEl.getAttribute('max');
            if (maxA && v > maxA) {
                ivAddTextError('birth_date', 'تاريخ الميلاد يجب أن يكون قبل اليوم.');
                return false;
            }
            const d = new Date(v + 'T12:00:00');
            if (isNaN(d.getTime())) {
                ivAddTextError('birth_date', 'تاريخ الميلاد غير صالح.');
                return false;
            }
            return true;
        });

        const frontIn = document.getElementById('id_front');
        const frontFile = frontIn && frontIn.files && frontIn.files[0];
        mark(function () {
            const r = ivImageFileOk(frontFile);
            if (r.ok) return true;
            if (r.msg === 'required') ivAddBoxError('box-id_front', 'صورة الوجه الأمامي للوثيقة مطلوبة.');
            else if (r.msg === 'size') ivAddBoxError('box-id_front', 'حجم صورة الوجه الأمامي يجب ألا يتجاوز 5 ميجابايت.');
            else ivAddBoxError('box-id_front', 'صيغة صورة الوجه الأمامي يجب أن تكون JPG أو PNG أو WEBP.');
            return false;
        });

        if (idType && idType !== 'passport') {
            const backIn = document.getElementById('id_back');
            const backFile = backIn && !backIn.disabled && backIn.files && backIn.files[0];
            mark(function () {
                const r = ivImageFileOk(backFile);
                if (r.ok) return true;
                if (r.msg === 'required') ivAddBoxError('box-id_back', 'صورة الوجه الخلفي للوثيقة مطلوبة لهذا النوع.');
                else if (r.msg === 'size') ivAddBoxError('box-id_back', 'حجم صورة الوجه الخلفي يجب ألا يتجاوز 5 ميجابايت.');
                else ivAddBoxError('box-id_back', 'صيغة صورة الوجه الخلفي يجب أن تكون JPG أو PNG أو WEBP.');
                return false;
            });
        }

        const selfieIn = document.getElementById('selfie_with_id');
        const selfieFile = selfieIn && selfieIn.files && selfieIn.files[0];
        mark(function () {
            const r = ivImageFileOk(selfieFile);
            if (r.ok) return true;
            if (r.msg === 'required') ivAddBoxError('box-selfie_with_id', 'صورة السيلفي مع الوثيقة مطلوبة.');
            else if (r.msg === 'size') ivAddBoxError('box-selfie_with_id', 'حجم صورة السيلفي يجب ألا يتجاوز 5 ميجابايت.');
            else ivAddBoxError('box-selfie_with_id', 'صيغة صورة السيلفي يجب أن تكون JPG أو PNG أو WEBP.');
            return false;
        });

        if (hasError) {
            const summary = document.getElementById('iv-form-errors');
            if (summary) {
                summary.style.display = 'block';
                summary.textContent = 'يرجى تصحيح الحقول أدناه قبل الإرسال.';
                summary.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            const firstInvalid = form.querySelector('.form-control.is-invalid, .iv-upload-box--has-error');
            if (firstInvalid) {
                const focusEl = firstInvalid.querySelector('input:not([type=file]), select, textarea')
                    || firstInvalid.querySelector('input[type=file]');
                if (focusEl) focusEl.focus({ preventScroll: true });
            }
            return false;
        }
        return true;
    }

    form.addEventListener('submit', function (e) {
        if (btn.disabled) return;
        if (!ivValidateForm()) {
            e.preventDefault();
            return;
        }
        btn.disabled = true;
        if (labelEl) {
            labelEl.innerHTML = '<span class="iv-btn-spinner" aria-hidden="true"></span> جاري الإرسال…';
        } else {
            btn.innerHTML = '<span class="iv-btn-spinner" aria-hidden="true"></span> جاري الإرسال…';
        }
    });

    window.addEventListener('pageshow', function (e) {
        if (e.persisted && btn) {
            btn.disabled = false;
            if (labelEl) labelEl.textContent = defaultLabel;
        }
    });
})();
</script>
@endsection

@section('js-body')
<script>
$(function () {
    var $country = $('#country_id');
    if (!$country.length || typeof $.fn.select2 === 'undefined') return;
    if ($country.data('select2')) return;
    $country.select2({
        width: '100%',
        placeholder: 'اختر الدولة',
        minimumResultsForSearch: 0,
        language: {
            noResults: function () { return 'لا توجد نتائج'; },
            searching: function () { return 'جاري البحث...'; },
            inputTooShort: function () { return 'اكتب للبحث عن الدولة'; }
        }
    });
    $country.on('select2:open', function () {
        var $search = $country.data('select2').$dropdown.find('.select2-search__field');
        $search.attr('placeholder', 'ابحث عن الدولة...');
    });
});
</script>
@endsection