@extends('admin.layouts.app')
@section('title', 'لوحة التحكم')
@section('page-title', 'لوحة التحكم')

@section('content')

{{-- ===== صيانة النظام ===== --}}
<div class="card mb-4 border-0 shadow-sm">
    <div class="card-header bg-white py-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
        <div class="d-flex align-items-center gap-2">
            <i class="bi bi-tools text-primary fs-5"></i>
            <span class="fw-semibold">صيانة النظام</span>
        </div>
        <span class="small text-muted">أدوات للكاش، الجلسات، وربط ملفات الصور العامة</span>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-4">
                <div class="p-3 rounded-3 border h-100">
                    <div class="fw-semibold mb-1"><i class="bi bi-arrow-clockwise text-primary me-1"></i> تنظيف الكاش</div>
                    <p class="small text-muted mb-3">مسح كاش التطبيق، العروض، الإعدادات، والمسارات (أمر <code class="small">optimize:clear</code>).</p>
                    <form method="POST" action="{{ route('admin.maintenance.clear-cache') }}" onsubmit="return confirm('تنظيف الكاش الآن؟');">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-brush me-1"></i> تنظيف الكاش
                        </button>
                    </form>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 rounded-3 border border-warning border-opacity-50 h-100 bg-warning bg-opacity-10">
                    <div class="fw-semibold mb-1"><i class="bi bi-shield-exclamation text-warning me-1"></i> مسح الجلسات (الخادم)</div>
                    <p class="small text-muted mb-3">يحذف كل الجلسات من قاعدة البيانات أو من المجلد. <strong>يخرج الجميع من النظام</strong> بما فيهم أنت — يعادل إبطال كوكيز الجلسة من جهة الخادم.</p>
                    <form method="POST" action="{{ route('admin.maintenance.clear-sessions') }}" onsubmit="return confirm('سيتم تسجيل خروج جميع المستخدمين بما فيك أنت. هل أنت متأكد؟');">
                        @csrf
                        <button type="submit" class="btn btn-warning btn-sm">
                            <i class="bi bi-person-x me-1"></i> مسح كل الجلسات
                        </button>
                    </form>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 rounded-3 border h-100">
                    <div class="fw-semibold mb-1"><i class="bi bi-link-45deg text-success me-1"></i> ربط التخزين العام</div>
                    <p class="small text-muted mb-3">إنشاء أو إعادة إنشاء الرابط <code class="small">public/storage</code> → <code class="small">storage/app/public</code> حتى تظهر الصور عبر <code class="small">/storage/...</code>.</p>
                    <form method="POST" action="{{ route('admin.maintenance.storage-link') }}" onsubmit="return confirm('إنشاء/تحديث رابط التخزين؟');">
                        @csrf
                        <button type="submit" class="btn btn-outline-success btn-sm">
                            <i class="bi bi-folder-symlink me-1"></i> تنفيذ storage:link
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===== Stat Cards ===== --}}
<div class="row g-3 mb-4">

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#e8f4fd;color:#0d6efd">
                <i class="bi bi-person-badge-fill"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['active_doctors'] }}</div>
                <div class="stat-label">أطباء نشطون</div>
                @if($stats['pending_doctors'] > 0)
                    <div class="stat-sub text-warning">
                        <i class="bi bi-clock"></i> {{ $stats['pending_doctors'] }} بانتظار الموافقة
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#e8faf0;color:#198754">
                <i class="bi bi-people-fill"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($stats['total_patients']) }}</div>
                <div class="stat-label">إجمالي المرضى</div>
                <div class="stat-sub text-success">+{{ $stats['new_patients_month'] }} هذا الشهر</div>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#fff8e1;color:#f59e0b">
                <i class="bi bi-queue-list"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['today_queue'] }}</div>
                <div class="stat-label">في الطابور الآن</div>
                <div class="stat-sub text-muted">مرضى ينتظرون</div>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#f0e8fd;color:#6f42c1">
                <i class="bi bi-calendar-check-fill"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['today_appointments'] }}</div>
                <div class="stat-label">مواعيد اليوم</div>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#fce8e8;color:#dc3545">
                <i class="bi bi-credit-card-fill"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['active_subscriptions'] }}</div>
                <div class="stat-label">اشتراكات نشطة</div>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-md-4 col-6">
        <div class="stat-card bg-white">
            <div class="stat-icon" style="background:#e8faf0;color:#198754">
                <i class="bi bi-cash-stack"></i>
            </div>
            <div>
                <div class="stat-value">${{ number_format($stats['monthly_revenue'], 0) }}</div>
                <div class="stat-label">إيرادات الشهر</div>
            </div>
        </div>
    </div>

</div>

{{-- ===== Charts + Tables ===== --}}
<div class="row g-3 mb-4">

    {{-- Chart المواعيد الأسبوعية --}}
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span><i class="bi bi-bar-chart-line me-2 text-primary"></i>المواعيد — آخر 7 أيام</span>
            </div>
            <div class="card-body">
                <canvas id="appointmentsChart" height="100"></canvas>
            </div>
        </div>
    </div>

    {{-- توزيع الاشتراكات --}}
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-pie-chart me-2 text-success"></i>توزيع الاشتراكات
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="subscriptionsChart" height="200"></canvas>
            </div>
        </div>
    </div>

</div>

<div class="row g-3">

    {{-- أطباء بانتظار الموافقة --}}
    <div class="col-lg-6">
        <div class="card table-card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span><i class="bi bi-clock-history me-2 text-warning"></i>أطباء بانتظار الموافقة</span>
                <a href="{{ route('admin.doctors.index', ['status'=>'pending']) }}" class="btn btn-sm btn-outline-primary">عرض الكل</a>
            </div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th>الطبيب</th>
                            <th>التخصص</th>
                            <th>المدينة</th>
                            <th>إجراء</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pendingDoctors as $doc)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $doc->user->name }}</div>
                                <small class="text-muted">{{ $doc->user->email }}</small>
                            </td>
                            <td><span class="badge bg-light text-dark">{{ $doc->specialty }}</span></td>
                            <td>{{ $doc->city ?? '—' }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.doctors.approve', $doc->id) }}" class="d-inline">
                                    @csrf @method('PATCH')
                                    <button class="btn btn-sm btn-success">
                                        <i class="bi bi-check-lg"></i> موافقة
                                    </button>
                                </form>
                                <a href="{{ route('admin.doctors.show', $doc->id) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                <i class="bi bi-check-circle fs-4 d-block mb-1 text-success"></i>
                                لا يوجد أطباء بانتظار الموافقة
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- آخر المرضى المسجلين --}}
    <div class="col-lg-6">
        <div class="card table-card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span><i class="bi bi-person-plus me-2 text-info"></i>آخر المرضى المسجلين</span>
                <a href="{{ route('admin.patients.index') }}" class="btn btn-sm btn-outline-primary">عرض الكل</a>
            </div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th>المريض</th>
                            <th>الهاتف</th>
                            <th>تاريخ التسجيل</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentPatients as $patient)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $patient->name }}</div>
                                <small class="text-muted">{{ $patient->email }}</small>
                            </td>
                            <td>{{ $patient->phone ?? '—' }}</td>
                            <td>
                                <small class="text-muted">{{ $patient->created_at->diffForHumans() }}</small>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="text-center text-muted py-4">لا يوجد مرضى بعد</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
// --- Chart المواعيد ---
const apptData = @json($weeklyAppointments);
const labels   = Object.keys(apptData);
const values   = Object.values(apptData);

new Chart(document.getElementById('appointmentsChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'عدد المواعيد',
            data: values,
            backgroundColor: 'rgba(13,110,253,.15)',
            borderColor: '#0d6efd',
            borderWidth: 2,
            borderRadius: 6,
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f0f0f5' } },
            x: { grid: { display: false } }
        }
    }
});

// --- Chart الاشتراكات ---
const planData   = @json($subscriptionsByPlan);
const planLabels = planData.map(p => p.plan?.name_ar ?? 'غير معروف');
const planValues = planData.map(p => p.total);

new Chart(document.getElementById('subscriptionsChart'), {
    type: 'doughnut',
    data: {
        labels: planLabels,
        datasets: [{
            data: planValues,
            backgroundColor: ['#0d6efd','#198754','#ffc107'],
            borderWidth: 0,
        }]
    },
    options: {
        plugins: {
            legend: { position: 'bottom', labels: { font: { size: 12 } } }
        },
        cutout: '65%',
    }
});
</script>
@endpush