@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; }

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

    .clinic-avatar {
        width: 40px; height: 40px; border-radius: .55rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 700; color: #fff; font-size: .9rem;
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        flex-shrink: 0;
    }
    .clinic-avatar.bg-trial { background: linear-gradient(135deg, #f59e0b, #ef4444); }
    .clinic-avatar.bg-suspended { background: linear-gradient(135deg, #94a3b8, #64748b); }
    .clinic-avatar.bg-expired { background: linear-gradient(135deg, #6b7280, #374151); }

    .usage-mini { width: 110px; }
    .usage-mini .progress { height: 4px; }
    .usage-mini .label { font-size: .8rem; color: #475569; display: flex; justify-content: space-between; }
    .usage-mini .label strong { color: #0f172a; }

    .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;
    }
</style>
@endpush

@php
    $statusMeta = [
        'active' => ['label' => 'نشطة', 'color' => 'success', 'icon' => 'check'],
        'trial' => ['label' => 'تجريبية', 'color' => 'warning', 'icon' => 'hourglass'],
        'suspended' => ['label' => 'موقوفة', 'color' => 'danger', 'icon' => 'ban'],
        'expired' => ['label' => 'منتهية', 'color' => 'secondary', 'icon' => 'calendar-x'],
        'pending' => ['label' => 'معلّقة', 'color' => 'info', 'icon' => 'clock'],
    ];
    $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">
                {{ $clinics->total() }} عيادة
                @if(request('q') || request('status'))
                    · <a href="{{ route('admin.clinics') }}" class="text-muted">مسح الفلتر</a>
                @endif
            </div>
        </div>
        <div class="col-auto">
            <a href="{{ route('admin.clinics.create') }}" class="btn btn-primary">
                <i class="ti ti-plus me-1"></i> عيادة جديدة
            </a>
        </div>
    </div>
</div>

{{-- Status filter pills --}}
<div class="filter-pills mb-3 d-flex flex-wrap gap-2">
    <a href="{{ route('admin.clinics', array_filter(['q' => request('q'), '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.clinics', array_filter(['q' => request('q'), '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 + sort row --}}
<div class="card clinic-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="ابحث بالاسم، البريد، الـ slug، أو الهاتف..." class="form-control">
                </div>
            </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="oldest" @selected($sort === 'oldest')>الأقدم أولاً</option>
                    <option value="name" @selected($sort === 'name')>أبجدياً</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>

{{-- Clinics table --}}
<div class="card clinic-card">
    @if($clinics->isEmpty())
        <div class="card-body">
            <div class="empty-card">
                <i class="ti ti-building-skyscraper" style="font-size: 3rem; color: #cbd5e1;"></i>
                <h3 class="mt-2 mb-1">لا توجد عيادات تطابق الفلاتر</h3>
                <p class="text-muted">
                    @if(request('q') || request('status'))
                        جرّب تغيير الفلاتر أو <a href="{{ route('admin.clinics') }}">عرض كل العيادات</a>.
                    @else
                        ابدأ بإضافة أول عيادة.
                    @endif
                </p>
                @if(! (request('q') || request('status')))
                    <a href="{{ route('admin.clinics.create') }}" class="btn btn-primary mt-2">
                        <i class="ti ti-plus me-1"></i> إنشاء عيادة جديدة
                    </a>
                @endif
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter clinic-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($clinics as $c)
                        @php
                            $m = $tenantSnapshots[$c->id] ?? ['reachable' => false];
                            $sm = $statusMeta[$c->status] ?? ['label' => $c->status, 'color' => 'secondary', 'icon' => 'circle'];

                            // Pick countdown source: trial wins while in trial, otherwise show the subscription window.
                            $endsAt = $c->status === 'trial' ? $c->trial_ends_at : $c->subscription_ends_at;
                            $daysLeft = ($endsAt && $endsAt->isFuture())
                                ? (int) max(0, ceil(now()->diffInDays($endsAt, false)))
                                : null;
                            $countdownColor = $daysLeft === null
                                ? 'secondary'
                                : ($daysLeft <= 3 ? 'danger' : ($daysLeft <= 7 ? 'warning' : 'success'));

                            $plan = $c->plan;
                            $docPct = ($plan && $plan->max_doctors && ($m['doctors'] ?? null) !== null)
                                ? (int) min(100, round(($m['doctors'] / $plan->max_doctors) * 100)) : null;
                            $patPct = ($plan && $plan->max_patients && ($m['patients'] ?? null) !== null)
                                ? (int) min(100, round(($m['patients'] / $plan->max_patients) * 100)) : null;
                            $barColor = fn ($pct) => $pct === null ? 'success'
                                : ($pct >= 90 ? 'danger' : ($pct >= 70 ? 'warning' : 'success'));

                            $initials = collect(preg_split('/\s+/u', trim($c->name)))
                                ->filter()->take(2)
                                ->map(fn ($w) => mb_substr($w, 0, 1))
                                ->implode('');
                            $avatarClass = match($c->status) {
                                'trial' => 'bg-trial',
                                'suspended' => 'bg-suspended',
                                'expired' => 'bg-expired',
                                default => '',
                            };
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="clinic-avatar {{ $avatarClass }}">{{ $initials ?: '?' }}</span>
                                    <div class="min-w-0">
                                        <a href="{{ route('admin.clinics.show', $c) }}" class="text-reset text-decoration-none">
                                            <strong class="d-block text-truncate">{{ $c->name }}</strong>
                                        </a>
                                        <div class="small text-muted">
                                            <i class="ti ti-mail me-1"></i>{{ $c->owner_email }}
                                            @if($c->currency)
                                                @php $ccyMeta = \App\Support\Currency::meta($c->currency); @endphp
                                                · <span class="badge bg-light text-dark" style="font-size:.7rem;">{{ $ccyMeta['flag'] }} {{ $c->currency }}</span>
                                            @endif
                                        </div>
                                        @if($c->phone)
                                            <div class="small text-muted">
                                                <i class="ti ti-phone me-1"></i>{{ $c->phone }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($plan)
                                    @php
                                        $clinicCcy = strtoupper($c->currency ?? 'SAR');
                                        $planPrice = $plan->priceFor($clinicCcy);
                                        $shownCcy = $planPrice > 0 ? $clinicCcy : strtoupper($plan->currency);
                                        if ($planPrice <= 0) {
                                            $planPrice = (float) $plan->price;
                                        }
                                    @endphp
                                    <strong>{{ $plan->name }}</strong>
                                    <div class="small text-muted">
                                        {{ number_format($planPrice, 0) }} {{ $shownCcy }}
                                        / {{ $plan->duration_days }} يوم
                                    </div>
                                @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($daysLeft !== null)
                                    <span class="countdown-pill bg-{{ $countdownColor }}-lt text-{{ $countdownColor }}">
                                        <i class="ti ti-{{ $c->status === 'trial' ? 'hourglass' : 'calendar-time' }}"></i>
                                        {{ $daysLeft }} يوم
                                    </span>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>
                                @if($m['reachable'] ?? false)
                                    <div class="usage-mini">
                                        <div class="label">
                                            <span><strong>{{ $m['doctors'] ?? 0 }}</strong>
                                                @if($plan && $plan->max_doctors) / {{ $plan->max_doctors }} @endif
                                            </span>
                                            @if($docPct !== null)<span class="text-muted">{{ $docPct }}%</span>@endif
                                        </div>
                                        @if($plan && $plan->max_doctors)
                                            <div class="progress mt-1">
                                                <div class="progress-bar bg-{{ $barColor($docPct) }}" style="width: {{ $docPct }}%"></div>
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>
                                @if($m['reachable'] ?? false)
                                    <div class="usage-mini">
                                        <div class="label">
                                            <span><strong>{{ number_format($m['patients'] ?? 0) }}</strong>
                                                @if($plan && $plan->max_patients) / {{ number_format($plan->max_patients) }} @endif
                                            </span>
                                            @if($patPct !== null)<span class="text-muted">{{ $patPct }}%</span>@endif
                                        </div>
                                        @if($plan && $plan->max_patients)
                                            <div class="progress mt-1">
                                                <div class="progress-bar bg-{{ $barColor($patPct) }}" style="width: {{ $patPct }}%"></div>
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td class="text-muted small">
                                {{ $c->created_at->translatedFormat('j M Y') }}
                                <div class="small">{{ $c->created_at->diffForHumans() }}</div>
                            </td>
                            <td class="text-end text-nowrap">
                                <div class="btn-list justify-content-end">
                                    <a href="{{ route('admin.clinics.show', $c) }}"
                                       class="btn btn-sm btn-icon btn-outline-primary" title="عرض التفاصيل">
                                        <i class="ti ti-eye"></i>
                                    </a>
                                    <form action="{{ route('admin.clinics.login-as', $c) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button class="btn btn-sm btn-icon btn-outline-info"
                                                {{ ! $c->isOperational() ? 'disabled' : '' }}
                                                title="دخول كمالك العيادة">
                                            <i class="ti ti-login"></i>
                                        </button>
                                    </form>
                                    @if($c->status === 'suspended')
                                        <button class="btn btn-sm btn-icon btn-success"
                                                onclick="setStatus('{{ $c->slug }}', 'activate', '{{ e($c->name) }}')"
                                                title="تفعيل">
                                            <i class="ti ti-check"></i>
                                        </button>
                                    @else
                                        <button class="btn btn-sm btn-icon btn-outline-danger"
                                                onclick="setStatus('{{ $c->slug }}', 'suspend', '{{ e($c->name) }}')"
                                                title="إيقاف">
                                            <i class="ti ti-ban"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($clinics->hasPages())
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    عرض {{ $clinics->firstItem() }}–{{ $clinics->lastItem() }} من {{ $clinics->total() }}
                </div>
                {{ $clinics->onEachSide(1)->links() }}
            </div>
        @endif
    @endif
</div>
@endsection

@push('scripts')
<script>
function setStatus(slug, action, name) {
    const isSuspend = action === 'suspend';
    Swal.fire({
        title: isSuspend ? `إيقاف "${name}"؟` : `تفعيل "${name}"؟`,
        html: isSuspend
            ? 'سيتم تسجيل خروج جميع المستخدمين الفعّالين فوراً، ولن يتمكن أحد من الدخول حتى تعيد التفعيل.'
            : 'سيتمكن المستخدمون من تسجيل الدخول والاستخدام مرة أخرى.',
        icon: isSuspend ? 'warning' : 'question',
        showCancelButton: true,
        confirmButtonText: isSuspend ? 'إيقاف فوراً' : 'تفعيل',
        cancelButtonText: 'إلغاء',
        confirmButtonColor: isSuspend ? '#dc2626' : '#16a34a',
    }).then(async res => {
        if (! res.isConfirmed) return;
        const r = await fetch(`${APP_BASE_URL}/admin/clinics/${encodeURIComponent(slug)}/${action}`, {
            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();
    });
}
</script>
@endpush