<!DOCTYPE html>
<html lang="en">
<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', config('mexco.apps.organizer.name')) · {{ config('mexco.platform') }}</title>
    @include('partials.mexco-favicon')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #7C3AED;
            --primary-dark: #6D28D9;
            --sidebar: #1E1E2D;
            --sidebar-w: 260px;
            --header-h: 72px;
            --bg: #F4F6FA;
            --card: #fff;
            --ink: #1E293B;
            --muted: #64748B;
            --border: #E2E8F0;
        }
        * { box-sizing: border-box; }
        body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--ink); }
        a { text-decoration: none; color: inherit; }
        .shell { display: flex; min-height: 100vh; }

        /* Sidebar */
        .sidebar {
            width: var(--sidebar-w); background: var(--sidebar); color: #94A3B8;
            position: fixed; inset: 0 auto 0 0; z-index: 200;
            display: flex; flex-direction: column;
        }
        .sidebar-brand {
            height: auto;
            min-height: var(--header-h);
            padding: .65rem 1rem;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 100%);
            border-bottom: 1px solid #E2E8F0;
            flex-shrink: 0;
        }
        .sidebar-brand .logo {
            width: auto; max-width: 100%; height: auto;
            max-height: 58px;
            object-fit: contain; display: block;
        }
        .sidebar-brand .logo-text { display: none; }
        .sidebar-welcome {
            padding: 1.75rem 1.25rem 1.25rem;
            border-bottom: 1px solid rgba(255,255,255,.08);
            flex-shrink: 0;
        }
        .sidebar-welcome .greeting {
            font-size: .72rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: .08em; color: #64748B; margin: 0 0 .35rem;
        }
        .sidebar-welcome .hello {
            font-size: 1.05rem; font-weight: 700; color: #F1F5F9;
            margin: 0; line-height: 1.35; word-break: break-word;
        }
        .sidebar-nav { padding: 1.25rem .85rem .5rem; flex: 1; overflow-y: auto; }
        .nav-link {
            display: flex; align-items: center; gap: .7rem; padding: .72rem .9rem;
            border-radius: 10px; font-size: .875rem; font-weight: 500; color: #94A3B8;
            margin-bottom: .15rem; transition: .15s;
        }
        .nav-link svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .85; }
        .nav-link:hover { background: rgba(255,255,255,.06); color: #E2E8F0; }
        .nav-link.active { background: var(--primary); color: #fff; }
        .nav-link.active svg { opacity: 1; }
        .sidebar-help {
            margin: .75rem .85rem 1rem; padding: 1rem; border-radius: 14px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
            text-align: center;
        }
        .sidebar-help .illus { font-size: 2rem; margin-bottom: .5rem; opacity: .9; }
        .sidebar-help p { font-size: .78rem; color: #94A3B8; margin: 0 0 .75rem; line-height: 1.45; }
        .sidebar-help a {
            display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
            color: #E2E8F0; padding: .45rem .85rem; border-radius: 8px;
            border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
        }
        .sidebar-help a:hover { background: rgba(255,255,255,.1); }

        /* Main */
        .main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
        .topbar {
            background: var(--card); border-bottom: 1px solid var(--border);
            height: var(--header-h);
            min-height: var(--header-h);
            padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 100;
        }
        .topbar-left { display: flex; align-items: center; gap: .75rem; }
        .menu-btn {
            width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px;
            background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--muted);
        }
        .topbar-right { display: flex; align-items: center; gap: 1.25rem; }
        .notif-btn {
            position: relative; width: 40px; height: 40px; border-radius: 10px; border: none;
            background: transparent; cursor: pointer; color: var(--muted); display: grid; place-items: center;
        }
        .notif-btn .badge {
            position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 99px;
            background: #EF4444; color: #fff; font-size: .65rem; font-weight: 700;
            display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff;
        }
        .notif-dropdown { position: relative; }
        .notif-dropdown > summary { list-style: none; cursor: pointer; }
        .notif-dropdown > summary::-webkit-details-marker { display: none; }
        .notif-panel {
            position: absolute; top: calc(100% + .45rem); right: 0; width: min(360px, calc(100vw - 2rem));
            background: #fff; border: 1px solid var(--border); border-radius: 14px;
            box-shadow: 0 16px 40px rgba(15,23,42,.14); z-index: 400; overflow: hidden;
        }
        .notif-panel-head {
            display: flex; justify-content: space-between; align-items: center; gap: .75rem;
            padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: #FAFBFC;
        }
        .notif-panel-head strong { font-size: .88rem; }
        .notif-panel-head button {
            border: none; background: transparent; color: var(--primary); font-size: .75rem;
            font-weight: 700; cursor: pointer; padding: 0;
        }
        .notif-list { max-height: 360px; overflow: auto; }
        .notif-item {
            display: block; width: 100%; text-align: left; border: none; background: #fff;
            padding: .85rem 1rem; border-bottom: 1px solid #F1F5F9; cursor: pointer;
        }
        .notif-item:hover { background: #F8FAFC; }
        .notif-item.is-unread { background: #F5F3FF; }
        .notif-item.is-unread:hover { background: #EDE9FE; }
        .notif-item-title { font-size: .85rem; font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
        .notif-item-body { font-size: .78rem; color: var(--muted); margin: 0 0 .35rem; line-height: 1.4; }
        .notif-item-time { font-size: .7rem; color: #94A3B8; }
        .notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); font-size: .85rem; }
        .user-menu {
            display: flex; align-items: center; gap: .65rem; cursor: pointer;
            padding: .35rem .5rem .35rem .35rem; border-radius: 12px;
        }
        .user-menu:hover { background: #F8FAFC; }
        .user-avatar {
            width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
            background: linear-gradient(135deg, #7C3AED, #3B82F6);
            display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem;
        }
        .user-name { font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
        .user-role { font-size: .75rem; color: var(--muted); line-height: 1.2; }
        .user-datetime { font-size: .7rem; color: #94A3B8; line-height: 1.3; margin-top: .1rem; white-space: nowrap; }
        .chev { color: var(--muted); width: 16px; height: 16px; }
        .user-dropdown { position: relative; }
        .user-dropdown > summary { list-style: none; }
        .user-dropdown > summary::-webkit-details-marker { display: none; }
        .user-dropdown-menu {
            position: absolute; top: calc(100% + .35rem); right: 0; min-width: 180px;
            background: #fff; border: 1px solid var(--border); border-radius: 12px;
            box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: .35rem; z-index: 300;
        }
        .user-dropdown-menu button {
            width: 100%; text-align: left; border: none; background: transparent;
            padding: .65rem .85rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
            color: #DC2626; cursor: pointer;
        }
        .user-dropdown-menu button:hover { background: #FEF2F2; }
        .sidebar-foot {
            padding: 1rem .85rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: auto;
        }
        .sidebar-foot form button {
            width: 100%; padding: .6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.05); color: #CBD5E1; font-size: .82rem; font-weight: 600; cursor: pointer;
        }
        .sidebar-foot form button:hover { background: rgba(255,255,255,.1); }

        .content { padding: 1.75rem; flex: 1; }
        .page-footer {
            padding: 1rem 1.75rem; border-top: 1px solid var(--border); background: var(--card);
            display: flex; justify-content: space-between; align-items: center;
            font-size: .8rem; color: var(--muted);
        }

        /* Shared components */
        .card {
            background: var(--card); border: 1px solid var(--border); border-radius: 16px;
            box-shadow: 0 1px 3px rgba(15,23,42,.04);
        }
        .alert-flash {
            padding: .85rem 1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .875rem;
            display: flex; justify-content: space-between; align-items: center;
        }
        .alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
        .alert-danger { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
        .alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
        .import-report {
            background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
            border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; font-size: .85rem;
        }
        .import-report.is-danger {
            background: #FEF2F2; border-color: #FECACA; color: #991B1B;
        }
        .import-report h3 { margin: 0 0 .55rem; font-size: .9rem; font-weight: 700; }
        .import-report ul { margin: 0; padding-left: 1.1rem; }
        .import-report li { margin-bottom: .3rem; }
        .import-report .mono { font-family: ui-monospace, monospace; font-size: .8rem; }
        .import-report .row-tag {
            display: inline-block; min-width: 3.2rem; font-weight: 700; font-family: ui-monospace, monospace;
        }
        .import-report .hint {
            margin-top: .75rem; padding-top: .65rem; border-top: 1px solid rgba(146, 64, 14, .2);
            font-size: .8rem; opacity: .9;
        }
        .import-report.is-danger .hint { border-top-color: rgba(153, 27, 27, .2); }
        .badge-role { font-size: .68rem; font-weight: 700; padding: .3rem .55rem; border-radius: 99px; color: #fff; }
        .btn-primary {
            background: var(--primary); color: #fff; border: none; border-radius: 10px;
            padding: .55rem 1rem; font-weight: 600; font-size: .875rem; cursor: pointer;
        }
        .btn-primary:hover { background: var(--primary-dark); }
        .table-admin { width: 100%; border-collapse: collapse; font-size: .85rem; }
        .table-admin th {
            font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted); text-align: left; padding: .75rem .65rem; border-bottom: 1px solid var(--border);
        }
        .table-admin td { padding: .75rem .65rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }

        /* List pages */
        .pg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
        .pg-head h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .2rem; letter-spacing: -.02em; }
        .pg-head p { margin: 0; color: var(--muted); font-size: .875rem; }
        .pg-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
        .btn-purple { background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: .55rem 1rem; font-weight: 600; font-size: .875rem; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
        .btn-purple:hover { background: var(--primary-dark); color: #fff; }
        .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: .55rem 1rem; font-weight: 600; font-size: .875rem; display: inline-flex; align-items: center; gap: .4rem; }
        .btn-outline:hover { background: #F8FAFC; color: var(--ink); }
        .filter-bar { display: flex; flex-wrap: wrap; gap: .65rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); align-items: center; }
        .filter-bar input, .filter-bar select { border: 1px solid var(--border); border-radius: 10px; padding: .55rem .85rem; font-size: .875rem; background: #fff; color: var(--ink); }
        .filter-search { flex: 1; min-width: 200px; max-width: 320px; }
        .filter-select { min-width: 130px; }
        .filter-btn { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; }
        .tbl-wrap { overflow-x: auto; }
        .data-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
        .data-tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; text-align: left; padding: .85rem 1.15rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: #FAFBFC; }
        .data-tbl td { padding: .85rem 1.15rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
        .data-tbl tbody tr:hover { background: #FAFBFC; }
        .data-tbl tbody tr:last-child td { border-bottom: 0; }
        .avatar-sm { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .75rem; color: #fff; flex-shrink: 0; }
        .cell-user { display: flex; align-items: center; gap: .75rem; }
        .cell-name { font-weight: 600; color: var(--ink); }
        .cell-sub { font-size: .78rem; color: var(--muted); }
        .link-title { color: #2563EB; font-weight: 600; }
        .link-title:hover { text-decoration: underline; }
        .status-pill { display: inline-block; padding: .28rem .65rem; border-radius: 99px; font-size: .72rem; font-weight: 600; }
        .status-verified, .status-published, .status-confirmed, .status-upcoming { background: #DCFCE7; color: #166534; }
        .status-pending, .status-draft { background: #FEF3C7; color: #92400E; }
        .status-scheduled { background: #EDE9FE; color: #5B21B6; }
        .status-toggle {
            display: inline-flex; align-items: center; gap: .55rem;
            border: none; background: transparent; padding: 0; cursor: pointer;
            font: inherit; color: inherit;
        }
        .status-toggle-track {
            position: relative; width: 40px; height: 22px; border-radius: 999px;
            background: #CBD5E1; transition: background .15s; flex-shrink: 0;
        }
        .status-toggle-track::after {
            content: ""; position: absolute; top: 2px; left: 2px;
            width: 18px; height: 18px; border-radius: 50%; background: #fff;
            box-shadow: 0 1px 3px rgba(15,23,42,.2); transition: transform .15s;
        }
        .status-toggle.is-active .status-toggle-track { background: #10B981; }
        .status-toggle.is-active .status-toggle-track::after { transform: translateX(18px); }
        .status-toggle-label { font-size: .75rem; font-weight: 600; color: var(--muted); }
        .status-toggle.is-active .status-toggle-label { color: #166534; }
        .perm-badge { color: var(--primary); font-weight: 600; font-size: .85rem; }
        .tbl-actions { display: flex; gap: .35rem; align-items: center; justify-content: flex-end; }
        .icon-btn { width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; padding: 0; }
        .icon-btn:hover { background: #F1F5F9; color: var(--ink); }
        .icon-btn.danger:hover { background: #FEF2F2; color: #DC2626; }
        .tbl-foot { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.15rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); flex-wrap: wrap; gap: .75rem; }
        .pager { display: flex; gap: .25rem; }
        .pager span, .pager a { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: .8rem; font-weight: 600; }
        .pager a { color: var(--muted); }
        .pager a:hover { background: #F1F5F9; }
        .pager .on { background: var(--primary); color: #fff; }
        .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); padding: 0 1.15rem; }
        .tab { padding: .85rem 1rem; font-size: .875rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
        .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .tab:hover { color: var(--ink); }
        .settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: start; }
        @media (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; } }
        .settings-nav { padding: .5rem; }
        .settings-nav a { display: block; padding: .65rem .85rem; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--muted); margin-bottom: .15rem; }
        .settings-nav a.active { background: #EEF2FF; color: var(--primary); font-weight: 600; }
        .settings-nav a:hover { background: #F8FAFC; color: var(--ink); }
        .form-panel { padding: 1.5rem; }
        .form-panel h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1.25rem; }
        .form-label { font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; display: block; }
        .form-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .85rem; font-size: .875rem; }
        .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
        .form-row { margin-bottom: 1.1rem; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
        .bulk-panel { border-top: 1px solid var(--border); padding: 1.15rem; background: #FAFBFC; }
        .bulk-panel summary { cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--primary); }
        .role-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
        .event-thumb { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #6366F1, #8B5CF6); flex-shrink: 0; }
        .booth-icon { width: 36px; height: 36px; border-radius: 8px; background: #F5F3FF; color: #8B5CF6; display: grid; place-items: center; flex-shrink: 0; }

        @media (max-width: 991px) {
            .sidebar { transform: translateX(-100%); transition: transform .2s; }
            .sidebar.open { transform: translateX(0); }
            .main { margin-left: 0; }
        }
        @media print {
            .sidebar, .topbar, .page-footer, .no-print { display: none !important; }
            .main { margin-left: 0 !important; }
        }
        @stack('styles')
    </style>
    @stack('head')
</head>
<body>
<div class="shell">
    <aside class="sidebar no-print" id="sidebar">
        <div class="sidebar-brand">
            @include('partials.mexco-brand', ['app' => 'organizer', 'class' => 'logo'])
            <div class="logo-text">
                <div class="title">{{ config('mexco.apps.organizer.name') }}</div>
                <div class="sub">{{ config('mexco.apps.organizer.tagline') }}</div>
            </div>
        </div>
        <div class="sidebar-welcome">
            <p class="greeting">Welcome</p>
            <p class="hello">{{ $event->shortName() }}!</p>
        </div>
        <nav class="sidebar-nav">
            @php $r = request()->route()->getName(); @endphp
            @foreach([
                ['mexco.admin.dashboard', 'Dashboard', 'grid'],
                ['mexco.admin.participants', 'Participants', 'users'],
                ['mexco.admin.committee', 'Committee', 'scan'],
                ['mexco.admin.roles', 'Roles & Access', 'shield'],
                ['mexco.admin.sessions', 'Sessions', 'calendar'],
                ['mexco.admin.booths', 'Booths', 'store'],
                ['mexco.admin.certificates', 'Certificates', 'award'],
                ['mexco.admin.settings', 'Settings', 'gear'],
            ] as [$route, $label, $icon])
                @php
                    $active = $route === 'mexco.admin.dashboard'
                        ? $r === $route
                        : str_starts_with($r, $route);
                @endphp
                <a href="{{ route($route) }}" class="nav-link {{ $active ? 'active' : '' }}">
                    @include('admin.partials.nav-icon', ['icon' => $icon])
                    {{ $label }}
                </a>
            @endforeach
        </nav>
        <div class="sidebar-help no-print">
            <div class="illus">📋</div>
            <p>Need help?<br>Check out our documentation</p>
            <a href="{{ url('/mexco') }}" target="_blank">{{ config('mexco.apps.pass.name') }} ↗</a>
        </div>
        <div class="sidebar-foot no-print">
            <form method="POST" action="{{ route('mexco.admin.logout') }}">
                @csrf
                <button type="submit">Sign out</button>
            </form>
        </div>
    </aside>

    <div class="main">
        <header class="topbar no-print">
            <div class="topbar-left">
                <button type="button" class="menu-btn d-lg-none" onclick="document.getElementById('sidebar').classList.toggle('open')" aria-label="Menu">
                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
                </button>
            </div>
            <div class="topbar-right">
                <details class="notif-dropdown">
                    <summary class="notif-btn" aria-label="Notifications">
                        <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 14v-2a6 6 0 10-12 0v2l-2 2h16l-2-2z"/><path d="M10 18a2 2 0 004 0"/></svg>
                        @if(($notifCount ?? 0) > 0)
                            <span class="badge">{{ min($notifCount, 9) }}{{ $notifCount > 9 ? '+' : '' }}</span>
                        @endif
                    </summary>
                    <div class="notif-panel">
                        <div class="notif-panel-head">
                            <strong>Notifications</strong>
                            @if(($notifCount ?? 0) > 0)
                                <form method="POST" action="{{ route('mexco.admin.notifications.read-all') }}">
                                    @csrf
                                    <button type="submit">Mark all read</button>
                                </form>
                            @endif
                        </div>
                        <div class="notif-list">
                            @forelse(($organiserNotices ?? []) as $notice)
                                <form method="POST" action="{{ route('mexco.admin.notifications.read', $notice['id']) }}">
                                    @csrf
                                    <button type="submit" class="notif-item {{ !empty($notice['unread']) ? 'is-unread' : '' }}">
                                        <div class="notif-item-title">{{ $notice['title'] }}</div>
                                        <div class="notif-item-body">{{ \Illuminate\Support\Str::limit(strip_tags($notice['body']), 110) }}</div>
                                        <div class="notif-item-time">
                                            {{ $notice['published_at']?->diffForHumans() ?? '' }}
                                            @if(!empty($notice['unread'])) · New @endif
                                        </div>
                                    </button>
                                </form>
                            @empty
                                <div class="notif-empty">No notifications from Super Admin yet.</div>
                            @endforelse
                        </div>
                    </div>
                </details>
                <details class="user-dropdown">
                    <summary class="user-menu">
                        <div class="user-avatar">OR</div>
                        <div>
                            <div class="user-name">{{ $event->shortName() }}</div>
                            <div class="user-role">{{ config('mexco.apps.organizer.tagline') }}</div>
                            <div class="user-datetime">{{ now()->format('j M Y') }}</div>
                        </div>
                        <svg class="chev" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
                    </summary>
                    <div class="user-dropdown-menu">
                        <form method="POST" action="{{ route('mexco.admin.logout') }}">
                            @csrf
                            <button type="submit">Sign out</button>
                        </form>
                    </div>
                </details>
            </div>
        </header>

        <main class="content">
            @if(session('success'))
                <div class="alert-flash alert-success">{{ session('success') }}</div>
            @endif
            @if(session('warning'))
                <div class="alert-flash alert-warning">{{ session('warning') }}</div>
            @endif
            @if(session('error'))
                <div class="alert-flash alert-danger">{{ session('error') }}</div>
            @endif
            @if($errors->any())
                <div class="alert-flash alert-danger">
                    <div>
                        @foreach($errors->all() as $message)
                            <div>{{ $message }}</div>
                        @endforeach
                    </div>
                </div>
            @endif
            @if(session('import_report'))
                @php
                    $report = session('import_report');
                    $hasInvalid = !empty($report['invalid']);
                    $hasDupes = !empty($report['duplicates']);
                @endphp
                <div class="import-report {{ $hasInvalid && (int)($report['added'] ?? 0) === 0 ? 'is-danger' : '' }}">
                    <h3>CSV import report</h3>
                    <div style="margin-bottom:.55rem">
                        <strong>{{ (int) ($report['added'] ?? 0) }}</strong> added ·
                        <strong>{{ count($report['duplicates'] ?? []) }}</strong> already in database (ignored) ·
                        <strong>{{ count($report['invalid'] ?? []) }}</strong> could not be imported
                    </div>
                    @if($hasDupes)
                        <div style="font-weight:700;margin:.35rem 0 .25rem">Ignored — already in database</div>
                        <ul>
                            @foreach(array_slice($report['duplicates'], 0, 12) as $dup)
                                <li>
                                    @if(!empty($dup['row']))
                                        <span class="row-tag">Row {{ $dup['row'] }}</span>
                                    @endif
                                    <strong>{{ $dup['name'] ?? '-' }}</strong>
                                    · <span class="mono">{{ $dup['email'] ?? '-' }}</span>
                                    @if(!empty($dup['ic']))
                                        · IC <span class="mono">{{ $dup['ic'] }}</span>
                                    @endif
                                    — {{ $dup['reason'] ?? 'Duplicate' }}
                                </li>
                            @endforeach
                            @if(count($report['duplicates']) > 12)
                                <li>…and {{ count($report['duplicates']) - 12 }} more</li>
                            @endif
                        </ul>
                    @endif
                    @if($hasInvalid)
                        <div style="font-weight:700;margin:.55rem 0 .25rem">Could not import — fix these rows</div>
                        <ul>
                            @foreach(array_slice($report['invalid'], 0, 12) as $bad)
                                <li>
                                    @if(!empty($bad['row']))
                                        <span class="row-tag">Row {{ $bad['row'] }}</span>
                                    @endif
                                    <strong>{{ $bad['name'] ?? '-' }}</strong>
                                    · <span class="mono">{{ $bad['email'] ?? '-' }}</span>
                                    @if(!empty($bad['ic']))
                                        · IC <span class="mono">{{ $bad['ic'] }}</span>
                                    @endif
                                    — {{ $bad['reason'] ?? 'Invalid data' }}
                                </li>
                            @endforeach
                            @if(count($report['invalid']) > 12)
                                <li>…and {{ count($report['invalid']) - 12 }} more</li>
                            @endif
                        </ul>
                        <div class="hint">
                            Tip: each row needs a valid <strong>email</strong>, <strong>full name</strong>, and <strong>IC</strong> (at least 6 digits).
                            Existing email + IC combinations are skipped and never overwritten.
                        </div>
                    @endif
                </div>
            @endif
            @yield('content')
        </main>

        <footer class="page-footer no-print">
            <span>© {{ date('Y') }} {{ config('mexco.apps.organizer.name') }}. All rights reserved.</span>
            <span>Version 1.0.0</span>
        </footer>
    </div>
</div>
@stack('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
