<!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', 'لوحة الطبيب') — {{ $currentDoctor->clinic_name ?? 'العيادة' }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        :root {
            --sidebar-w: 240px;
            --topbar-h:  58px;
            --doc-color: #1d4ed8;   /* أزرق للطبيب */
            --doc-dark:  #1e3a8a;
            --doc-light: #eff6ff;
        }
        body { background:#f4f7f9; font-family:'Segoe UI',Tahoma,sans-serif; }

        /* ── Sidebar ── */
        #doc-sidebar {
            width: var(--sidebar-w);
            min-height:100vh;
            background: var(--doc-dark);
            position:fixed; top:0; right:0;
            z-index:1000;
            display:flex; flex-direction:column;
            transition:transform .3s;
        }
        .sb-brand { padding:1rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.1); }
        .sb-brand .clinic-name { color:#fff; font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .sb-brand .role-tag { display:inline-block; margin-top:3px; background:var(--doc-color); color:#fff; font-size:.65rem; padding:2px 8px; border-radius:20px; }
        .sb-group { color:rgba(255,255,255,.35); font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.9rem 1rem .3rem; }
        .sb-link  { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.65); padding:.52rem 1rem; margin:1px 8px; border-radius:8px; font-size:.875rem; text-decoration:none; transition:background .15s,color .15s; }
        .sb-link:hover  { background:rgba(255,255,255,.08); color:#fff; }
        .sb-link.active { background:var(--doc-color); color:#fff; }
        .sb-link .bi    { font-size:1rem; flex-shrink:0; }
        .sb-badge { margin-right:auto; background:#ef4444; color:#fff; font-size:.62rem; padding:1px 6px; border-radius:20px; }
        .sb-footer { margin-top:auto; padding:.8rem; border-top:1px solid rgba(255,255,255,.1); }

        /* ── Topbar ── */
        #doc-topbar {
            height: var(--topbar-h);
            background:#fff;
            border-bottom:1px solid #e5e7eb;
            position:fixed; top:0; left:0; right:var(--sidebar-w);
            z-index:999;
            display:flex; align-items:center;
            padding:0 1.5rem; gap:1rem;
        }
        .topbar-title { font-size:.95rem; font-weight:600; color:#1e293b; margin:0; }
        #live-clock { background:var(--doc-light); color:var(--doc-dark); font-weight:700; font-size:.95rem; padding:.25rem .8rem; border-radius:8px; }

        /* ── Main ── */
        #doc-main {
            margin-right:var(--sidebar-w);
            padding: calc(var(--topbar-h) + 1.4rem) 1.5rem 2rem;
        }

        /* ── 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:.85rem 1.2rem; }

        /* ── Stat cards ── */
        .stat-card { border-radius:14px; padding:1.1rem 1.3rem; display:flex; align-items:center; gap:1rem; box-shadow:0 2px 8px rgba(0,0,0,.07); background:#fff; }
        .stat-icon  { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
        .stat-val   { font-size:1.65rem; font-weight:700; line-height:1; }
        .stat-lbl   { font-size:.78rem; color:#888; margin-top:2px; }

        /* ── Queue item ── */
        .q-item { display:flex; align-items:center; gap:12px; padding:.75rem 1rem; border-bottom:1px solid #f3f4f6; transition:background .15s; }
        .q-item:hover { background:#f8fafc; }
        .q-item:last-child { border-bottom:none; }
        .q-num { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; }
        .q-num.waiting     { background:#0f766e; }
        .q-num.in_progress { background:#d97706; }
        .q-num.called      { background:#7c3aed; }
        .q-num.completed   { background:#94a3b8; }

        /* ── Status badges ── */
        .b-waiting     { background:#dcfce7; color:#166534; }
        .b-in_progress { background:#fef3c7; color:#92400e; }
        .b-called      { background:#ede9fe; color:#5b21b6; }
        .b-completed   { background:#e0e7ff; color:#3730a3; }

        /* ── Tables ── */
        .tbl thead th { background:#f8fafb; font-size:.75rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.04em; border:none; padding:.7rem 1rem; }
        .tbl tbody td { vertical-align:middle; font-size:.875rem; padding:.7rem 1rem; border-color:#f0f2f5; }
        .tbl tbody tr:hover { background:#fafcff; }

        /* ── Current patient card ── */
        .current-patient-card {
            background: linear-gradient(135deg, var(--doc-dark), var(--doc-color));
            color:#fff; border-radius:16px; padding:1.4rem 1.6rem;
            box-shadow:0 4px 16px rgba(29,78,216,.3);
        }

        @media(max-width:768px){
            #doc-sidebar { transform:translateX(100%); }
            #doc-sidebar.open { transform:translateX(0); }
            #doc-topbar { right:0; }
            #doc-main   { margin-right:0; }
        }
    </style>
    @stack('styles')
</head>
<body>

{{-- ══ Sidebar ══ --}}
<nav id="doc-sidebar">
    <div class="sb-brand">
        <div class="d-flex align-items-center gap-2 mb-1">
            <div style="width:34px;height:34px;background:var(--doc-color);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden">
                @if($siteBrand->hasLogo())
                    <img src="{{ $siteBrand->logoUrl() }}" alt="" style="width:100%;height:100%;object-fit:contain">
                @else
                    <i class="bi bi-heart-pulse text-white"></i>
                @endif
            </div>
            <div class="clinic-name">{{ $currentDoctor->clinic_name ?? 'العيادة' }}</div>
        </div>
        <span class="role-tag"><i class="bi bi-person-badge me-1"></i>لوحة الطبيب</span>
        <div class="mt-2" style="font-size:.78rem; color:rgba(255,255,255,.5)">
            <i class="bi bi-award me-1"></i>{{ $currentDoctor->specialty }}
        </div>
    </div>

    <div class="mt-1">
        <div class="sb-group">الرئيسية</div>
        <a href="{{ route('doctor.dashboard') }}"
           class="sb-link {{ request()->routeIs('doctor.dashboard') ? 'active' : '' }}">
            <i class="bi bi-speedometer2"></i> لوحة التحكم
        </a>

        <div class="sb-group">الطابور</div>
        <a href="{{ route('doctor.queue.index') }}"
           class="sb-link {{ request()->routeIs('doctor.queue.*') ? 'active' : '' }}">
            <i class="bi bi-list-ol"></i> طابور اليوم
            @php $waiting = \App\Models\Queue::where('doctor_id', session('doctor_id'))->today()->whereIn('status',['waiting','called'])->count() @endphp
            @if($waiting > 0)
                <span class="sb-badge">{{ $waiting }}</span>
            @endif
        </a>

        <div class="sb-group">المواعيد</div>
        <a href="{{ route('doctor.appointments.index') }}"
           class="sb-link {{ request()->routeIs('doctor.appointments.*') ? 'active' : '' }}">
            <i class="bi bi-calendar-check"></i> المواعيد
            @php $appts = \App\Models\Appointment::where('doctor_id', session('doctor_id'))->whereDate('appointment_date',today())->whereIn('status',['confirmed','pending'])->count() @endphp
            @if($appts > 0)
                <span class="sb-badge">{{ $appts }}</span>
            @endif
        </a>

        <div class="sb-group">السجلات</div>
        <a href="{{ route('doctor.archive.index') }}"
           class="sb-link {{ request()->routeIs('doctor.archive.*') ? 'active' : '' }}">
            <i class="bi bi-archive"></i> الأرشيف الطبي
        </a>
        <a href="{{ route('doctor.medicines.index') }}"
           class="sb-link {{ request()->routeIs('doctor.medicines.*') || request()->routeIs('doctor.tests.*') ? 'active' : '' }}">
            <i class="bi bi-capsule"></i> أدويتي وتحاليلي
        </a>

        <div class="sb-group">الحساب</div>
        <a href="{{ route('doctor.secretaries.index') }}"
           class="sb-link {{ request()->routeIs('doctor.secretaries.*') ? 'active' : '' }}">
            <i class="bi bi-headset"></i> السكرتيرون
        </a>
        <a href="{{ route('doctor.profile') }}"
           class="sb-link {{ request()->routeIs('doctor.profile') ? 'active' : '' }}">
            <i class="bi bi-person-circle"></i> ملفي الشخصي
        </a>
    </div>

    <div class="sb-footer">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="sb-link w-100 border-0 bg-transparent text-start">
                <i class="bi bi-box-arrow-left"></i> تسجيل الخروج
            </button>
        </form>
    </div>
</nav>

{{-- ══ Topbar ══ --}}
<div id="doc-topbar">
    <button class="btn btn-sm btn-outline-secondary d-md-none"
            onclick="document.getElementById('doc-sidebar').classList.toggle('open')">
        <i class="bi bi-list fs-5"></i>
    </button>
    <h1 class="topbar-title">@yield('page-title', 'لوحة الطبيب')</h1>
    <div class="ms-auto d-flex align-items-center gap-3">
        <div id="live-clock">--:--:--</div>
        <div style="font-size:.8rem;color:#64748b">
            <i class="bi bi-calendar3 me-1"></i>
            {{ now()->locale('ar')->isoFormat('dddd، D MMMM YYYY') }}
        </div>
        <div class="d-flex align-items-center gap-2" style="font-size:.85rem;color:#475569">
            <i class="bi bi-person-circle text-primary"></i>
            د. {{ $currentDoctor->user->name }}
        </div>
    </div>
</div>

{{-- ══ Main ══ --}}
<main id="doc-main">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-3">
        <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">
        <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>

@include('partials.splash-ad')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function tick() {
    document.getElementById('live-clock').textContent =
        new Date().toLocaleTimeString('ar-IQ',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
}
tick(); setInterval(tick, 1000);
document.querySelectorAll('.alert').forEach(el =>
    setTimeout(() => bootstrap.Alert.getOrCreateInstance(el)?.close(), 4500)
);
</script>
@stack('scripts')
</body>
</html>
