<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'EduSmart SMS') - EduSmart</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #1a7f5a;
            --primary-dark: #145f44;
            --primary-light: #e8f5f0;
            --secondary: #2563eb;
            --accent: #f59e0b;
            --danger: #ef4444;
            --success: #10b981;
            --warning: #f59e0b;
            --info: #3b82f6;
            --dark: #1e293b;
            --gray: #64748b;
            --light: #f8fafc;
            --border: #e2e8f0;
            --sidebar-w: 260px;
            --topbar-h: 64px;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--light); color: var(--dark); }

        /* Sidebar */
        .sidebar {
            position: fixed; top: 0; left: 0; width: var(--sidebar-w);
            height: 100vh; background: var(--dark); overflow-y: auto;
            transition: transform .3s ease; z-index: 1000;
            display: flex; flex-direction: column;
        }
        .sidebar.collapsed { transform: translateX(-100%); }
        .sidebar-brand {
            padding: 20px; display: flex; align-items: center; gap: 12px;
            border-bottom: 1px solid rgba(255,255,255,.1);
        }
        .sidebar-brand .logo {
            width: 40px; height: 40px; background: var(--primary);
            border-radius: 10px; display: flex; align-items: center;
            justify-content: center; color: #fff; font-weight: 700; font-size: 18px;
        }
        .sidebar-brand span { color: #fff; font-weight: 700; font-size: 16px; }
        .sidebar-brand small { color: rgba(255,255,255,.5); font-size: 11px; display: block; }
        .sidebar-nav { padding: 16px 0; flex: 1; }
        .nav-section { padding: 8px 20px 4px; color: rgba(255,255,255,.35); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
        .nav-item a {
            display: flex; align-items: center; gap: 12px; padding: 10px 20px;
            color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px;
            transition: all .2s; border-left: 3px solid transparent;
        }
        .nav-item a:hover, .nav-item a.active {
            color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--primary);
        }
        .nav-item a i { font-size: 18px; width: 20px; }
        .sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); }
        .sidebar-footer a { color: rgba(255,255,255,.5); font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 8px; }

        /* Topbar */
        .topbar {
            position: fixed; top: 0; left: var(--sidebar-w); right: 0;
            height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 999;
            transition: left .3s ease;
        }
        .topbar.full { left: 0; }
        .topbar-toggle { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--gray); }
        .topbar-title { font-weight: 600; font-size: 16px; flex: 1; }
        .topbar-actions { display: flex; align-items: center; gap: 12px; }
        .topbar-user { display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
        .badge-notif { background: var(--danger); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; }

        /* Main Content */
        .main-content {
            margin-left: var(--sidebar-w); margin-top: var(--topbar-h);
            padding: 24px; min-height: calc(100vh - var(--topbar-h));
            transition: margin-left .3s ease;
        }
        .main-content.full { margin-left: 0; }

        /* Cards */
        .card { background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
        .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .card-header h5 { font-size: 15px; font-weight: 600; }
        .card-body { padding: 20px; }

        /* Stat Cards */
        .stat-card { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--border); display: flex; align-items: center; gap: 16px; }
        .stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
        .stat-icon.green { background: var(--primary-light); color: var(--primary); }
        .stat-icon.blue { background: #eff6ff; color: var(--secondary); }
        .stat-icon.amber { background: #fffbeb; color: var(--accent); }
        .stat-icon.red { background: #fef2f2; color: var(--danger); }
        .stat-info h3 { font-size: 24px; font-weight: 700; }
        .stat-info p { font-size: 13px; color: var(--gray); margin-top: 2px; }

        /* Tables */
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 14px; }
        th { background: var(--light); padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray); border-bottom: 1px solid var(--border); }
        td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: var(--light); }

        /* Forms */
        .form-group { margin-bottom: 16px; }
        label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--dark); }
        input, select, textarea {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border);
            border-radius: 8px; font-size: 14px; font-family: inherit;
            transition: border-color .2s; background: #fff;
        }
        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,127,90,.1); }
        .form-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

        /* Buttons */
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: all .2s; }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-secondary { background: var(--light); color: var(--dark); border: 1px solid var(--border); }
        .btn-secondary:hover { background: var(--border); }
        .btn-danger { background: var(--danger); color: #fff; }
        .btn-sm { padding: 6px 12px; font-size: 13px; }
        .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }

        /* Badges */
        .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
        .badge-success { background: #d1fae5; color: #065f46; }
        .badge-danger { background: #fee2e2; color: #991b1b; }
        .badge-warning { background: #fef3c7; color: #92400e; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .badge-gray { background: #f1f5f9; color: var(--gray); }

        /* Alerts */
        .alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
        .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
        .alert-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
        .alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

        /* Grid */
        .grid { display: grid; gap: 20px; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }

        /* Page header */
        .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
        .page-header h1 { font-size: 22px; font-weight: 700; }
        .page-header p { color: var(--gray); font-size: 14px; margin-top: 2px; }

        /* Pagination */
        .pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 20px; }
        .pagination a, .pagination span { padding: 8px 12px; border-radius: 6px; font-size: 14px; text-decoration: none; border: 1px solid var(--border); color: var(--dark); }
        .pagination .active span { background: var(--primary); color: #fff; border-color: var(--primary); }

        /* Mobile */
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .topbar { left: 0; }
            .main-content { margin-left: 0; padding: 16px; }
            .grid-4 { grid-template-columns: repeat(2, 1fr); }
            .grid-3 { grid-template-columns: repeat(2, 1fr); }
            .grid-2 { grid-template-columns: 1fr; }
            .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
        }
        @media (max-width: 480px) {
            .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
        }

        /* Overlay */
        .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; }
        .sidebar-overlay.show { display: block; }
    </style>
    @stack('styles')
</head>
<body>
<div class="sidebar-overlay" id="overlay" onclick="toggleSidebar()"></div>

<aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
        <div class="logo">E</div>
        <div>
            <span>EduSmart</span>
            <small>School Management</small>
        </div>
    </div>
    <nav class="sidebar-nav">
        @yield('sidebar-nav')
    </nav>
    <div class="sidebar-footer">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" style="background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);font-size:13px;display:flex;align-items:center;gap:8px;width:100%;">
                <i class="bi bi-box-arrow-left"></i> Logout
            </button>
        </form>
    </div>
</aside>

<header class="topbar" id="topbar">
    <button class="topbar-toggle" onclick="toggleSidebar()"><i class="bi bi-list"></i></button>
    <span class="topbar-title">@yield('page-title', 'Dashboard')</span>
    <div class="topbar-actions">
        <div class="topbar-user">
            <div class="avatar">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
            <div style="display:none;display:flex;flex-direction:column;">
                <span style="font-size:13px;font-weight:600;">{{ auth()->user()->name }}</span>
                <span style="font-size:11px;color:var(--gray);">{{ ucfirst(auth()->user()->getRoleNames()->first()) }}</span>
            </div>
        </div>
    </div>
</header>

<main class="main-content" id="mainContent">
    @if(session('success'))
        <div class="alert alert-success"><i class="bi bi-check-circle"></i> {{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger"><i class="bi bi-exclamation-circle"></i> {{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle"></i>
            <ul style="margin:0;padding-left:16px;">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    @yield('content')
</main>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const isMobile = window.innerWidth <= 768;
    if (isMobile) {
        sidebar.classList.toggle('open');
        overlay.classList.toggle('show');
    } else {
        sidebar.classList.toggle('collapsed');
        document.getElementById('topbar').classList.toggle('full');
        document.getElementById('mainContent').classList.toggle('full');
    }
}
// Mark active nav
document.querySelectorAll('.nav-item a').forEach(a => {
    if (a.href === window.location.href) a.classList.add('active');
});
</script>
@stack('scripts')
</body>
</html>
