@extends('layouts.master')

{{-- @section('title', 'الوثائق الثانوية') --}}

@section('css')
    <style>
        .secondary-doc-page {
            --sd-bg: #f6f8fc;
            --sd-surface: #ffffff;
            --sd-surface-2: #f8fafc;
            --sd-border: #e6ebf2;
            --sd-text: #162033;
            --sd-muted: #6b7280;
            --sd-primary: #2563eb;
            --sd-primary-soft: rgba(37, 99, 235, 0.08);
            --sd-success: #16a34a;
            --sd-warning: #d97706;
            --sd-danger: #dc2626;
            --sd-info: #0891b2;
            --sd-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        }

        @media (prefers-color-scheme: dark) {
            .secondary-doc-page {
                --sd-bg: #0f172a;
                --sd-surface: #111827;
                --sd-surface-2: #182132;
                --sd-border: #263244;
                --sd-text: #e5edf8;
                --sd-muted: #94a3b8;
                --sd-primary: #60a5fa;
                --sd-primary-soft: rgba(96, 165, 250, 0.12);
                --sd-success: #4ade80;
                --sd-warning: #f59e0b;
                --sd-danger: #f87171;
                --sd-info: #22d3ee;
                --sd-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
            }
        }

        .secondary-doc-page {
            color: var(--sd-text);
        }

        .secondary-doc-page .card,
        .secondary-doc-page .modal-content {
            background: var(--sd-surface);
            border: 1px solid var(--sd-border);
            border-radius: 18px;
            box-shadow: var(--sd-shadow);
        }

        .secondary-doc-page .card-header,
        .secondary-doc-page .modal-header,
        .secondary-doc-page .modal-footer {
            background: var(--sd-surface);
            border-color: var(--sd-border);
        }

        .secondary-doc-page .nav-tabs {
            border-bottom: 1px solid var(--sd-border);
            gap: 8px;
        }

        .secondary-doc-page .nav-tabs .nav-link {
            color: var(--sd-muted);
            border: 0;
            border-radius: 14px 14px 0 0;
            font-weight: 700;
            padding: 11px 16px;
            background: transparent;
        }

        .secondary-doc-page .nav-tabs .nav-link.active {
            background-color: var(--sd-primary-soft) !important;
            color: var(--sd-primary) !important;
            border-bottom: 2px solid var(--sd-primary) !important;
            font-weight: 800;
        }

        .secondary-doc-page .form-control,
        .secondary-doc-page .form-select {
            min-height: 44px;
            border-radius: 12px;
            border-color: var(--sd-border);
            background: var(--sd-surface);
            color: var(--sd-text);
            box-shadow: none !important;
        }

        .secondary-doc-page .form-label {
            font-weight: 700;
            color: var(--sd-text);
            margin-bottom: 6px;
        }

        .secondary-doc-page .text-muted,
        .secondary-doc-page .form-text,
        .secondary-doc-page .small {
            color: var(--sd-muted) !important;
        }

        .secondary-doc-page .btn {
            border-radius: 12px;
            font-weight: 700;
        }

        .secondary-doc-page .table {
            color: var(--sd-text);
            margin-bottom: 0;
        }

        .secondary-doc-page .table thead th {
            background: var(--sd-surface-2);
            white-space: nowrap;
        }

        .secondary-doc-page .table td,
        .secondary-doc-page .table th {
            border-color: var(--sd-border);
            vertical-align: middle;
        }

        .secondary-doc-page .soft-box {
            background: var(--sd-surface-2);
            border: 1px solid var(--sd-border);
            border-radius: 16px;
            padding: 16px;
        }

        .secondary-doc-page .payment-row {
            background: var(--sd-surface-2);
            border: 1px solid var(--sd-border);
            border-radius: 14px;
            padding: 10px;
        }

        .secondary-doc-page .top-tab-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .secondary-doc-page .top-tab-actions .actions-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .secondary-doc-page .top-actions-hidden {
            display: none !important;
        }

        .secondary-doc-page .summary-pill {
            background: var(--sd-surface-2);
            border: 1px solid var(--sd-border);
            border-radius: 14px;
            padding: 12px 14px;
        }

        .secondary-doc-page .summary-pill .k {
            font-size: .82rem;
            color: var(--sd-muted);
        }

        .secondary-doc-page .summary-pill .v {
            font-size: 1rem;
            font-weight: 800;
        }
    </style>
@endsection

@section('content')
    <div class="container py-3 secondary-doc-page">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0">الوثائق الثانوية</h4>

        </div>

        <div class="top-tab-actions">
            <ul class="nav nav-tabs flex-grow-1" id="secTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="stop-tab" data-bs-toggle="tab" data-bs-target="#stopTab"
                        type="button" role="tab" aria-controls="stopTab" aria-selected="true">
                        إيقاف
                    </button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="transfer-tab" data-bs-toggle="tab" data-bs-target="#transferTab"
                        type="button" role="tab" aria-controls="transferTab" aria-selected="false">
                        تنازل
                    </button>
                </li>
            </ul>

            <div class="actions-group top-actions-hidden" id="stop_top_actions">
                <button class="btn btn-primary" type="button" id="stop_btn_save" disabled>
                    حفظ
                </button>
            </div>

            <div class="actions-group top-actions-hidden" id="transfer_top_actions">
                <button class="btn btn-outline-primary" type="button" id="transfer_btn_payment" disabled
                    data-bs-toggle="modal" data-bs-target="#transferPaymentModal">
                    السداد
                </button>
                <button class="btn btn-primary" type="button" id="transfer_btn_save" disabled>
                    حفظ
                </button>
            </div>
        </div>

        <div class="tab-content border border-top-0 rounded-bottom p-3" id="secTabsContent">

            {{-- ================== Common Section ================== --}}
            <div class="row g-3 align-items-end">


                <div class="col-12 col-md-4">
                    <label class="form-label">
                        رقم الوثيقة
                    </label>
                    <input type="text" id="common_qrn_input" value="{{ $nextQrn ?? '' }}" class="form-control" readonly>
                    {{-- <div class="form-text text-muted" id="common_qrn_help"></div> --}}
                    <div class="invalid-feedback" id="common_qrn_error">رقم الوثيقة مطلوب. اختر الفرع أولاً.</div>
                </div>

                <div class="col-12 col-md-2">
                    <label class="form-label">تاريخ الوثيقة (ميلادي)</label>
                    <input type="text" id="common_doc_date_greg" class="form-control" readonly>
                </div>

                <div class="col-12 col-md-2">
                    <label class="form-label">تاريخ الوثيقة (هجري)</label>
                    <input type="text" id="common_doc_date_hijri" class="form-control" readonly>
                </div>

                <div class="col-12 col-md-2 d-none">
                    <label class="form-label">حاله الوثيقه</label>
                    <input type="text" id="" class="form-control" readonly value="جديده">
                </div>
                <div class="col-md-3">
                    <label class="fw-semibold mb-1">الفرع</label>
                    @if (!empty($userBranch))
                        <input type="hidden" id="common_branch_id" value="{{ $userBranch->id }}">
                        <div class="form-control border-0 bg-light fw-bold text-primary">
                            <i class="fas fa-store me-2 text-muted"></i> {{ $userBranch->name }}
                        </div>
                    @else
                        <select id="common_branch_id" class="form-select select2 shadow-sm" required>
                            <option value="">— اختر الفرع —</option>
                            <option value="0">كل الفروع</option>
                            @foreach ($branches ?? [] as $b)
                                <option value="{{ $b->id }}">{{ $b->name }}</option>
                            @endforeach
                        </select>
                    @endif
                </div>


                <div class="col-12 col-md-1 d-flex gap-2">
                    <button class="btn btn-outline-info w-100" type="button" id="common_btn_reset">
                        إعادة تحميل
                    </button>
                </div>
            </div>

            <hr class="my-3">

            {{-- بيانات الاشتراك المشتركة --}}

            <div class="row mb-3 g-3">
                <div class="col-12 col-md-3">
                    <label class="form-label">رقم العضو</label>
                    <input type="text" class="form-control" id="common_member_code" readonly>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">اسم العضو</label>
                    <input type="text" class="form-control" id="common_member_name" readonly>
                </div>

                <div class="col-12 col-md-3">
                    <label class="form-label">حالة العضو</label>
                    <input type="text" class="form-control" id="common_member_status" readonly>
                </div>
            </div>
            <div class="row g-3">


                <div class="col-12 col-md-3">
                    <label class="form-label">رقم الاشتراك</label>
                    <input type="text" class="form-control" id="common_subscription_no_picker"
                        placeholder="اختيار من البحث" readonly data-bs-toggle="modal"
                        data-bs-target="#subscriptionSearchModal">
                    <input type="hidden" id="common_selected_subscription_id">
                </div>



                <div class="col-12 col-md-5">
                    <label class="form-label">الخدمة/الاشتراك</label>
                    <input type="text" class="form-control" id="common_item_name" readonly>
                </div>

                <div class="col-12 col-md-2">
                    <label class="form-label">نوع الاشتراك</label>
                    <input type="text" class="form-control" id="common_subscription_type" readonly value="اشتراك">
                </div>

                <div class="col-12 col-md-2">
                    <label class="form-label">الحالة</label>
                    <input type="text" class="form-control" id="common_state_label" readonly>
                </div>

                <div class="col-12 col-md-2" id="box_start_date">
                    <label class="form-label">بداية الفترة</label>
                    <input type="text" class="form-control" id="common_start_date" readonly>
                </div>

                <div class="col-12 col-md-2" id="box_end_date">
                    <label class="form-label">نهاية الفترة</label>
                    <input type="text" class="form-control" id="common_end_date" readonly>
                </div>

                <div class="col-12 col-md-2" id="box_remaining_days">
                    <label class="form-label">الأيام المتبقية</label>
                    <input type="text" class="form-control" id="common_remaining_days_text" readonly>
                </div>


                <div id="pause_usage_section" class="col-6 text-center">
                    <div class="row text-center">
                        <div class="col-md-6 col-12">
                            <label class="form-label"> عدد الايقافات </label>
                            <input type="text" class="form-control" id="common_badge_times" readonly>
                            {{-- <span class="badge text-bg-primary fs-4 col-md-6" id="common_badge_times"> عدد الايقافات:
                                -</span> --}}
                        </div>

                        <div class="col-md-6 col-12">
                            <label class="form-label"> ايام الايقافات </label>
                            <input type="text" class="form-control" id="common_badge_days" readonly>
                            {{-- <span class="badge text-bg-info fs-4 col-md-6" id="common_badge_days"> ايام الايقافات:
                                -</span> --}}
                        </div>
                    </div>

                    <div class="alert alert-warning mt-2 d-none" id="common_exhausted_box"></div>
                    {{-- <div class="alert alert-warning mt-2 d-none" id="transfer_info_box"></div> --}}
                </div>


            </div>

            <hr class="my-3">

            {{-- ================== Tabs Content ================== --}}
            <div class="tab-pane fade show active" id="stopTab" role="tabpanel" aria-labelledby="stop-tab">
                <div class="card">
                    <div class="card-header fw-bold">بيان الإيقاف</div>
                    <div class="card-body">
                        <div class="row align-items-center g-3">
                            <div class="col-12 col-md-2">
                                <label class="form-label">تاريخ الإيقاف (ميلادي)</label>
                                <input type="date" class="form-control" id="stop_pause_date_input"
                                    min="{{ now()->format('Y-m-d') }}" value="{{ now()->format('Y-m-d') }}">
                            </div>

                            <div class="col-12 col-md-2">
                                <label class="form-label">تاريخ الإيقاف (هجري)</label>
                                <input type="text" class="form-control" id="stop_pause_date_hijri" readonly>
                            </div>

                            <div class="col-12 col-md-2">
                                <label class="form-label">عدد أيام الإيقاف</label>
                                <input type="number" min="1" class="form-control" id="stop_pause_days"
                                    placeholder="مثال: 10">
                            </div>

                            <div class="col-12 col-md-2">
                                <label class="form-label">تاريخ الاستئناف <small>(ميلادي)</small></label>
                                <input type="date" class="form-control" id="stop_resume_date"
                                    min="{{ now()->format('Y-m-d') }}">
                            </div>

                            <div class="col-12 col-md-2">
                                <label class="form-label">تاريخ الاستئناف <small>(هجري)</small></label>
                                <input type="text" class="form-control" id="stop_resume_date_hijri" readonly>
                            </div>

                            <div class="col-12 d-flex justify-content-end col-md-2 ">
                                <button class="btn btn-success px-2 py-2 w-100" type="button" id="stop_btn_apply"
                                    disabled>
                                    تطبيق
                                </button>
                            </div>

                        </div>

                        <div class="mt-3 d-none" id="stop_msg_err">
                            <div class="alert alert-danger mb-0" id="stop_msg_err_text"></div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-none" id="stop_preview_wrap">

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle text-center">
                            <thead class="table">
                                <tr>
                                    <th>رقم الاشتراك بعد الإيقاف</th>
                                    <th>نوع الاشتراك</th>
                                    <th>بداية الفترة</th>
                                    <th>نهاية الفترة</th>
                                    <th>عدد الأيام</th>
                                    <th>حالة الاشتراك</th>
                                </tr>
                            </thead>
                            <tbody id="stop_preview_body"></tbody>
                        </table>
                    </div>

                </div>
            </div>

            <div class="tab-pane fade" id="transferTab" role="tabpanel" aria-labelledby="transfer-tab">

                <div class="col-12">
                    <div class="alert alert-warning mt-2 d-none" id="transfer_info_box"></div>
                </div>

                <div class="card">
                    <div class="card-header fw-bold">بيان التنازل</div>
                    <div class="card-body">

                        <div class="row g-3">
                            <div class="col-12 col-lg-5">
                                <div class="card h-100 border">
                                    <div class="card-header fw-bold bg-light">بيانات التنازل</div>
                                    <div class="card-body">
                                        <div class="row g-3 align-items-center">
                                            <div class="col-12">
                                                <label class="form-label">رقم العضو</label>
                                                <input type="text" class="form-control"
                                                    id="transfer_target_member_code" readonly>
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label">العضو الممنوح</label>
                                                <input type="text" class="form-control"
                                                    id="transfer_target_member_name" placeholder="اختيار عضو" readonly
                                                    data-bs-toggle="modal" data-bs-target="#memberSearchModal">
                                                <input type="hidden" id="transfer_target_member_id">
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label">تاريخ التنازل (ميلادي)</label>
                                                <input type="date" class="form-control" id="transfer_date_input"
                                                    min="{{ now()->format('Y-m-d') }}"
                                                    value="{{ now()->format('Y-m-d') }}">
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label">تاريخ التنازل (هجري)</label>
                                                <input type="text" class="form-control" id="transfer_date_hijri"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-lg-7">
                                <div class="card h-100 border">
                                    <div class="card-header fw-bold bg-light">ملخص الرسوم والسداد</div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-4">
                                                <label class="form-label">رسوم التنازل</label>
                                                <input type="text" class="form-control" id="transfer_fee" readonly>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label">الضريبة (15%)</label>
                                                <input type="text" class="form-control" id="transfer_tax" readonly>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="form-label fw-bold">الإجمالي بعد الضريبة</label>
                                                <input type="text" class="form-control fw-bold text-success"
                                                    id="transfer_total" readonly>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="summary-pill">
                                                    <div class="k">إجمالي المدفوع</div>
                                                    <div class="v" id="transfer_paid_total_text">0.00</div>
                                                </div>
                                                <input type="hidden" id="transfer_paid_total" value="0.00">
                                            </div>

                                            <div class="col-md-4">
                                                <div class="summary-pill">
                                                    <div class="k">المتبقي</div>
                                                    <div class="v text-danger" id="transfer_remaining_total_text">0.00
                                                    </div>
                                                </div>
                                                <input type="hidden" id="transfer_remaining_total" value="0.00">
                                            </div>

                                            <div class="col-md-4">
                                                <div class="summary-pill">
                                                    <div class="k">حالة السداد</div>
                                                    <div class="v" id="transfer_payment_state_text">غير مكتمل</div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="alert alert-info mb-0 rounded-4">
                                                    السداد إلزامي ويجب أن يتم بالكامل من زر <strong>السداد</strong> أعلى
                                                    الصفحة قبل الحفظ.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 d-flex justify-content-end">
                                <button class="btn btn-success px-4" type="button" id="transfer_btn_apply" disabled>
                                    تطبيق
                                </button>
                            </div>
                        </div>

                        <div class="mt-3 d-none" id="transfer_msg_err">
                            <div class="alert alert-danger mb-0" id="transfer_msg_err_text"></div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-none" id="transfer_preview_wrap">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle text-center">
                            <thead>
                                <tr>
                                    <th>رقم الوثيقة</th>
                                    <th>نوع العملية</th>
                                    <th>العضو الحالي</th>
                                    <th>العضو الجديد</th>
                                    <th>تاريخ التنازل</th>
                                    <th>الخدمة/الاشتراك</th>
                                    <th>الرسم</th>
                                    <th>طريقة الدفع</th>
                                    <th>حالة الدفع</th>
                                    <th>الحالة</th>
                                </tr>
                            </thead>
                            <tbody id="transfer_preview_body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="transferPaymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold">سداد رسوم التنازل</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">الإجمالي المطلوب</label>
                            <input type="text" class="form-control fw-bold" id="transfer_modal_total" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">إجمالي المدفوع</label>
                            <input type="text" class="form-control fw-bold" id="transfer_modal_paid" readonly
                                value="0.00">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">المتبقي</label>
                            <input type="text" class="form-control fw-bold text-danger" id="transfer_modal_remaining"
                                readonly value="0.00">
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label fw-bold mb-0">تفاصيل السداد</label>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btn_add_payment_row_modal">
                            إضافة دفعة
                        </button>
                    </div>

                    <div id="transfer_payment_rows"></div>

                    <div class="alert alert-warning mt-3 mb-0 rounded-4">
                        يجب أن يساوي إجمالي الدفعات كامل المبلغ المطلوب قبل تأكيد السداد.
                    </div>
                </div>

                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">إغلاق</button>
                    <button type="button" class="btn btn-primary" id="transfer_btn_confirm_payment" disabled>
                        تأكيد السداد
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Subscription Search Modal --}}
    <div class="modal fade" id="subscriptionSearchModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">بحث عن اشتراك</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-2 align-items-center">
                        <div class="col-12 col-md-8">
                            <input type="text" class="form-control" id="subscription_q"
                                placeholder="رقم الاشتراك / اسم العضو / رقم العضو">
                        </div>
                        <div class="col-12 col-md-4 d-flex gap-2">
                            <button class="btn btn-primary w-100" type="button" id="btnSubscriptionSearch">بحث</button>
                            <button class="btn btn-outline-secondary w-100" type="button"
                                id="btnSubscriptionSearchClear">مسح</button>
                        </div>
                    </div>

                    <hr>

                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="">
                                <tr>
                                    <th>رقم الاشتراك</th>
                                    <th>اسم المشترك</th>
                                    <th>رقم العضو</th>
                                    <th>الاشتراك</th>
                                    <th>نهاية الاشتراك</th>
                                    <th>الحالة</th>
                                    <th class="text-end">اختيار</th>
                                </tr>
                            </thead>
                            <tbody id="subscription_results">
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">جاري التحميل...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="small text-muted">يعرض آخر 50 نتيجة (approved). البحث لايف.</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Member Search Modal --}}
    <div class="modal fade" id="memberSearchModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">اختيار عضو</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-2 align-items-center">
                        <div class="col-12 col-md-8">
                            <input type="text" class="form-control" id="member_q"
                                placeholder=" اسم العضو / رقم العضو">
                        </div>
                        <div class="col-12 col-md-4 d-flex gap-2">
                            <button class="btn btn-primary w-100" type="button" id="btnMemberSearch">بحث</button>
                            <button class="btn btn-outline-secondary w-100" type="button"
                                id="btnMemberSearchClear">مسح</button>
                        </div>
                    </div>

                    <hr>

                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="">
                                <tr>
                                    <th>رقم العضو</th>
                                    <th>اسم العضو</th>
                                    <th class="text-end">اختيار</th>
                                </tr>
                            </thead>
                            <tbody id="member_results">
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-4">جاري التحميل...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="small text-muted">يعرض آخر 50 نتيجة. البحث لايف.</div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        const PAYMENT_METHODS = @json($paymentMethods);


        const SEARCH_URL = @json(route('secondary_docs.subscriptions.search'));
        const SHOW_URL_TPL = @json(route('secondary_docs.subscriptions.show', ['subscription' => 'SUB_ID']));
        const MEMBERS_SEARCH_URL = @json(route('secondary_docs.members.search'));
        const NEXT_QRN_URL = @json(route('secondary_docs.next_qrn'));
        const STOP_STORE_URL = @json(route('secondary_docs.stop.store'));
        const TRANSFER_STORE_URL = @json(route('secondary_docs.transfer.store'));
        const DOCUMENTS_INDEX_URL = @json(route('secondary_docs.documents.index'));

        let subDebounceTimer = null;
        let memberDebounceTimer = null;

        let selected = null;
        let usage = null;
        let policy = null;
        let selectedMember = null;

        let transferPolicy = {
            enabled: false,
            fee: 0,
            min_duration_value: 0,
            min_duration_unit: 'days'
        };

        function translateYesNo(v) {
            return v ? 'مسموح' : 'غير مسموح';
        }

        function setInvalid(id, message = '') {
            const el = document.getElementById(id);
            if (!el) return;

            el.classList.add('is-invalid');

            if (id === 'common_qrn_input' && message) {
                const err = document.getElementById('common_qrn_error');
                if (err) err.textContent = message;
            }

            if (id === 'common_branch_id' && message) {
                const err = document.getElementById('common_branch_error');
                if (err) err.textContent = message;
            }
        }

        function clearInvalid(id) {
            const el = document.getElementById(id);
            if (!el) return;
            el.classList.remove('is-invalid');
        }


        function validateDocumentNoBeforeSave(errorBoxId, errorTextId) {
            const qrnEl = document.getElementById('common_qrn_input');
            const branchEl = document.getElementById('common_branch_id');

            clearInvalid('common_qrn_input');
            clearInvalid('common_branch_id');

            const qrn = qrnEl?.value?.trim() || '';
            const branchId = branchEl?.value?.trim() || '';

            if (!branchId || branchId === '0') {
                setInvalid('common_branch_id', 'اختر الفرع أولاً لتوليد رقم الوثيقة.');
                showErr(errorBoxId, errorTextId, 'اختر الفرع أولاً لتوليد رقم الوثيقة.');
                return false;
            }

            if (!qrn) {
                setInvalid('common_qrn_input', 'رقم الوثيقة مطلوب. اختر الفرع أولاً.');
                showErr(errorBoxId, errorTextId, 'رقم الوثيقة مطلوب. اختر الفرع أولاً.');
                return false;
            }

            return true;
        }

        function formatYmdLocal(d) {
            const y = d.getFullYear();
            const m = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${y}-${m}-${day}`;
        }

        function diffDaysRemainingFromToday(endYmd) {
            if (!endYmd) return '';

            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            const end = parseYmdToLocalDate(String(endYmd).slice(0, 10));

            const ms = 24 * 60 * 60 * 1000;
            const diff = Math.floor((end - today) / ms);

            // شامل اليوم الحالي لو الاشتراك ما زال سارياً
            return diff >= 0 ? (diff + 1) : 0;
        }

        function parseYmdToLocalDate(ymd) {
            const [y, m, d] = (ymd || '').split('-').map(Number);
            return new Date(y, (m || 1) - 1, d || 1);
        }

        function addDaysLocal(dateObj, days) {
            const d = new Date(dateObj);
            d.setDate(d.getDate() + days);
            return d;
        }

        function diffDaysInclusiveLocal(a, b) {
            const ms = 24 * 60 * 60 * 1000;
            const da = new Date(a.getFullYear(), a.getMonth(), a.getDate());
            const db = new Date(b.getFullYear(), b.getMonth(), b.getDate());
            const diff = Math.floor((db - da) / ms) + 1;
            return Math.max(0, diff);
        }

        function formatHijri(d) {
            try {
                const parts = new Intl.DateTimeFormat('en-u-ca-islamic', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                }).formatToParts(d);

                const year = parts.find(p => p.type === 'year').value;
                const month = parts.find(p => p.type === 'month').value;
                const day = parts.find(p => p.type === 'day').value;

                return `${year}-${month}-${day}`;
            } catch (e) {
                return '-';
            }
        }

        function setValue(id, value = '') {
            const el = document.getElementById(id);
            if (el) el.value = value ?? '';
        }

        function setText(id, value = '') {
            const el = document.getElementById(id);
            if (el) el.textContent = value ?? '';
        }

        function showErr(boxId, textId, msg) {
            setText(textId, msg || 'خطأ');
            document.getElementById(boxId).classList.remove('d-none');
        }

        function clearErr(boxId, textId) {
            document.getElementById(boxId).classList.add('d-none');
            setText(textId, '');
        }

        async function fetchJSON(url, options = {}) {
            const res = await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(options.headers || {})
                },
                ...options
            });
            const json = await res.json().catch(() => ({}));
            return {
                res,
                json
            };
        }

        function getCurrentDocCode() {
            const stopTab = document.getElementById('stop-tab');
            return stopTab.classList.contains('active') ? 'SPD' : 'TRN';
        }

        async function refreshQrn() {
            const branchEl = document.getElementById('common_branch_id');
            const qrnInput = document.getElementById('common_qrn_input');
            // const qrnHelp = document.getElementById('common_qrn_help');

            if (!branchEl) return;

            const branchId = branchEl.value;

            if (!branchId || branchId === '0') {
                qrnInput.value = '';
                return;
            }

            // if (qrnHelp) qrnHelp.textContent = 'جارٍ توليد رقم الوثيقة...';

            try {
                const {
                    res,
                    json
                } = await fetchJSON(NEXT_QRN_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        branch_id: parseInt(branchId, 10),
                        doc_code: getCurrentDocCode()
                    })
                });

                if (!res.ok) {
                    qrnInput.value = '';
                    // if (qrnHelp) qrnHelp.textContent = json?.message ?? 'حدث خطأ أثناء توليد رقم الوثيقة.';
                    // return;
                }

                qrnInput.value = json.nextQrn ?? '';
                // if (qrnHelp) qrnHelp.textContent = '';
            } catch (e) {
                qrnInput.value = '';
                // if (qrnHelp) qrnHelp.textContent = 'تعذر الاتصال لتوليد رقم الوثيقة.';
            }
        }

        function isSubscriptionActiveNow(sub) {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            const s = parseYmdToLocalDate(String(sub.start_date).slice(0, 10));
            const e = parseYmdToLocalDate(String(sub.end_date).slice(0, 10));

            const status = (sub.status ?? 'approved');
            const active = (sub.active ?? 1);
            const lifecycle = (sub.lifecycle_status ?? 'active');

            const approved = (String(status) === 'approved');
            const flagsOk = (String(active) === '1' || active === true) && (String(lifecycle) === 'active');

            return approved && flagsOk && (today >= s) && (today <= e);
        }

        function resetCommonSection() {
            selected = null;
            usage = null;
            policy = null;
            selectedMember = null;

            [
                'common_selected_subscription_id',
                'common_subscription_no_picker',
                'common_member_code',
                'common_member_name',
                'common_item_name',
                'common_subscription_type',
                'common_state_label',
                'common_start_date',
                'common_end_date',
                'stop_pause_days',
                'stop_resume_date',
                'stop_resume_date_hijri',
                'stop_new_end_date',
                'transfer_target_member_id',
                'transfer_target_member_name',
                'transfer_target_member_code',
                'transfer_date_input',
                'transfer_date_hijri',
                'transfer_fee',
                'transfer_enabled_label',
                'transfer_tax',
                'transfer_total',
                'transfer_paid_total',
                'transfer_remaining_total',
            ].forEach(id => setValue(id, ''));

            clearPaymentRows();

            setValue('common_badge_times', '-');
            setValue('common_badge_days', '-');

            document.getElementById('common_exhausted_box').classList.add('d-none');
            setText('common_exhausted_box', '');

            document.getElementById('stop_btn_apply').disabled = true;
            document.getElementById('transfer_btn_apply').disabled = true;

            document.getElementById('stop_preview_wrap').classList.add('d-none');
            document.getElementById('transfer_preview_wrap').classList.add('d-none');

            document.getElementById('stop_preview_body').innerHTML = '';
            document.getElementById('transfer_preview_body').innerHTML = '';

            clearErr('stop_msg_err', 'stop_msg_err_text');
            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            const transferInfoBox = document.getElementById('transfer_info_box');
            if (transferInfoBox) {
                transferInfoBox.classList.add('d-none');
                transferInfoBox.textContent = '';
            }

            const stopSaveBtn = document.getElementById('stop_btn_save');
            if (stopSaveBtn) stopSaveBtn.disabled = true;

            const transferSaveBtn = document.getElementById('transfer_btn_save');
            if (transferSaveBtn) transferSaveBtn.disabled = true;
        }

        function initDocDates() {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            setValue('common_doc_date_greg', formatYmdLocal(today));
            setValue('common_doc_date_hijri', formatHijri(today));

            setValue('stop_pause_date_input', formatYmdLocal(today));
            setValue('stop_pause_date_hijri', formatHijri(today));

            setValue('transfer_date_input', formatYmdLocal(today));
            setValue('transfer_date_hijri', formatHijri(today));
            // setValue('stop_pause_times', '1');
        }

        async function loadSubscriptions(q = '') {
            const {
                res,
                json
            } = await fetchJSON(SEARCH_URL + '?q=' + encodeURIComponent(q));
            const tbody = document.getElementById('subscription_results');
            tbody.innerHTML = '';

            if (!res.ok || !json.data || json.data.length === 0) {
                tbody.innerHTML = `<tr><td colspan="7" class="text-center text-muted py-4">لا توجد نتائج</td></tr>`;
                return;
            }

            json.data.forEach(r => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <td>${r.verification_code  ?? ''}</td>
                <td>${ r.member_name_ar || r.member_name || '-'}</td>
                <td>${r.member_code ?? '-'}</td>
                <td>${r.item_name ?? '-'}</td>
                <td>${(r.end_date ?? '').toString().slice(0,10)}</td>
                <td>${r.state_label ?? '-'}</td>
                <td class="text-end"><button class="btn btn-sm btn-outline-primary">اختيار</button></td>
            `;
                tr.querySelector('button').addEventListener('click', () => pickSubscription(r.id, r
                    .verification_code));
                tbody.appendChild(tr);
            });
        }

        function diffDaysBetweenDates(startYmd, endYmd) {
            if (!startYmd || !endYmd) return 0;

            const start = parseYmdToLocalDate(startYmd);
            const end = parseYmdToLocalDate(endYmd);

            const ms = 24 * 60 * 60 * 1000;
            return Math.floor((end - start) / ms) + 1; // شامل البداية والنهاية
        }

        async function pickSubscription(id, subNo) {

            clearErr('stop_msg_err', 'stop_msg_err_text');
            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            const {
                res,
                json
            } = await fetchJSON(SHOW_URL_TPL.replace('SUB_ID', id));

            if (!res.ok) {
                showErr('stop_msg_err', 'stop_msg_err_text', json.message || 'تعذر تحميل تفاصيل الاشتراك');
                return;
            }

            selected = json.subscription;
            usage = json.usage;
            policy = json.policy;

            transferPolicy = json.transfer || {
                enabled: false,
                fee: 0,
                min_duration_value: 0,
                min_duration_unit: 'days'
            };

            setValue('common_selected_subscription_id', selected.id);
            setValue('common_subscription_no_picker', json.subscription?.verification_code || '');
            setValue('common_member_name', json.member.name || '');
            setValue('common_member_code', json.member?.member_code || '');
            setValue('common_item_name', json.subscription?.display_item_name || '');
            setValue('common_start_date', (selected.start_date || '').slice(0, 10));
            setValue('common_end_date', (selected.end_date || '').slice(0, 10));
            setValue('common_subscription_type', 'اشتراك');
            setValue('common_state_label', json.state_label || '');

            // setText('common_badge_times', `المرات المتبقية: ${usage.remaining_times ?? 0}`);
            // setText('common_badge_days', `الأيام المتبقية: ${usage.remaining_days ?? 0}`);

            setValue('common_badge_times', `${usage.remaining_times ?? 0}`);
            setValue('common_badge_days', `${usage.remaining_days ?? 0}`);


            setValue('common_member_status', translateMemberStatus(json.member?.status));

            setValue('transfer_fee', `${transferPolicy.fee ?? 0}`);
            computeTransferTotals();
            clearPaymentRows();
            addPaymentRow('', '', '');
            setValue('transfer_enabled_label', translateYesNo(transferPolicy.enabled));
            const transferDate = document.getElementById('transfer_date_input');

            if (transferDate) {

                const todayYmd = formatYmdLocal(new Date());

                transferDate.min = todayYmd;

                if (!transferDate.value) {
                    transferDate.value = todayYmd;
                }


                setValue(
                    'transfer_date_hijri',
                    formatHijri(parseYmdToLocalDate(transferDate.value))
                );
            }

            const remainingDays = parseInt(usage?.remaining_days ?? '0', 10);
            const remainingTimes = parseInt(usage?.remaining_times ?? '0', 10);

            const exhausted = !policy?.enabled || remainingDays <= 0 || remainingTimes <= 0;
            const activeNow = isSubscriptionActiveNow(selected);

            const remainingDaysText = diffDaysRemainingFromToday(selected.end_date);

            setValue(
                'common_remaining_days_text',
                remainingDaysText !== '' ? `${remainingDaysText} يوم` : ''
            );

            const exhaustedBox = document.getElementById('common_exhausted_box');
            const transferInfoBox = document.getElementById('transfer_info_box');

            // ======================
            // رسائل الإيقاف
            // ======================

            if (exhaustedBox) {

                if (!activeNow) {

                    exhaustedBox.classList.remove('d-none');
                    exhaustedBox.textContent = 'لا يمكن إيقاف اشتراك غير نشط أو لم يبدأ بعد.';

                } else if (exhausted) {

                    exhaustedBox.classList.remove('d-none');
                    exhaustedBox.textContent = 'تم استنفاذ الإيقاف أو غير مسموح من إعدادات الخدمة.';

                } else {

                    exhaustedBox.classList.add('d-none');
                    exhaustedBox.textContent = '';

                }

            }

            // ======================
            // منطق التنازل
            // ======================

            if (transferInfoBox) {

                if (!activeNow) {

                    transferInfoBox.classList.remove('d-none');
                    transferInfoBox.textContent = 'لا يمكن التنازل عن اشتراك غير نشط.';
                    toggleTransferSection(false);

                } else if (!transferPolicy.enabled) {

                    transferInfoBox.classList.remove('d-none');
                    transferInfoBox.textContent = 'هذه الخدمة غير قابلة للتنازل.';
                    toggleTransferSection(false);

                } else {

                    transferInfoBox.classList.add('d-none');
                    transferInfoBox.textContent = '';
                    toggleTransferSection(true);

                }

            }

            document.getElementById('stop_btn_apply').disabled =
                (!activeNow || exhausted);

            document.getElementById('transfer_btn_apply').disabled =
                (!activeNow || !transferPolicy.enabled);

            document.getElementById('stop_preview_wrap').classList.add('d-none');
            document.getElementById('transfer_preview_wrap').classList.add('d-none');

            document.getElementById('stop_preview_body').innerHTML = '';
            document.getElementById('transfer_preview_body').innerHTML = '';

            setValue('stop_pause_days', '');
            setValue('stop_resume_date', '');
            setValue('stop_resume_date_hijri', '');

            setValue('transfer_target_member_id', '');
            setValue('transfer_target_member_name', '');
            setValue('transfer_target_member_code', '');

            recomputeStop();

            const modalEl = document.getElementById('subscriptionSearchModal');
            const modal = bootstrap.Modal.getInstance(modalEl);

            if (modal) modal.hide();


            const paymentWrap = document.getElementById('transfer_payment_rows');
            if (paymentWrap) {
                paymentWrap.innerHTML = '';
                addPaymentRow();
            }
            setValue('transfer_paid_total', '0.00');
            setValue('transfer_remaining_total', '0.00');
        }

        async function loadMembers(q = '') {
            const {
                res,
                json
            } = await fetchJSON(MEMBERS_SEARCH_URL + '?q=' + encodeURIComponent(q));

            const tbody = document.getElementById('member_results');
            tbody.innerHTML = '';

            if (!res.ok || !json.data || json.data.length === 0) {
                tbody.innerHTML = `<tr><td colspan="3" class="text-center text-muted py-4">لا توجد نتائج</td></tr>`;
                return;
            }

            json.data.forEach(r => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <td>${r.member_code ?? '-'}</td>
                <td>${r.name || '-'}</td>
                <td class="text-end"><button class="btn btn-sm btn-outline-primary">اختيار</button></td>
            `;
                tr.querySelector('button').addEventListener('click', () => pickMember(r));
                tbody.appendChild(tr);
            });
        }

        function pickMember(member) {
            selectedMember = member;

            setValue('transfer_target_member_id', member.id || '');
            setValue('transfer_target_member_name', member.name || '');
            setValue('transfer_target_member_code', member.member_code || '');

            invalidateTransferPreview();
            const modalEl = document.getElementById('memberSearchModal');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();
        }

        function recomputeStop(changedField = 'days') {
            if (!selected) return;

            clearErr('stop_msg_err', 'stop_msg_err_text');

            const pauseDateEl = document.getElementById('stop_pause_date_input');
            const daysEl = document.getElementById('stop_pause_days');
            const resumeEl = document.getElementById('stop_resume_date');

            const pauseStart = parseYmdToLocalDate(pauseDateEl.value);
            setValue('stop_pause_date_hijri', formatHijri(pauseStart));

            // ✅ أقل تاريخ استئناف = اليوم التالي لتاريخ الإيقاف
            resumeEl.min = formatYmdLocal(addDaysLocal(pauseStart, 1));

            const remainingDays = parseInt(usage?.remaining_days ?? '0', 10);
            if (!policy?.enabled || remainingDays <= 0) {
                setValue('stop_resume_date', '');
                setValue('stop_resume_date_hijri', '');
                return;
            }

            // لو المستخدم غيّر عدد الأيام
            if (changedField === 'days') {
                const days = parseInt(daysEl.value || '0', 10);

                if (!days || days < 1) {
                    setValue('stop_resume_date', '');
                    setValue('stop_resume_date_hijri', '');
                    return;
                }

                if (days > remainingDays) {
                    setValue('stop_resume_date', '');
                    setValue('stop_resume_date_hijri', '');
                    return;
                }

                const resume = addDaysLocal(pauseStart, days);
                setValue('stop_resume_date', formatYmdLocal(resume));
                setValue('stop_resume_date_hijri', formatHijri(resume));
                return;
            }

            // لو المستخدم غيّر تاريخ الاستئناف
            if (changedField === 'resume') {
                const resumeValue = resumeEl.value;

                if (!resumeValue) {
                    daysEl.value = '';
                    setValue('stop_resume_date_hijri', '');
                    return;
                }

                const resumeDate = parseYmdToLocalDate(resumeValue);
                setValue('stop_resume_date_hijri', formatHijri(resumeDate));

                const ms = 24 * 60 * 60 * 1000;
                const pauseOnly = new Date(pauseStart.getFullYear(), pauseStart.getMonth(), pauseStart.getDate());
                const resumeOnly = new Date(resumeDate.getFullYear(), resumeDate.getMonth(), resumeDate.getDate());

                const days = Math.floor((resumeOnly - pauseOnly) / ms);

                if (days < 1) {
                    daysEl.value = '';
                    return;
                }

                if (days > remainingDays) {
                    daysEl.value = '';
                    return;
                }

                daysEl.value = days;
                return;
            }

            // لو المستخدم غيّر تاريخ الإيقاف
            if (changedField === 'pause') {
                const days = parseInt(daysEl.value || '0', 10);

                if (days && days > 0) {
                    const resume = addDaysLocal(pauseStart, days);
                    setValue('stop_resume_date', formatYmdLocal(resume));
                    setValue('stop_resume_date_hijri', formatHijri(resume));
                    return;
                }

                const resumeValue = resumeEl.value;
                if (resumeValue) {
                    const resumeDate = parseYmdToLocalDate(resumeValue);
                    setValue('stop_resume_date_hijri', formatHijri(resumeDate));

                    const ms = 24 * 60 * 60 * 1000;
                    const pauseOnly = new Date(pauseStart.getFullYear(), pauseStart.getMonth(), pauseStart.getDate());
                    const resumeOnly = new Date(resumeDate.getFullYear(), resumeDate.getMonth(), resumeDate.getDate());

                    const daysFromDates = Math.floor((resumeOnly - pauseOnly) / ms);

                    if (daysFromDates >= 1 && daysFromDates <= remainingDays) {
                        daysEl.value = daysFromDates;
                    } else {
                        daysEl.value = '';
                    }
                }
            }
        }

        async function applyStopPreview() {
            clearErr('stop_msg_err', 'stop_msg_err_text');

            if (!selected) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'اختر اشتراك أولاً');
                return;
            }

            if (!isSubscriptionActiveNow(selected)) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'لا يمكن إيقاف اشتراك غير نشط أو لم يبدأ بعد.');
                return;
            }

            const days = parseInt(document.getElementById('stop_pause_days').value || '0', 10);
            const pauseDateValue = document.getElementById('stop_pause_date_input').value;

            if (!pauseDateValue) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'اختر تاريخ الإيقاف');
                return;
            }

            if (!days || days < 1) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'أدخل عدد أيام صحيح');
                return;
            }

            const remainingDays = parseInt(usage?.remaining_days ?? '0', 10);

            if (!policy?.enabled || remainingDays <= 0) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'تم استنفاذ الإيقاف أو غير مسموح.');
                return;
            }

            if (days > remainingDays) {
                showErr('stop_msg_err', 'stop_msg_err_text', `أقصى أيام متبقية (إجمالي): ${remainingDays}.`);
                return;
            }

            const branchId = selected.branch_id || document.getElementById('common_branch_id')?.value || null;
            const previewNewVerificationCode = await fetchNextVerificationCode(branchId);

            const today = new Date();
            const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());

            const pauseStart = parseYmdToLocalDate(pauseDateValue);
            const oldStart = parseYmdToLocalDate(String(selected.start_date).slice(0, 10));
            const oldEnd = parseYmdToLocalDate(String(selected.end_date).slice(0, 10));

            const oldEndAfterCut = addDaysLocal(pauseStart, -1);
            const newStart = addDaysLocal(pauseStart, days);
            const newEnd = addDaysLocal(oldEnd, days);

            const oldStartYmd = formatYmdLocal(oldStart);
            const oldEndAfterCutYmd = formatYmdLocal(oldEndAfterCut);
            const newStartYmd = formatYmdLocal(newStart);
            const newEndYmd = formatYmdLocal(newEnd);

            const oldDuration = diffDaysBetweenDates(oldStartYmd, oldEndAfterCutYmd);
            const newDuration = diffDaysBetweenDates(newStartYmd, newEndYmd);

            const currentVerificationCode =
                selected.verification_code ||
                document.getElementById('common_verification_code')?.value ||
                '';

            function generateNextVerificationCode(code) {
                if (!code) return '000001';

                const cleanCode = String(code).trim();
                const numeric = parseInt(cleanCode, 10);

                if (isNaN(numeric)) {
                    return cleanCode + ' +1';
                }

                const next = numeric + 1;
                return String(next).padStart(cleanCode.length, '0');
            }

            // const previewNewVerificationCode = generateNextVerificationCode(currentVerificationCode);
            // const previewNewVerificationCode = await fetchNextVerificationCode();

            const isFuturePause = pauseStart.getTime() > todayOnly.getTime();

            let html = '';

            if (isFuturePause) {
                html += `
            <tr>
                <td>${currentVerificationCode || '—'}</td>
                <td>الاشتراك الحالي</td>
                <td>${oldStartYmd}</td>
                <td>${oldEndAfterCutYmd}</td>
                <td>${oldDuration}</td>
                <td>مقبولة</td>
            </tr>
        `;
            }

            html += `
        <tr>
            <td>${previewNewVerificationCode}</td>
            <td>الاشتراك بعد الإيقاف</td>
            <td>${newStartYmd}</td>
            <td>${newEndYmd}</td>
            <td>${newDuration}</td>
            <td>مقبولة</td>
        </tr>
    `;

            document.getElementById('stop_preview_body').innerHTML = html;
            document.getElementById('stop_preview_wrap').classList.remove('d-none');
            document.getElementById('stop_btn_save').disabled = false;
        }



        const NEXT_VERIFICATION_CODE_URL = @json(route('secondary_docs.nextCode'));

        async function fetchNextVerificationCode(branchId = null) {
            if (!branchId) {
                throw new Error('branch_id is missing');
            }

            const url = `${NEXT_VERIFICATION_CODE_URL}?branch_id=${encodeURIComponent(branchId)}`;

            const res = await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const data = await res.json();

            if (!res.ok || !data.code) {
                throw new Error(data.message || 'تعذر توليد رقم الاعتماد');
            }

            return data.code;
        }

        function applyTransferPreview() {
            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            if (!selected) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر اشتراك أولاً');
                return;
            }

            if (!isSubscriptionActiveNow(selected)) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'لا يمكن التنازل عن اشتراك غير نشط أو لم يبدأ بعد.');
                return;
            }

            if (!transferPolicy.enabled) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'هذه الخدمة غير قابلة للتنازل.');
                return;
            }

            if (!selectedMember) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر العضو الجديد أولاً');
                return;
            }

            const currentMemberCode = document.getElementById('common_member_code').value;
            const currentMemberName = document.getElementById('common_member_name').value;

            if (selectedMember.member_code === currentMemberCode) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'لا يمكن التنازل لنفس العضو');
                return;
            }

            const transferDate = document.getElementById('transfer_date_input').value;
            if (!transferDate) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر تاريخ التنازل');
                return;
            }

            const transferDateHijri = document.getElementById('transfer_date_hijri').value || '';
            const total = document.getElementById('transfer_total').value || '0.00';
            const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value || 0);
            const payments = collectPayments();

            let paymentMethodLabel = '—';
            let paymentStateLabel = 'غير مسدد';

            const methods = payments
                .map(p => {
                    const found = PAYMENT_METHODS.find(m => String(m.id) === String(p.payment_method_id));
                    return found ? found.name : '';
                })
                .filter(Boolean);

            if (methods.length === 1) {
                paymentMethodLabel = methods[0];
            } else if (methods.length > 1) {
                paymentMethodLabel = 'متعدد';
            }

            if (payments.length && remaining <= 0) {
                paymentStateLabel = 'غير مسدد';
            } else if (payments.length) {
                paymentStateLabel = 'مدفوع جزئيًا';
            }

            document.getElementById('transfer_preview_body').innerHTML = `
        <tr>
            <td>${document.getElementById('common_qrn_input').value || selected.subscription_no}</td>
            <td>تنازل</td>
            <td>${currentMemberName} (${currentMemberCode})</td>
            <td>${selectedMember.name} (${selectedMember.member_code})</td>
            <td>${transferDate}<br><small class="text-muted">${transferDateHijri}</small></td>
            <td>${document.getElementById('common_item_name').value}</td>
            <td>${total}</td>
            <td>${paymentMethodLabel}</td>
            <td>${paymentStateLabel}</td>
            <td>مقبولة</td>
        </tr>
    `;

            document.getElementById('transfer_preview_wrap').classList.remove('d-none');
            syncTransferSaveState();
        }

        function resetAll() {
            resetCommonSection();

            const qrnInput = document.getElementById('common_qrn_input');
            const branchEl = document.getElementById('common_branch_id');

            if (branchEl && branchEl.tagName === 'SELECT') {
                branchEl.value = '';
                /*   qrnInput.value = '';
                   setText('common_qrn_help', 'اختر الفرع لعرض رقم الوثيقة.');*/
            }

            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            setValue('common_doc_date_greg', formatYmdLocal(today));
            setValue('common_doc_date_hijri', formatHijri(today));

            setValue('stop_pause_date_input', formatYmdLocal(today));
            setValue('stop_pause_date_hijri', formatHijri(today));
            // setValue('stop_pause_times', '1');
            setValue('common_remaining_days_text', '');
            setValue('common_member_status', '');

            refreshQrn();
        }

        document.addEventListener('DOMContentLoaded', function() {
            initDocDates();
            resetCommonSection();
            toggleUsageSection();

            const branchSelect = document.getElementById('common_branch_id');
            const qrnInput = document.getElementById('common_qrn_input');

            // const qrnHelp = document.getElementById('common_qrn_help');

            if (branchSelect && branchSelect.tagName === 'SELECT') {
                branchSelect.addEventListener('change', refreshQrn);
            }

            document.getElementById('stop-tab').addEventListener('shown.bs.tab', refreshQrn);
            document.getElementById('transfer-tab').addEventListener('shown.bs.tab', refreshQrn);
            document.getElementById('stop-tab').addEventListener('shown.bs.tab', toggleUsageSection);
            document.getElementById('transfer-tab').addEventListener('shown.bs.tab', toggleUsageSection);

            document.getElementById('subscriptionSearchModal').addEventListener('shown.bs.modal', () => {
                const qEl = document.getElementById('subscription_q');
                qEl.value = '';
                qEl.focus();
                loadSubscriptions('');
            });

            document.getElementById('memberSearchModal').addEventListener('shown.bs.modal', () => {
                const qEl = document.getElementById('member_q');
                qEl.value = '';
                qEl.focus();
                loadMembers('');
            });

            document.getElementById('subscription_q').addEventListener('input', () => {
                const v = document.getElementById('subscription_q').value.trim();
                clearTimeout(subDebounceTimer);
                subDebounceTimer = setTimeout(() => loadSubscriptions(v), 250);
            });

            document.getElementById('member_q').addEventListener('input', () => {
                const v = document.getElementById('member_q').value.trim();
                clearTimeout(memberDebounceTimer);
                memberDebounceTimer = setTimeout(() => loadMembers(v), 250);
            });

            document.getElementById('btnSubscriptionSearch').addEventListener('click', () => {
                loadSubscriptions(document.getElementById('subscription_q').value.trim());
            });

            document.getElementById('btnSubscriptionSearchClear').addEventListener('click', () => {
                document.getElementById('subscription_q').value = '';
                loadSubscriptions('');
            });

            document.getElementById('btnMemberSearch').addEventListener('click', () => {
                loadMembers(document.getElementById('member_q').value.trim());
            });

            document.getElementById('btnMemberSearchClear').addEventListener('click', () => {
                document.getElementById('member_q').value = '';
                loadMembers('');
            });


            document.getElementById('transfer_date_input').addEventListener('change', () => {
                const v = document.getElementById('transfer_date_input').value;
                if (v) {
                    setValue('transfer_date_hijri', formatHijri(parseYmdToLocalDate(v)));
                } else {
                    setValue('transfer_date_hijri', '');
                }

                invalidateTransferPreview();
            });



            document.getElementById('stop_pause_date_input').addEventListener('change', () => recomputeStop(
                'pause'));
            document.getElementById('stop_pause_days').addEventListener('input', () => recomputeStop('days'));
            document.getElementById('stop_resume_date').addEventListener('change', () => recomputeStop('resume'));

            document.getElementById('stop_btn_apply').addEventListener('click', applyStopPreview);
            document.getElementById('transfer_btn_apply').addEventListener('click', applyTransferPreview);
            document.getElementById('common_btn_reset').addEventListener('click', resetAll);


            document.getElementById('stop_btn_save')?.addEventListener('click', saveStop);
            document.getElementById('transfer_btn_save')?.addEventListener('click', saveTransfer);


            document.getElementById('btn_add_payment_row_modal')?.addEventListener('click', function() {
                const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value ||
                    0);
                addPaymentRow('', remaining > 0 ? remaining.toFixed(2) : '', '');
            });

            document.getElementById('transfer_btn_confirm_payment')?.addEventListener('click', function() {
                clearErr('transfer_msg_err', 'transfer_msg_err_text');
                if (!validateTransferPayments()) return;

                const modalEl = document.getElementById('transferPaymentModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();

                syncTransferSaveState();
            });

            document.getElementById('transfer_btn_payment')?.addEventListener('click', function() {
                computePaymentsSummary();
            });

            function syncTopTabActions(activeTab) {
                const stopActions = document.getElementById('stop_top_actions');
                const transferActions = document.getElementById('transfer_top_actions');

                stopActions?.classList.add('top-actions-hidden');
                transferActions?.classList.add('top-actions-hidden');

                if (activeTab === 'transfer') {
                    transferActions?.classList.remove('top-actions-hidden');
                } else {
                    stopActions?.classList.remove('top-actions-hidden');
                }
            }

            document.getElementById('transfer-tab')?.addEventListener('shown.bs.tab', function() {
                syncTopTabActions('transfer');
            });

            document.getElementById('stop-tab')?.addEventListener('shown.bs.tab', function() {
                syncTopTabActions('stop');
            });

            syncTopTabActions('stop');

            // const branchSelect = document.getElementById('common_branch_id');
            if (branchSelect) {
                branchSelect.addEventListener('change', function() {
                    clearInvalid('common_branch_id');
                    clearInvalid('common_qrn_input');
                });
            }

        });

        function translateMemberStatus(status) {
            switch (status) {
                case 'active':
                    return 'نشط';

                case 'inactive':
                    return 'غير نشط';

                case 'suspended':
                    return 'موقوف';

                case 'blocked':
                    return 'محظور';

                case 'pending':
                    return 'قيد المراجعة';

                default:
                    return status || '-';
            }
        }

        function toggleUsageSection() {
            const pauseSection = document.getElementById('pause_usage_section');
            const stopTab = document.getElementById('stop-tab');

            const setCls = (id, cls) => {
                const el = document.getElementById(id);
                if (el) el.className = cls;
            };

            if (!pauseSection || !stopTab) return;

            if (stopTab.classList.contains('active')) {
                pauseSection.classList.remove('d-none');

                setCls('box_start_date', 'col-12 col-md-2');
                setCls('box_end_date', 'col-12 col-md-2');
                setCls('box_remaining_days', 'col-12 col-md-2');
            } else {
                pauseSection.classList.add('d-none');

                setCls('box_start_date', 'col-12 col-md-4');
                setCls('box_end_date', 'col-12 col-md-4');
                setCls('box_remaining_days', 'col-12 col-md-4');
            }
        }

        function toggleTransferSection(enabled) {
            const inputs = document.querySelectorAll(
                '#transferTab input, #transferTab button[data-bs-target="#memberSearchModal"]'
            );

            inputs.forEach(el => {
                el.disabled = !enabled;
            });

            const paymentBtn = document.getElementById('transfer_btn_payment');
            if (paymentBtn) paymentBtn.disabled = !enabled;

            syncTransferSaveState();
        }

        function validateTransferBeforeSave() {
            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            if (!selected) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر اشتراك أولاً');
                return false;
            }

            if (!selectedMember) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر العضو الجديد أولاً');
                return false;
            }

            if (!transferPolicy.enabled) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'هذه الخدمة غير قابلة للتنازل.');
                return false;
            }

            if (document.getElementById('transfer_preview_wrap').classList.contains('d-none')) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اضغط تطبيق أولاً قبل الحفظ');
                return false;
            }

            const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value || 0);
            if (remaining > 0) {
                showErr('transfer_msg_err', 'transfer_msg_err_text',
                    'لا يمكن حفظ التنازل إلا بعد السداد الكامل، لكن يمكن عمل تطبيق/معاينة قبل السداد.');
                return false;
            }

            const paymentRows = document.querySelectorAll('#transfer_payment_rows .payment-row');
            if (!paymentRows.length) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'أضف بيانات الدفع أولاً.');
                return false;
            }

            for (const row of paymentRows) {
                const method = row.querySelector('.payment-method')?.value || '';
                const amount = parseFloat(row.querySelector('.payment-amount')?.value || 0);

                if (!method) {
                    showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر طريقة الدفع لكل دفعة.');
                    return false;
                }

                if (!amount || amount <= 0) {
                    showErr('transfer_msg_err', 'transfer_msg_err_text', 'أدخل مبلغًا صحيحًا لكل دفعة.');
                    return false;
                }
            }

            return true;
        }

        function validateStopBeforeSave() {


            if (!selected) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'اختر اشتراك أولاً');
                return false;
            }

            if (!isSubscriptionActiveNow(selected)) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'لا يمكن إيقاف اشتراك غير نشط أو لم يبدأ بعد.');
                return false;
            }

            const pauseDate = document.getElementById('stop_pause_date_input').value;
            const pauseDays = parseInt(document.getElementById('stop_pause_days').value || '0', 10);
            const remainingDays = parseInt(usage?.remaining_days ?? '0', 10);

            if (!pauseDate) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'اختر تاريخ الإيقاف');
                return false;
            }

            if (!pauseDays || pauseDays < 1) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'أدخل عدد أيام صحيح');
                return false;
            }

            if (!policy?.enabled || remainingDays <= 0) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'تم استنفاذ الإيقاف أو غير مسموح.');
                return false;
            }

            if (pauseDays > remainingDays) {
                showErr('stop_msg_err', 'stop_msg_err_text', `أقصى أيام متبقية: ${remainingDays}`);
                return false;
            }

            if (document.getElementById('stop_preview_wrap').classList.contains('d-none')) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'اضغط تطبيق أولاً قبل الحفظ');
                return false;
            }

            return true;
        }

        async function saveTransfer() {
            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            if (!validateDocumentNoBeforeSave('transfer_msg_err', 'transfer_msg_err_text')) {
                return;

            }
            if (!selected) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر اشتراك أولاً');
                return;
            }

            if (!isSubscriptionActiveNow(selected)) {
                showErr('transfer_msg_err', 'transfer_msg_err_text',
                    'لا يمكن التنازل عن اشتراك غير نشط أو لم يبدأ بعد.');
                return;
            }

            if (!transferPolicy.enabled) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'هذه الخدمة غير قابلة للتنازل.');
                return;
            }

            if (!selectedMember) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اختر العضو الجديد أولاً');
                return;
            }

            if (document.getElementById('transfer_preview_wrap').classList.contains('d-none')) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'اضغط تطبيق أولاً قبل الحفظ');
                return;
            }

            if (!validateTransferPayments()) {
                return;
            }

            const btn = document.getElementById('transfer_btn_save');
            const oldText = btn.textContent;
            btn.disabled = true;
            btn.textContent = 'جارٍ الحفظ...';

            try {
                const {
                    res,
                    json
                } = await fetchJSON(TRANSFER_STORE_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        subscription_id: document.getElementById('common_selected_subscription_id')
                            .value,
                        target_member_id: document.getElementById('transfer_target_member_id').value,
                        transfer_date: document.getElementById('transfer_date_input').value,
                        branch_id: document.getElementById('common_branch_id')?.value || null,
                        qrn: document.getElementById('common_qrn_input').value || null,
                        payments: collectPayments()
                    })
                });

                if (!res.ok) {
                    showErr('transfer_msg_err', 'transfer_msg_err_text', json.message || 'تعذر حفظ التنازل');
                    return;
                }

                window.location.href = DOCUMENTS_INDEX_URL;

            } catch (e) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'حدث خطأ أثناء الحفظ');
            } finally {
                btn.disabled = false;
                btn.textContent = oldText;
            }
        }

        async function saveStop() {
            clearErr('stop_msg_err', 'stop_msg_err_text');
            if (!validateDocumentNoBeforeSave('transfer_msg_err', 'transfer_msg_err_text')) {
                return;
            }


            if (!validateStopBeforeSave()) return;

            const btn = document.getElementById('stop_btn_save');
            const oldText = btn.textContent;
            btn.disabled = true;
            btn.textContent = 'جارٍ الحفظ...';

            try {
                const {
                    res,
                    json
                } = await fetchJSON(STOP_STORE_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        subscription_id: document.getElementById('common_selected_subscription_id')
                            .value,
                        pause_date: document.getElementById('stop_pause_date_input').value,
                        pause_days: document.getElementById('stop_pause_days').value,
                        branch_id: document.getElementById('common_branch_id')?.value || null,
                        qrn: document.getElementById('common_qrn_input').value || null
                    })
                });

                if (!res.ok) {
                    showErr('stop_msg_err', 'stop_msg_err_text', json.message || 'تعذر حفظ الإيقاف');
                    return;
                }

                window.location.href = DOCUMENTS_INDEX_URL;

            } catch (e) {
                showErr('stop_msg_err', 'stop_msg_err_text', 'حدث خطأ أثناء الحفظ');
            } finally {
                btn.disabled = false;
                btn.textContent = oldText;
            }
        }

        function paymentMethodOptions(selected = '') {
            let html = `<option value="">اختر</option>`;

            PAYMENT_METHODS.forEach(method => {
                html += `
            <option value="${method.id}" ${String(selected) === String(method.id) ? 'selected' : ''}>
                ${method.name}
            </option>
        `;
            });

            return html;
        }

        // function addPaymentRow(method = '', amount = '') {
        //     const wrap = document.getElementById('transfer_payment_rows');
        //     if (!wrap) return;

        //     const row = document.createElement('div');
        //     row.className = 'row g-2 align-items-end payment-row mb-2';

        //     row.innerHTML = `
    //         <div class="col-md-5">
    //             <label class="form-label">طريقة الدفع</label>
    //             <select class="form-select payment-method">
    //                 ${paymentMethodOptions(method)}
    //             </select>
    //         </div>
    //         <div class="col-md-5">
    //             <label class="form-label">المبلغ</label>
    //             <input type="number" min="0" step="0.01" class="form-control payment-amount" value="${amount}">
    //         </div>
    //         <div class="col-md-2">
    //             <button type="button" class="btn btn-outline-danger w-100 btn-remove-payment">حذف</button>
    //         </div>
    //     `;

        //     wrap.appendChild(row);

        //     row.querySelector('.payment-amount').addEventListener('input', computePaymentsSummary);
        //     row.querySelector('.payment-method').addEventListener('change', computePaymentsSummary);
        //     row.querySelector('.btn-remove-payment').addEventListener('click', function() {
        //         row.remove();
        //         computePaymentsSummary();
        //     });

        //     computePaymentsSummary();
        // }

        function computePaymentsSummary() {
            const total = parseFloat(document.getElementById('transfer_total')?.value || 0);
            let paid = 0;

            document.querySelectorAll('#transfer_payment_rows .payment-amount').forEach(el => {
                paid += parseFloat(el.value || 0);
            });

            paid = Number(paid.toFixed(2));
            let remaining = Number((total - paid).toFixed(2));

            if (remaining < 0) {
                remaining = 0;
            }

            setValue('transfer_paid_total', paid.toFixed(2));
            setValue('transfer_remaining_total', remaining.toFixed(2));

            const addBtn = document.getElementById('btn_add_payment_row');
            if (addBtn) {
                addBtn.disabled = remaining <= 0;
            }

            // أي تعديل في الدفع يبطل المعاينة القديمة
            invalidateTransferPreview();
        }

        function computeTransferTotals() {
            const fee = parseFloat(document.getElementById('transfer_fee').value || 0);
            const tax = fee * 0.15;
            const total = fee + tax;

            setValue('transfer_tax', tax.toFixed(2));
            setValue('transfer_total', total.toFixed(2));

            computePaymentsSummary();
        }

        function paymentMethodOptions(selected = '') {
            let html = `<option value="">اختر</option>`;

            PAYMENT_METHODS.forEach(method => {
                html +=
                    `<option value="${method.id}" ${String(selected) === String(method.id) ? 'selected' : ''}>${method.name}</option>`;
            });

            return html;
        }

        function addPaymentRow(methodId = '', amount = '', notes = '') {
            const wrap = document.getElementById('transfer_payment_rows');
            if (!wrap) return;

            const row = document.createElement('div');
            row.className = 'row g-2 align-items-end payment-row mb-2 border rounded p-2';

            row.innerHTML = `
                    <div class="col-md-4">
                        <label class="form-label">طريقة الدفع</label>
                        <select class="form-select payment-method">
                            ${paymentMethodOptions(methodId)}
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">المبلغ</label>
                        <input type="number" min="0" step="0.01" class="form-control payment-amount" value="${amount}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">ملاحظات</label>
                        <input type="text" class="form-control payment-notes" value="${notes}">
                    </div>

                    <div class="col-md-1">
                        <button type="button" class="btn btn-outline-danger w-100 btn-remove-payment">×</button>
                    </div>
                `;

            wrap.appendChild(row);

            row.querySelector('.payment-method').addEventListener('change', computePaymentsSummary);
            row.querySelector('.payment-amount').addEventListener('input', computePaymentsSummary);
            row.querySelector('.btn-remove-payment').addEventListener('click', function() {
                row.remove();
                computePaymentsSummary();
            });

            computePaymentsSummary();
        }

        function clearPaymentRows() {
            const wrap = document.getElementById('transfer_payment_rows');
            if (wrap) {
                wrap.innerHTML = '';
            }

            setValue('transfer_paid_total', '0.00');
            setValue('transfer_remaining_total', '0.00');
            const paidText = document.getElementById('transfer_paid_total_text');
            const remainingText = document.getElementById('transfer_remaining_total_text');
            if (paidText) paidText.textContent = '0.00';
            if (remainingText) remainingText.textContent = '0.00';
        }

        function computePaymentsSummary() {
            const total = parseFloat(document.getElementById('transfer_total')?.value || 0);
            let paid = 0;

            document.querySelectorAll('#transfer_payment_rows .payment-amount').forEach(el => {
                paid += parseFloat(el.value || 0);
            });

            paid = Number(paid.toFixed(2));
            let remaining = Number((total - paid).toFixed(2));
            if (remaining < 0) remaining = 0;

            setValue('transfer_paid_total', paid.toFixed(2));
            setValue('transfer_remaining_total', remaining.toFixed(2));
            setValue('transfer_modal_total', total.toFixed(2));
            setValue('transfer_modal_paid', paid.toFixed(2));
            setValue('transfer_modal_remaining', remaining.toFixed(2));

            const paidText = document.getElementById('transfer_paid_total_text');
            const remainingText = document.getElementById('transfer_remaining_total_text');
            if (paidText) paidText.textContent = paid.toFixed(2);
            if (remainingText) remainingText.textContent = remaining.toFixed(2);

            const addBtn = document.getElementById('btn_add_payment_row_modal');
            if (addBtn) addBtn.disabled = remaining <= 0;

            const confirmBtn = document.getElementById('transfer_btn_confirm_payment');
            if (confirmBtn) confirmBtn.disabled = !(total > 0 && remaining === 0);

            invalidateTransferPreview();
            syncTransferSaveState();
        }

        function collectPayments() {
            const payments = [];

            document.querySelectorAll('#transfer_payment_rows .payment-row').forEach(row => {
                payments.push({
                    payment_method_id: row.querySelector('.payment-method')?.value || '',
                    amount: row.querySelector('.payment-amount')?.value || '',
                    notes: row.querySelector('.payment-notes')?.value || ''
                });
            });

            return payments;
        }

        function validateTransferPayments() {
            const payments = collectPayments();

            if (!payments.length) {
                showErr('transfer_msg_err', 'transfer_msg_err_text', 'أضف دفعة واحدة على الأقل.');
                return false;
            }

            for (const [index, payment] of payments.entries()) {
                if (!payment.payment_method_id) {
                    showErr('transfer_msg_err', 'transfer_msg_err_text', `اختر طريقة الدفع في الدفعة رقم ${index + 1}.`);
                    return false;
                }

                const amount = parseFloat(payment.amount || 0);
                if (!amount || amount <= 0) {
                    showErr('transfer_msg_err', 'transfer_msg_err_text', `أدخل مبلغًا صحيحًا في الدفعة رقم ${index + 1}.`);
                    return false;
                }
            }

            const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value || 0);
            if (remaining > 0) {
                showErr('transfer_msg_err', 'transfer_msg_err_text',
                    'لا يمكن حفظ التنازل إلا بعد السداد الكامل، لكن يمكن عمل تطبيق/معاينة قبل السداد.');
                return false;
            }

            return true;
        }

        function invalidateTransferPreview() {
            const wrap = document.getElementById('transfer_preview_wrap');
            const body = document.getElementById('transfer_preview_body');

            if (wrap) wrap.classList.add('d-none');
            if (body) body.innerHTML = '';
            syncTransferSaveState();
        }

        function syncTransferSaveState() {
            const saveBtn = document.getElementById('transfer_btn_save');
            const applyBtn = document.getElementById('transfer_btn_apply');
            const paymentBtn = document.getElementById('transfer_btn_payment');
            const previewVisible = !document.getElementById('transfer_preview_wrap')?.classList.contains('d-none');
            const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value || 0);
            const total = parseFloat(document.getElementById('transfer_total')?.value || 0);
            const paidFull = total === 0 || remaining === 0;

            if (paymentBtn) paymentBtn.disabled = !selected || !transferPolicy.enabled;
            if (applyBtn) applyBtn.disabled = !selected || !selectedMember || !transferPolicy.enabled;
            if (saveBtn) saveBtn.disabled = !(previewVisible && paidFull);

            const stateText = document.getElementById('transfer_payment_state_text');
            // if (stateText) {
            //     stateText.textContent = paidFull ? 'مكتمل' : 'غير مكتمل';
            //     stateText.className = paidFull ? 'v text-success' : 'v text-danger';
            // }
        }
    </script>
@endsection