@extends('admin._layout')

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

@push('head')
<style>
    .filter-pills .pill {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .45rem .9rem; border-radius: 999px;
        background: #fff; color: #475569; font-size: .88rem;
        border: 1px solid #e2e8f0; text-decoration: none;
        transition: all .15s ease;
    }
    .filter-pills .pill:hover { background: #f1f5f9; color: #0f172a; }
    .filter-pills .pill.active { background: #0f172a; color: #fff; border-color: #0f172a; }
    .filter-pills .pill .badge { background: rgba(255,255,255,.15); color: inherit; }
    .filter-pills .pill:not(.active) .badge { background: #e2e8f0; color: #475569; }

    .kpi-card { border: 0; box-shadow: 0 1px 3px rgba(15,23,42,.06); border-radius: .75rem; }
    .kpi-card .icon-box {
        width: 44px; height: 44px; border-radius: .6rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.25rem;
    }
    .kpi-value { font-size: 1.65rem; font-weight: 700; line-height: 1; }
    .kpi-label { color: #64748b; font-size: .8rem; }

    .subs-card { border: 0; box-shadow: 0 1px 3px rgba(15,23,42,.06); border-radius: .75rem; }
    .subs-table thead th {
        background: #f8fafc; color: #64748b; font-weight: 600;
        font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    }
    .subs-table tbody tr { transition: background .12s; }
    .subs-table tbody tr:hover { background: #f8fafc; }

    .clinic-cell-avatar {
        width: 36px; height: 36px; border-radius: .5rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 700; color: #fff; font-size: .82rem;
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        flex-shrink: 0;
    }

    .countdown-pill {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .2rem .55rem; border-radius: .35rem;
        font-size: .78rem; font-weight: 600;
    }

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

    .modal-form-section + .modal-form-section { margin-top: 1.25rem; }
</style>
@endpush

@php
    $statusMeta = [
        'active' => ['label' => 'نشط', 'color' => 'success', 'icon' => 'check'],
        'cancelled' => ['label' => 'ملغي', 'color' => 'secondary', 'icon' => 'ban'],
        'expired' => ['label' => 'منتهي', 'color' => 'danger', 'icon' => 'calendar-x'],
        'pending' => ['label' => 'معلّق', 'color' => 'warning', 'icon' => 'clock'],
        'past_due' => ['label' => 'متأخر السداد', 'color' => 'warning', 'icon' => 'alert-circle'],
    ];
    $current = request('status');
    $sort = request('sort', 'latest');
@endphp

@section('content')
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title mb-1">إدارة الاشتراكات</h2>
            <div class="text-muted small">
                {{ $subscriptions->total() }} اشتراك
                @if(request('q') || request('status') || request('clinic_id'))
                    · <a href="{{ route('admin.subscriptions') }}" class="text-muted">مسح الفلاتر</a>
                @endif
            </div>
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newSubModal">
                <i class="ti ti-plus me-1"></i> اشتراك جديد
            </button>
        </div>
    </div>
</div>

{{-- KPI cards --}}
<div class="row row-cards g-3">
    <div class="col-sm-6 col-xl-3">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <span class="icon-box bg-success-lt text-success"><i class="ti ti-cash"></i></span>
                </div>
                <div class="kpi-label">إيرادات شهرية متكررة (MRR)</div>
                <div class="kpi-value mt-1">
                    {{ number_format($stats['mrr'], 0) }}
                    <span class="text-muted small">SAR</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <span class="icon-box bg-primary-lt text-primary"><i class="ti ti-receipt"></i></span>
                </div>
                <div class="kpi-label">إيراد هذا الشهر</div>
                <div class="kpi-value mt-1">
                    {{ number_format($stats['this_month_revenue'], 0) }}
                    <span class="text-muted small">SAR</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <span class="icon-box bg-warning-lt text-warning"><i class="ti ti-alarm"></i></span>
                </div>
                <div class="kpi-label">تنتهي خلال 14 يوم</div>
                <div class="kpi-value text-warning mt-1">{{ number_format($stats['expiring_soon']) }}</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <span class="icon-box bg-info-lt text-info"><i class="ti ti-circle-check"></i></span>
                </div>
                <div class="kpi-label">اشتراكات نشطة</div>
                <div class="kpi-value text-success mt-1">{{ number_format($stats['active']) }}</div>
            </div>
        </div>
    </div>
</div>

{{-- Status filter pills --}}
<div class="filter-pills mt-3 mb-3 d-flex flex-wrap gap-2">
    <a href="{{ route('admin.subscriptions', array_filter(['q' => request('q'), 'clinic_id' => request('clinic_id'), 'sort' => $sort])) }}"
       class="pill {{ ! $current ? 'active' : '' }}">
        <i class="ti ti-list"></i> الكل
        <span class="badge">{{ $statusCounts['_all'] ?? 0 }}</span>
    </a>
    @foreach($statusMeta as $key => $meta)
        <a href="{{ route('admin.subscriptions', array_filter(['q' => request('q'), 'clinic_id' => request('clinic_id'), 'sort' => $sort, 'status' => $key])) }}"
           class="pill {{ $current === $key ? 'active' : '' }}">
            <i class="ti ti-{{ $meta['icon'] }} text-{{ $meta['color'] }}"></i>
            {{ $meta['label'] }}
            <span class="badge">{{ $statusCounts[$key] ?? 0 }}</span>
        </a>
    @endforeach
</div>

{{-- Search + clinic filter --}}
<div class="card subs-card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <input type="hidden" name="status" value="{{ request('status') }}">
            <div class="col-md">
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <input type="text" name="q" value="{{ request('q') }}"
                           placeholder="ابحث باسم العيادة، البريد، أو رقم المرجع..." class="form-control">
                </div>
            </div>
            <div class="col-md-3">
                <select name="clinic_id" class="form-select" onchange="this.form.submit()">
                    <option value="">كل العيادات</option>
                    @foreach($clinics as $c)
                        <option value="{{ $c->id }}" @selected(request('clinic_id') == $c->id)>{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-auto">
                <select name="sort" class="form-select" onchange="this.form.submit()">
                    <option value="latest" @selected($sort === 'latest')>الأحدث أولاً</option>
                    <option value="expires" @selected($sort === 'expires')>الأقرب انتهاءً</option>
                    <option value="amount" @selected($sort === 'amount')>الأعلى مبلغاً</option>
                </select>
            </div>
            <div class="col-md-auto">
                <button class="btn btn-primary"><i class="ti ti-filter me-1"></i> تصفية</button>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="card subs-card">
    @if($subscriptions->isEmpty())
        <div class="card-body">
            <div class="empty-card">
                <i class="ti ti-receipt-off" style="font-size: 3rem; color: #cbd5e1;"></i>
                <h3 class="mt-2 mb-1">لا توجد اشتراكات تطابق الفلاتر</h3>
                <p class="text-muted">
                    @if(request('q') || request('status') || request('clinic_id'))
                        جرّب تغيير الفلاتر أو <a href="{{ route('admin.subscriptions') }}">عرض الكل</a>.
                    @else
                        ابدأ بإنشاء أول اشتراك.
                    @endif
                </p>
                @if(! (request('q') || request('status') || request('clinic_id')))
                    <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#newSubModal">
                        <i class="ti ti-plus me-1"></i> اشتراك جديد
                    </button>
                @endif
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter subs-table mb-0">
                <thead>
                    <tr>
                        <th>العيادة</th>
                        <th>الباقة</th>
                        <th>المبلغ</th>
                        <th>الفترة</th>
                        <th>المتبقي</th>
                        <th>الحالة</th>
                        <th>المرجع</th>
                        <th class="text-end">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($subscriptions as $sub)
                        @php
                            $sm = $statusMeta[$sub->status] ?? ['label' => $sub->status, 'color' => 'secondary', 'icon' => 'circle'];
                            $daysLeft = ($sub->expires_at && $sub->expires_at->isFuture())
                                ? (int) max(0, ceil(now()->diffInDays($sub->expires_at, false)))
                                : null;
                            $countdownColor = $daysLeft === null
                                ? 'secondary'
                                : ($daysLeft <= 3 ? 'danger' : ($daysLeft <= 14 ? 'warning' : 'success'));
                            $clinicName = $sub->clinic?->name ?? '—';
                            $initials = collect(preg_split('/\s+/u', trim($clinicName)))
                                ->filter()->take(2)
                                ->map(fn ($w) => mb_substr($w, 0, 1))
                                ->implode('') ?: '?';
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="clinic-cell-avatar">{{ $initials }}</span>
                                    <div class="min-w-0">
                                        @if($sub->clinic)
                                            <a href="{{ route('admin.clinics.show', $sub->clinic) }}" class="text-reset text-decoration-none">
                                                <strong class="d-block text-truncate">{{ $sub->clinic->name }}</strong>
                                            </a>
                                            <div class="small text-muted text-truncate">{{ $sub->clinic->owner_email }}</div>
                                        @else
                                            <strong>—</strong>
                                            <div class="small text-danger">العيادة محذوفة</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <strong>{{ $sub->plan?->name ?? '—' }}</strong>
                                @if($sub->plan)
                                    <div class="small text-muted">{{ $sub->plan->duration_days }} يوم</div>
                                @endif
                            </td>
                            <td>
                                <strong>{{ number_format((float) $sub->amount, 0) }}</strong>
                                <span class="text-muted small">{{ $sub->currency }}</span>
                            </td>
                            <td class="text-nowrap">
                                <div class="small">
                                    <i class="ti ti-arrow-narrow-left text-muted"></i>
                                    {{ $sub->started_at?->translatedFormat('j M Y') ?? '—' }}
                                </div>
                                <div class="small text-muted">
                                    <i class="ti ti-arrow-narrow-right"></i>
                                    {{ $sub->expires_at?->translatedFormat('j M Y') ?? '—' }}
                                </div>
                            </td>
                            <td>
                                @if($daysLeft !== null && $sub->status === 'active')
                                    <span class="countdown-pill bg-{{ $countdownColor }}-lt text-{{ $countdownColor }}">
                                        <i class="ti ti-clock"></i>
                                        {{ $daysLeft }} يوم
                                    </span>
                                @elseif($sub->expires_at && $sub->expires_at->isPast())
                                    <span class="badge bg-danger-lt text-danger">منتهي</span>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-{{ $sm['color'] }}-lt text-{{ $sm['color'] }}">
                                    <i class="ti ti-{{ $sm['icon'] }} me-1"></i>{{ $sm['label'] }}
                                </span>
                            </td>
                            <td>
                                @if($sub->payment_reference)
                                    <code class="small">{{ $sub->payment_reference }}</code>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td class="text-end text-nowrap">
                                <div class="btn-list justify-content-end">
                                    @if($sub->clinic)
                                        <a href="{{ route('admin.clinics.show', $sub->clinic) }}"
                                           class="btn btn-sm btn-icon btn-outline-primary" title="عرض العيادة">
                                            <i class="ti ti-eye"></i>
                                        </a>
                                    @endif
                                    @if($sub->status === 'active')
                                        <form action="{{ route('admin.subscriptions.cancel', $sub) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="button" class="btn btn-sm btn-icon btn-outline-warning"
                                                    onclick="confirmCancel(this.form, '{{ e($clinicName) }}')"
                                                    title="إلغاء الاشتراك">
                                                <i class="ti ti-ban"></i>
                                            </button>
                                        </form>
                                    @endif
                                    <button type="button" class="btn btn-sm btn-icon btn-outline-danger"
                                            onclick="confirmDelete({{ $sub->id }}, '{{ e($clinicName) }}')"
                                            title="حذف نهائي">
                                        <i class="ti ti-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($subscriptions->hasPages())
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    عرض {{ $subscriptions->firstItem() }}–{{ $subscriptions->lastItem() }} من {{ $subscriptions->total() }}
                </div>
                {{ $subscriptions->onEachSide(1)->links() }}
            </div>
        @endif
    @endif
</div>

{{-- ============================================================ --}}
{{-- New subscription modal                                         --}}
{{-- ============================================================ --}}
<div class="modal fade" id="newSubModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('admin.subscriptions.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-receipt me-1"></i> إنشاء اشتراك جديد</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
            </div>
            <div class="modal-body">
                <div class="modal-form-section">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label required">العيادة</label>
                            <select name="clinic_id" class="form-select" required>
                                <option value="">— اختر عيادة —</option>
                                @foreach($clinicsForCreate as $c)
                                    <option value="{{ $c->id }}" data-currency="{{ $c->currency }}">
                                        {{ $c->name }} ({{ $c->slug }})
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-hint">العيادات الموقوفة لا تظهر هنا.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label required">الباقة</label>
                            <select name="plan_id" class="form-select" required id="planSelect">
                                <option value="">— اختر باقة —</option>
                                @foreach($plans as $p)
                                    @php
                                        $pricesMap = is_array($p->prices ?? null) ? $p->prices : [];
                                        if (empty($pricesMap) && $p->price > 0) {
                                            $pricesMap = [$p->currency => (float) $p->price];
                                        }
                                    @endphp
                                    <option value="{{ $p->id }}"
                                            data-price="{{ $p->price }}"
                                            data-prices='@json($pricesMap)'
                                            data-currency="{{ $p->currency }}"
                                            data-days="{{ $p->duration_days }}">
                                        {{ $p->name }} — {{ number_format($p->price, 0) }} {{ $p->currency }}
                                        / {{ $p->duration_days }} يوم
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-hint">السعر والمدة يمكن تعديلهما بالأسفل.</div>
                        </div>
                    </div>
                </div>

                <div class="modal-form-section">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">تاريخ البداية</label>
                            <input type="date" name="started_at" id="startedAt"
                                   value="{{ now()->toDateString() }}" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">تاريخ النهاية</label>
                            <input type="date" name="expires_at" id="expiresAt" class="form-control">
                            <div class="form-hint">يُحسب تلقائياً من المدة.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">المبلغ المدفوع</label>
                            <div class="input-group">
                                <input type="number" step="0.01" min="0" name="amount" id="amountInput"
                                       class="form-control" placeholder="من سعر الباقة">
                                <span class="input-group-text" id="currencyLabel">SAR</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-form-section">
                    <label class="form-label">رقم المرجع / إيصال الدفع</label>
                    <input type="text" name="payment_reference" maxlength="120" class="form-control"
                           placeholder="مثال: INV-2026-0042">
                </div>

                <div class="modal-form-section">
                    <label class="form-check">
                        <input type="checkbox" name="activate" value="1" class="form-check-input" checked>
                        <span class="form-check-label">
                            <strong>تفعيل العيادة فوراً</strong> وإلغاء أي اشتراك آخر نشط لها.
                        </span>
                    </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> إنشاء الاشتراك
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-fill end date and price when clinic or plan changes. The amount
// comes from the plan's per-currency price map keyed by the clinic's
// currency — so picking a SAR clinic on a multi-currency plan
// pre-fills the SAR price, USD clinic → USD price, etc.
const planSelect = document.getElementById('planSelect');
const clinicSelect = document.querySelector('select[name="clinic_id"]');
const startedAt = document.getElementById('startedAt');
const expiresAt = document.getElementById('expiresAt');
const amountInput = document.getElementById('amountInput');
const currencyLabel = document.getElementById('currencyLabel');

function recomputeExpires() {
    const opt = planSelect.selectedOptions[0];
    const days = parseInt(opt?.dataset.days || 0, 10);
    if (! days || ! startedAt.value) return;
    const d = new Date(startedAt.value);
    d.setDate(d.getDate() + days);
    expiresAt.value = d.toISOString().slice(0, 10);
}

function syncAmount() {
    const planOpt = planSelect?.selectedOptions[0];
    const clinicOpt = clinicSelect?.selectedOptions[0];
    if (! planOpt?.value) return;
    const clinicCcy = (clinicOpt?.dataset.currency || planOpt.dataset.currency || 'SAR').toUpperCase();
    let prices = {};
    try { prices = JSON.parse(planOpt.dataset.prices || '{}'); } catch (e) { prices = {}; }
    const resolved = prices[clinicCcy];
    if (resolved !== undefined && resolved !== null) {
        currencyLabel.textContent = clinicCcy;
        amountInput.placeholder = resolved;
        amountInput.value = resolved;
    } else {
        // No price for clinic currency — fall back to plan's base price.
        currencyLabel.textContent = planOpt.dataset.currency || 'SAR';
        amountInput.placeholder = planOpt.dataset.price || '';
        amountInput.value = planOpt.dataset.price || '';
    }
}

if (planSelect) {
    planSelect.addEventListener('change', () => {
        syncAmount();
        recomputeExpires();
    });
    startedAt?.addEventListener('change', recomputeExpires);
}
clinicSelect?.addEventListener('change', syncAmount);

// Cancel + delete confirmations
function confirmCancel(form, clinicName) {
    Swal.fire({
        title: `إلغاء اشتراك "${clinicName}"؟`,
        html: 'سيُحفظ الاشتراك في السجلات لكن لن يُحتسب كنشط. يمكن إنشاء اشتراك جديد بعدها.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'إلغاء الاشتراك',
        cancelButtonText: 'تراجع',
        confirmButtonColor: '#f59e0b',
    }).then(res => { if (res.isConfirmed) form.submit(); });
}

function confirmDelete(id, clinicName) {
    Swal.fire({
        title: `حذف اشتراك "${clinicName}" نهائياً؟`,
        html: '<strong>هذا الإجراء لا يمكن التراجع عنه.</strong><br>سيتم حذف السجل من قاعدة البيانات بالكامل. للحفاظ على سجل تاريخي استخدم "إلغاء" بدلاً من ذلك.',
        icon: 'error',
        showCancelButton: true,
        confirmButtonText: 'حذف نهائي',
        cancelButtonText: 'تراجع',
        confirmButtonColor: '#dc2626',
    }).then(async res => {
        if (! res.isConfirmed) return;
        const r = await fetch(`${APP_BASE_URL}/admin/subscriptions/${id}`, {
            method: 'DELETE',
            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();
    });
}
</script>
@endpush