@extends('layouts.master')

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

@section('css')
    <style>
        /* .secondary-doc-page {
            --sd-bg: #6c6c6d;
            --sd-surface: #757373;
            --sd-surface-2: #636363;
            --sd-border: #4b4b4b;
            --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: #4d6b96;
                --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;
        }


        .readonly-banner {
            background: rgba(8, 145, 178, .12);
            border: 1px solid rgba(8, 145, 178, .26);
            color: #0f766e;
            border-radius: 14px;
            padding: 14px 16px;
        }
    </style>
@endsection

@section('content')
    @php
        $isViewMode = request()->get('mode') === 'view';
        $viewDocumentId = request()->get('document_id');
    @endphp
    <div class="container py-3 secondary-doc-page">
        <input type="hidden" id="view_mode_flag" value="{{ $isViewMode ? 1 : 0 }}">
        <input type="hidden" id="view_document_id" value="{{ $viewDocumentId }}">

        @if ($isViewMode)
            <div class="readonly-banner d-flex align-items-center justify-content-between mb-3">
                <div>
                    <i class="fas fa-eye mx-2"></i>
                    عرض الوثيقة فقط — لا يمكن التعديل أو الحفظ في هذا الوضع
                </div>
                <a href="{{ route('secondary_docs.documents.index') }}" class="btn  btn-outline-primary">
                    الرجوع إلى قائمة الوثائق
                </a>
            </div>
        @endif
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0">الوثائق الثانوية
                <br>

                <sub class="text-danger small-note {{ $isViewMode ? 'd-none' : '' }}" id="branch-required-note">
                    يجب اختيار الفرع لكى تتمكن من اكمال طلبك
                </sub>
            </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 {{ $isViewMode ? 'd-none' : '' }}" 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 {{ $isViewMode ? 'd-none' : '' }}" 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-3">
                    <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 {{ $isViewMode ? 'col-md-5' : 'col-md-3' }}">
                    <label class="fw-semibold mb-1">الفرع</label>
                    @if (!empty($userBranch))
                        <input type="hidden" id="common_branch_id" value="{{ $userBranch->id }}">
                        <div id="common_branch_name_display" class="form-control border-0 bg-light fw-bold text-primary">
                            <i class="fas fa-store me-2 text-muted"></i> <span
                                id="common_branch_name_text">{{ $userBranch->name }}</span>
                        </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>
                        <div class="invalid-feedback" id="common_branch_error">اختر الفرع أولاً.</div>
                    @endif
                </div>


                <div class="col-12 col-md-2 d-flex gap-2">
                    <button class="btn btn-outline-info w-100 {{ $isViewMode ? 'd-none' : '' }}" 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 {{ $isViewMode ? 'col-md-3' : '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 {{ $isViewMode ? 'col-md-2' : '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 {{ $isViewMode ? 'col-md-2' : '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 {{ $isViewMode ? 'col-md-2' : '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 {{ $isViewMode ? 'col-md-2' : '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 col-md-2">
                                <button class="btn btn-success px-4 w-100 {{ $isViewMode ? 'd-none' : '' }}"
                                    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 {{ $isViewMode ? 'd-none' : '' }}" 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 {{ $isViewMode ? 'd-none' : '' }}"
                            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 {{ $isViewMode ? 'd-none' : '' }}"
                        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'));
        const DOC_SHOW_URL_TPL = @json(route('secondary_docs.secondary_docs.documents.show', ['secondaryDocument' => 'DOC_ID']));
        const VIEW_MODE = document.getElementById('view_mode_flag')?.value === '1';
        const VIEW_DOCUMENT_ID = document.getElementById('view_document_id')?.value || '';
        const HAS_FIXED_BRANCH_BOX = !!document.getElementById('common_branch_name_text');

        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 getPreferredArabicName(obj, fallback = '') {
            if (!obj) return fallback || '';
            return obj.name_ar || obj.ar_name || obj.full_name_ar || obj.member_name_ar || obj.name || obj.full_name ||
                fallback || '';
        }


        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 hasValidBranchSelection() {
            const branchEl = document.getElementById('common_branch_id');
            const branchId = branchEl?.value?.trim() || '';
            return !!branchId && branchId !== '0';
        }

        function hasValidDocumentNo() {
            const qrn = document.getElementById('common_qrn_input')?.value?.trim() || '';
            return !!qrn;
        }

        function setSectionEnabled(sectionId, enabled) {
            const section = document.getElementById(sectionId);
            if (!section) return;

            section.querySelectorAll('input, select, textarea, button').forEach(el => {
                if (el.id === 'common_branch_id' || el.id === 'common_qrn_input') return;
                if (el.closest('#transfer_preview_wrap') || el.closest('#stop_preview_wrap')) return;
                el.disabled = !enabled;
            });
        }

        function updateBranchDependentState() {
            const ready = isBranchAndQrnReady();
            const lockAll = !ready;

            lockCommonPickers(lockAll);

            // ====== Stop tab ======
            toggleDisabled('#stopTab input, #stopTab select, #stopTab textarea, #stopTab button', lockAll);
            toggleDisabled('#stop_doc_type', true);
            toggleDisabled('#stop_qrn', true);
            toggleDisabled('#stop_qrn_hijri', true);

            // ====== Transfer tab ======
            toggleDisabled('#transferTab input, #transferTab select, #transferTab textarea, #transferTab button', lockAll);
            toggleDisabled('#transfer_doc_type', true);
            toggleDisabled('#transfer_qrn', true);
            toggleDisabled('#transfer_qrn_hijri', true);

            // common readonly fields stay locked
            toggleDisabled('#common_qrn_input', true);
            toggleDisabled('#common_doc_date_greg', true);
            toggleDisabled('#common_doc_date_hijri', true);

            const stopSaveBtn = document.getElementById('stop_btn_save');
            const transferSaveBtn = document.getElementById('transfer_btn_save');
            const transferPaymentBtn = document.getElementById('transfer_btn_payment');
            const stopApplyBtn = document.getElementById('stop_btn_apply');
            const transferApplyBtn = document.getElementById('transfer_btn_apply');

            if (stopSaveBtn) stopSaveBtn.disabled = lockAll;
            if (transferPaymentBtn) transferPaymentBtn.disabled = lockAll;
            if (transferSaveBtn && lockAll) transferSaveBtn.disabled = true;
            if (stopApplyBtn && lockAll) stopApplyBtn.disabled = true;
            if (transferApplyBtn && lockAll) transferApplyBtn.disabled = 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 = '';
                updateBranchDependentState();
                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 ?? '';
                updateBranchDependentState();
                // if (qrnHelp) qrnHelp.textContent = '';
            } catch (e) {
                qrnInput.value = '';
                updateBranchDependentState();
                // 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;

            updateBranchDependentState();
        }

        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>${getPreferredArabicName(r, 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', getPreferredArabicName(json.member) || '');
            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', document.getElementById('transfer_total')?.value || '0.00');
            setValue('transfer_modal_total', document.getElementById('transfer_total')?.value || '0.00');
            setValue('transfer_modal_paid', '0.00');
            setValue('transfer_modal_remaining', document.getElementById('transfer_total')?.value || '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 = document.getElementById('transfer_total')?.value || '0.00';
            syncTransferSaveState();
        }

        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>${getPreferredArabicName(r) || '-'}</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', getPreferredArabicName(member) || '');
            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 (!validateDocumentNoBeforeSave('stop_msg_err', 'stop_msg_err_text')) {
                return;
            }

            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 (!validateDocumentNoBeforeSave('stop_msg_err', 'stop_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;
            }

            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 paid = parseFloat(document.getElementById('transfer_paid_total')?.value || 0);
            const payments = collectPayments();
            const validPayments = payments.filter(p => parseFloat(p.amount || 0) > 0 && p.payment_method_id);

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

            const methods = validPayments
                .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 (paid > 0 && remaining <= 0) {
                paymentStateLabel = 'مدفوع بالكامل';
            } else if (paid > 0) {
                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>${getPreferredArabicName(selectedMember) || "-"} (${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 id="transfer_preview_payment_method">${paymentMethodLabel}</td>
            <td id="transfer_preview_payment_state">${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();
        }

        function hasStopDraftData() {
            return !!(
                (document.getElementById('stop_pause_days')?.value || '').trim() ||
                (document.getElementById('stop_resume_date')?.value || '').trim() ||
                !(document.getElementById('stop_preview_wrap')?.classList.contains('d-none') ?? true)
            );
        }

        function hasTransferDraftData() {
            const payments = collectPayments ? collectPayments() : [];
            const hasPaymentRows = payments.some(p =>
                (p.payment_method_id || '').trim() ||
                parseFloat(p.amount || 0) > 0 ||
                (p.notes || '').trim()
            );

            return !!(
                (document.getElementById('transfer_target_member_id')?.value || '').trim() ||
                (document.getElementById('transfer_target_member_name')?.value || '').trim() ||
                (document.getElementById('transfer_target_member_code')?.value || '').trim() ||
                hasPaymentRows ||
                !(document.getElementById('transfer_preview_wrap')?.classList.contains('d-none') ?? true)
            );
        }

        function clearStopDraft() {
            setValue('stop_pause_days', '');
            setValue('stop_resume_date', '');
            setValue('stop_resume_date_hijri', '');
            clearErr('stop_msg_err', 'stop_msg_err_text');

            const previewWrap = document.getElementById('stop_preview_wrap');
            const previewBody = document.getElementById('stop_preview_body');
            if (previewWrap) previewWrap.classList.add('d-none');
            if (previewBody) previewBody.innerHTML = '';

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

            recomputeStop('pause');
        }

        function clearTransferDraft() {
            setValue('transfer_target_member_id', '');
            setValue('transfer_target_member_name', '');
            setValue('transfer_target_member_code', '');

            clearErr('transfer_msg_err', 'transfer_msg_err_text');

            const paymentWrap = document.getElementById('transfer_payment_rows');
            if (paymentWrap) paymentWrap.innerHTML = '';
            addPaymentRow('', '', '');

            setValue('transfer_paid_total', '0.00');
            setValue('transfer_remaining_total', document.getElementById('transfer_total')?.value || '0.00');
            setValue('transfer_modal_total', document.getElementById('transfer_total')?.value || '0.00');
            setValue('transfer_modal_paid', '0.00');
            setValue('transfer_modal_remaining', document.getElementById('transfer_total')?.value || '0.00');

            const paidText = document.getElementById('transfer_paid_total_text');
            const remainingText = document.getElementById('transfer_remaining_total_text');
            const stateText = document.getElementById('transfer_payment_state_text');

            if (paidText) paidText.textContent = '0.00';
            if (remainingText) remainingText.textContent = document.getElementById('transfer_total')?.value || '0.00';
            if (stateText) stateText.textContent = 'غير مكتمل';

            const previewWrap = document.getElementById('transfer_preview_wrap');
            const previewBody = document.getElementById('transfer_preview_body');
            if (previewWrap) previewWrap.classList.add('d-none');
            if (previewBody) previewBody.innerHTML = '';

            syncTransferSaveState();
            computePaymentsSummary();
        }


        function enableReadonlyViewMode() {
            document.getElementById('stop_top_actions')?.classList.add('d-none');
            document.getElementById('transfer_top_actions')?.classList.add('d-none');
            document.getElementById('stop_btn_apply')?.classList.add('d-none');
            document.getElementById('transfer_btn_apply')?.classList.add('d-none');
            document.getElementById('common_btn_reset')?.classList.add('d-none');
            document.getElementById('transfer_btn_payment')?.classList.add('d-none');
            document.getElementById('btn_add_payment_row_modal')?.classList.add('d-none');
            document.getElementById('transfer_btn_confirm_payment')?.classList.add('d-none');

            const subPicker = document.getElementById('common_subscription_no_picker');
            const memberPicker = document.getElementById('transfer_target_member_name');

            if (subPicker) {
                subPicker.removeAttribute('data-bs-toggle');
                subPicker.removeAttribute('data-bs-target');
                subPicker.style.pointerEvents = 'none';
            }

            if (memberPicker) {
                memberPicker.removeAttribute('data-bs-toggle');
                memberPicker.removeAttribute('data-bs-target');
                memberPicker.style.pointerEvents = 'none';
            }

            document.querySelectorAll(
                    '#secTabsContent input, #secTabsContent select, #secTabsContent textarea, #secTabsContent button')
                .forEach(el => {
                    el.disabled = true;
                    try {
                        el.readOnly = true;
                    } catch (e) {}
                });
        }

        async function fetchDocumentForView(documentId) {
            const url = DOC_SHOW_URL_TPL.replace('DOC_ID', documentId);
            return await fetchJSON(url, {
                headers: {
                    'Accept': 'application/json'
                }
            });
        }

        function setBranchDisplay(branchId, branchName) {
            const branchSelect = document.getElementById('common_branch_id');
            const branchNameText = document.getElementById('common_branch_name_text');

            if (branchSelect && branchSelect.tagName === 'SELECT' && branchId) {
                const exists = Array.from(branchSelect.options).some(o => String(o.value) === String(branchId));
                if (!exists && branchName) {
                    const opt = document.createElement('option');
                    opt.value = branchId;
                    opt.textContent = branchName;
                    branchSelect.appendChild(opt);
                }
                branchSelect.value = String(branchId);
            }

            if (branchNameText) {
                branchNameText.textContent = branchName || branchNameText.textContent || '-';
            }
        }

        function fillCommonDocumentFields(data) {
            const source = data.source_subscription || {};
            const member = data.member || {};
            const newSub = data.new_subscription || {};

            setValue('common_qrn_input', data.qrn || '');
            setValue('common_doc_date_greg', data.created_at || '');
            setValue('common_doc_date_hijri', data.created_at ? formatHijri(parseYmdToLocalDate(data.created_at)) : '');

            // الاشتراك
            setValue(
                'common_subscription_no_picker',
                source.verification_code || source.subscription_no || ''
            );
            setValue('common_item_name', source.item_name || '');
            setValue('common_subscription_type', 'اشتراك');
            setValue('common_start_date', source.start_date || '');
            setValue('common_end_date', source.end_date || '');

            // العضو
            setValue('common_member_code', member.member_code || '');
            setValue('common_member_name', member.name || '');
            setValue('common_member_status', translateMemberStatus(member.status || ''));

            // الحالة
            setValue('common_state_label', data.state_label || '');

            // الأيام المتبقية
            const remainingDaysText = diffDaysRemainingFromToday(source.end_date || '');
            setValue(
                'common_remaining_days_text',
                remainingDaysText !== '' ? `${remainingDaysText} يوم` : ''
            );

            // الإيقافات
            // الإيقافات
            const usage = data.usage || {};
            setValue('common_badge_times', `${usage.remaining_times ?? 0}`);
            setValue('common_badge_days', `${usage.remaining_days ?? 0}`);

            // الفرع لو المستخدم له فرع ثابت
            const branchTextEl = document.getElementById('common_branch_name_text');
            if (branchTextEl) {
                branchTextEl.textContent = data.branch_name || '';
            }

            // الفرع لو الصفحة فيها select
            const branchSelect = document.getElementById('common_branch_id');
            if (branchSelect && branchSelect.tagName === 'SELECT') {
                const wantedId = String(data.branch_id || '');

                if (wantedId) {
                    let option = Array.from(branchSelect.options).find(o => String(o.value) === wantedId);

                    if (!option) {
                        option = new Option(data.branch_name || 'الفرع', wantedId, true, true);
                        branchSelect.add(option);
                    }

                    branchSelect.value = wantedId;
                }
            }

            // hidden input branch_id
            if (branchSelect && branchSelect.tagName === 'INPUT') {
                branchSelect.value = data.branch_id || '';
            }
        }

        function fillStopViewData(data) {
            const pause = data.pause || {};
            const newSub = data.new_subscription || {};

            setValue('stop_pause_date_input', pause.start_date || '');
            setValue('stop_pause_date_hijri', pause.start_date ? formatHijri(parseYmdToLocalDate(pause.start_date)) : '');
            setValue('stop_pause_days', pause.days || '');
            setValue('stop_resume_date', newSub.start_date || '');
            setValue('stop_resume_date_hijri', newSub.start_date ? formatHijri(parseYmdToLocalDate(newSub.start_date)) :
                '');

            const tbody = document.getElementById('stop_preview_body');
            if (tbody) {
                tbody.innerHTML = `
                    <tr>
                        <td>${newSub.verification_code || newSub.subscription_no || '-'}</td>
                        <td>اشتراك</td>
                        <td>${newSub.start_date || '-'}</td>
                        <td>${newSub.end_date || '-'}</td>
                        <td>${newSub.duration || '-'}</td>
                        <td>معتمد</td>
                    </tr>
                `;
            }
            document.getElementById('stop_preview_wrap')?.classList.remove('d-none');
        }

        function fillTransferViewData(data) {
            const transfer = data.transfer || {};
            const payments = transfer.payments || [];

            setValue('transfer_target_member_code', transfer.to_member?.member_code || '');
            setValue('transfer_target_member_name', transfer.to_member?.name || '');
            setValue('transfer_date_input', transfer.transfer_date || '');
            setValue('transfer_date_hijri', transfer.transfer_date ? formatHijri(parseYmdToLocalDate(transfer
                .transfer_date)) : '');
            setValue('transfer_fee', transfer.fee || '0.00');
            setValue('transfer_tax', transfer.tax_amount || '0.00');
            setValue('transfer_total', transfer.total_amount || '0.00');
            setValue('transfer_paid_total', transfer.total_amount || '0.00');
            setValue('transfer_remaining_total', '0.00');
            setText('transfer_paid_total_text', transfer.total_amount || '0.00');
            setText('transfer_remaining_total_text', '0.00');
            setText('transfer_payment_state_text', transfer.payment_status || 'paid');
            setValue('transfer_modal_total', transfer.total_amount || '0.00');
            setValue('transfer_modal_paid', transfer.total_amount || '0.00');
            setValue('transfer_modal_remaining', '0.00');

            const rowsWrap = document.getElementById('transfer_payment_rows');
            if (rowsWrap) {
                rowsWrap.innerHTML = '';
                payments.forEach(p => {
                    const row = document.createElement('div');
                    row.className = 'payment-row mb-2';
                    row.innerHTML = `
                        <div class="row g-2">
                            <div class="col-md-5"><input type="text" class="form-control" value="${p.method || '-'}" readonly></div>
                            <div class="col-md-3"><input type="text" class="form-control" value="${p.amount || '0.00'}" readonly></div>
                            <div class="col-md-4"><input type="text" class="form-control" value="${p.notes || ''}" readonly></div>
                        </div>
                    `;
                    rowsWrap.appendChild(row);
                });
            }

            const paymentsText = payments.map(p => `${p.method} (${p.amount})`).join(' + ') || '-';
            const tbody = document.getElementById('transfer_preview_body');
            if (tbody) {
                tbody.innerHTML = `
                    <tr>
                        <td>${data.qrn || '-'}</td>
                        <td>تنازل</td>
                        <td>${transfer.from_member?.name || data.member?.name || '-'}</td>
                        <td>${transfer.to_member?.name || '-'}</td>
                        <td>${transfer.transfer_date || '-'}</td>
                        <td>${data.source_subscription?.item_name || '-'}</td>
                        <td>${transfer.total_amount || '-'}</td>
                        <td>${paymentsText}</td>
                        <td>${transfer.payment_status || '-'}</td>
                        <td>معتمد</td>
                    </tr>
                `;
            }
            document.getElementById('transfer_preview_wrap')?.classList.remove('d-none');
        }


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

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

            let tabSwitchGuard = false;

            function handleTabSwitchGuard(e) {
                if (tabSwitchGuard) return;

                const targetId = e.target?.id || '';
                const stopTabBtn = document.getElementById('stop-tab');
                const transferTabBtn = document.getElementById('transfer-tab');

                const goingToTransfer = targetId === 'transfer-tab';
                const goingToStop = targetId === 'stop-tab';

                if (!goingToTransfer && !goingToStop) return;

                // من إيقاف -> تنازل
                if (goingToTransfer && stopTabBtn?.classList.contains('active') && hasStopDraftData()) {
                    e.preventDefault();

                    const ok = confirm('يوجد بيانات مدخلة داخل الإيقاف. هل تريد مسحها والانتقال إلى التنازل؟');
                    if (!ok) return;

                    clearStopDraft();

                    tabSwitchGuard = true;
                    bootstrap.Tab.getOrCreateInstance(transferTabBtn).show();
                    setTimeout(() => tabSwitchGuard = false, 0);
                    return;
                }

                // من تنازل -> إيقاف
                if (goingToStop && transferTabBtn?.classList.contains('active') && hasTransferDraftData()) {
                    e.preventDefault();

                    const ok = confirm('يوجد بيانات مدخلة داخل التنازل. هل تريد مسحها والانتقال إلى الإيقاف؟');
                    if (!ok) return;

                    clearTransferDraft();

                    tabSwitchGuard = true;
                    bootstrap.Tab.getOrCreateInstance(stopTabBtn).show();
                    setTimeout(() => tabSwitchGuard = false, 0);
                    return;
                }
            }


            document.getElementById('stop-tab')?.addEventListener('show.bs.tab', handleTabSwitchGuard);
            document.getElementById('transfer-tab')?.addEventListener('show.bs.tab', handleTabSwitchGuard);

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

            if (branchSelect && branchSelect.tagName === 'SELECT') {
                branchSelect.addEventListener('change', function() {
                    clearInvalid('common_branch_id');
                    clearInvalid('common_qrn_input');
                    setValue('common_qrn_input', '');
                    updateBranchDependentState();
                    refreshQrn();
                });
            } else {
                updateBranchDependentState();
                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', () => {
                if (!isBranchAndQrnReady()) {
                    const modalEl = document.getElementById('subscriptionSearchModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();

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

                    if (!hasValidBranchSelection()) {
                        setInvalid('common_branch_id', 'اختر الفرع أولاً.');
                    } else {
                        setInvalid('common_qrn_input', 'انتظر حتى يظهر رقم الوثيقة أولاً.');
                    }
                    return;
                }

                const qEl = document.getElementById('subscription_q');
                qEl.value = '';
                qEl.focus();
                loadSubscriptions('');
            });

            document.getElementById('memberSearchModal').addEventListener('shown.bs.modal', () => {
                if (!isBranchAndQrnReady()) {
                    const modalEl = document.getElementById('memberSearchModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();

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

                    if (!hasValidBranchSelection()) {
                        setInvalid('common_branch_id', 'اختر الفرع أولاً.');
                    } else {
                        setInvalid('common_qrn_input', 'انتظر حتى يظهر رقم الوثيقة أولاً.');
                    }
                    return;
                }

                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('common_subscription_no_picker')?.addEventListener('click', function(e) {
                if (!isBranchAndQrnReady()) {
                    e.preventDefault();
                    e.stopPropagation();
                    clearInvalid('common_branch_id');
                    clearInvalid('common_qrn_input');

                    if (!hasValidBranchSelection()) {
                        setInvalid('common_branch_id', 'اختر الفرع أولاً.');
                    } else {
                        setInvalid('common_qrn_input', 'انتظر حتى يظهر رقم الوثيقة أولاً.');
                    }
                    return false;
                }
            });

            document.getElementById('transfer_target_member_name')?.addEventListener('click', function(e) {
                if (!isBranchAndQrnReady()) {
                    e.preventDefault();
                    e.stopPropagation();
                    clearInvalid('common_branch_id');
                    clearInvalid('common_qrn_input');

                    if (!hasValidBranchSelection()) {
                        setInvalid('common_branch_id', 'اختر الفرع أولاً.');
                    } else {
                        setInvalid('common_qrn_input', 'انتظر حتى يظهر رقم الوثيقة أولاً.');
                    }
                    return false;
                }
            });


            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();

                // await loadViewDocumentMode();


            });

            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');
                setValue('common_qrn_input', '');
                updateBranchDependentState();
                refreshQrn();
            });

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

            if (VIEW_MODE && VIEW_DOCUMENT_ID) {
                try {
                    const {
                        res,
                        json
                    } = await fetchDocumentForView(VIEW_DOCUMENT_ID);
                    if (!res.ok) {
                        alert(json.message || 'تعذر تحميل بيانات الوثيقة');
                    } else {
                        enableReadonlyViewMode();
                        fillCommonDocumentFields(json);

                        const stopTabBtn = document.getElementById('stop-tab');
                        const transferTabBtn = document.getElementById('transfer-tab');

                        if (json.doc_type === 'transfer') {
                            stopTabBtn?.classList.add('d-none');
                            stopTabBtn?.setAttribute('disabled', 'disabled');
                            document.getElementById('transfer-tab')?.click();
                            fillTransferViewData(json);
                        } else {
                            transferTabBtn?.classList.add('d-none');
                            transferTabBtn?.setAttribute('disabled', 'disabled');
                            document.getElementById('stop-tab')?.click();
                            fillStopViewData(json);
                        }
                    }
                } catch (e) {
                    alert('حدث خطأ أثناء تحميل الوثيقة');
                }
                return;
            }

            syncTopTabActions('stop');

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

            updateBranchDependentState();

        });

        function fillCommonDocData(data) {
            const source = data.source_subscription || {};
            const member = data.member || {};
            const usage = data.usage || {};

            setValue('common_qrn_input', data.qrn || '');
            setValue('common_doc_date_greg', data.created_at || '');
            setValue('common_doc_date_hijri', data.created_at ? formatHijri(parseYmdToLocalDate(data.created_at)) : '');

            setValue('common_subscription_no_picker', source.verification_code || source.subscription_no || '');
            setValue('common_member_code', member.member_code || '');
            setValue('common_member_name', member.name || '');
            setValue('common_member_status', translateMemberStatus(member.status || ''));
            setValue('common_item_name', source.item_name || '');
            setValue('common_subscription_type', 'اشتراك');
            setValue('common_state_label', data.state_label || '');
            setValue('common_start_date', source.start_date || '');
            setValue('common_end_date', source.end_date || '');

            const remainingDaysText = diffDaysRemainingFromToday(source.end_date || '');
            setValue('common_remaining_days_text', remainingDaysText !== '' ? `${remainingDaysText} يوم` : '');

            // الفرع
            const branchText = document.getElementById('common_branch_name_text');
            if (branchText) {
                branchText.textContent = data.branch_name || '';
            }

            const branchEl = document.getElementById('common_branch_id');
            if (branchEl && branchEl.tagName === 'SELECT') {
                const wantedId = String(data.branch_id || '');
                if (wantedId) {
                    let option = Array.from(branchEl.options).find(o => String(o.value) === wantedId);
                    if (!option) {
                        option = new Option(data.branch_name || 'الفرع', wantedId, true, true);
                        branchEl.add(option);
                    }
                    branchEl.value = wantedId;
                }
            } else if (branchEl && branchEl.tagName === 'INPUT') {
                branchEl.value = data.branch_id || '';
            }

            // الإيقافات
            setValue('common_badge_times', `${usage.remaining_times ?? 0}`);
            setValue('common_badge_days', `${usage.remaining_days ?? 0}`);
        }

        function renderStopViewData(data) {
            const pause = data.pause || {};
            const newSub = data.new_subscription || {};

            setValue('stop_pause_date_input', pause.start_date || '');
            setValue('stop_pause_date_hijri', pause.start_date ? formatHijri(parseYmdToLocalDate(pause.start_date)) : '');
            setValue('stop_pause_days', pause.days || '');
            setValue('stop_resume_date', newSub.start_date || '');
            setValue('stop_resume_date_hijri', newSub.start_date ? formatHijri(parseYmdToLocalDate(newSub.start_date)) :
                '');

            const tbody = document.getElementById('stop_preview_body');
            if (tbody) {
                tbody.innerHTML = `
            <tr>
                <td>${newSub.verification_code || newSub.subscription_no || '-'}</td>
                <td>اشتراك</td>
                <td>${newSub.start_date || '-'}</td>
                <td>${newSub.end_date || '-'}</td>
                <td>${newSub.duration || '-'}</td>
                <td>معتمد</td>
            </tr>
        `;
            }

            document.getElementById('stop_preview_wrap')?.classList.remove('d-none');
        }

        function renderTransferViewData(data) {
            const transfer = data.transfer || {};
            const payments = transfer.payments || [];

            setValue('transfer_target_member_code', transfer.to_member?.member_code || '');
            setValue('transfer_target_member_name', transfer.to_member?.name || '');
            setValue('transfer_date_input', transfer.transfer_date || '');
            setValue('transfer_date_hijri', transfer.transfer_date ? formatHijri(parseYmdToLocalDate(transfer
                .transfer_date)) : '');

            setValue('transfer_fee', transfer.fee || '0.00');
            setValue('transfer_tax', transfer.tax_amount || '0.00');
            setValue('transfer_total', transfer.total_amount || '0.00');

            setValue('transfer_paid_total', transfer.total_amount || '0.00');
            setValue('transfer_remaining_total', '0.00');
            setText('transfer_paid_total_text', transfer.total_amount || '0.00');
            setText('transfer_remaining_total_text', '0.00');
            setText('transfer_payment_state_text', transfer.payment_status === 'paid' ? 'مكتمل' : (transfer
                .payment_status || '-'));

            setValue('transfer_modal_total', transfer.total_amount || '0.00');
            setValue('transfer_modal_paid', transfer.total_amount || '0.00');
            setValue('transfer_modal_remaining', '0.00');

            const rowsWrap = document.getElementById('transfer_payment_rows');
            if (rowsWrap) {
                rowsWrap.innerHTML = '';

                payments.forEach(p => {
                    const row = document.createElement('div');
                    row.className = 'payment-row mb-2';
                    row.innerHTML = `
                <div class="row g-2">
                    <div class="col-md-5">
                        <input type="text" class="form-control" value="${p.method || '-'}" readonly>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" value="${p.amount || '0.00'}" readonly>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" value="${p.notes || ''}" readonly>
                    </div>
                </div>
            `;
                    rowsWrap.appendChild(row);
                });
            }

            const paymentsText = payments.map(p => `${p.method} (${p.amount})`).join(' + ') || '-';

            const tbody = document.getElementById('transfer_preview_body');
            if (tbody) {
                tbody.innerHTML = `
            <tr>
                <td>${data.qrn || '-'}</td>
                <td>تنازل</td>
                <td>${transfer.from_member?.name || data.member?.name || '-'}</td>
                <td>${transfer.to_member?.name || '-'}</td>
                <td>${transfer.transfer_date || '-'}</td>
                <td>${data.source_subscription?.item_name || '-'}</td>
                <td>${transfer.total_amount || '-'}</td>
                <td>${paymentsText}</td>
                <td>${transfer.payment_status === 'paid' ? 'مكتمل' : (transfer.payment_status || '-')}</td>
                <td>معتمد</td>
            </tr>
        `;
            }

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

        function setViewModeTabsByDocType(docType) {
            const stopTab = document.getElementById('stop-tab');
            const transferTab = document.getElementById('transfer-tab');

            if (!stopTab || !transferTab) return;

            if (docType === 'stop') {
                transferTab.classList.add('d-none');
                stopTab.classList.add('active');
                document.getElementById('stopTab')?.classList.add('show', 'active');
                document.getElementById('transferTab')?.classList.remove('show', 'active');
            } else if (docType === 'transfer') {
                stopTab.classList.add('d-none');
                transferTab.classList.add('active');
                document.getElementById('transferTab')?.classList.add('show', 'active');
                document.getElementById('stopTab')?.classList.remove('show', 'active');
            }
        }

        function enableReadonlyViewMode() {
            document.getElementById('stop_top_actions')?.classList.add('d-none');
            document.getElementById('transfer_top_actions')?.classList.add('d-none');
            document.getElementById('stop_btn_apply')?.classList.add('d-none');
            document.getElementById('transfer_btn_apply')?.classList.add('d-none');
            document.getElementById('common_btn_reset')?.classList.add('d-none');
            document.getElementById('transfer_btn_payment')?.classList.add('d-none');
            document.getElementById('btn_add_payment_row_modal')?.classList.add('d-none');
            document.getElementById('transfer_btn_confirm_payment')?.classList.add('d-none');

            const subPicker = document.getElementById('common_subscription_no_picker');
            const memberPicker = document.getElementById('transfer_target_member_name');

            if (subPicker) {
                subPicker.removeAttribute('data-bs-toggle');
                subPicker.removeAttribute('data-bs-target');
                subPicker.style.pointerEvents = 'none';
            }

            if (memberPicker) {
                memberPicker.removeAttribute('data-bs-toggle');
                memberPicker.removeAttribute('data-bs-target');
                memberPicker.style.pointerEvents = 'none';
            }

            document.querySelectorAll(
                    '#secTabsContent input, #secTabsContent select, #secTabsContent textarea, #secTabsContent button')
                .forEach(el => {
                    el.disabled = true;
                    el.readOnly = true;
                });
        }

        async function fetchDocumentForView(documentId) {
            const url = DOC_SHOW_URL_TPL.replace('DOC_ID', documentId);
            return await fetchJSON(url, {
                headers: {
                    'Accept': 'application/json'
                }
            });
        }

        async function loadViewDocumentMode() {
            if (!VIEW_MODE || !VIEW_DOCUMENT_ID) return;

            try {
                const {
                    res,
                    json
                } = await fetchDocumentForView(VIEW_DOCUMENT_ID);

                if (!res.ok) {
                    alert(json.message || 'تعذر تحميل بيانات الوثيقة');
                    return;
                }

                enableReadonlyViewMode();

                // تعبئة البيانات الأساسية
                if (typeof fillCommonDocData === 'function') {
                    fillCommonDocData(json);
                }

                // فتح التبويب المناسب ومنع الآخر
                if (json.doc_type === 'stop') {
                    document.getElementById('transfer-tab')?.classList.add('d-none');
                    document.getElementById('stop-tab')?.classList.add('active');
                    document.getElementById('stopTab')?.classList.add('show', 'active');
                    document.getElementById('transferTab')?.classList.remove('show', 'active');

                    if (typeof renderStopViewData === 'function') {
                        renderStopViewData(json);
                    }
                } else if (json.doc_type === 'transfer') {
                    document.getElementById('stop-tab')?.classList.add('d-none');
                    document.getElementById('transfer-tab')?.classList.add('active');
                    document.getElementById('transferTab')?.classList.add('show', 'active');
                    document.getElementById('stopTab')?.classList.remove('show', 'active');

                    if (typeof renderTransferViewData === 'function') {
                        renderTransferViewData(json);
                    }
                }

                // =========================
                // الإصلاح النهائي للمشكلة
                // =========================
                const usage = json.usage || {};
                const policy = json.policy || {};

                // لو المطلوب "المتبقي" مثل شاشة الإضافة
                setValue('common_badge_times', `${usage.remaining_times ?? 0}`);
                setValue('common_badge_days', `${usage.remaining_days ?? 0}`);

                // لو تريد "الإجمالي من إعدادات الخدمة" بدل المتبقي، استخدم هذا بدل السطرين فوق:
                // setValue('common_badge_times', `${policy.max_times ?? 0}`);
                // setValue('common_badge_days', `${policy.max_total_days ?? 0}`);

                // تشخيص مؤقت
                console.log('usage from view mode:', usage);

            } catch (e) {
                console.error(e);
                alert('حدث خطأ أثناء تحميل الوثيقة');
            }
        }

        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) {
                    let msg = json.message || 'تعذر حفظ التنازل';

                    if (json.errors) {
                        const all = Object.values(json.errors).flat();
                        if (all.length) msg = all.join(' | ');
                    }

                    if (json.debug) {
                        msg += ' | ' + json.debug;
                    }


                    showErr('transfer_msg_err', 'transfer_msg_err_text', msg);
                    return;
                }

                if (json.redirect) {
                    window.location.href = json.redirect;
                    return;
                }

                showErr('transfer_msg_err', 'transfer_msg_err_text', 'تم الحفظ لكن لم يتم العثور على رابط العرض.');
            } 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('stop_msg_err', 'stop_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,
                        notes: document.getElementById('stop_notes')?.value || null
                    })
                });

                if (!res.ok) {
                    let msg = json.message || 'تعذر حفظ الإيقاف';

                    if (json.errors) {
                        const all = Object.values(json.errors).flat();
                        if (all.length) msg = all.join(' | ');
                    }

                    if (json.debug) {
                        msg += ' | ' + json.debug;
                    }

                    showErr('stop_msg_err', 'stop_msg_err_text', msg);
                    console.error('saveStop error response:', json);
                    return;
                }

                if (json.redirect) {
                    window.location.href = json.redirect;
                    return;
                }

                showErr('stop_msg_err', 'stop_msg_err_text', 'تم الحفظ لكن لم يتم العثور على رابط العرض.');
            } catch (e) {
                console.error('saveStop exception:', 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 = '';
            }

            const total = document.getElementById('transfer_total')?.value || '0.00';
            setValue('transfer_paid_total', '0.00');
            setValue('transfer_remaining_total', total);
            setValue('transfer_modal_total', total);
            setValue('transfer_modal_paid', '0.00');
            setValue('transfer_modal_remaining', total);
            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 = total;
        }

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

            refreshTransferPreviewPaymentState();
            syncTransferSaveState();
        }

        function refreshTransferPreviewPaymentState() {
            const wrap = document.getElementById('transfer_preview_wrap');
            if (!wrap || wrap.classList.contains('d-none')) return;

            const total = parseFloat(document.getElementById('transfer_total')?.value || 0);
            const paid = parseFloat(document.getElementById('transfer_paid_total')?.value || 0);
            const remaining = parseFloat(document.getElementById('transfer_remaining_total')?.value || 0);
            const payments = collectPayments().filter(p => parseFloat(p.amount || 0) > 0 && p.payment_method_id);

            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 (paid > 0 && remaining <= 0) paymentStateLabel = 'مدفوع بالكامل';
            else if (paid > 0 && paid < total) paymentStateLabel = 'مدفوع جزئيًا';

            const methodCell = document.getElementById('transfer_preview_payment_method');
            const stateCell = document.getElementById('transfer_preview_payment_state');
            if (methodCell) methodCell.textContent = paymentMethodLabel;
            if (stateCell) stateCell.textContent = paymentStateLabel;
        }

        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;

            const branchReady = hasValidBranchSelection() && hasValidDocumentNo();

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

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


        }

        function hasGeneratedQrn() {
            const qrn = (document.getElementById('common_qrn_input')?.value || '').trim();
            return qrn.length > 0;
        }

        function isBranchAndQrnReady() {
            return hasValidBranchSelection() && hasGeneratedQrn();
        }

        function lockCommonPickers(lock = true) {
            const ids = [
                'common_subscription_no_picker',
                'btnSubscriptionSearch',
                'btnSubscriptionSearchClear',
                'subscription_q',
                'transfer_target_member_name',
                'btnMemberSearch',
                'btnMemberSearchClear',
                'member_q'
            ];
            ids.forEach(id => {
                const el = document.getElementById(id);
                if (el) el.disabled = lock;
            });
        }

        function toggleDisabled(selector, disabled = true) {
            document.querySelectorAll(selector).forEach(el => {
                el.disabled = disabled;
            });
        }

        function renderStopViewData(data) {
            const pause = data.pause || {};
            const newSub = data.new_subscription || {};

            setValue('stop_pause_date_input', pause.start_date || '');
            setValue('stop_pause_date_hijri', pause.start_date ? formatHijri(parseYmdToLocalDate(pause.start_date)) : '');
            setValue('stop_pause_days', pause.days || '');
            setValue('stop_resume_date', newSub.start_date || '');
            setValue('stop_resume_date_hijri', newSub.start_date ? formatHijri(parseYmdToLocalDate(newSub.start_date)) :
                '');

            setValue('common_badge_days', pause.days || '-');

            const tbody = document.getElementById('stop_preview_body');
            if (tbody) {
                tbody.innerHTML = `
            <tr>
                <td>${newSub.verification_code || newSub.subscription_no || '-'}</td>
                <td>اشتراك</td>
                <td>${newSub.start_date || '-'}</td>
                <td>${newSub.end_date || '-'}</td>
                <td>${newSub.duration || '-'}</td>
                <td>معتمد</td>
            </tr>
        `;
            }

            document.getElementById('stop_preview_wrap')?.classList.remove('d-none');
        }
    </script>
@endsection