<!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;
            --sec-color: #0f766e;   /* teal للسكرتير */
            --sec-dark:  #134e4a;
            --sec-light: #f0fdfa;
        }
        body { background:#f4f7f9; font-family:'Segoe UI',Tahoma,sans-serif; }

        /* ── Sidebar ── */
        #sec-sidebar {
            width: var(--sidebar-w);
            min-height: 100vh;
            background: var(--sec-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(--sec-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(--sec-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 ── */
        #sec-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 ── */
        #live-clock {
            background:var(--sec-light);
            color:var(--sec-dark);
            font-weight:700; font-size:.95rem;
            padding:.25rem .8rem; border-radius:8px;
        }

        /* ── Main ── */
        #sec-main {
            margin-right: var(--sidebar-w);
            padding-top: calc(var(--topbar-h) + 1.4rem);
            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 number badge ── */
        .queue-num {
            width:42px; height:42px; border-radius:10px;
            background:var(--sec-color); color:#fff;
            display:flex; align-items:center; justify-content:center;
            font-size:1.1rem; font-weight:700; flex-shrink:0;
        }
        .queue-num.waiting     { background:#0f766e; }
        .queue-num.in_progress { background:#d97706; }
        .queue-num.called      { background:#7c3aed; }

        /* ── 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; }

        /* ── Search dropdown ── */
        #patient-results {
            position:absolute; top:100%; right:0; left:0;
            background:#fff; border:1px solid #e5e7eb;
            border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12);
            z-index:9999; max-height:320px; overflow-y:auto;
            display:none;
        }
        .pr-item {
            padding:.65rem 1rem; cursor:pointer;
            border-bottom:1px solid #f3f4f6;
            transition:background .1s;
        }
        .pr-item:last-child { border-bottom:none; }
        .pr-item:hover { background:#f0fdfa; }

        /* ── 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; }

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

{{-- ══ Sidebar ══ --}}
<nav id="sec-sidebar">
    <div class="sb-brand">
        <div class="d-flex align-items-center gap-2 mb-1">
            <div style="width:34px;height:34px;background:var(--sec-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-hospital text-white"></i>
                @endif
            </div>
            <div class="clinic-name">{{ $currentDoctor->clinic_name ?? 'العيادة' }}</div>
        </div>
        <div>
            <span class="role-tag"><i class="bi bi-headset me-1"></i>لوحة الاستقبال</span>
        </div>
        <div class="mt-2" style="font-size:.78rem; color:rgba(255,255,255,.5)">
            <i class="bi bi-person-badge me-1"></i>د. {{ $currentDoctor->user->name }}
        </div>
    </div>

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

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

        <div class="sb-group">المرضى</div>
        <a href="{{ route('secretary.patients.create') }}"
           class="sb-link {{ request()->routeIs('secretary.patients.create') ? 'active' : '' }}">
            <i class="bi bi-person-plus"></i> تسجيل مريض جديد
        </a>
        <a href="{{ route('secretary.patients.index') }}"
           class="sb-link {{ request()->routeIs('secretary.patients.index') ? 'active' : '' }}">
            <i class="bi bi-people"></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="sec-topbar">
    <button class="btn btn-sm btn-outline-secondary d-md-none" onclick="document.getElementById('sec-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>
</div>

{{-- ══ Main ══ --}}
<main id="sec-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>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ساعة حية
function tick() {
    const now = new Date();
    document.getElementById('live-clock').textContent =
        now.toLocaleTimeString('ar-IQ', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
}
tick(); setInterval(tick, 1000);

// إغلاق alerts تلقائياً
document.querySelectorAll('.alert').forEach(el =>
    setTimeout(() => bootstrap.Alert.getOrCreateInstance(el)?.close(), 4500)
);
</script>
@stack('scripts')
</body>
</html>
