<!DOCTYPE html>
<html lang="ms">
<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', 'mySijil@MBIP') — Admin</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @stack('styles')
</head>
<body>
<div class="d-flex">

    {{-- Sidebar --}}
    <nav class="sidebar d-none d-md-flex flex-column" style="min-height:100vh; width:260px; flex-shrink:0;">
        <div class="sidebar-brand">
            <h5><img src="{{ asset('images/MBIP-2024-300x300.png') }}" alt="MBIP"
                      style="height:32px;width:32px;object-fit:contain;border-radius:6px;background:white;padding:3px;vertical-align:middle;" class="me-2">eCert MBIP</h5>
            <small>Sistem Pengurusan Sijil Digital</small>
        </div>

        <ul class="nav flex-column mt-2 px-1 flex-grow-1">
            <li class="nav-item">
                <a href="{{ route('admin.dashboard') }}"
                   class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <i class="bi bi-grid-1x2-fill"></i> Dashboard
                </a>
            </li>

            <li class="nav-item mt-2">
                <small class="text-white-50 px-3" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.8px;">Program</small>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.programs.index') }}"
                   class="nav-link {{ request()->routeIs('admin.programs.*') ? 'active' : '' }}">
                    <i class="bi bi-calendar-event-fill"></i> Senarai Program
                </a>
            </li>

            <li class="nav-item mt-2">
                <small class="text-white-50 px-3" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.8px;">Soalselidik</small>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.questionnaires.index') }}"
                   class="nav-link {{ request()->routeIs('admin.questionnaires.*') ? 'active' : '' }}">
                    <i class="bi bi-clipboard2-check-fill"></i> Set Soalselidik
                </a>
            </li>

            @if(auth()->user()->isSuperAdmin())
            <li class="nav-item mt-2">
                <small class="text-white-50 px-3" style="font-size:.7rem; text-transform:uppercase; letter-spacing:.8px;">Sistem</small>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.users.index') }}"
                   class="nav-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                    <i class="bi bi-people-fill"></i> Pengurusan Pengguna
                </a>
            </li>
            @endif
        </ul>

        <div class="px-3 pb-3 mt-auto">
            <div class="border-top border-white border-opacity-25 pt-3">
                <small class="text-white-50 d-block mb-1">{{ auth()->user()->name }}</small>
                <span class="badge {{ auth()->user()->isSuperAdmin() ? 'bg-danger' : 'bg-primary' }} mb-2 d-inline-block">
                    {{ auth()->user()->isSuperAdmin() ? 'Super Admin' : 'Admin Program' }}
                </span>
                <div class="d-flex gap-2 mb-2">
                    <a href="{{ route('admin.profile.show') }}"
                       class="btn btn-sm btn-outline-light flex-grow-1 {{ request()->routeIs('admin.profile.*') ? 'active' : '' }}">
                        <i class="bi bi-person-gear me-1"></i> Profil
                    </a>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-outline-light w-100">
                        <i class="bi bi-box-arrow-right me-1"></i> Log Keluar
                    </button>
                </form>
            </div>
        </div>
    </nav>

    {{-- Main Content --}}
    <div class="main-content flex-grow-1">

        {{-- Top Navbar (mobile) --}}
        <nav class="navbar navbar-light bg-white border-bottom d-md-none px-3">
            <span class="navbar-brand fw-bold text-primary mb-0">
                <img src="{{ asset('images/MBIP-2024-300x300.png') }}" alt="MBIP"
                     style="height:26px;width:26px;object-fit:contain;vertical-align:middle;" class="me-1">mySijil@MBIP
            </span>
            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar">
                <i class="bi bi-list"></i>
            </button>
        </nav>

        {{-- Page Header --}}
        @if (isset($header) || View::hasSection('header'))
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0 fw-semibold">@yield('header')</h5>
                @if(View::hasSection('breadcrumb'))
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 mt-1" style="font-size:.82rem;">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        @yield('breadcrumb')
                    </ol>
                </nav>
                @endif
            </div>
            <div>@yield('header-actions')</div>
        </div>
        @endif

        {{-- Flash Messages --}}
        <div class="px-4 pt-3">
            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
            @if(session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-circle-fill me-2"></i>{{ session('warning') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            @endif
        </div>

        {{-- Page Content --}}
        <div class="p-4">
            @yield('content')
        </div>

    </div>
</div>

{{-- Mobile Offcanvas Sidebar --}}
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar" style="width:260px; background: var(--mbip-primary);">
    <div class="offcanvas-header border-bottom border-white border-opacity-25">
        <h6 class="text-white mb-0"><img src="{{ asset('images/MBIP-2024-300x300.png') }}" alt="MBIP"
             style="height:26px;width:26px;object-fit:contain;border-radius:4px;background:white;padding:2px;vertical-align:middle;" class="me-2">eCert MBIP</h6>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body p-0">
        <ul class="nav flex-column mt-2 px-1">
            <li class="nav-item">
                <a href="{{ route('admin.dashboard') }}" class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" style="color:rgba(255,255,255,.85);">
                    <i class="bi bi-grid-1x2-fill me-2"></i>Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.programs.index') }}" class="nav-link {{ request()->routeIs('admin.programs.*') ? 'active' : '' }}" style="color:rgba(255,255,255,.85);">
                    <i class="bi bi-calendar-event-fill me-2"></i>Senarai Program
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('admin.questionnaires.index') }}" class="nav-link {{ request()->routeIs('admin.questionnaires.*') ? 'active' : '' }}" style="color:rgba(255,255,255,.85);">
                    <i class="bi bi-clipboard2-check-fill me-2"></i>Set Soalselidik
                </a>
            </li>
            @if(auth()->user()->isSuperAdmin())
            <li class="nav-item">
                <a href="{{ route('admin.users.index') }}" class="nav-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}" style="color:rgba(255,255,255,.85);">
                    <i class="bi bi-people-fill me-2"></i>Pengurusan Pengguna
                </a>
            </li>
            @endif
        </ul>
    </div>
</div>

@stack('scripts')
</body>
</html>
