<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if($siteBrand->hasFavicon())
        <link rel="icon" href="{{ $siteBrand->faviconUrl() }}">
    @endif
    <title>@yield('title', 'لوحة الإدارة') — {{ $siteBrand->name() }}</title>

    {{-- Bootstrap 5 RTL --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    {{-- Bootstrap Icons --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    {{-- Chart.js --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>

    <style>
        :root {
            --sidebar-width: 250px;
            --sidebar-bg: #1a2035;
            --sidebar-hover: #252d45;
            --sidebar-active: #0d6efd;
            --topbar-height: 60px;
        }

        body { background: #f4f6fb; font-family: 'Segoe UI', Tahoma, sans-serif; }

        /* ===== Sidebar ===== */
        #sidebar {
            width: var(--sidebar-width);
            min-height: 100vh;
            background: var(--sidebar-bg);
            position: fixed;
            top: 0; right: 0;
            z-index: 1000;
            transition: transform .3s ease;
            overflow-y: auto;
        }
        #sidebar .brand {
            height: var(--topbar-height);
            display: flex; align-items: center; justify-content: center;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        #sidebar .brand span { color: #fff; font-size: 1.1rem; font-weight: 700; }
        #sidebar .brand small { color: #8899aa; font-size: .75rem; }

        #sidebar .nav-group-label {
            color: #556070;
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 1.2rem 1.2rem .4rem;
        }
        #sidebar .nav-link {
            color: #a0aec0;
            padding: .55rem 1.2rem;
            border-radius: 8px;
            margin: 1px 8px;
            font-size: .875rem;
            display: flex; align-items: center; gap: 10px;
            transition: background .18s, color .18s;
        }
        #sidebar .nav-link:hover { background: var(--sidebar-hover); color: #fff; }
        #sidebar .nav-link.active { background: var(--sidebar-active); color: #fff; }
        #sidebar .nav-link .bi { font-size: 1rem; flex-shrink: 0; }
        #sidebar .badge-count {
            margin-right: auto;
            background: #e74c3c;
            color: #fff;
            font-size: .65rem;
            padding: 2px 7px;
            border-radius: 20px;
        }

        /* ===== Topbar ===== */
        #topbar {
            height: var(--topbar-height);
            background: #fff;
            border-bottom: 1px solid #e8eaf0;
            position: fixed;
            top: 0; left: 0;
            right: var(--sidebar-width);
            z-index: 999;
            display: flex; align-items: center;
            padding: 0 1.5rem;
            gap: 1rem;
        }
        #topbar .page-title { font-size: 1rem; font-weight: 600; color: #1a2035; margin: 0; }
        #topbar .admin-name { font-size: .875rem; color: #555; }

        /* ===== Main Content ===== */
        #main-content {
            margin-right: var(--sidebar-width);
            padding-top: calc(var(--topbar-height) + 1.5rem);
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-bottom: 2rem;
            min-height: 100vh;
        }

        /* ===== Cards ===== */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 1px 6px rgba(0,0,0,.07);
        }
        .card-header {
            background: transparent;
            border-bottom: 1px solid #f0f0f5;
            font-weight: 600;
            padding: .9rem 1.2rem;
        }

        /* ===== Stat Cards ===== */
        .stat-card {
            border-radius: 14px;
            padding: 1.3rem 1.5rem;
            display: flex; align-items: center; gap: 1rem;
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
        }
        .stat-card .stat-icon {
            width: 52px; height: 52px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        .stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; }
        .stat-card .stat-label { font-size: .8rem; color: #888; margin-top: 3px; }
        .stat-card .stat-sub   { font-size: .75rem; margin-top: 4px; }

        /* ===== Tables ===== */
        .table-card .table thead th {
            background: #f8f9fc;
            font-size: .78rem;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
            letter-spacing: .04em;
            border: none;
            padding: .75rem 1rem;
        }
        .table-card .table tbody td {
            vertical-align: middle;
            padding: .75rem 1rem;
            font-size: .875rem;
            border-color: #f0f0f5;
        }
        .table-card .table tbody tr:hover { background: #fafbff; }

        /* ===== Badges ===== */
        .badge-pending   { background: #fff3cd; color: #856404; }
        .badge-active    { background: #d1e7dd; color: #0a3622; }
        .badge-suspended { background: #f8d7da; color: #58151c; }

        /* ===== Alerts ===== */
        .toast-container { position: fixed; top: 1rem; left: 1rem; z-index: 9999; }

        /* ===== Forms ===== */
        .form-control:focus, .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
        }

        /* ===== Responsive ===== */
        @media (max-width: 768px) {
            #sidebar { transform: translateX(100%); }
            #sidebar.show { transform: translateX(0); }
            #topbar { right: 0; }
            #main-content { margin-right: 0; }
        }
    </style>

    @stack('styles')
</head>
<body>

{{-- ===== Sidebar ===== --}}
<nav id="sidebar">
    <div class="brand">
        <div class="text-center px-2">
            @if($siteBrand->hasLogo())
                <img src="{{ $siteBrand->logoUrl() }}" alt="" class="mb-1" style="max-height:36px;max-width:160px;object-fit:contain">
            @else
                <span><i class="bi bi-hospital me-1"></i></span>
            @endif
            <span class="d-block" style="color:#fff;font-size:1.05rem;font-weight:700">{{ $siteBrand->name() }}</span>
            <small>لوحة الإدارة</small>
        </div>
    </div>

    <ul class="nav flex-column py-2">

        <li><span class="nav-group-label">الرئيسية</span></li>
        <li>
            <a href="{{ route('admin.dashboard') }}"
               class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                <i class="bi bi-speedometer2"></i> لوحة التحكم
            </a>
        </li>

        <li><span class="nav-group-label">المستخدمون</span></li>
        <li>
            <a href="{{ route('admin.doctors.index') }}"
               class="nav-link {{ request()->routeIs('admin.doctors.*') ? 'active' : '' }}">
                <i class="bi bi-person-badge"></i> الأطباء
                @php $pending = \App\Models\Doctor::where('status','pending')->count() @endphp
                @if($pending > 0)
                    <span class="badge-count">{{ $pending }}</span>
                @endif
            </a>
        </li>
        <li>
            <a href="{{ route('admin.patients.index') }}"
               class="nav-link {{ request()->routeIs('admin.patients.*') ? 'active' : '' }}">
                <i class="bi bi-people"></i> المرضى
            </a>
        </li>

        <li><span class="nav-group-label">العمليات</span></li>
        <li>
            <a href="{{ route('admin.appointments.index') }}"
               class="nav-link {{ request()->routeIs('admin.appointments.*') ? 'active' : '' }}">
                <i class="bi bi-calendar-check"></i> المواعيد
            </a>
        </li>

        <li><span class="nav-group-label">المحتوى</span></li>
        <li>
            <a href="{{ route('admin.news.index') }}"
               class="nav-link {{ request()->routeIs('admin.news.*') ? 'active' : '' }}">
                <i class="bi bi-newspaper"></i> الأخبار
            </a>
        </li>
        <li>
            <a href="{{ route('admin.ads.index') }}"
               class="nav-link {{ request()->routeIs('admin.ads.*') ? 'active' : '' }}">
                <i class="bi bi-megaphone"></i> الإعلانات
            </a>
        </li>

        <li><span class="nav-group-label">الإيرادات</span></li>
        <li>
            <a href="{{ route('admin.subscriptions.index') }}"
               class="nav-link {{ request()->routeIs('admin.subscriptions.*') ? 'active' : '' }}">
                <i class="bi bi-credit-card"></i> الاشتراكات
            </a>
        </li>

        <li><span class="nav-group-label">النظام</span></li>
        <li>
            <a href="{{ route('admin.settings') }}"
               class="nav-link {{ request()->routeIs('admin.settings*') ? 'active' : '' }}">
                <i class="bi bi-gear"></i> الإعدادات
            </a>
        </li>
        <li>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="nav-link w-100 text-start border-0 bg-transparent">
                    <i class="bi bi-box-arrow-left"></i> تسجيل الخروج
                </button>
            </form>
        </li>

    </ul>
</nav>

{{-- ===== Topbar ===== --}}
<div id="topbar">
    <button class="btn btn-sm btn-outline-secondary d-md-none" onclick="toggleSidebar()">
        <i class="bi bi-list"></i>
    </button>
    <h1 class="page-title">@yield('page-title', 'لوحة التحكم')</h1>
    <div class="ms-auto d-flex align-items-center gap-3">
        <span class="admin-name"><i class="bi bi-person-circle me-1"></i>{{ $adminUser->name }}</span>
    </div>
</div>

{{-- ===== Main Content ===== --}}
<main id="main-content">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-3" role="alert">
            <i class="bi bi-check-circle-fill"></i>
            {{ session('success') }}
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2 mb-3" role="alert">
            <i class="bi bi-exclamation-circle-fill"></i>
            {{ session('error') }}
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @yield('content')
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('show');
    }
    // إغلاق الـ alerts تلقائياً بعد 4 ثواني
    document.querySelectorAll('.alert').forEach(el => {
        setTimeout(() => {
            const bsAlert = bootstrap.Alert.getOrCreateInstance(el);
            bsAlert.close();
        }, 4000);
    });
</script>
@stack('scripts')
</body>
</html>
