<!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', 'NDRT System') - South Sudan Red Cross</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --ssrc-red: #ED1C24;
            --ssrc-gray: #d3d3d3;
        }

        body {
            background-color: var(--ssrc-gray);
            font-family: Arial, sans-serif;
        }

        .navbar {
            background-color: #fff;
            border-bottom: 3px solid var(--ssrc-red);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-small {
            width: 40px;
            height: 40px;
            background-color: var(--ssrc-red);
            clip-path: polygon(
                40% 0%, 60% 0%, 60% 40%, 100% 40%, 
                100% 60%, 60% 60%, 60% 100%, 40% 100%, 
                40% 60%, 0% 60%, 0% 40%, 40% 40%
            );
        }

        .navbar-brand strong {
            color: var(--ssrc-red);
        }

        .page-header {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .nav-link {font-size: 16px!important; font-weight: 500!important;}

        .page-header h1 {
            margin: 0;
            font-size: 24px;
        }

        .card {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .card-header.bg-primary {
            background-color: var(--ssrc-red) !important;
        }

        .btn-primary {
            background-color: var(--ssrc-red);
            border-color: var(--ssrc-red);
        }

        .btn-primary:hover {
            background-color: #c11119;
            border-color: #c11119;
        }

        .officer-photo {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 50%;
        }

        .officer-photo-large {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
        }

        .officer-photo-placeholder {
            width: 50px;
            height: 50px;
            background-color: var(--ssrc-red);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
        }

        .alert {
            border-radius: 8px;
        }

        .required::after {
            content: " *";
            color: red;
        }

        .table {
            background-color: white;
        }

        footer {
            background-color: #000;
            color: white;
            padding: 15px;
            margin-top: 40px;
            text-align: center;
        }
    </style>

    @stack('styles')
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light mb-4">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ route('dashboard') }}">
                <img src="{{ asset('storage/images/ssrc-logo-50x50.png') }}" alt="Logo" class="logo-image">
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('dashboard') }}">
                            <i class="fas fa-home"></i> Dashboard
                        </a>
                    </li>
                    @if(Auth::user()->isAdmin() || Auth::user()->isOperationsManager())
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('ndrt.index') }}">
                            <i class="fas fa-users"></i> NDRT Surge
                        </a>
                    </li>
                    @endif
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('trainings.*') ? 'active' : '' }}" href="{{ route('trainings.index') }}">
                            <i class="fas fa-chalkboard-teacher"></i> Trainings
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('deployments.*') ? 'active' : '' }}" href="{{ route('deployments.index') }}">
                            <i class="fas fa-globe"></i> Deployments
                        </a>
                    </li>
                    @if(Auth::user()->isAdmin() || Auth::user()->isOperationsManager())
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('reports.*') ? 'active' : '' }}" href="{{ route('reports.index') }}">
                            <i class="fas fa-chart-pie"></i> Reports
                        </a>
                    </li>
                    @endif
                    @if(Auth::user()->isAdmin())
                        <li class="nav-item">
                            <a class="nav-link {{ request()->routeIs('operations-manager.*') ? 'active' : '' }}" href="{{ route('operations-manager.index') }}">
                                <i class="fas fa-user-plus"></i> Operations Managers
                            </a>
                        </li>
                    @endif
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
                           data-bs-toggle="dropdown">
                            <i class="fas fa-user"></i> {{ Auth::user()->name }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><span class="dropdown-item-text">{{ Auth::user()->role }}</span></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item">
                                        <i class="fas fa-sign-out-alt"></i> Logout
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main>
        @yield('content')
    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p class="mb-0">
                © 2025 National Disaster Response Team (NDRT) Information System - South Sudan Red Cross | 
                Powered By Dynamic Consult
            </p>
        </div>
    </footer>

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