@extends('layouts.master')
@section('title', 'فهرس الاشتراكات')

@section('css')
    <style>
        .page-wrap {
            padding: 18px
        }

        .big-card {
            border-radius: 14px;
            box-shadow: 0 4px 22px rgba(0, 0, 0, .06);
            overflow: hidden;
            background: transparent;
        }

        .big-header {
            padding: 14px 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: nowrap;
            background: transparent;
        }

        .filters {
            display: flex;
            gap: 5px;
            justify-content: space-between;
            flex-wrap: wrap;
            flex: 1;
        }

        .filters input {
            max-width: 200px;
        }

        .hdr-right {
            white-space: nowrap;
        }

        .body {
            padding: 16px
        }

        .cardx {
            border: 1px solid #eef1f4;
            border-radius: 14px;
            padding: 13px;
            background: transparent;
        }

        .kpi {
            font-size: 12px;
            color: #7b8794;
            margin-bottom: 6px;
            text-align: center;
        }

        .val {
            font-weight: 500;
            font-size: 22px
        }

        .muted {
            color: #6c757d
        }

        .badge-soft {
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px
        }

        .badge-active {
            background: #e9f7ef;
            color: #198754
        }

        .badge-inactive {
            background: #fdecea;
            color: #dc3545
        }

        .service-mini {
            border-radius: 10px;
        }

        .service-mini .top {
            text-align: center;
            font-weight: 800;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .doc-tabs {
            border-bottom: 1px solid #e6e8eb;
            display: flex;
            gap: 8px;
            padding: 0 12px;
        }

        .doc-tabs .tab-btn {
            border: 1px solid #e6e8eb;
            border-bottom: none;
            padding: 8px 14px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            color: #333;
            cursor: pointer;
            transition: .15s;
            background: transparent;
        }

        .doc-tabs .tab-btn.active {
            background: #c3c4c3;
            color: #111;
            position: relative;
            top: 1px;
        }

        .doc-tab-content {
            padding: 14px;
            border: 1px solid #e6e8eb;
            border-top: none;
            border-bottom-left-radius: 14px;
            border-bottom-right-radius: 14px;
            background: transparent;
        }

        .tab-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .panel {
            border: 1px solid #e6e8eb;
            border-radius: 10px;
            overflow: hidden;
            background: transparent;
        }

        .panel .panel-hdr {
            padding: 10px 12px;
            font-weight: 800;
            font-size: 13px;
            border-bottom: 1px solid #e0e3e7;
            background: transparent;
        }

        .panel .panel-body {
            padding: 12px;
        }

        .doc-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid #e6e8eb;
            border-radius: 8px;
        }

        .doc-topline .right,
        .doc-topline .left {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
            text-align: center;
        }

        .doc-top-badge {
            border-bottom: 1px solid #e2e6ea;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 12px;
            font-weight: 800;
            min-width: 90px;
            text-align: center;
            background: transparent;
        }

        .doc-title {
            margin-top: 10px;
            border: 1px solid #e6e8eb;
            border-radius: 8px;
            padding: 12px;
            font-weight: 900;
            font-size: 18px;
            background: transparent;
        }

        .doc-sub {
            margin-top: 10px;
            border: 1px solid #e6e8eb;
            border-radius: 8px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: transparent;
        }

        .doc-meta {
            display: flex;
            gap: 14px;
            align-items: center;
            flex-wrap: wrap;
            color: #6c757d;
            font-size: 12px;
        }

        .doc-meta i {
            margin-left: 6px;
        }

        .actions-box {
            border: 1px solid #e6e8eb;
            border-radius: 8px;
            padding: 14px;
            color: #6c757d;
            font-size: 13px;
            min-height: 180px;
            background: transparent;
            line-height: 1.9;
        }

        .action-item {
            padding: 8px 0;
            border-bottom: 1px dashed rgba(0, 0, 0, .1);
        }

        .action-item:last-child {
            border-bottom: 0;
        }

        .action-label {
            font-weight: 800;
            color: #0d6efd;
        }

        .action-value {
            font-weight: 700;
        }

        .status-pill {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            min-width: 90px;
            text-align: center;
        }

        .status-active {
            background: #e9f7ef;
            color: #198754;
        }

        .status-accepted {
            background: #e7f1ff;
            color: #0d6efd;
        }

        .status-paused {
            background: #fff3cd;
            color: #856404;
        }

        .status-ended {
            background: #f8d7da;
            color: #842029;
        }

        .status-transfer {
            background: #e8f7ff;
            color: #0c63e7;
        }

        .status-default {
            background: #eef1f4;
            color: #6c757d;
        }

        @media (max-width:992px) {
            .tab-grid {
                grid-template-columns: 1fr;
            }
        }

        .period-toolbar {
            display: flex;
            gap: 8px;
            padding: 8px 10px;
            border-bottom: 1px solid #e6e8eb;
        }

        .period-toolbar .tool-btn {
            border: 1px solid #e1e4e8;
            padding: 6px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            background: transparent;
        }

        .period-toolbar .tool-btn.active {
            background: #e9ecef9c;
        }

        .period-grid {
            display: grid;
            grid-template-columns: 1.2fr .7fr 1fr;
            gap: 12px;
            padding: 12px;
        }

        .period-box {
            border: 1px solid #e6e8eb;
            border-radius: 10px;
            overflow: hidden;
            background: transparent;
        }

        .period-box .hdr {
            padding: 9px 10px;
            font-weight: 900;
            font-size: 13px;
            border-bottom: 1px solid #e0e3e7;
            background: transparent;
        }

        .period-box .cnt {
            padding: 12px;
        }

        .period-note {
            margin-top: 10px;
            border: 1px solid #e6e8eb;
            border-radius: 8px;
            padding: 10px;
            color: #6c757d;
            font-size: 12px;
            display: flex;
            gap: 8px;
            align-items: center;
            background: transparent;
        }

        .period-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #ccc;
            display: grid;
            place-items: center;
            background: transparent;
            cursor: pointer;
        }

        .icon-circle.ok {
            border-color: #198754;
            color: #198754;
        }

        .icon-circle.no {
            border-color: #dc3545;
            color: #dc3545;
        }

        @media (max-width:992px) {
            .period-grid {
                grid-template-columns: 1fr;
            }
        }

        #toastMsg {
            position: fixed;
            bottom: 18px;
            left: 18px;
            z-index: 9999;
            display: none;
        }

        .status-card {
            border: 1px solid rgba(172, 15, 15, 0.18);
            background: transparent;
            color: inherit;
            border-radius: 12px;
            padding: 10px 10px;
            min-width: 120px;
            margin: 5px;
            cursor: pointer;
            transition: .15s;
        }

        .status-card:hover {
            transform: translateY(-1px);
        }

        .status-card .lbl {
            font-weight: 800;
            font-size: 13px;
            opacity: .9;
        }

        .status-card.active {
            outline: 2px solid rgba(13, 110, 253, .65);
            border-color: rgba(25, 135, 84, .55);
            box-shadow: 0 0 0 2px rgba(25, 135, 84, .25) inset;
            background: #4e4e4e;
            color: red;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid page-wrap">

        <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" id="tabListBtn" data-bs-toggle="tab" data-bs-target="#tabList" type="button"
                    role="tab">
                    فهرس الاشتراكات
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="tabDetailsBtn" data-bs-toggle="tab" data-bs-target="#tabDetails" type="button"
                    role="tab" disabled>
                    تفاصيل الاشتراك
                </button>
            </li>
        </ul>

        <div class="tab-content">

            <div class="tab-pane fade show active" id="tabList" role="tabpanel">

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="fw-bold mb-0">فهرس الاشتراكات</h4>

                    <input id="q" class="form-control form-control-sm" style="width:320px"
                        placeholder="بحث: اعتماد / فاتورة / عضو / خدمة">
                </div>

                <hr>

                <div class="d-flex flex-wrap mb-2 text-center" id="statusCards">
                    <button type="button" class="status-card active" data-status="">
                        <div class="lbl">الكل</div>
                    </button>

                    @foreach ($statuses as $st)
                        <button type="button" class="status-card" data-status="{{ $st->code }}">
                            <div class="lbl">{{ $st->name_ar }}</div>
                        </button>
                    @endforeach
                </div>

                <input type="hidden" id="fSubStatus" value="">
                <hr>

                <div class="big-card">
                    <div class="body">
                        <table class="table table-bordered w-100 text-center" id="approvedListTable">
                            <thead>
                                <tr>
                                    <th>مسلسل</th>
                                    <th>رقم الاشتراك</th>
                                    <th>اسم المشترك</th>
                                    <th>رقم العضوية</th>
                                    <th>الخدمة</th>
                                    <th>الحالة</th>
                                    <th>نهاية الاشتراك</th>
                                </tr>
                            </thead>
                        </table>

                        <div class="text-muted small mt-2">
                            اضغط على أي صف لفتح تفاصيل الاشتراك
                        </div>
                    </div>
                </div>

            </div>

            <div class="tab-pane fade" id="tabDetails" role="tabpanel">

                <div class="big-card">

                    <div class="body">

                        <div class="row g-3 mb-3">

                            <div class="col-md-3">
                                <div class="cardx text-center">
                                    <div class="kpi">رقم الأشتراك</div>
                                    <div class="val" id="vVerification">—</div>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div class="cardx">
                                    <div class="kpi">تفاصيل الاشتراك</div>
                                    <div class="d-flex justify-content-around">
                                        <div>
                                            <div class="fw-bold" id="vStart">—</div>
                                        </div>
                                        <div>
                                            <div class="fw-bold" id="vEnd">—</div>
                                        </div>
                                        <div>
                                            <span class="fw-bold" id="vRemaining">—</span>
                                            <span class="muted">يوم</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="cardx">
                                    <div class="kpi">العضو</div>
                                    <div class="val text-center" style="font-size:18px" id="vMemberName">—</div>
                                    <div class="d-flex justify-content-around">
                                        <div class="muted mt-1"><span id="vMemberCode">—</span></div>
                                        <div class="mt-1">
                                            <span class="badge-soft badge-active" id="vMemberStatus">—</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="cardx d-flex justify-content-around">
                                    <div class="kpi">نوع الاشتراك</div>
                                    <div class="val" style="font-size:14px" id="vTypeLabel">—</div>
                                </div>
                            </div>

                            <div class="col-md-8">
                                <div class="cardx">
                                    <div id="vServiceCards" class="d-grid gap-2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3">

                            <div class="doc-tabs">
                                <button class="tab-btn active" data-tab="doc">بيانات الوثيقة</button>
                                <button class="tab-btn" data-tab="extra">معلومات إضافية</button>
                                <button class="tab-btn" data-tab="period">إجراءات فترات الاشتراك</button>
                            </div>

                            <div class="doc-tab-content">

                                <div class="tab-pane-x" id="tab-doc">

                                    <div class="tab-grid">

                                        <div class="panel">
                                            <div class="panel-hdr text-center">وثيقة الارتباط</div>
                                            <div class="panel-body">

                                                <div class="doc-topline">
                                                    <div class="right">
                                                        <div class="doc-top-badge">
                                                            <div class="text-muted" style="font-size:11px">رقم الفاتوره
                                                            </div>
                                                            <div class="fw-bold" id="vInvoice">—</div>
                                                        </div>

                                                        <div class="doc-top-badge">
                                                            <div class="text-muted" style="font-size:11px">الفرع</div>
                                                            <div class="fw-bold" id="tBranch">—</div>
                                                        </div>
                                                    </div>

                                                    <div class="left">
                                                        <div class="doc-top-badge">
                                                            <div class="text-muted" style="font-size:11px">تاريخ الاشتراك
                                                            </div>
                                                            <div class="fw-bold" id="tCreatedAt">—</div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="doc-title" id="tDocTitle">—</div>

                                                <div class="doc-sub">
                                                    <div class="doc-meta">
                                                        <span><i class="fas fa-user"></i><span
                                                                id="tCreator">—</span></span>
                                                        <span><i class="fas fa-calendar"></i><span
                                                                id="tCreatedAt2">—</span></span>
                                                    </div>

                                                    <div class="doc-meta">
                                                        <span><i class="fas fa-hashtag"></i><span
                                                                id="tVerification">—</span></span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="panel">
                                            <div class="panel-hdr">الإجراءات</div>
                                            <div class="panel-body">
                                                <div class="actions-box" id="tActions">
                                                    لا يوجد إجراءات مسندة لهذا الاشتراك
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                                <div class="tab-pane-x d-none" id="tab-extra">
                                    <div class="cardx">
                                        <div class="kpi">ملاحظات / معلومات إضافية</div>
                                        <div class="text-muted" id="tExtra">لا توجد بيانات حالياً</div>
                                    </div>
                                </div>

                                <div class="tab-pane-x d-none" id="tab-period">

                                    <div class="period-toolbar">
                                        <button class="tool-btn active" data-mode="move">نقل الفترة</button>
                                        <button class="tool-btn" data-mode="stop">تعديل قيم الإيقاف</button>
                                        <button class="tool-btn" data-mode="paid_stop">تعديل قيم الإيقاف المدفوع</button>
                                    </div>

                                    <div class="period-grid">

                                        <div class="period-box">
                                            <div class="hdr">بيانات الفترة الجديدة</div>
                                            <div class="cnt">
                                                <div class="row g-2">
                                                    <div class="col-6">
                                                        <label class="form-label small mb-1">بداية الفترة</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="pStart">
                                                    </div>
                                                    <div class="col-6">
                                                        <label class="form-label small mb-1">نهاية الفترة</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="pEnd">
                                                    </div>
                                                </div>

                                                <div class="period-note">
                                                    <i class="fas fa-info-circle"></i>
                                                    <span>حدد بيانات الفترة الجديدة للاشتراك.</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="period-box">
                                            <div class="hdr">المدة (أيام)</div>
                                            <div class="cnt text-center">
                                                <div class="val" style="font-size:28px" id="pDays">—</div>

                                                <div class="period-actions">
                                                    <button class="icon-circle ok" id="pConfirm" title="تأكيد">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                    <button class="icon-circle no" id="pCancel" title="إلغاء">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="period-box">
                                            <div class="hdr">الإجراءات</div>
                                            <div class="cnt">
                                                <div class="actions-box" id="pActionsBox">
                                                    لا يوجد إجراءات مسندة لهذا الاشتراك
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div id="toastMsg" class="alert alert-dark shadow"></div>
@endsection

@section('js')
    <script>
        let selectedToken = null;
        let typingTimer = null;
        const STATUS_CODES = @json($statuses->pluck('code')->values());

        $(function() {
            refreshCounts();
            table.draw();
        });

        function toast(text, type = 'dark') {
            const el = $('#toastMsg');
            el.stop(true, true);
            el.removeClass().addClass('alert alert-' + type + ' shadow');
            el.text(text).fadeIn(120);
            setTimeout(() => el.fadeOut(200), 1800);
        }

        function valOf(id) {
            const el = $(id);
            return el.length ? el.val() : '';
        }

        function getFilters() {
            return {
                q: valOf('#q'),
                sub_status: valOf('#fSubStatus'),
                verification: valOf('#fVerification'),
                member_name: valOf('#fMemberName'),
                service_name: valOf('#fServiceName'),
                invoice_no: valOf('#fInvoice'),
            };
        }

        function refreshCounts() {
            $.get("{{ route('subscriptions.approved.api.status_counts') }}", {
                q: $('#q').val()
            }).done(res => {
                $('#cnt_all').text(res.all ?? 0);
                STATUS_CODES.forEach(code => $('#cnt_' + code).text(res[code] ?? 0));
            });
        }

        $(document).on('click', '#statusCards .status-card', function() {
            $('#statusCards .status-card').removeClass('active');
            $(this).addClass('active');

            const st = $(this).data('status') ?? '';
            $('#fSubStatus').val(st);

            table.draw();
            refreshCounts();

            if (selectedToken) loadDetails(selectedToken);
        });

        const table = $('#approvedListTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            ajax: {
                url: "{{ route('subscriptions.approved.list.data') }}",
                data: function(d) {
                    d.q = $('#q').val();
                    d.sub_status = $('#fSubStatus').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'subscription_no'
                },
                {
                    data: 'member_name'
                },
                {
                    data: 'member_code'
                },
                {
                    data: 'subscription_desc',
                    render: function(data, type, row) {
                        // يعرض الاسم فقط بدون المدة إن كانت راجعة مثل "اسم الخدمة 30 يوم"
                        if (!data) return '—';
                        return String(data).replace(/\s+\d+\s+يوم$/u, '').trim();
                    }
                },
                {
                    data: 'status_badge',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'end_date_fmt'
                },
            ],
            rowCallback: function(row, data) {
                $(row).css('cursor', 'pointer');
                $(row).attr('data-token', data.token);
            }
        });

        $('#q').on('input', function() {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(() => {
                table.draw();
                refreshCounts();
            }, 250);
        });

        $('#approvedListTable tbody').on('click', 'tr', function() {
            const token = $(this).attr('data-token');
            if (!token) return;

            selectedToken = token;

            $('#tabDetailsBtn').prop('disabled', false);

            const tab = new bootstrap.Tab(document.getElementById('tabDetailsBtn'));
            tab.show();

            loadDetails(token);
        });

        function loadDetails(token) {
            $.get("{{ route('subscriptions.approved.api.get') }}", {
                    token: token,
                    ...getFilters()
                })
                .done(res => paint(res))
                .fail(xhr => {
                    toast(xhr.responseJSON?.message ?? 'تعذر تحميل الاشتراك', 'danger');
                });
        }

        $('#fVerification,#fMemberName,#fServiceName,#fInvoice').on('input', function() {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(() => {
                refreshCounts();
                if (selectedToken) loadDetails(selectedToken);
            }, 350);
        });

        function safe(v) {
            return (v === null || v === undefined || v === '') ? '—' : v;
        }

        function getPrimaryServiceName(sub) {
            const details = sub.service?.details ?? [];
            if (details.length && details[0]?.name) {
                return details[0].name;
            }
            return sub.service?.title ?? '—';
        }

        function buildActionsHtml(sub) {
            const pa = sub.period_actions || {};
            const sd = sub.secondary_document || {};

            if (!pa.has_action && !sd.exists) {
                return 'لا يوجد إجراءات مسندة لهذا الاشتراك';
            }

            let html = '';

            html += `
                <div class="action-item">
                    <div class="action-label">حالة الاشتراك الحالية</div>
                    <div class="action-value">${safe(pa.action_label)}</div>
                </div>
            `;

            if (safe(pa.secondary_document_qrn) !== '—') {
                html += `
                    <div class="action-item">
                        <div class="action-label">رقم الوثيقة الثانوية</div>
                        <div class="action-value">${safe(pa.secondary_document_qrn)}</div>
                    </div>
                `;
            }

            if (safe(pa.secondary_document_type_label) !== '—') {
                html += `
                    <div class="action-item">
                        <div class="action-label">نوع الوثيقة الثانوية</div>
                        <div class="action-value">${safe(pa.secondary_document_type_label)}</div>
                    </div>
                `;
            }

            if (safe(pa.parent_subscription_no) !== '—') {
                html += `
                    <div class="action-item">
                        <div class="action-label">الاشتراك السابق</div>
                        <div class="action-value">${safe(pa.parent_subscription_no)}</div>
                    </div>
                `;
            }

            if (safe(pa.root_subscription_no) !== '—') {
                html += `
                    <div class="action-item">
                        <div class="action-label">الاشتراك الجذر</div>
                        <div class="action-value">${safe(pa.root_subscription_no)}</div>
                    </div>
                `;
            }

            if (safe(sub.real_invoice_no) !== '—' && safe(sub.invoice_no) !== safe(sub.real_invoice_no)) {
                html += `
                    <div class="action-item">
                        <div class="action-label">رقم الفاتورة الفعلي</div>
                        <div class="action-value">${safe(sub.real_invoice_no)}</div>
                    </div>
                `;
            }

            return html || 'لا يوجد إجراءات مسندة لهذا الاشتراك';
        }

        function buildExtraHtml(sub) {
            const pa = sub.period_actions || {};
            const sd = sub.secondary_document || {};

            return `
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">الاشتراك راجع من</div>
                            <div class="fw-bold text-center">${safe(pa.action_label)}</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">رقم الوثيقة الثانوية</div>
                            <div class="fw-bold text-center">${safe(pa.secondary_document_qrn || sd.qrn)}</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">نوع الوثيقة</div>
                            <div class="fw-bold text-center">${safe(pa.secondary_document_type_label || sd.doc_type_label)}</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">الاشتراك السابق</div>
                            <div class="fw-bold text-center">${safe(pa.parent_subscription_no)}</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">الاشتراك الجذر</div>
                            <div class="fw-bold text-center">${safe(pa.root_subscription_no)}</div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="cardx">
                            <div class="kpi">رقم الفاتورة الفعلي</div>
                            <div class="fw-bold text-center">${safe(sub.real_invoice_no)}</div>
                        </div>
                    </div>
                </div>
            `;
        }

        function buildPeriodActionsHtml(sub) {
            const pa = sub.period_actions || {};
            const parts = [];

            if (safe(pa.action_label) !== '—') {
                parts.push(
                    `<div class="action-item"><div class="action-label">الإجراء</div><div class="action-value">${safe(pa.action_label)}</div></div>`
                );
            }

            if (safe(pa.secondary_document_qrn) !== '—') {
                parts.push(
                    `<div class="action-item"><div class="action-label">رقم الوثيقة</div><div class="action-value">${safe(pa.secondary_document_qrn)}</div></div>`
                );
            }

            if (safe(pa.secondary_document_type_label) !== '—') {
                parts.push(
                    `<div class="action-item"><div class="action-label">نوع الوثيقة</div><div class="action-value">${safe(pa.secondary_document_type_label)}</div></div>`
                );
            }

            if (safe(pa.parent_subscription_no) !== '—') {
                parts.push(
                    `<div class="action-item"><div class="action-label">الاشتراك السابق</div><div class="action-value">${safe(pa.parent_subscription_no)}</div></div>`
                );
            }

            if (safe(pa.root_subscription_no) !== '—') {
                parts.push(
                    `<div class="action-item"><div class="action-label">الاشتراك الجذر</div><div class="action-value">${safe(pa.root_subscription_no)}</div></div>`
                );
            }

            return parts.length ? parts.join('') : 'لا يوجد إجراءات مسندة لهذا الاشتراك';
        }

        function paint(sub) {
            $('#vVerification').text(sub.verification_code ?? '—');
            $('#vInvoice').text(sub.invoice_no ?? '—');
            $('#hdrBranch').text(sub.branch ?? '—');

            $('#vStart').text(sub.dates?.start ?? '—');
            $('#vEnd').text(sub.dates?.end ?? '—');

            const rem = sub.dates?.remaining_days;
            $('#vRemaining').text(rem === null || rem === undefined ? '—' : rem);

            $('#vMemberName').text(sub.member?.name ?? '—');
            $('#vMemberCode').text(sub.member?.code ?? '—');

            if (sub.member?.status === 'نشط') {
                $('#vMemberStatus').removeClass('badge-inactive').addClass('badge-active').text('نشط');
            } else {
                $('#vMemberStatus').removeClass('badge-active').addClass('badge-inactive').text(sub.member?.status ??
                    'غير نشط');
            }

            $('#vTypeLabel').text(sub.type_label ?? '—');

            const cardsWrap = $('#vServiceCards');
            cardsWrap.html('');

            const details = sub.service?.details ?? [];
            if (details.length) {
                let html = '';
                details.forEach((item) => {
                    html += `
                        <div class="service-mini">
                            <div class="top">${safe(item.name)}</div>
                        </div>
                    `;
                });
                cardsWrap.html(html);
            } else {
                cardsWrap.html(`<div class="text-muted">${safe(getPrimaryServiceName(sub))}</div>`);
            }

            $('#tBranch').text(sub.branch ?? '—');

            const created = sub.created_at ?? null;
            if (created && typeof moment !== 'undefined') {
                $('#tCreatedAt').text(moment(created).format('DD/MM/YYYY'));
                $('#tCreatedAt2').text(moment(created).format('DD/MM/YYYY hh:mm A'));
            } else {
                $('#tCreatedAt').text(created ?? '—');
                $('#tCreatedAt2').text(created ?? '—');
            }

            $('#tCreator').text(sub.creator?.name ?? '—');
            $('#tVerification').text(sub.verification_code ?? '—');

            // مهم: اسم الخدمة فقط بدل اسم العرض
            // $('#tDocTitle').text(getPrimaryServiceName(sub));

            const serviceTitle = getPrimaryServiceName(sub);
            const offerTitle = sub.service?.offer_title ?? null;

            $('#tDocTitle').text(
                offerTitle ?
                `${serviceTitle} — ضمن عرض: ${offerTitle}` :
                serviceTitle
            );



            $('#tActions').html(buildActionsHtml(sub));
            $('#tExtra').html(buildExtraHtml(sub));
            $('#pActionsBox').html(buildPeriodActionsHtml(sub));

            $('#pStart').val(sub.dates?.start && sub.dates.start !== '—' ? sub.dates.start : '');
            $('#pEnd').val(sub.dates?.end && sub.dates.end !== '—' ? sub.dates.end : '');
            calcDays();
        }

        $(document).on('click', '.doc-tabs .tab-btn', function() {
            $('.doc-tabs .tab-btn').removeClass('active');
            $(this).addClass('active');

            const key = $(this).data('tab');
            $('.tab-pane-x').addClass('d-none');

            if (key === 'doc') $('#tab-doc').removeClass('d-none');
            if (key === 'extra') $('#tab-extra').removeClass('d-none');
            if (key === 'period') $('#tab-period').removeClass('d-none');
        });

        $(document).on('click', '.period-toolbar .tool-btn', function() {
            $('.period-toolbar .tool-btn').removeClass('active');
            $(this).addClass('active');

            const mode = $(this).data('mode');
            const modeMap = {
                move: 'نقل الفترة',
                stop: 'تعديل قيم الإيقاف',
                paid_stop: 'تعديل قيم الإيقاف المدفوع'
            };

            const current = $('#pActionsBox').html();
            const prefix = `
                <div class="action-item">
                    <div class="action-label">الوضع الحالي</div>
                    <div class="action-value">${modeMap[mode] || mode}</div>
                </div>
            `;
            $('#pActionsBox').html(prefix + current);
        });

        function calcDays() {
            const s = $('#pStart').val();
            const e = $('#pEnd').val();

            if (!s || !e) {
                $('#pDays').text('—');
                return;
            }

            const sd = new Date(s),
                ed = new Date(e);
            const diff = Math.round((ed - sd) / (1000 * 60 * 60 * 24));

            if (diff < 0) {
                $('#pDays').text('—');
                toast('تاريخ النهاية يجب أن يكون بعد البداية', 'warning');
                return;
            }

            $('#pDays').text(diff);
        }

        $(document).on('change', '#pStart,#pEnd', calcDays);

        $('#pConfirm').on('click', () => toast('سيتم تنفيذ الإجراء بعد ربط البيانات', 'secondary'));

        $('#pCancel').on('click', function() {
            $('#pStart').val('');
            $('#pEnd').val('');
            $('#pDays').text('—');
            toast('تم الإلغاء', 'secondary');
        });
    </script>
@endsection