<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>@yield('page-title')</title>

  <!-- Custom fonts for this template--> 
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <!-- <link rel="stylesheet" href="../assets/css/bootstrap.css"> -->
    <link rel="stylesheet" href="{{ url('public/assets/libs/bootstrap/css/bootstrap5.3.2.css') }}">
    <link rel="stylesheet" href="{{ url('public/assets/libs/ol/ol.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url('public/assets/libs/ol/ol-ext.css') }}" />
    <link rel="stylesheet" href="{{ url('public/assets/css/l4l.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url('public/assets/css/styles.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url('public/assets/libs/fontawesome-free-7.1.0-web/css/all.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="{{ url('public/assets/libs/jquery-confirm/jquery-confirm.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url('public/assets/css/page_loader.css') }}" rel="stylesheet">
      @yield('page-css')      
    <script type="text/javascript">
        var base_url = "{!! url('/') !!}";
    </script>
</head>


<!-- <body class="bg-gradient-primary"> -->
<body class="bg-light">
    @include('admin.partials.profile')
    <div id="page-loader" class="page-loader-overlay">
        <div class="loader-content">
            <img src="{{ url('public/assets/images/lupmis_logo.png') }}" alt="LUPMIS Logo" class="loader-logo mb-4">

            <div class="spinner-border text-primary loader-spinner" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm" >
        <div class="container">
            <a class="navbar-brand" href="/landing">LUPMIS4LUSPA</a>
            <div class="ms-auto">
                <div class="dropdown" style="z-index: 1080;">
                    <button class="btn btn-light dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                        <span class="me-2"><?php echo ucfirst(session('current_user.username')); ?></span>
                        <!-- <small class="text-muted">Municipality</small> -->
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item profileLink" >Profile</a></li>
                        <li><a class="dropdown-item" href="/landing">Landing Page</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/user-logout">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    @yield('page-content')
<script src="{{ url('public/assets/libs/jquery-3.2.1.min.js') }}" type="text/javascript"></script>
<script src="{{ url('public/assets/libs/bootstrap/js/bootstrap5.3.2.js') }}"></script>
<script src="{{ url('public/assets/libs/ol/ol.js') }}" type="text/javascript" ></script> <!-- ol6.15.1 -->
<script src="{{ url('public/assets/libs/ol/ol-ext.js') }}" type="text/javascript" ></script>
<script src="{{ url('public/assets/libs/fontawesome-free-7.1.0-web/js/all.min.js') }}"></script>
<script src="{{ url('public/assets/libs/jquery-confirm/jquery-confirm.min.js') }}"></script>
<script src="{{ url('public/assets/js/all_pages.js') }}"></script>
<script>
    // Wait for the complete page to load
    window.addEventListener('load', function() {
        const loader = document.getElementById('page-loader');
        
        if (loader) {
            // 1. Trigger the CSS fade-out transition
            loader.classList.add('fade-out');

            // 2. Completely remove it from the DOM after the fade finishes (500ms)
            // This prevents it from blocking clicks on the page underneath it
            setTimeout(() => {
                loader.style.display = 'none';
            }, 500);
        }
    });
</script>
    @yield('page-js')
</body>

</html>


