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

<head>
    <meta charset="UTF-8">
    <title>E-Surat Desa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- SB Admin 2 CSS -->
    <link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body id="page-top">

    <div id="wrapper">

        <!-- ================= SIDEBAR ================= -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
            id="accordionSidebar">

            <!-- Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center"
                href="{{ route('dashboard') }}">
                <div class="sidebar-brand-icon">
                    <i class="fas fa-envelope-open-text"></i>
                </div>
                <div class="sidebar-brand-text mx-3">E-Surat Desa</div>
            </a>

            <hr class="sidebar-divider my-0">

            <!-- Dashboard -->
            <li class="nav-item active">
                <a class="nav-link" href="{{ route('dashboard') }}">
                    <i class="fas fa-fw fa-tachometer-alt"></i>
                    <span>Dashboard</span>
                </a>
            </li>

            <hr class="sidebar-divider">

            <!-- Manajemen Surat -->
            <div class="sidebar-heading text-uppercase small font-weight-bold mb-2" style="color: rgba(255,255,255,0.4); letter-spacing: 1px;">
                Kependudukan
            </div>

            <li class="nav-item {{ request()->routeIs('validasi.*') ? 'active' : '' }}">
                <a class="nav-link d-flex align-items-center" href="{{ route('validasi.index') }}">
                    <i class="fas fa-fw fa-id-card mr-2"></i>
                    <span class="font-weight-bold">Validasi Penduduk</span>
                </a>
            </li>

            <hr class="sidebar-divider my-2" style="border-top: 1px solid rgba(255,255,255,0.1);">

            <div class="sidebar-heading text-uppercase small font-weight-bold mb-2" style="color: rgba(255,255,255,0.4); letter-spacing: 1px;">
                Layanan
            </div>

            <li class="nav-item {{ request()->routeIs('pengajuan.*') ? 'active' : '' }}">
                <a class="nav-link d-flex align-items-center" href="{{ route('pengajuan.index') }}">
                    <i class="fas fa-fw fa-file-alt mr-2"></i>
                    <span>Pengajuan Surat</span>
                </a>
            </li>

            <hr class="sidebar-divider d-none d-md-block">

            <!-- Logout -->
            <li class="nav-item">
                <a href="{{ route('logout') }}" class="nav-link">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </a>
            </li>

        </ul>
        <!-- ================= END SIDEBAR ================= -->

    </div>

    <!-- Logout Form -->
    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>

    <!-- ================= SCRIPTS ================= -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="{{ asset('assets/js/sb-admin-2.min.js') }}"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // 1. Menutup dropdown secara otomatis saat klik di luar area menu
            $(document).click(function(event) {
                var clickover = $(event.target);
                var _opened = $(".collapse").hasClass("show");
                if (_opened === true && !clickover.hasClass("nav-link") && !clickover.closest('.collapse').length) {
                    $(".collapse").collapse('hide');
                }
            });

            // 2. Jika Anda ingin menutup Alert (Pesan Sukses) otomatis setelah 3 detik
            window.setTimeout(function() {
                $(".alert").fadeTo(500, 0).slideUp(500, function() {
                    $(this).remove();
                });
            }, 3000);

            // 3. Memastikan Sidebar tertutup saat layar mengecil (Responsive)
            if ($(window).width() < 768) {
                $('.sidebar .collapse').collapse('hide');
            };
        });
    </script>

</body>

</html>