<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myEventPostmortem</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    @stack('styles')
</head>
<body>

<div class="container-fluid h-100 p-0">
    <div class="row g-0 h-100 flex-nowrap">

        <!-- Desktop Sidebar -->
        <div class="col-auto col-md-3 col-lg-2 bg-dark d-none d-md-flex flex-column h-100 sidebar">

            <div class="p-4 text-white border-bottom border-secondary">
                <h4 class="mb-0 fw-bold" style="font-size:1.25rem;">myEventPostmortem</h4>
            </div>
            <div class="p-4 text-white border-bottom border-secondary">
                <h6 class="mb-0 fw-bold" style="font-size:1.25rem;">Untuk Tujuan Ujicuba. Data akan direset sesuka hati.</h6>
            </div>

            @auth
            <ul class="nav nav-pills flex-column mb-auto px-2">
                {{-- ADMIN Links --}}
                @if(auth()->user()->role == 'admin')
                    <li class="nav-item">
                        <a href="{{ route('admin.dashboard') }}" class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                            <i class="bi bi-speedometer2 me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('admin.surveys.index') }}" class="nav-link {{ request()->routeIs('admin.surveys.index') ? 'active' : '' }}">
                            <i class="bi bi-clipboard-data me-2"></i> Borang soal selidik
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('admin.responses.list') }}" class="nav-link {{ request()->routeIs('admin.responses.list') ? 'active' : '' }}">
                            <i class="bi bi-clipboard-check me-2"></i> Respons
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('admin.surveys.ulasan') }}" class="nav-link {{ request()->routeIs('admin.surveys.ulasan') ? 'active' : '' }}">
                            <i class="bi bi-pencil-square me-2"></i> Ulasan / Keputusan
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('admin.users.index') }}" class="nav-link {{ request()->routeIs('admin.users.index') ? 'active' : '' }}">
                            <i class="bi bi-people me-2"></i> Senarai pengguna
                        </a>
                    </li>
                @endif
            </ul>

            <div class="mt-auto p-3">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="btn btn-logout" type="submit">
                        <i class="bi bi-box-arrow-right me-4"></i> Log keluar
                    </button>
                </form>
            </div>
            @endauth
        </div>

        <!-- Offcanvas Sidebar for Mobile -->
        <div class="offcanvas offcanvas-start bg-dark text-white" tabindex="-1" id="mobileSidebar">
            <div class="offcanvas-header border-bottom border-secondary">
                <h5 class="mb-0 fw-bold">myEventPostmortem</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body d-flex flex-column">
                <ul class="nav nav-pills flex-column mb-auto px-2">
                    {{-- ADMIN Links --}}
                    @auth
                    @if(auth()->user()->role == 'admin')
                        <li class="nav-item">
                            <a href="{{ route('admin.dashboard') }}" class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                                <i class="bi bi-speedometer2 me-2"></i> Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('admin.surveys.index') }}" class="nav-link {{ request()->routeIs('admin.surveys.index') ? 'active' : '' }}">
                                <i class="bi bi-clipboard-data me-2"></i> Borang soal selidik
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('admin.responses.list') }}" class="nav-link {{ request()->routeIs('admin.responses.list') ? 'active' : '' }}">
                                <i class="bi bi-clipboard-check me-2"></i> Respons
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('admin.surveys.ulasan') }}" class="nav-link {{ request()->routeIs('admin.surveys.ulasan') ? 'active' : '' }}">
                                <i class="bi bi-pencil-square me-2"></i> Ulasan / Keputusan
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ route('admin.users.index') }}" class="nav-link {{ request()->routeIs('admin.users.index') ? 'active' : '' }}">
                                <i class="bi bi-people me-2"></i> Senarai pengguna
                            </a>
                        </li>
                    @endif
                    @endauth

                    
                </ul>

                <div class="mt-auto p-3">
                    @auth
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="btn btn-logout w-100" type="submit">
                            <i class="bi bi-box-arrow-right me-2"></i> Log keluar
                        </button>
                    </form>
                @endauth
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col overflow-auto">

            <header class="d-flex justify-content-between align-items-center py-3 px-4 border-bottom bg-white sticky-top shadow-sm">
                <!-- Hamburger button visible only on small screens -->
                <button class="btn btn-outline-secondary d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar">
                    <i class="bi bi-list"></i>
                </button>

                @auth
                    <h5 class="mb-0 fw-semibold text-dark">
                        {{ ucfirst(auth()->user()->role) }}
                    </h5>
                    <span class="text-secondary fw-semibold">
                        Hai, {{ auth()->user()->name }}
                    </span>
                @endauth
            </header>

            <main class="p-3">
                @yield('content')
            </main>
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')

</body>
</html>
