@extends('layouts.master')

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

@php
    $userBranchId = auth()->user()->branch_id ?? null;
    $userBranch = $userBranchId ? \App\Models\Branch::find($userBranchId) : null;
@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 id="memberForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" onsubmit="return false;">

            @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" type="button" id="submitBtn"><i
                            class="fas fa-save mx-2"></i>{{ $isEdit ? 'تحديث' : 'حفظ' }}</button>
                    <a class="btn btn-secondary" href="{{ route('members.index') }}">رجوع</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">
                    <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-contact" 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">

                                        @if ($userBranchId)

                                            {{-- عرض اسم الفرع فقط --}}

                                            <label class="form-label">الفرع</label>
                                            <input type="text" class="form-control"
                                                value="{{ $userBranch?->getTranslation('name', app()->getLocale()) ?? $userBranch?->name }}"
                                                disabled data-gender="{{ $userBranch?->gender }}">
                                            <input type="hidden" name="branch_id" id="branch_id"
                                                value="{{ $userBranchId }}">
                                        @else
                                            {{-- اختيار حر --}}

                                            <label class="form-label">الفرع <span class="text-danger">*</span></label>
                                            <select name="branch_id" id="branch_id" class="form-select form-control"
                                                required>
                                                <option value="">— اختر —</option>
                                                @foreach (\App\Models\Branch::orderBy('id')->get(['id', 'name', 'gender']) as $b)
                                                    <option value="{{ $b->id }}" data-gender="{{ $b->gender }}"
                                                        @selected(old('branch_id', $isEdit ? $member->branch_id : null) == $b->id)>
                                                        {{ method_exists($b, 'getTranslation') ? $b->getTranslation('name', app()->getLocale()) : $b->name }}
                                                    </option>
                                                @endforeach
                                            </select>


                                        @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>

                                        @if (!$isEdit)
                                            {{-- إضافة فقط --}}
                                            <input type="text" class="form-control" value="جديد" disabled>
                                            <input type="hidden" name="status" value="active">
                                        @else
                                            {{-- تعديل فقط --}}
                                            <select name="status" class="form-select">
                                                <option value="active" @selected($member->status === 'active')>نشط</option>
                                                <option value="inactive" @selected($member->status === 'inactive')>غير نشط</option>
                                            </select>
                                        @endif
                                    </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" id="gender" class="form-select">
                                            <option value="">—</option>
                                            <option value="male">ذكر</option>
                                            <option value="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 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="residence" @selected($t === 'residence')>إقامة</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"
                                            inputmode="numeric" maxlength="10" autocomplete="off"
                                            placeholder="— اختر نوع البطاقة أولاً —">

                                        <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>



                        {{-- 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>

                </div>

                <div class="col-md-4">
                    <div class="card-section">
                        <h6 class="mb-3">الصور</h6>

                        <div class="accordion" id="imagesAccordion">

                            {{-- ============ الصورة الشخصية ============ --}}
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingAvatar">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseAvatar" aria-expanded="true"
                                        aria-controls="collapseAvatar">
                                        <i class="fas fa-user-circle me-2 text-primary"></i> الصورة الشخصية
                                    </button>
                                </h2>
                                <div id="collapseAvatar" class="accordion-collapse collapse show"
                                    aria-labelledby="headingAvatar" data-bs-parent="#imagesAccordion">
                                    <div class="accordion-body">
                                        @php $avatarUrl = isset($member) && $member->avatar_path ? asset($member->avatar_path) : ''; @endphp
                                        <div class="u-card" id="u_avatar">
                                            <div class="u-head d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="u-title fw-bold">الصورة الشخصية</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 mt-3">
                                                <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>
                                </div>
                            </div>

                            {{-- ============ صورة الهوية ============ --}}
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingIdImage">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseIdImage" aria-expanded="false"
                                        aria-controls="collapseIdImage">
                                        <i class="fas fa-id-card me-2 text-success"></i> صورة الهوية
                                    </button>
                                </h2>
                                <div id="collapseIdImage" class="accordion-collapse collapse"
                                    aria-labelledby="headingIdImage" data-bs-parent="#imagesAccordion">
                                    <div class="accordion-body">
                                        @php $idUrl = isset($member) && $member->id_image_path ? asset($member->id_image_path) : ''; @endphp
                                        <div class="u-card" id="u_id">
                                            <div class="u-head d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="u-title fw-bold">صورة الهوية</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 mt-3">
                                                <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>
                                </div>
                            </div>

                            {{-- ============ بطاقة العمل ============ --}}
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingWorkCard">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseWorkCard" aria-expanded="false"
                                        aria-controls="collapseWorkCard">
                                        <i class="fas fa-briefcase me-2 text-warning"></i> صورة بطاقة العمل
                                    </button>
                                </h2>
                                <div id="collapseWorkCard" class="accordion-collapse collapse"
                                    aria-labelledby="headingWorkCard" data-bs-parent="#imagesAccordion">
                                    <div class="accordion-body">
                                        @php $workUrl = isset($member) && $member->work_card_image_path ? asset($member->work_card_image_path) : ''; @endphp
                                        <div class="u-card" id="u_work">
                                            <div class="u-head d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="u-title fw-bold">صورة بطاقة العمل</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 mt-3">
                                                <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>
                    </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 branchInput = document.getElementById('branch_id');
            const codePrev = document.getElementById('code_preview');

            if (!branchInput || !codePrev) return;

            function loadCode() {
                const branchId = branchInput.value;
                if (!branchId) {
                    codePrev.value = '— حدّد الفرع —';
                    return;
                }

                fetch(`{{ route('members.predict') }}?branch_id=${branchId}`)
                    .then(r => r.json())
                    .then(j => {
                        codePrev.value = j.code || '—';
                    })
                    .catch(() => {
                        codePrev.value = '—';
                    });
            }

            // 🔥 تحميل مباشر حتى لو الفرع ثابت
            loadCode();

            // لو اختيار حر
            if (branchInput.tagName === 'SELECT') {
                branchInput.addEventListener('change', loadCode);
            }
        });
    </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>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const branchSel = document.getElementById('branch_id');
            const genderSel = document.getElementById('gender');

            if (!branchSel || !genderSel) return;

            function applyBranchGender() {
                const opt = branchSel.options[branchSel.selectedIndex];
                if (!opt) return;

                const g = opt.dataset.gender;

                if (g === '0') {
                    genderSel.value = 'male';
                    genderSel.disabled = true;
                } else if (g === '1') {
                    genderSel.value = 'female';
                    genderSel.disabled = true;
                } else {
                    genderSel.disabled = false;
                }
            }

            branchSel.addEventListener('change', applyBranchGender);

            // تشغيل تلقائي لو كان الفرع محدد (في التعديل أو old())
            applyBranchGender();
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const birthGreg = document.getElementById('birth_greg');
            const birthHijri = document.getElementById('birth_hijri');
            const ageInput = document.getElementById('age');

            function calculateAge(gregDate) {
                if (!gregDate || typeof moment === 'undefined') {
                    ageInput.value = '';
                    return;
                }

                const birth = moment(gregDate, 'YYYY-MM-DD');
                if (!birth.isValid()) {
                    ageInput.value = '';
                    return;
                }

                ageInput.value = moment().diff(birth, 'years');
            }

            function syncFromGreg() {
                if (birthGreg.value) {
                    birthHijri.value = moment(birthGreg.value, 'YYYY-MM-DD').format('iYYYY-iMM-iDD');
                    calculateAge(birthGreg.value);
                } else {
                    birthHijri.value = '';
                    ageInput.value = '';
                }
            }

            birthGreg.addEventListener('input', syncFromGreg);
            birthGreg.addEventListener('change', syncFromGreg);
            birthGreg.addEventListener('blur', syncFromGreg);

        });
    </script>



    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const form = document.getElementById('memberForm');
            const type = document.getElementById('id_type');
            const num = document.getElementById('id_number');
            const btn = document.getElementById('submitBtn');

            // حماية
            if (!form || !type || !num || !btn) {
                console.warn('ID validation skipped: missing elements');
                return;
            }

            // تأكيد إن الزر Button وليس Submit
            btn.type = 'button';

            // ===== Validation Logic =====
            function validateId(showAlert = false) {
                const t = type.value;
                const v = num.value.trim();

                if (!t) {
                    if (showAlert) alert('🚫 اختر نوع البطاقة أولاً');
                    return false;
                }

                if (!/^\d{10}$/.test(v)) {
                    if (showAlert) alert('🚫 رقم الهوية يجب أن يكون 10 أرقام');
                    return false;
                }

                if (t === 'national_id' && !v.startsWith('1')) {
                    if (showAlert) alert('🚫 الهوية السعودية يجب أن تبدأ بـ 1');
                    return false;
                }

                if (t === 'residence' && !v.startsWith('2')) {
                    if (showAlert) alert('🚫 الإقامة يجب أن تبدأ بـ 2');
                    return false;
                }

                return true;
            }

            // ===== زر الحفظ =====
            btn.addEventListener('click', function() {

                if (!validateId(true)) {
                    num.focus();
                    return;
                }

                // ✅ إرسال طبيعي بدون أي منع
                form.submit();
            });

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const genderSel = document.getElementById('gender');
            if (!genderSel) return;

            function applyGender(g) {
                if (g === '0') {
                    genderSel.value = 'male';
                    genderSel.disabled = true;
                } else if (g === '1') {
                    genderSel.value = 'female';
                    genderSel.disabled = true;
                } else {
                    genderSel.disabled = false;
                }
            }

            // ===== الحالة 1: اختيار فرع (Select) =====
            const branchSelect = document.querySelector('select#branch_id');
            if (branchSelect) {
                function onBranchChange() {
                    const opt = branchSelect.options[branchSelect.selectedIndex];
                    if (!opt) return;
                    applyGender(opt.dataset.gender);
                }

                branchSelect.addEventListener('change', onBranchChange);
                onBranchChange(); // تشغيل أولي
                return;
            }

            // ===== الحالة 2: فرع ثابت (Input Disabled) =====
            const branchInput = document.querySelector('input[data-gender]');
            if (branchInput) {
                applyGender(branchInput.dataset.gender);
            }

        });
    </script>


@endsection