<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Perpus') }}</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @vite(['resources/scss/app.scss', 'resources/js/app.js'])

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>

</head>

<body>
    <div class="d-flex">
        @include('layouts.sidebar')
        <div id="overlay" class="overlay"></div>

        <div class="main-wrapper flex-grow-1">
            @include('layouts.navigation')
            <main class="container-fluid py-4">
                {{ $slot }}
            </main>
            <footer class="footer text-center py-3">
                <span class="text-muted small">Copyright &copy; {{ date('Y') }}
                    {{ config('app.name', 'Perpus') }}.</span>
            </footer>
        </div>
    </div>

    <div class="modal fade" id="semuaNotifikasiModal" tabindex="-1" aria-labelledby="semuaNotifikasiModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content border-0 shadow rounded-3">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold text-dark" id="semuaNotifikasiModalLabel">
                        <i class="bi bi-bell-fill text-primary me-2"></i>Semua Notifikasi
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="notification-list px-2">
                        @forelse ($notifikasi as $item)
                            <a href="#"
                                class="notification-item d-flex my-1 rounded-3 text-body text-decoration-none @if (!$item['read']) unread @endif">
                                <div class="notification-icon bg-{{ $item['color'] }}-subtle">
                                    <i class="bi {{ $item['icon'] }} text-{{ $item['color'] }}-emphasis"></i>
                                </div>
                                <div class="notification-content">
                                    <p class="mb-0">{{ $item['title'] }}</p>
                                    <small>{{ $item['time'] }}</small>
                                </div>
                                @if (!$item['read'])
                                    <div class="unread-dot"></div>
                                @endif
                            </a>
                        @empty
                            <div class="text-center py-5">
                                <i class="bi bi-bell-slash fs-2 text-muted"></i>
                                <p class="text-muted small mt-2 mb-0">Anda belum memiliki notifikasi.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainWrapper = document.querySelector('.main-wrapper');
            const overlay = document.getElementById('overlay');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const closeSidebarMobile = document.getElementById('closeSidebarMobile');
            const isDesktop = () => window.innerWidth >= 992;

            function toggleMobileSidebar() {
                sidebar.classList.toggle('active');
                overlay.classList.toggle('active');
            }

            function toggleDesktopSidebar() {
                sidebar.classList.toggle('minimized');
                mainWrapper.classList.toggle('sidebar-minimized');
            }

            sidebarToggle.addEventListener('click', function() {
                if (isDesktop()) {
                    toggleDesktopSidebar();
                } else {
                    toggleMobileSidebar();
                }
            });

            const closeButtons = [overlay, closeSidebarMobile];
            closeButtons.forEach(el => {
                if (el) {
                    el.addEventListener('click', function() {
                        if (!isDesktop()) {
                            toggleMobileSidebar();
                        }
                    });
                }
            });

            const dropdownToggles = document.querySelectorAll('.sidebar .nav-link[data-bs-toggle="collapse"]');

            dropdownToggles.forEach(function(toggle) {
                toggle.addEventListener('click', function() {
                    if (isDesktop() && sidebar.classList.contains('minimized')) {
                        toggleDesktopSidebar();
                    }
                });
            });
        });
    </script>
    @stack('scripts')
</body>

</html>
