<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#6d28d9">
    @if($siteBrand->hasFavicon())
        <link rel="icon" href="{{ $siteBrand->faviconUrl() }}">
    @endif
    <title>@yield('title','الرئيسية') — {{ $siteBrand->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{
            --c1:#6d28d9;--c2:#7c3aed;--c3:#8b5cf6;
            --cL:#f5f3ff;--cM:#ede9fe;
            --bg:#f2f2f7;--card:#fff;
            --t1:#0f172a;--t2:#475569;--t3:#94a3b8;
            --r:18px;--rs:12px;--rxs:8px;
            --sh:0 2px 10px rgba(0,0,0,.07);
            /* ارتفاع تقريبي للشريط السفلي + هامش للمحتوى */
            --nav:76px;
        }
        *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
        html,body{height:100%;overflow:hidden}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--t1);display:flex;flex-direction:column}

        /* ══ TopBar ══ */
        .topbar{
            background:var(--c1);
            padding:.65rem 1rem;
            display:flex;align-items:center;justify-content:space-between;
            position:sticky;top:0;z-index:300;flex-shrink:0;
            box-shadow:0 2px 12px rgba(109,40,217,.3);
        }
        .tb-left{display:flex;align-items:center;gap:.7rem}
        .tb-site-logo{height:34px;width:auto;max-width:120px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.12);padding:3px 6px}
        .tb-av{
            width:38px;height:38px;border-radius:50%;
            background:rgba(255,255,255,.2);
            border:2px solid rgba(255,255,255,.35);
            display:flex;align-items:center;justify-content:center;
            font-size:.95rem;font-weight:700;color:#fff;cursor:pointer;
        }
        .tb-info .tb-name{font-size:.85rem;font-weight:700;color:#fff;line-height:1.3}
        .tb-info .tb-sub{font-size:.64rem;color:rgba(255,255,255,.65)}
        .tb-right{display:flex;gap:.45rem}
        .tb-btn{
            width:36px;height:36px;border-radius:50%;
            background:rgba(255,255,255,.15);
            display:flex;align-items:center;justify-content:center;
            color:#fff;font-size:1rem;text-decoration:none;
            border:none;cursor:pointer;position:relative;
            transition:background .15s;
        }
        .tb-btn:active{background:rgba(255,255,255,.3)}
        .tb-dot{
            position:absolute;top:3px;left:3px;
            width:8px;height:8px;background:#ef4444;
            border-radius:50%;border:1.5px solid var(--c1);
        }

        /* ══ Drawer ══ */
        .drawer-overlay{
            position:fixed;inset:0;background:rgba(0,0,0,.5);
            z-index:400;opacity:0;pointer-events:none;
            transition:opacity .25s;
        }
        .drawer-overlay.open{opacity:1;pointer-events:all}
        .drawer{
            position:fixed;top:0;right:-280px;bottom:0;
            width:280px;background:#fff;z-index:500;
            transition:right .3s cubic-bezier(.25,.46,.45,.94);
            display:flex;flex-direction:column;
            box-shadow:-8px 0 30px rgba(0,0,0,.15);
        }
        .drawer.open{right:0}
        .drawer-head{
            background:linear-gradient(135deg,var(--c1),var(--c2));
            padding:2rem 1.2rem 1.2rem;color:#fff;
        }
        .drawer-av{
            width:64px;height:64px;border-radius:50%;
            background:rgba(255,255,255,.25);
            border:3px solid rgba(255,255,255,.4);
            display:flex;align-items:center;justify-content:center;
            font-size:1.5rem;font-weight:700;color:#fff;
            margin-bottom:.7rem;
        }
        .drawer-name{font-size:1.05rem;font-weight:800;margin-bottom:2px}
        .drawer-phone{font-size:.78rem;opacity:.8}
        .drawer-body{flex:1;overflow-y:auto;padding:.6rem 0}
        .drawer-item{
            display:flex;align-items:center;gap:.9rem;
            padding:.85rem 1.2rem;color:var(--t1);text-decoration:none;
            font-size:.9rem;font-weight:600;border:none;background:none;
            cursor:pointer;width:100%;transition:background .15s;
        }
        .drawer-item:hover,.drawer-item:active{background:var(--cL)}
        .drawer-item .di{
            width:38px;height:38px;border-radius:11px;
            display:flex;align-items:center;justify-content:center;
            font-size:1rem;flex-shrink:0;
        }
        .drawer-item .di.bg-p{background:var(--cM);color:var(--c1)}
        .drawer-item .di.bg-b{background:#dbeafe;color:#1e40af}
        .drawer-item .di.bg-g{background:#d1fae5;color:#065f46}
        .drawer-item .di.bg-o{background:#fff7ed;color:#c2410c}
        .drawer-item .di.bg-r{background:#fee2e2;color:#991b1b}
        .drawer-item .di.bg-y{background:#fef9c3;color:#854d0e}
        .drawer-sep{height:1px;background:#f1f5f9;margin:.3rem 0}
        .drawer-item.danger{color:#dc2626}
        .drawer-foot{
            padding:.8rem 1.2rem;border-top:1px solid #f1f5f9;
            font-size:.72rem;color:var(--t3);text-align:center;
        }

        /* ══ Scroll ══ */
        .scroll{
            flex:1;overflow-y:auto;overflow-x:hidden;
            -webkit-overflow-scrolling:touch;
            padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom, 0px) + .35rem);
        }
        .scroll::-webkit-scrollbar{display:none}

        /* ══ Bottom Nav — شريط عائم أنيق (آمن للـ notch) ══ */
        .bnav{
            display:flex;align-items:stretch;justify-content:space-between;
            position:fixed;bottom:0;left:0;right:0;z-index:300;
            padding:.55rem .5rem max(.5rem, env(safe-area-inset-bottom)) .5rem;
            background:rgba(255,255,255,.94);
            -webkit-backdrop-filter:saturate(180%) blur(16px);
            backdrop-filter:saturate(180%) blur(16px);
            border-top:1px solid rgba(15,23,42,.06);
            border-radius:18px 18px 0 0;
            box-shadow:
                0 -4px 24px rgba(109,40,217,.07),
                0 -1px 0 rgba(255,255,255,.85) inset;
        }
        .ni{
            flex:1;min-width:0;max-width:88px;
            display:flex;flex-direction:column;
            align-items:center;justify-content:flex-start;
            gap:4px;color:var(--t3);text-decoration:none;
            font-size:.58rem;font-weight:700;letter-spacing:.01em;
            border:none;background:none;cursor:pointer;
            position:relative;transition:color .2s;
            padding:.15rem 2px 0;
            -webkit-tap-highlight-color:transparent;
        }
        .ni .ico{
            width:42px;height:42px;border-radius:13px;
            display:flex;align-items:center;justify-content:center;
            font-size:1.22rem;line-height:1;color:inherit;
            transition:background .22s,color .22s,transform .2s cubic-bezier(.25,.46,.45,.94),box-shadow .22s;
        }
        .ni:not(.on) .ico{color:#94a3b8}
        .ni:not(.on):active .ico{background:rgba(15,23,42,.05);transform:scale(.96)}
        .ni.on{color:var(--c1)}
        .ni.on .ico{
            background:linear-gradient(165deg,#f5f3ff 0%,#ede9fe 45%,#ddd6fe 100%);
            color:var(--c1);
            box-shadow:0 2px 12px rgba(109,40,217,.22),0 1px 0 rgba(255,255,255,.9) inset;
            transform:translateY(-1px);
        }
        .ni-dot{
            position:absolute;top:2px;
            inset-inline-start:50%;
            margin-inline-start:10px;
            background:#ef4444;color:#fff;
            font-size:.5rem;font-weight:800;min-width:16px;height:16px;
            padding:0 4px;border-radius:999px;border:2px solid #fff;
            display:flex;align-items:center;justify-content:center;
            box-shadow:0 1px 4px rgba(239,68,68,.45);
        }

        /* ══ Cards & Shared ══ */
        .card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
        .cp{padding:1rem 1.1rem}
        .sh{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem .3rem}
        .st{font-size:.9rem;font-weight:700;color:var(--t1)}
        .sl{font-size:.75rem;color:var(--c2);font-weight:600;text-decoration:none}
        .alert{margin:.5rem 1rem 0;border-radius:var(--rs);padding:.65rem .9rem;font-size:.83rem;display:flex;align-items:center;gap:.5rem}
        .a-ok{background:#d1fae5;color:#065f46}
        .a-err{background:#fee2e2;color:#991b1b}
        .pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:.68rem;font-weight:700}
        .pg{background:#d1fae5;color:#065f46}
        .py{background:#fef3c7;color:#92400e}
        .pr{background:#fee2e2;color:#991b1b}
        .pp{background:var(--cM);color:var(--c1)}
        .btn{background:var(--c1);color:#fff;border:none;border-radius:var(--rs);padding:.7rem 1.3rem;font-weight:700;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .15s;text-decoration:none}
        .btn:active{transform:scale(.97)}
        .btn-o{background:transparent;color:var(--c1);border:2px solid var(--c1);border-radius:var(--rs);padding:.65rem 1.2rem;font-weight:700;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
        .btn-sm{background:var(--c1);color:#fff;border:none;border-radius:var(--rxs);padding:.4rem .85rem;font-weight:600;font-size:.75rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;text-decoration:none}

        /* ══ توافق صفحات المريض (مواعيد، سجلات، إشعارات، اشتراك…) ══ */
        .p-card{
            background:var(--card);
            border-radius:var(--r);
            padding:1rem 1.1rem;
            box-shadow:var(--sh);
            margin-bottom:.75rem;
        }
        .p-card-title{
            font-size:.72rem;
            font-weight:700;
            color:var(--t3);
            text-transform:uppercase;
            letter-spacing:.06em;
            margin-bottom:.5rem;
        }
        .appt-date-box{
            width:46px;height:52px;
            background:var(--cL);
            border-radius:12px;
            display:flex;flex-direction:column;
            align-items:center;justify-content:center;
            flex-shrink:0;
        }
        .appt-date-box .day{font-size:1.15rem;font-weight:800;color:var(--c1);line-height:1}
        .appt-date-box .mon{font-size:.58rem;color:var(--t3);font-weight:700}
        .btn-pat{
            background:var(--c1)!important;
            color:#fff!important;
            border:none!important;
            border-radius:var(--rs)!important;
            padding:.7rem 1.3rem!important;
            font-weight:700!important;
            font-size:.9rem!important;
            cursor:pointer;
            display:inline-flex!important;
            align-items:center;
            gap:.4rem;
            text-decoration:none!important;
        }
        .btn-pat:hover{color:#fff!important;filter:brightness(1.06)}
        /* تفادي تعارض تنبيهات الشريط مع Bootstrap */
        .scroll > .alert.a-ok,
        .scroll > .alert.a-err{
            margin-left:0;
            margin-right:0;
        }
    </style>
    @stack('styles')
</head>
<body>

@php
    $pid=session('patient_id');
    $uc=$pid?\App\Models\PatientNotification::where('patient_id',$pid)->where('is_read',false)->count():0;
    $ini=strtoupper(mb_substr($authPatient->user->name??'م',0,1));
@endphp

{{-- ══ TopBar ══ --}}
<div class="topbar">
    <div class="tb-left">
        @if($siteBrand->hasLogo())
            <img src="{{ $siteBrand->logoUrl() }}" alt="" class="tb-site-logo">
        @endif
        <div class="tb-av" onclick="openDrawer()">{{ $ini }}</div>
        <div class="tb-info">
            <div class="tb-name">{{ $authPatient->user->name }}</div>
            <div class="tb-sub">@yield('tb-sub','بوابتك الصحية 🏥')</div>
        </div>
    </div>
    <div class="tb-right">
        <a href="{{ route('patient.notifications.index') }}" class="tb-btn">
            <i class="bi bi-bell-fill"></i>
            @if($uc)<span class="tb-dot"></span>@endif
        </a>
        <button class="tb-btn" onclick="openDrawer()">
            <i class="bi bi-list"></i>
        </button>
    </div>
</div>

{{-- ══ Drawer overlay ══ --}}
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>

{{-- ══ Drawer menu ══ --}}
<div class="drawer" id="drawer">
    <div class="drawer-head">
        <div class="drawer-av">{{ $ini }}</div>
        <div class="drawer-name">{{ $authPatient->user->name }}</div>
        <div class="drawer-phone">{{ $authPatient->user->phone }}</div>
        @if($authPatient->blood_type)
        <div style="margin-top:.4rem">
            <span style="background:rgba(255,255,255,.2);border-radius:20px;padding:2px 10px;font-size:.72rem;font-weight:700">
                🩸 {{ $authPatient->blood_type }}
            </span>
        </div>
        @endif
    </div>

    <div class="drawer-body">
        <a href="{{ route('patient.dashboard') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-p"><i class="bi bi-house-fill"></i></span>الرئيسية
        </a>
        <a href="{{ route('patient.doctors.index') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-b"><i class="bi bi-search-heart"></i></span>البحث عن طبيب
        </a>
        <a href="{{ route('patient.appointments.index') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-g"><i class="bi bi-calendar2-check-fill"></i></span>مواعيدي
        </a>
        <a href="{{ route('patient.records.index') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-b"><i class="bi bi-clipboard2-pulse-fill"></i></span>سجلاتي الطبية
        </a>
        @if($uc > 0)
        <a href="{{ route('patient.notifications.index') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-y"><i class="bi bi-bell-fill"></i></span>
            الإشعارات
            <span style="margin-right:auto;background:#ef4444;color:#fff;border-radius:20px;padding:1px 8px;font-size:.68rem;font-weight:700">{{ $uc }}</span>
        </a>
        @else
        <a href="{{ route('patient.notifications.index') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-y"><i class="bi bi-bell"></i></span>الإشعارات
        </a>
        @endif

        <div class="drawer-sep"></div>

        <a href="{{ route('patient.profile') }}" class="drawer-item" onclick="closeDrawer()">
            <span class="di bg-p"><i class="bi bi-person-fill"></i></span>ملفي الشخصي
        </a>

        <div class="drawer-sep"></div>

        <form method="POST" action="{{ route('patient.logout') }}">
            @csrf
            <button type="submit" class="drawer-item danger">
                <span class="di bg-r"><i class="bi bi-box-arrow-right"></i></span>تسجيل الخروج
            </button>
        </form>
    </div>

    <div class="drawer-foot">{{ $siteBrand->name() }} v1.0 · جميع الحقوق محفوظة</div>
</div>

{{-- ══ Scroll Content ══ --}}
<div class="scroll" id="scr">
    @if(session('success'))
    <div class="alert a-ok mt-2"><i class="bi bi-check-circle-fill"></i>{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="alert a-err mt-2"><i class="bi bi-exclamation-circle-fill"></i>{{ session('error') }}</div>
    @endif
    @yield('content')
</div>

{{-- ══ Bottom Nav ══ --}}
<nav class="bnav">
    <a href="{{ route('patient.dashboard') }}" class="ni {{ request()->routeIs('patient.dashboard')?'on':'' }}">
        <span class="ico"><i class="bi bi-house-fill"></i></span>الرئيسية
    </a>
    <a href="{{ route('patient.doctors.index') }}" class="ni {{ request()->routeIs('patient.doctors.*')?'on':'' }}">
        <span class="ico"><i class="bi bi-search-heart"></i></span>أطباء
    </a>
    <a href="{{ route('patient.appointments.index') }}" class="ni {{ request()->routeIs('patient.appointments.*')?'on':'' }}">
        <span class="ico"><i class="bi bi-calendar2-check-fill"></i></span>مواعيد
    </a>
    <a href="{{ route('patient.records.index') }}" class="ni {{ request()->routeIs('patient.records.*')?'on':'' }}">
        <span class="ico"><i class="bi bi-clipboard2-pulse-fill"></i></span>سجلاتي
    </a>
    <a href="{{ route('patient.profile') }}" class="ni {{ request()->routeIs('patient.profile*')?'on':'' }}">
        <span class="ico"><i class="bi bi-person-circle"></i></span>حسابي
    </a>
</nav>

@include('partials.splash-ad')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function openDrawer(){
    document.getElementById('drawer').classList.add('open');
    document.getElementById('overlay').classList.add('open');
    document.body.style.overflow='hidden';
}
function closeDrawer(){
    document.getElementById('drawer').classList.remove('open');
    document.getElementById('overlay').classList.remove('open');
    document.body.style.overflow='';
}
// Swipe to close drawer
let sx=0;
document.getElementById('drawer').addEventListener('touchstart',e=>sx=e.touches[0].clientX,{passive:true});
document.getElementById('drawer').addEventListener('touchend',e=>{
    if(e.changedTouches[0].clientX-sx>60) closeDrawer();
});
// Auto-dismiss alerts
setTimeout(()=>{
    document.querySelectorAll('.alert').forEach(e=>{
        e.style.transition='opacity .5s';e.style.opacity='0';
        setTimeout(()=>e.remove(),500);
    });
},3500);
</script>
@stack('scripts')
</body>
</html>
