<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SafeWatch Platform</title>
    <!-- Bootstrap 5 CSS CDN -->
    <link rel="stylesheet" href="{{ asset('assets/bootstrap/css/bootstrap.min.css') }}">
    <!-- Font Awesome 6 Icons CDN -->
    <link rel="stylesheet" href="{{ asset('assets/fontawesome/css/fontawesome.min.css') }}">
    <style>
        body { padding-bottom: 75px; background-color: #f8f9fa; }
        .bottom-nav { position: fixed; bottom: 0; width: 100%; z-index: 1030; height: 65px; background: #ffffff; border-top: 1px solid #e0e0e0; }
        .bottom-nav .nav-link { text-align: center; color: #757575; font-size: 11px; flex: 1; }
        .bottom-nav .nav-link.active { color: #0d6efd; font-weight: bold; }
        .bottom-nav i { font-size: 22px; display: block; margin-bottom: 2px; }
        .panic-btn-nav i { color: #dc3545; }
    </style>
</head>
<body>

    <!-- Upper Control Navbar -->
    <nav class="navbar navbar-dark bg-dark sticky-top shadow-sm">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarDrawer">
                <span class="navbar-toggler-icon"></span>
            </button>
            <span class="navbar-brand fw-bold ms-2">SafeWatch</span>
            <span class="badge bg-secondary text-uppercase">{{ Auth::user()->role }} Console</span>
        </div>
    </nav>

    <!-- Side Navigation Drawer Context Component -->
    <div class="offcanvas offcanvas-start bg-dark text-white" id="sidebarDrawer" tabindex="-1">
        <div class="offcanvas-header border-bottom border-secondary">
            <h5 class="offcanvas-title fw-bold"><i class="fa-solid fa-shield-halved text-primary me-2"></i>Navigation Menu</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body d-flex flex-column justify-content-between">
            <ul class="nav flex-column gap-3">
                <li class="nav-item"><a class="nav-link text-white p-2" href="#"><i class="fa-solid fa-user me-2 text-muted"></i> Profile Status</a></li>
                @if(Auth::user()->role === 'admin')
                <li class="nav-item"><a class="nav-link text-white p-2" href="#"><i class="fa-solid fa-users-gear me-2 text-warning"></i> Neighborhood Registry</a></li>
                @endif
                <li class="nav-item"><a class="nav-link text-white p-2" href="#"><i class="fa-solid fa-gears me-2 text-muted"></i> Platform Config</a></li>
            </ul>
            <div>
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button class="btn btn-danger w-100 fw-bold"><i class="fa-solid fa-arrow-right-from-bracket me-2"></i>Term Session</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Central Workspace Screen Payload Container -->
    <div class="container py-4">
        @yield('content')
    </div>

    <!-- Persistent Bottom Mobile Bar Structure -->
    <div class="bottom-nav d-flex justify-content-around align-items-center shadow">
        <a href="#" class="nav-link active"><i class="fa-solid fa-house-chimney"></i>Home</a>
        <a href="#" class="nav-link panic-btn-nav" onclick="triggerPanicSignal()"><i class="fa-solid fa-circle-exclamation"></i>Panic</a>
        <a href="#" class="nav-link"><i class="fa-solid fa-bullhorn"></i>Broadcasts</a>
    </div>

    <!-- Shared Application State Variables -->
    <script>
        const loggedUserId = "{{ Auth::user()->id }}";
    </script>
    <!-- Bootstrap Bundle JS Component -->
    <script src="{{ asset('assets/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>
