@extends('admin._layout')

@section('title', 'باقات الاشتراك')

@push('head')
<style>
    .plan-card {
        border: 0;
        box-shadow: 0 1px 3px rgba(15,23,42,.06);
        border-radius: .9rem;
        position: relative;
        transition: transform .15s ease, box-shadow .15s ease;
        overflow: hidden;
        height: 100%;
    }
    .plan-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
    .plan-card.is-inactive { opacity: .65; }
    .plan-card .plan-ribbon {
        position: absolute; top: 0; right: 0;
        padding: .35rem .75rem;
        background: #f1f5f9; color: #64748b;
        border-bottom-right-radius: 0; border-bottom-left-radius: .55rem;
        border-top-right-radius: .9rem;
        font-size: .72rem; font-weight: 600;
    }
    .plan-card .plan-header {
        padding: 1.5rem 1.25rem .75rem;
        border-bottom: 1px dashed #e2e8f0;
    }
    .plan-card .plan-name {
        font-size: 1.15rem; font-weight: 700; margin-bottom: .15rem;
    }
    .plan-card .plan-slug { font-size: .78rem; color: #94a3b8; }
    .plan-card .plan-price {
        margin-top: .85rem;
        display: flex; align-items: baseline; gap: .35rem;
    }
    .plan-card .plan-price .amount { font-size: 2rem; font-weight: 800; line-height: 1; }
    .plan-card .plan-price .currency { font-size: .85rem; color: #64748b; font-weight: 600; }
    .plan-card .plan-price .period { font-size: .8rem; color: #94a3b8; margin-inline-start: auto; }

    .plan-card .plan-body { padding: 1rem 1.25rem; flex: 1; }
    .plan-card .limit-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: .45rem 0; border-bottom: 1px dashed #f1f5f9;
        font-size: .87rem;
    }
    .plan-card .limit-row:last-child { border-bottom: 0; }
    .plan-card .limit-row .label { color: #64748b; display: flex; align-items: center; gap: .35rem; }
    .plan-card .limit-row .value { font-weight: 700; color: #0f172a; }
    .plan-card .limit-row .value.unlimited { color: #16a34a; }

    .plan-card .features {
        list-style: none; padding: 0; margin: .85rem 0 0;
        font-size: .85rem;
    }
    .plan-card .features li {
        padding: .25rem 0;
        display: flex; align-items: flex-start; gap: .4rem;
        color: #475569;
    }
    .plan-card .features li .ti { color: #16a34a; flex-shrink: 0; }

    .plan-card .subscribers-bar {
        background: #f8fafc; padding: .85rem 1.25rem;
        border-top: 1px solid #e2e8f0;
        display: flex; align-items: center; justify-content: space-between;
    }
    .plan-card .subscribers-bar .count {
        font-size: 1.1rem; font-weight: 700;
    }
    .plan-card .subscribers-bar .count .num { color: #0f172a; }
    .plan-card .subscribers-bar .count .label { color: #64748b; font-size: .8rem; font-weight: normal; }

    .plan-card .plan-actions {
        padding: .65rem 1.25rem;
        border-top: 1px solid #e2e8f0;
        display: flex; gap: .35rem; justify-content: flex-end;
    }

    .empty-card {
        background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
        border: 2px dashed #e2e8f0; border-radius: .75rem;
        padding: 3rem 1.5rem; text-align: center;
    }

    .stats-strip { gap: 1rem; }
    .stats-strip .stat-pill {
        background: #fff; padding: .65rem 1rem; border-radius: .55rem;
        border: 1px solid #e2e8f0; display: inline-flex; align-items: center; gap: .55rem;
    }
    .stats-strip .stat-pill .num { font-weight: 700; color: #0f172a; }
    .stats-strip .stat-pill .lbl { color: #64748b; font-size: .82rem; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title mb-1">باقات الاشتراك</h2>
            <div class="d-flex flex-wrap stats-strip mt-2">
                <span class="stat-pill">
                    <i class="ti ti-credit-card text-primary"></i>
                    <span class="num">{{ $totals['total_plans'] }}</span>
                    <span class="lbl">باقة</span>
                </span>
                <span class="stat-pill">
                    <i class="ti ti-check text-success"></i>
                    <span class="num">{{ $totals['active_plans'] }}</span>
                    <span class="lbl">مفعّلة</span>
                </span>
                <span class="stat-pill">
                    <i class="ti ti-users text-info"></i>
                    <span class="num">{{ $totals['total_subscribers'] }}</span>
                    <span class="lbl">مشترك نشط</span>
                </span>
            </div>
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-primary"
                    data-bs-toggle="modal" data-bs-target="#planModal"
                    onclick="openPlanModal('create')">
                <i class="ti ti-plus me-1"></i> باقة جديدة
            </button>
        </div>
    </div>
</div>

@if($plans->isEmpty())
    <div class="card">
        <div class="card-body">
            <div class="empty-card">
                <i class="ti ti-credit-card-off" style="font-size: 3rem; color: #cbd5e1;"></i>
                <h3 class="mt-2 mb-1">لا توجد باقات بعد</h3>
                <p class="text-muted">ابدأ بإنشاء باقتك الأولى — تجربة، أساسي، احترافي…</p>
                <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#planModal"
                        onclick="openPlanModal('create')">
                    <i class="ti ti-plus me-1"></i> إنشاء أول باقة
                </button>
            </div>
        </div>
    </div>
@else
    <div class="row row-cards g-3">
        @foreach($plans as $p)
                        @php
                $catalog = \App\Support\PlanFeature::catalog();
                $coreKeys = \App\Support\PlanFeature::coreKeys();
                $features = is_array($p->features) ? $p->features : [];
                // Visible feature list = core (always shown) + plan extras.
                $visibleFeatures = array_values(array_unique(array_merge($coreKeys, $features)));
                // Highlight ribbon: most-subscribed plan gets "الأكثر طلباً".
                $isMostPopular = $p->active_subscriptions_count > 0
                    && $p->active_subscriptions_count === $plans->max('active_subscriptions_count');
            @endphp
            <div class="col-md-6 col-xl-4">
                <div class="card plan-card d-flex flex-column {{ ! $p->is_active ? 'is-inactive' : '' }}">
                    @if($isMostPopular && $p->is_active)
                        <div class="plan-ribbon" style="background:#fef3c7;color:#b45309;">
                            <i class="ti ti-flame me-1"></i> الأكثر اشتراكاً
                        </div>
                    @elseif(! $p->is_active)
                        <div class="plan-ribbon" style="background:#fee2e2;color:#b91c1c;">
                            <i class="ti ti-pause me-1"></i> متوقفة
                        </div>
                    @endif

                    <div class="plan-header">
                        <div class="plan-name">{{ $p->name }}</div>
                        <div class="plan-slug"><code>{{ $p->slug }}</code></div>
                        @php
                            $pricesMap = is_array($p->prices) ? $p->prices : [];
                            // Fallback to the legacy single-price column so
                            // pre-multi-currency plans still render something.
                            if (empty($pricesMap) && $p->price > 0) {
                                $pricesMap = [$p->currency => (float) $p->price];
                            }
                            $baseCode = $p->currency ?: array_key_first($pricesMap);
                            $basePrice = $pricesMap[$baseCode] ?? ($p->price ?? 0);
                        @endphp
                        <div class="plan-price">
                            <span class="amount">{{ number_format($basePrice, 0) }}</span>
                            <span class="currency">{!! \App\Support\Currency::symbol($baseCode) !!}</span>
                            <span class="period">/ {{ $p->duration_days }} يوم</span>
                        </div>
                        @if(count($pricesMap) > 1)
                            <div class="mt-2 small text-muted d-flex flex-wrap gap-2">
                                @foreach($pricesMap as $code => $amt)
                                    @if($code === $baseCode) @continue @endif
                                    <span class="badge bg-secondary-lt text-muted">
                                        {{ number_format($amt, 0) }} {!! \App\Support\Currency::symbol($code) !!}
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <div class="plan-body">
                        <div class="limit-row">
                            <span class="label"><i class="ti ti-stethoscope text-primary"></i> أطباء</span>
                            <span class="value {{ $p->max_doctors ? '' : 'unlimited' }}">
                                {{ $p->max_doctors ?? 'غير محدود' }}
                            </span>
                        </div>
                        <div class="limit-row">
                            <span class="label"><i class="ti ti-user-plus text-info"></i> مرضى</span>
                            <span class="value {{ $p->max_patients ? '' : 'unlimited' }}">
                                {{ $p->max_patients ? number_format($p->max_patients) : 'غير محدود' }}
                            </span>
                        </div>
                        <div class="limit-row">
                            <span class="label"><i class="ti ti-database text-warning"></i> تخزين</span>
                            <span class="value {{ $p->max_storage_mb ? '' : 'unlimited' }}">
                                @if($p->max_storage_mb)
                                    {{ $p->max_storage_mb >= 1024 ? round($p->max_storage_mb / 1024, 1) . ' GB' : $p->max_storage_mb . ' MB' }}
                                @else
                                    غير محدود
                                @endif
                            </span>
                        </div>

                        @if(! empty($visibleFeatures))
                            <ul class="features">
                                @foreach($visibleFeatures as $f)
                                    @php $meta = $catalog[$f] ?? null; @endphp
                                    @if($meta)
                                        <li>
                                            <i class="ti ti-{{ $meta['icon'] }} text-{{ in_array($f, $coreKeys, true) ? 'muted' : 'success' }}"></i>
                                            <span>{{ $meta['label'] }}</span>
                                            @if(in_array($f, $coreKeys, true))
                                                <span class="badge bg-secondary-lt text-muted ms-1" style="font-size:.65rem;">أساسي</span>
                                            @endif
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        @endif
                    </div>

                    <div class="subscribers-bar">
                        <div class="count">
                            <span class="num">{{ $p->active_subscriptions_count }}</span>
                            <span class="label">/ {{ $p->subscriptions_count }} اشتراك إجمالي</span>
                        </div>
                        @if($p->active_subscriptions_count > 0)
                            <a href="{{ route('admin.subscriptions', ['status' => 'active']) }}"
                               class="text-decoration-none small">
                                <i class="ti ti-external-link me-1"></i> عرض
                            </a>
                        @else
                            <span class="text-muted small">لا يوجد مشتركين</span>
                        @endif
                    </div>

                    <div class="plan-actions">
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                onclick="togglePlan({{ $p->id }}, '{{ e($p->name) }}', {{ $p->is_active ? 'true' : 'false' }})"
                                title="{{ $p->is_active ? 'تعطيل' : 'تفعيل' }}">
                            <i class="ti ti-{{ $p->is_active ? 'toggle-right' : 'toggle-left' }}"></i>
                        </button>
                        @php
                            // Plan payload for the edit modal — emitted as a single
                            // JSON attribute so we don't have to escape inside onclick.
                            $planPayload = json_encode([
                                'id' => $p->id,
                                'name' => $p->name,
                                'slug' => $p->slug,
                                'price' => (float) $p->price,
                                'currency' => $p->currency,
                                'prices' => $pricesMap,
                                'duration_days' => $p->duration_days,
                                'max_doctors' => $p->max_doctors,
                                'max_patients' => $p->max_patients,
                                'max_storage_mb' => $p->max_storage_mb,
                                'features' => $features,
                                'is_active' => (bool) $p->is_active,
                                'sort_order' => $p->sort_order,
                            ], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT);
                        @endphp
                        <button type="button" class="btn btn-sm btn-outline-primary"
                                data-bs-toggle="modal" data-bs-target="#planModal"
                                data-plan="{{ $planPayload }}"
                                onclick="openPlanModal('edit', JSON.parse(this.dataset.plan))">
                            <i class="ti ti-edit me-1"></i> تعديل
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger"
                                onclick="deletePlan({{ $p->id }}, '{{ e($p->name) }}', {{ $p->active_subscriptions_count + $p->clinics_count }})"
                                title="حذف">
                            <i class="ti ti-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif

{{-- ============================================================ --}}
{{-- Plan create / edit modal                                      --}}
{{-- ============================================================ --}}
<div class="modal fade" id="planModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="planForm" method="POST" class="modal-content" action="{{ route('admin.plans.store') }}">
            @csrf
            <input type="hidden" name="_method" id="planMethodInput" value="POST">
            <div class="modal-header">
                <h5 class="modal-title" id="planModalTitle"><i class="ti ti-credit-card me-1"></i> باقة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-7">
                        <label class="form-label required">اسم الباقة</label>
                        <input name="name" id="planName" class="form-control" placeholder="مثال: احترافي" required>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label required">المعرّف (slug)</label>
                        <input name="slug" id="planSlug" class="form-control" placeholder="مثال: pro" required
                               pattern="[a-z0-9_-]+" title="حروف إنجليزية صغيرة وأرقام و - و _ فقط">
                        <div class="form-hint">يُستخدم داخلياً، لا يمكن تكراره.</div>
                    </div>
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-md-6">
                        <label class="form-label required">المدة (بالأيام)</label>
                        <input type="number" name="duration_days" id="planDuration" min="1" max="3650"
                               class="form-control" value="30" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">ترتيب العرض</label>
                        <input type="number" name="sort_order" id="planSortOrder" min="0" class="form-control" value="0">
                        <div class="form-hint">الأرقام الأقل تظهر أولاً.</div>
                    </div>
                </div>

                <hr class="my-3">

                <h6 class="text-muted mb-2"><i class="ti ti-cash me-1"></i> الأسعار حسب العملة</h6>
                <div class="alert alert-info py-2 small mb-3">
                    <i class="ti ti-info-circle me-1"></i>
                    اكتب سعر الباقة بكل عملة تريد دعمها. العملات اللي تتركها فاضية معناها أن الباقة مش متاحة فيها.
                    <strong>العملة الأساسية</strong> هي العملة الافتراضية للعرض ولازم يكون ليها سعر.
                </div>
                <div class="row g-3">
                    @foreach(\App\Support\Currency::SUPPORTED as $code => $meta)
                        <div class="col-md-6">
                            <label class="form-label d-flex align-items-center gap-2">
                                <span>{{ $meta['flag'] }}</span>
                                <strong>{{ $code }}</strong>
                                <span class="text-muted small">{{ $meta['name'] }}</span>
                            </label>
                            <div class="input-group">
                                <input type="number" name="prices[{{ $code }}]"
                                       id="planPrice{{ $code }}"
                                       step="0.01" min="0" class="form-control plan-price-input"
                                       data-currency="{{ $code }}"
                                       placeholder="غير متاحة">
                                <span class="input-group-text">
                                    @if($code === 'SAR') {!! \App\Support\Currency::SAR_SVG !!}
                                    @else {{ $meta['symbol'] }}
                                    @endif
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-md-6">
                        <label class="form-label required">العملة الأساسية للعرض</label>
                        <select name="currency" id="planCurrency" class="form-select" required>
                            @foreach(\App\Support\Currency::SUPPORTED as $code => $meta)
                                <option value="{{ $code }}" @selected($code === 'SAR')>
                                    {{ $meta['flag'] }} {{ $code }} — {{ $meta['name'] }}
                                </option>
                            @endforeach
                        </select>
                        <div class="form-hint">تُستخدم لعرض السعر الرئيسي في كروت الباقات.</div>
                    </div>
                </div>

                <hr class="my-3">

                <h6 class="text-muted mb-2"><i class="ti ti-shield-check me-1"></i> الحدود</h6>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">حد الأطباء</label>
                        <input type="number" name="max_doctors" id="planMaxDoctors" min="1" class="form-control" placeholder="غير محدود">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">حد المرضى</label>
                        <input type="number" name="max_patients" id="planMaxPatients" min="1" class="form-control" placeholder="غير محدود">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">التخزين (MB)</label>
                        <input type="number" name="max_storage_mb" id="planMaxStorage" min="1" class="form-control" placeholder="غير محدود">
                    </div>
                </div>
                <div class="form-hint mt-1">اترك الحقل فارغاً لـ "غير محدود".</div>

                <hr class="my-3">

                <h6 class="text-muted mb-2"><i class="ti ti-list me-1"></i> المميزات</h6>
                <div class="alert alert-info py-2 small mb-3">
                    <i class="ti ti-info-circle me-1"></i>
                    الميزات الأساسية (المرضى، الحجوزات، الوصفات، السجلات الطبية) متاحة في كل الباقات.
                    اختَر هنا الميزات الإضافية اللي تشملها هذه الباقة.
                </div>

                @php
                    $catalog = \App\Support\PlanFeature::catalog();
                    $groups = \App\Support\PlanFeature::groups();
                    // Drop the "core" group from the form — those features are
                    // implicit and shouldn't be a checkbox the admin can untick.
                    $optionalCatalog = collect($catalog)
                        ->reject(fn ($f) => ! empty($f['core']))
                        ->groupBy('group');
                @endphp

                <div id="planFeaturesGrid">
                    @foreach($groups as $groupKey => $groupTitle)
                        @if($groupKey === 'core' || ! isset($optionalCatalog[$groupKey])) @continue @endif
                        <div class="mb-3 p-2 rounded" style="background:#f8fafc;">
                            <div class="text-muted small fw-bold mb-2">{{ $groupTitle }}</div>
                            <div class="row g-2">
                                @foreach($optionalCatalog[$groupKey] as $key => $meta)
                                    @if($meta['core'] ?? false) @continue @endif
                                    @php
                                        // Match by full key (the catalog is keyed by feature constant value).
                                        $featKey = array_search($meta, $catalog, true);
                                    @endphp
                                    <div class="col-md-6">
                                        <label class="form-check m-0 p-2 rounded"
                                               style="border:1px solid #e2e8f0;background:#fff;cursor:pointer;">
                                            <input type="checkbox" class="form-check-input plan-feature-cb"
                                                   name="features[]" value="{{ $featKey }}">
                                            <span class="form-check-label d-flex align-items-center gap-2">
                                                <i class="ti ti-{{ $meta['icon'] }} text-muted"></i>
                                                <span>
                                                    <strong>{{ $meta['label'] }}</strong>
                                                    @if(! empty($meta['description']))
                                                        <span class="d-block text-muted small">{{ $meta['description'] }}</span>
                                                    @endif
                                                </span>
                                            </span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="form-check mt-3">
                    <input type="checkbox" name="is_active" id="planIsActive" value="1" class="form-check-input" checked>
                    <label class="form-check-label" for="planIsActive">
                        <strong>الباقة مفعّلة</strong> ومتاحة لإنشاء اشتراكات جديدة.
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
                <button type="submit" class="btn btn-primary">
                    <i class="ti ti-check me-1"></i> <span id="planSubmitLabel">حفظ الباقة</span>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
const planForm = document.getElementById('planForm');
const planMethodInput = document.getElementById('planMethodInput');
const storeUrl = "{{ route('admin.plans.store') }}";

function setFeatureCheckboxes(keys) {
    const set = new Set(Array.isArray(keys) ? keys : []);
    document.querySelectorAll('.plan-feature-cb').forEach(cb => {
        cb.checked = set.has(cb.value);
    });
}

function setPriceInputs(prices) {
    // Clear then populate the per-currency price inputs.
    document.querySelectorAll('.plan-price-input').forEach(input => {
        const code = input.dataset.currency;
        const val = prices && prices[code] != null ? prices[code] : '';
        input.value = val;
    });
}

function openPlanModal(mode, plan) {
    const title = document.getElementById('planModalTitle');
    const submitLabel = document.getElementById('planSubmitLabel');

    if (mode === 'create') {
        planForm.action = storeUrl;
        planMethodInput.value = 'POST';
        title.innerHTML = '<i class="ti ti-credit-card me-1"></i> باقة جديدة';
        submitLabel.textContent = 'حفظ الباقة';
        planForm.reset();
        document.getElementById('planDuration').value = 30;
        document.getElementById('planSortOrder').value = 0;
        document.getElementById('planIsActive').checked = true;
        document.getElementById('planCurrency').value = 'SAR';
        setPriceInputs({});
        setFeatureCheckboxes([]);
        return;
    }

    if (mode === 'edit' && plan) {
        planForm.action = `${APP_BASE_URL}/admin/plans/${plan.id}`;
        planMethodInput.value = 'PUT';
        title.innerHTML = `<i class="ti ti-edit me-1"></i> تعديل باقة "${plan.name}"`;
        submitLabel.textContent = 'حفظ التعديلات';

        document.getElementById('planName').value = plan.name ?? '';
        document.getElementById('planSlug').value = plan.slug ?? '';
        document.getElementById('planCurrency').value = plan.currency ?? 'SAR';
        document.getElementById('planDuration').value = plan.duration_days ?? 30;
        document.getElementById('planMaxDoctors').value = plan.max_doctors ?? '';
        document.getElementById('planMaxPatients').value = plan.max_patients ?? '';
        document.getElementById('planMaxStorage').value = plan.max_storage_mb ?? '';
        document.getElementById('planSortOrder').value = plan.sort_order ?? 0;
        document.getElementById('planIsActive').checked = !! plan.is_active;
        setPriceInputs(plan.prices || {});
        setFeatureCheckboxes(plan.features || []);
    }
}

// Auto-fill slug from name when creating (only if slug is empty)
document.getElementById('planName').addEventListener('input', function () {
    const slug = document.getElementById('planSlug');
    if (planMethodInput.value === 'POST' && ! slug.dataset.touched) {
        slug.value = this.value
            .toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .trim()
            .replace(/\s+/g, '-');
    }
});
document.getElementById('planSlug').addEventListener('input', function () {
    this.dataset.touched = '1';
});

// Toggle is_active
function togglePlan(id, name, isCurrentlyActive) {
    const verb = isCurrentlyActive ? 'تعطيل' : 'تفعيل';
    Swal.fire({
        title: `${verb} باقة "${name}"؟`,
        html: isCurrentlyActive
            ? 'الاشتراكات الحالية ستظل صالحة، لكن لن تظهر الباقة في خيارات الاشتراك الجديدة.'
            : 'ستعود الباقة لتظهر في خيارات الاشتراك الجديدة.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: verb,
        cancelButtonText: 'إلغاء',
        confirmButtonColor: isCurrentlyActive ? '#64748b' : '#16a34a',
    }).then(async res => {
        if (! res.isConfirmed) return;
        const r = await fetch(`${APP_BASE_URL}/admin/plans/${id}/toggle`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
        });
        if (! r.ok) {
            Swal.fire({ icon: 'error', title: 'فشل التنفيذ', text: `HTTP ${r.status}` });
            return;
        }
        window.location.reload();
    });
}

// Delete plan
function deletePlan(id, name, dependentCount) {
    if (dependentCount > 0) {
        Swal.fire({
            icon: 'error',
            title: 'لا يمكن حذف الباقة',
            html: `الباقة "${name}" مرتبط بها <strong>${dependentCount}</strong> عيادة/اشتراك. عطّلها بدلاً من حذفها لتفادي فقد البيانات التاريخية.`,
        });
        return;
    }

    Swal.fire({
        title: `حذف باقة "${name}" نهائياً؟`,
        html: '<strong>هذا الإجراء لا يمكن التراجع عنه.</strong>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'حذف نهائي',
        cancelButtonText: 'إلغاء',
        confirmButtonColor: '#dc2626',
    }).then(async res => {
        if (! res.isConfirmed) return;
        const r = await fetch(`${APP_BASE_URL}/admin/plans/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
        });
        const data = await r.json().catch(() => ({}));
        if (! r.ok) {
            Swal.fire({ icon: 'error', title: 'فشل الحذف', text: data.message || `HTTP ${r.status}` });
            return;
        }
        window.location.reload();
    });
}
</script>
@endpush