<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin Panel')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root { --admin-sidebar: #2c3e50; --brand-pink: #f690a6; }
        body { font-family: 'Poppins', sans-serif; background: #f5f7fb; margin: 0; }
        .sidebar { width: 260px; min-height: 100vh; position: fixed; top: 0; left: 0; padding: 24px 0; background: var(--admin-sidebar); color: #fff; }
        .sidebar-brand { padding: 0 28px 24px; }
        .sidebar a { display: block; color: rgba(255,255,255,0.7); text-decoration: none; padding: 14px 28px; transition: .2s ease; }
        .sidebar a:hover, .sidebar a.active { color: #fff; background: rgba(255,255,255,0.08); border-left: 4px solid var(--brand-pink); }
        .main-content { margin-left: 260px; padding: 40px; }
        .panel-card { border: 0; border-radius: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07); }
        .stat-card { border: 0; border-radius: 18px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06); }
        @media (max-width: 991.98px) {
            .sidebar { position: static; width: 100%; min-height: auto; }
            .main-content { margin-left: 0; padding: 24px 16px; }
        }
    </style>
    @stack('styles')
</head>
<body>
    <aside class="sidebar">
        <div class="sidebar-brand">
            <h4 class="fw-bold mb-0">Smart<span style="color:var(--brand-pink)">Dermatology</span></h4>
            <p class="small text-white-50 mt-2 mb-0">Admin workspace</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="fas fa-chart-line me-2"></i> Dashboard</a>
        <a href="{{ route('admin.profile') }}" class="{{ request()->routeIs('admin.profile*') ? 'active' : '' }}"><i class="fas fa-user-cog me-2"></i> Profile</a>
        <a href="{{ route('admin.analyses') }}" class="{{ request()->routeIs('admin.analyses') ? 'active' : '' }}"><i class="fas fa-image me-2"></i> Analyses</a>
        <a href="{{ route('admin.users') }}" class="{{ request()->routeIs('admin.users') ? 'active' : '' }}"><i class="fas fa-users me-2"></i> Manage Users</a>
        <a href="{{ route('admin.queries') }}" class="{{ request()->routeIs('admin.queries') ? 'active' : '' }}"><i class="fas fa-comment-dots me-2"></i> User Queries</a>
        <form action="{{ route('admin.clear-cache') }}" method="POST">
            @csrf
            <button type="submit" style="width:100%;background:none;border:none;text-align:left;padding:14px 28px;color:rgba(255,255,255,0.7);transition:.2s ease;">
                <i class="fas fa-broom me-2"></i> Clear Cache
            </button>
        </form>
        <hr class="mx-3 opacity-25">
        <a href="{{ route('landing') }}"><i class="fas fa-external-link-alt me-2"></i> Visit Site</a>
        <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('admin-logout-form').submit();"><i class="fas fa-sign-out-alt me-2"></i> Logout</a>
        <form id="admin-logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
            @csrf
        </form>
    </aside>

    <main class="main-content">
        <header class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-5">
            <div>
                <h2 class="fw-bold mb-1">@yield('page_title', 'Admin Panel')</h2>
                <p class="text-muted mb-0">@yield('page_subtitle', 'Manage the platform experience.')</p>
            </div>
            <div class="d-flex align-items-center gap-3">
                <span class="fw-semibold">{{ auth()->user()->name }}</span>
                <span class="badge rounded-pill text-bg-light text-uppercase">{{ auth()->user()->user_type }}</span>
            </div>
        </header>

        @if (session('status'))
            <div class="alert alert-success rounded-4 mb-4">{{ session('status') }}</div>
        @endif

        @yield('content')
    </main>
</body>
</html>
