@extends('layouts.master')

@php
    $isEdit = isset($member);
    $action = $isEdit ? route('members.update', $member) : route('members.store');
@endphp

@section('title', $isEdit ? 'تعديل عضو' : 'إضافة عضو')
@section('pages') {{ __('dashboard.home') }} @endsection

@section('css')
    <style>
        .card-section {
            background: #0f1e2b;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px
        }

        .tabs-sticky {
            position: sticky;
            top: 60px;
            z-index: 8
        }

        .tabs-sticky .nav-tabs {
            background: #0f1e2b;
            border-radius: 12px;
            padding: 6px
        }

        .img-thumb {
            max-height: 80px;
            border-radius: 8px
        }
    </style>

    <style>
        :root {
            --u-bg: #0b1621;
            --u-panel: #0d1b27;
            --u-dash: #28465e;
            --u-fg: #cfe7ff;
            --u-sub: #8fb7d6;
            --u-ok: #22c55e;
            --u-err: #ef4444;
            --u-grad: linear-gradient(135deg, #06b6d4 0%, #22c55e 100%);
        }

        .u-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(12, 1fr)
        }

        @media (min-width:768px) {
            .u-grid>[class*=u-col-] {
                grid-column: auto/span 4
            }
        }

        .u-card {
            position: relative;
            border-radius: 16px;
            padding: 14px;
            background: var(--u-bg);
            border: 1px dashed var(--u-dash);
            transition: all .25s ease;
            box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
        }

        .u-card:hover {
            border-color: #3aa9ff
        }

        .u-card.dragover {
            border-color: #30d17d;
            background: #0b1b27
        }

        .u-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px
        }

        .u-title {
            font-weight: 700;
            color: var(--u-fg)
        }

        .u-hint {
            font-size: .8rem;
            color: var(--u-sub)
        }

        .u-actions {
            display: flex;
            gap: 8px
        }

        .u-btn {
            border-radius: 999px;
            border: 1px solid #2b4a64;
            background: #0f2230;
            color: #cfe7ff;
            padding: 6px 12px;
            font-size: .85rem;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: .2s;
        }

        .u-btn:hover {
            transform: translateY(-1px);
            border-color: #3aa9ff
        }

        .u-btn.icon {
            width: 34px;
            height: 34px;
            justify-content: center;
            padding: 0
        }

        .u-btn.del {
            border-color: #7a2b2b;
            color: #ffbcbc;
            background: #1a0f12
        }

        .u-stage {
            background: var(--u-panel);
            border-radius: 14px;
            min-height: 170px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden
        }

        .u-empty {
            color: #9cc0db;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .u-empty i {
            font-size: 30px;
            opacity: .8
        }

        .u-preview {
            max-height: 160px;
            max-width: 100%;
            display: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
        }

        .u-badge {
            position: absolute;
            top: 10px;
            inset-inline-start: 10px;
            background: #0e2433;
            color: #bfe6ff;
            border: 1px solid #23465e;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: .75rem
        }

        .u-check {
            position: absolute;
            top: 10px;
            inset-inline-end: 10px;
            background: #0e2433;
            border-radius: 999px;
            color: #7dffb6;
            border: 1px solid #225942;
            padding: 4px 8px;
            font-size: .8rem;
            display: none
        }

        .u-progress {
            height: 6px;
            background: #0c2332;
            border-radius: 999px;
            overflow: hidden;
            margin-top: 10px;
            display: none
        }

        .u-progress .bar {
            height: 100%;
            width: 0;
            background: var(--u-grad);
            transition: width .15s
        }

        .u-fileinfo {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            color: #9ec2df;
            font-size: .82rem;
            margin-top: 8px
        }

        .u-skeleton {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 100%);
            background-size: 200% 100%;
            animation: sk 1.2s linear infinite;
            display: none
        }

        @keyframes sk {
            to {
                background-position: -200% 0
            }
        }
    </style>

@endsection

@section('content')
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ $action }}" method="POST" enctype="multipart/form-data">
            @csrf @if ($isEdit)
                @method('PUT')
            @endif

            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <h5 class="mb-0">{{ $isEdit ? 'تعديل عضو' : 'إضافة عضو' }}</h5>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary"><i class="fas fa-save mx-2"></i>{{ $isEdit ? 'تحديث' : 'حفظ' }}</button>
                    <a class="btn btn-secondary" href="{{ route('members.index') }}">رجوع</a>
                </div>
            </div>

            <div class="tabs-sticky mb-3">
                <ul class="nav nav-tabs" id="tabs" role="tablist">
                    <li class="nav-item"><button class="nav-link active text-light" data-bs-toggle="tab"
                            data-bs-target="#tab-basic" type="button">البيانات الأساسية</button></li>
                    <li class="nav-item"><button class="nav-link text-light" data-bs-toggle="tab" data-bs-target="#tab-id"
                            type="button">الهوية</button></li>
                    <li class="nav-item"><button class="nav-link text-light" data-bs-toggle="tab"
                            data-bs-target="#tab-contact" type="button">التواصل والعنوان</button></li>
                    <li class="nav-item"><button class="nav-link text-light" data-bs-toggle="tab"
                            data-bs-target="#tab-attachments" type="button">الصور والمرفقات</button></li>
                    <li class="nav-item"><button class="nav-link text-light" data-bs-toggle="tab"
                            data-bs-target="#tab-extra" type="button">كيف تعرفت علينا</button></li>
                </ul>
            </div>

            <div class="tab-content">
                {{-- Basic --}}
                <div class="tab-pane fade show active" id="tab-basic">
                    <div class="card-section">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">الفرع <span class="text-danger">*</span></label>
                                <select name="branch_id" id="branch_id" class="form-select" {{ $isEdit ? 'disabled' : '' }}
                                    required>
                                    <option value="">— اختر —</option>
                                    @foreach (\App\Models\Branch::orderBy('id')->get(['id', 'name', 'branch_code']) as $b)
                                        <option value="{{ $b->id }}" @selected(old('branch_id', $isEdit ? $member->branch_id : null) == $b->id)>
                                            {{ method_exists($b, 'getTranslation') ? $b->getTranslation('name', app()->getLocale()) : (is_array($b->name) ? $b->name[app()->getLocale()] ?? ($b->name['en'] ?? '') : $b->name) }}
                                        </option>
                                    @endforeach
                                </select>
                                @if ($isEdit)
                                    <input type="hidden" name="branch_id" value="{{ $member->branch_id }}">
                                @endif
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">كود العضو</label>
                                <input type="text" id="code_preview" class="form-control"
                                    value="{{ $isEdit ? $member->member_code : '— حدّد الفرع لعرض الكود —' }}" readonly>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">حالة العضو</label>
                                @php $st = old('status',$isEdit ? $member->status : 'new'); @endphp
                                <select name="status" class="form-select">
                                    <option value="new" @selected($st === 'new')>جديد</option>
                                    <option value="active" @selected($st === 'active')>نشط</option>
                                    <option value="inactive"@selected($st === 'inactive')>غير نشط</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">اسم العضو <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control"
                                    value="{{ old('name', $isEdit ? $member->name : '') }}" required>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">الجنس</label>
                                @php $g = old('gender',$isEdit?$member->gender:null); @endphp
                                <select name="gender" class="form-select">
                                    <option value="">—</option>
                                    <option value="male" @selected($g === 'male')>ذكر</option>
                                    <option value="female" @selected($g === 'female')>أنثى</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">الجنسية</label>
                                <select name="nationality_id" class="form-select">
                                    <option value="">—</option>
                                    @foreach (\App\Models\Country::orderBy('name')->get(['id', 'name']) as $c)
                                        <option value="{{ $c->id }}" @selected(old('nationality_id', $isEdit ? $member->nationality_id : null) == $c->id)>
                                            {{ method_exists($c, 'getTranslation') ? $c->getTranslation('name', app()->getLocale()) : (is_array($c->name) ? $c->name[app()->getLocale()] ?? ($c->name['en'] ?? '') : $c->name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">تاريخ الميلاد (ميلادي)</label>
                                <input type="date" id="birth_greg" name="birth_greg" class="form-control"
                                    value="{{ old('birth_greg', $isEdit ? optional($member->birth_greg)->format('Y-m-d') : '') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاريخ الميلاد (هجري)</label>
                                <input type="text" id="birth_hijri" name="birth_hijri" class="form-control"
                                    value="{{ old('birth_hijri', $isEdit ? $member->birth_hijri : '') }}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">العمر</label>
                                <input type="text" id="age" class="form-control"
                                    value="{{ old('age', $isEdit ? $member->age : '') }}" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ID --}}
                <div class="tab-pane fade" id="tab-id">
                    <div class="card-section">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">نوع البطاقة</label>
                                @php $t=old('id_type',$isEdit?$member->id_type:null); @endphp
                                <select name="id_type" id="id_type" class="form-select">
                                    <option value="">—</option>
                                    <option value="national_id" @selected($t === 'national_id')>بطاقة شخصية</option>
                                    <option value="iqama" @selected($t === 'iqama')>إقامة</option>
                                    <option value="passport" @selected($t === 'passport')>جواز سفر</option>
                                    <option value="driving_license"@selected($t === 'driving_license')>رخصة قيادة</option>
                                    <option value="work_card" @selected($t === 'work_card')>بطاقة عمل</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">رقم الهوية</label>
                                <input type="text" name="id_number" id="id_number" class="form-control"
                                    placeholder="10 أرقام للسعودية/الإقامة"
                                    value="{{ old('id_number', $isEdit ? $member->id_number : '') }}">
                                <div class="form-text">بطاقة شخصية يجب أن تبدأ بـ 1 – الإقامة بـ 2 (10 أرقام).</div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">تاريخ الإصدار (ميلادي)</label>
                                <input type="date" name="id_issue_greg" id="id_issue_greg" class="form-control"
                                    value="{{ old('id_issue_greg', $isEdit ? optional($member->id_issue_greg)->format('Y-m-d') : '') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاريخ الإصدار (هجري)</label>
                                <input type="text" name="id_issue_hijri" id="id_issue_hijri" class="form-control"
                                    value="{{ old('id_issue_hijri', $isEdit ? $member->id_issue_hijri : '') }}" readonly>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">تاريخ الانتهاء (ميلادي)</label>
                                <input type="date" name="id_expiry_greg" id="id_expiry_greg" class="form-control"
                                    value="{{ old('id_expiry_greg', $isEdit ? optional($member->id_expiry_greg)->format('Y-m-d') : '') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">تاريخ الانتهاء (هجري)</label>
                                <input type="text" name="id_expiry_hijri" id="id_expiry_hijri" class="form-control"
                                    value="{{ old('id_expiry_hijri', $isEdit ? $member->id_expiry_hijri : '') }}"
                                    readonly>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Contact --}}
                <div class="tab-pane fade" id="tab-contact">
                    <div class="card-section">
                        <div class="row g-3">
                            <div class="col-md-4"><label class="form-label">الهاتف</label><input type="text"
                                    name="phone" class="form-control"
                                    value="{{ old('phone', $isEdit ? $member->phone : '') }}"></div>
                            <div class="col-md-4"><label class="form-label">البريد الإلكتروني</label><input
                                    type="email" name="email" class="form-control"
                                    value="{{ old('email', $isEdit ? $member->email : '') }}"></div>
                            <div class="col-md-4"><label class="form-label">صندوق البريد</label><input type="text"
                                    name="po_box" class="form-control"
                                    value="{{ old('po_box', $isEdit ? $member->po_box : '') }}"></div>
                            <div class="col-md-4"><label class="form-label">الرمز البريدي</label><input type="text"
                                    name="postal_code" class="form-control"
                                    value="{{ old('postal_code', $isEdit ? $member->postal_code : '') }}"></div>
                            <div class="col-md-8"><label class="form-label">العنوان</label><input type="text"
                                    name="address" class="form-control"
                                    value="{{ old('address', $isEdit ? $member->address : '') }}"></div>
                        </div>
                    </div>
                </div>

                {{-- Attachments --}}
                <div class="tab-pane fade" id="tab-attachments">
                    {{-- داخل النموذج --}}
                    <div class="card-section">
                        <h6 class="mb-2">الصور</h6>
                        <div class="u-grid">
                            {{-- ============ Avatar ============ --}}
                            @php $avatarUrl = isset($member) && $member->avatar_path ? asset($member->avatar_path) : ''; @endphp
                            <div class="u-col-4">
                                <div class="u-card" id="u_avatar">
                                    <div class="u-head">
                                        <div>
                                            <div class="u-title">الصورة الشخصية</div>
                                            
                                            
                                        </div>
                                        <div class="u-actions">
                                            <button type="button" class="u-btn" id="pick_avatar"><i
                                                    class="fas fa-upload"></i>اختر</button>
                                            <button type="button" class="u-btn icon del d-none" id="del_avatar"
                                                title="حذف"><i class="fas fa-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="u-stage">
                                       
                                        <div class="u-check" id="ok_avatar"><i class="fas fa-check"></i></div>
                                        <div class="u-skeleton" id="sk_avatar"></div>
                                        <img class="u-preview" id="prev_avatar" src="{{ $avatarUrl }}"
                                            style="display:{{ $avatarUrl ? 'block' : 'none' }}">
                                        <div class="u-empty" id="empty_avatar"
                                            style="display:{{ $avatarUrl ? 'none' : 'flex' }}">
                                            <i class="fas fa-user-circle"></i>
                                            <div>لا توجد صورة</div>
                                        </div>
                                        <input type="file" class="d-none" id="file_avatar" accept="image/*">
                                    </div>
                                    <div class="u-progress" id="progwrap_avatar">
                                        <div class="bar" id="prog_avatar"></div>
                                    </div>
                                    <div class="u-fileinfo"><span id="name_avatar">—</span><span id="size_avatar"></span>
                                    </div>
                                    <input type="hidden" name="avatar_uploaded_path" id="path_avatar"
                                        value="{{ $member->avatar_path ?? '' }}">
                                </div>
                            </div>

                            {{-- ============ ID Image ============ --}}
                            @php $idUrl = isset($member) && $member->id_image_path ? asset($member->id_image_path) : ''; @endphp
                            <div class="u-col-4">
                                <div class="u-card" id="u_id">
                                    <div class="u-head">
                                        <div>
                                            <div class="u-title">صورة الهوية</div>
                                            <div class="u-hint">PNG/JPG حتى 3MB</div>
                                        </div>
                                        <div class="u-actions">
                                            <button type="button" class="u-btn" id="pick_id"><i
                                                    class="fas fa-upload"></i>اختر</button>
                                            <button type="button" class="u-btn icon del d-none" id="del_id"
                                                title="حذف"><i class="fas fa-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="u-stage">
                                       
                                        <div class="u-check" id="ok_id"><i class="fas fa-check"></i></div>
                                        <div class="u-skeleton" id="sk_id"></div>
                                        <img class="u-preview" id="prev_id" src="{{ $idUrl }}"
                                            style="display:{{ $idUrl ? 'block' : 'none' }}">
                                        <div class="u-empty" id="empty_id"
                                            style="display:{{ $idUrl ? 'none' : 'flex' }}">
                                            <i class="fas fa-id-card"></i>
                                            <div>لا توجد صورة</div>
                                        </div>
                                        <input type="file" class="d-none" id="file_id" accept="image/*">
                                    </div>
                                    <div class="u-progress" id="progwrap_id">
                                        <div class="bar" id="prog_id"></div>
                                    </div>
                                    <div class="u-fileinfo"><span id="name_id">—</span><span id="size_id"></span>
                                    </div>
                                    <input type="hidden" name="id_image_uploaded_path" id="path_id"
                                        value="{{ $member->id_image_path ?? '' }}">
                                </div>
                            </div>

                            {{-- ============ Work Card ============ --}}
                            @php $workUrl = isset($member) && $member->work_card_image_path ? asset($member->work_card_image_path) : ''; @endphp
                            <div class="u-col-4">
                                <div class="u-card" id="u_work">
                                    <div class="u-head">
                                        <div>
                                            <div class="u-title">صورة بطاقة العمل</div>
                                            <div class="u-hint">PNG/JPG حتى 3MB</div>
                                        </div>
                                        <div class="u-actions">
                                            <button type="button" class="u-btn" id="pick_work"><i
                                                    class="fas fa-upload"></i>اختر</button>
                                            <button type="button" class="u-btn icon del d-none" id="del_work"
                                                title="حذف"><i class="fas fa-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="u-stage">
                                     
                                        <div class="u-check" id="ok_work"><i class="fas fa-check"></i></div>
                                        <div class="u-skeleton" id="sk_work"></div>
                                        <img class="u-preview" id="prev_work" src="{{ $workUrl }}"
                                            style="display:{{ $workUrl ? 'block' : 'none' }}">
                                        <div class="u-empty" id="empty_work"
                                            style="display:{{ $workUrl ? 'none' : 'flex' }}">
                                            <i class="fas fa-briefcase"></i>
                                            <div>لا توجد صورة</div>
                                        </div>
                                        <input type="file" class="d-none" id="file_work" accept="image/*">
                                    </div>
                                    <div class="u-progress" id="progwrap_work">
                                        <div class="bar" id="prog_work"></div>
                                    </div>
                                    <div class="u-fileinfo"><span id="name_work">—</span><span id="size_work"></span>
                                    </div>
                                    <input type="hidden" name="work_card_image_uploaded_path" id="path_work"
                                        value="{{ $member->work_card_image_path ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- How heard --}}
                <div class="tab-pane fade" id="tab-extra">
                    <div class="card-section">
                        @php
                            $options = [
                                'friend' => 'صديق',
                                'instagram' => 'إنستغرام',
                                'twitter' => 'تويتر',
                                'facebook' => 'فيسبوك',
                                'flyer' => 'منشور/ملصق',
                                'other' => 'أخرى',
                            ];
                            $selected = old('how_heard', $isEdit ? $member->how_heard ?? [] : []);
                        @endphp
                        <p class="mb-2">كيف تعرفت علينا؟ (اختياري — لا شيء مُحدد افتراضيًا)</p>
                        <div class="d-flex flex-wrap gap-3">
                            @foreach ($options as $k => $lbl)
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="how_heard[]"
                                        id="hh_{{ $k }}" value="{{ $k }}"
                                        @checked(in_array($k, $selected))>
                                    <label class="form-check-label"
                                        for="hh_{{ $k }}">{{ $lbl }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
@endsection
@section('js')
    {{-- Moment + Hijri (الترتيب مهم جداً) --}}
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    {{-- استخدم هذا المسار (بدون /build) --}}
    <script src="https://cdn.jsdelivr.net/npm/moment-hijri@2.1.2/moment-hijri.min.js"></script>

    <script>
        // ===== فحص أن الإضافة اتحملت =====
        (function ensureHijriLoaded() {
            if (typeof moment === 'undefined') {
                console.error('moment لم يُحمّل');
                return;
            }
            if (typeof moment().iYear !== 'function') {
                console.error('moment-hijri لم يُحمّل — تأكد من رابط السكربت أو كاش المتصفح');
            }
        })();

        // ===== تحويلات التاريخ =====
        function gToH(g) {
            if (!g) return '';
            // لو الإضافة مش متاحة، رجّع نص فاضي
            if (typeof moment().iYear !== 'function') return '';
            const m = moment(g, 'YYYY-MM-DD', true);
            return m.isValid() ? m.format('iYYYY-iMM-iDD') : '';
        }

        function hToG(h) {
            if (!h) return '';
            if (typeof moment().iYear !== 'function') return '';
            const m = moment(h, 'iYYYY-iMM-iDD', true);
            return m.isValid() ? m.format('YYYY-MM-DD') : '';
        }

        // ربط الحقول (عدّل الـ IDs لو مختلفة)
        const pairs = [
            ['birth_greg', 'birth_hijri'], // ميلاد
            ['id_issue_greg', 'id_issue_hijri'], // إصدار هوية
            ['id_expiry_greg', 'id_expiry_hijri'] // انتهاء هوية
        ];

        document.addEventListener('DOMContentLoaded', function() {
            // توقع كود العضو (لو عندك نفس المنطق)
            const branchSel = document.getElementById('branch_id');
            const codePrev = document.getElementById('code_preview');

            function loadCode() {
                if (!branchSel?.value) {
                    codePrev && (codePrev.value = '— حدّد الفرع —');
                    return;
                }
                fetch(`{{ route('members.predict') }}?branch_id=${branchSel.value}`)
                    .then(r => r.json()).then(j => codePrev && (codePrev.value = j.code || '—'))
                    .catch(() => codePrev && (codePrev.value = '—'));
            }
            branchSel && branchSel.addEventListener('change', loadCode);
            @if (!isset($isEdit) || !$isEdit)
                branchSel && branchSel.value && loadCode();
            @endif

            // ربط الميلادي/الهجري + حساب العمر
            const ageInp = document.getElementById('age');

            pairs.forEach(([gId, hId]) => {
                const g = document.getElementById(gId);
                const h = document.getElementById(hId);
                if (!g || !h) return;

                const syncFromG = () => {
                    h.value = gToH(g.value);
                    if (gId === 'birth_greg' && ageInp) {
                        if (g.value) {
                            const years = moment().diff(moment(g.value, 'YYYY-MM-DD'), 'years');
                            ageInp.value = isFinite(years) ? years : '';
                        } else {
                            ageInp.value = '';
                        }
                    }
                };
                const syncFromH = () => {
                    g.value = hToG(h.value);
                    if (gId === 'birth_greg' && ageInp) {
                        if (g.value) {
                            const years = moment().diff(moment(g.value, 'YYYY-MM-DD'), 'years');
                            ageInp.value = isFinite(years) ? years : '';
                        } else {
                            ageInp.value = '';
                        }
                    }
                };

                g.addEventListener('change', syncFromG);
                h.addEventListener('change', syncFromH);

                // تهيئة أولية
                if (g.value && !h.value) syncFromG();
                if (h.value && !g.value) syncFromH();
            });

            // تلميح نوع الهوية
            const idType = document.getElementById('id_type');
            const idNum = document.getElementById('id_number');

            function maskId() {
                if (!idType || !idNum) return;
                idNum.placeholder =
                    idType.value === 'national_id' ? '10 أرقام تبدأ بـ 1' :
                    idType.value === 'iqama' ? '10 أرقام تبدأ بـ 2' : '';
            }
            idType && idType.addEventListener('change', maskId);
            maskId();
        });
    </script>


    <script>
        (function() {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

            // فورماتر حجم الملف
            const fmt = b => {
                if (!b && b !== 0) return '';
                const u = ['B', 'KB', 'MB', 'GB'];
                let i = 0;
                while (b >= 1024 && i < u.length - 1) {
                    b /= 1024;
                    i++
                }
                return `${b.toFixed( i?1:0)} ${u[i]}`;
            };

            // objectURL management
            const map = new Map();
            const setPrev = (img, fileOrUrl) => {
                if (!img) return;
                const k = img.id;
                if (map.has(k)) {
                    URL.revokeObjectURL(map.get(k));
                    map.delete(k);
                }
                if (fileOrUrl instanceof File) {
                    const u = URL.createObjectURL(fileOrUrl);
                    map.set(k, u);
                    img.src = u;
                    img.style.display = 'block';
                } else if (fileOrUrl) {
                    img.src = fileOrUrl;
                    img.style.display = 'block';
                } else {
                    img.removeAttribute('src');
                    img.style.display = 'none';
                }
            };

            function card(cfg) {
                const wrap = document.getElementById(cfg.wrap);
                const pick = document.getElementById(cfg.pick);
                const file = document.getElementById(cfg.file);
                const prev = document.getElementById(cfg.prev);
                const empty = document.getElementById(cfg.empty);
                const del = document.getElementById(cfg.del);
                const pWrap = document.getElementById(cfg.pWrap);
                const pBar = document.getElementById(cfg.pBar);
                const ok = document.getElementById(cfg.ok);
                const name = document.getElementById(cfg.name);
                const size = document.getElementById(cfg.size);
                const path = document.getElementById(cfg.path);
                const skel = document.getElementById(cfg.skel);

                // حالة أولية
                if (path.value) {
                    del.classList.remove('d-none');
                }
                if (prev.getAttribute('src')) empty.style.display = 'none';

                // زر اختيار
                pick.addEventListener('click', () => file.click());
                // حذف
                del.addEventListener('click', () => {
                    const p = path.value;
                    path.value = '';
                    name.textContent = '—';
                    size.textContent = '';
                    setPrev(prev, '');
                    empty.style.display = 'flex';
                    del.classList.add('d-none');
                    ok.style.display = 'none';
                    if (!p) return;
                    fetch("{{ route('members.upload.delete') }}", {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': csrf,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            path: p
                        })
                    });
                });

                // سحب-إفلات
                ['dragenter', 'dragover'].forEach(eName => {
                    wrap.addEventListener(eName, e => {
                        e.preventDefault();
                        wrap.classList.add('dragover')
                    });
                });
                ['dragleave', 'drop'].forEach(eName => {
                    wrap.addEventListener(eName, e => {
                        e.preventDefault();
                        wrap.classList.remove('dragover')
                    });
                });
                wrap.addEventListener('drop', e => {
                    const f = e.dataTransfer.files?.[0];
                    if (f) doUpload(f);
                });

                // تغيير الملف
                file.addEventListener('change', () => {
                    const f = file.files?.[0];
                    if (!f) return;
                    doUpload(f);
                });

                function doUpload(f) {
                    if (!f.type.match(/^image\//)) {
                        alert('يُسمح برفع الصور فقط');
                        return;
                    }
                    // UI
                    setPrev(prev, f);
                    empty.style.display = 'none';
                    del.classList.remove('d-none');
                    ok.style.display = 'none';
                    pBar.style.width = '0%';
                    pWrap.style.display = 'block';
                    skel.style.display = 'block';

                    const fd = new FormData();
                    fd.append('file', f);
                    fd.append('field', cfg.field);

                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', "{{ route('members.upload') }}", true);
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrf);

                    xhr.upload.onprogress = e => {
                        if (e.lengthComputable) {
                            const pct = Math.round(e.loaded / e.total * 100);
                            pBar.style.width = pct + '%';
                        }
                    };
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState === 4) {
                            skel.style.display = 'none';
                            setTimeout(() => pWrap.style.display = 'none', 300);
                            if (xhr.status >= 200 && xhr.status < 300) {
                                let res = {};
                                try {
                                    res = JSON.parse(xhr.responseText)
                                } catch {}
                                if (res.ok) {
                                    path.value = res.path || '';
                                    if (res.url) setPrev(prev, res.url);
                                    ok.style.display = 'inline-flex';
                                    name.textContent = f.name;
                                    size.textContent = fmt(f.size);
                                } else {
                                    alert('فشل رفع الملف');
                                    reset();
                                }
                            } else {
                                alert('تعذر رفع الملف');
                                reset();
                            }
                        }
                    };
                    xhr.send(fd);

                    function reset() {
                        path.value = '';
                        name.textContent = '—';
                        size.textContent = '';
                        setPrev(prev, '');
                        empty.style.display = 'flex';
                        del.classList.add('d-none');
                        ok.style.display = 'none';
                    }
                }
            }

            // تفعيل البطاقات الثلاث
            card({
                wrap: 'u_avatar',
                pick: 'pick_avatar',
                file: 'file_avatar',
                prev: 'prev_avatar',
                empty: 'empty_avatar',
                del: 'del_avatar',
                pWrap: 'progwrap_avatar',
                pBar: 'prog_avatar',
                ok: 'ok_avatar',
                name: 'name_avatar',
                size: 'size_avatar',
                path: 'path_avatar',
                skel: 'sk_avatar',
                field: 'avatar'
            });
            card({
                wrap: 'u_id',
                pick: 'pick_id',
                file: 'file_id',
                prev: 'prev_id',
                empty: 'empty_id',
                del: 'del_id',
                pWrap: 'progwrap_id',
                pBar: 'prog_id',
                ok: 'ok_id',
                name: 'name_id',
                size: 'size_id',
                path: 'path_id',
                skel: 'sk_id',
                field: 'id_image'
            });
            card({
                wrap: 'u_work',
                pick: 'pick_work',
                file: 'file_work',
                prev: 'prev_work',
                empty: 'empty_work',
                del: 'del_work',
                pWrap: 'progwrap_work',
                pBar: 'prog_work',
                ok: 'ok_work',
                name: 'name_work',
                size: 'size_work',
                path: 'path_work',
                skel: 'sk_work',
                field: 'work_card_image'
            });
        })();
    </script>
@endsection