<!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', 'Digipus.go') }}</title>

    {{-- Fonts & Icons --}}
    <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'])

    {{-- Flatpickr --}}
    <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>

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

    <!-- Tom Select -->
    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
</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 px-4">
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show m-3 border-0 shadow-sm rounded-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-exclamation-octagon-fill me-2 fs-4"></i>
                            <div>
                                <strong class="text-danger h6 mb-0 d-block">DITOLAK!</strong>
                                <span class="small">{{ session('error') }}</span>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show m-3 border-0 shadow-sm rounded-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-check-circle-fill me-2 fs-4"></i>
                            <div>
                                <strong class="text-success h6 mb-0 d-block">BERHASIL!</strong>
                                <span class="small">{{ session('success') }}</span>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('warning'))
                    <div class="alert alert-warning alert-dismissible fade show m-3 border-0 shadow-sm rounded-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-exclamation-triangle-fill me-2 fs-4"></i>
                            <div>
                                <strong class="h6 mb-0 d-block" style="color: #856404;">PERINGATAN!</strong>
                                <span class="small">{{ session('warning') }}</span>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                {{ $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)
                            @php
                                $url = '#';

                                if (isset($item['type'])) {
                                    if ($item['type'] === 'riwayat_peminjaman') {
                                        $url = route('riwayat.offline');
                                    } elseif ($item['type'] === 'denda_active') {
                                        $url = route('riwayat.offline');
                                    } elseif ($item['type'] === 'rekomendasi' && isset($item['link_id'])) {
                                        $url = route('rekomendasi.show', $item['link_id']);
                                    } elseif ($item['type'] === 'katalog_kategori' && isset($item['link_id'])) {
                                        $url = route('katalog.index', ['kategori' => $item['link_id']]);
                                    }
                                }
                            @endphp

                            <a href="{{ $url }}"
                                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>

    <!-- DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.0/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.bootstrap5.min.js"></script>

    <!-- Tom Select -->
    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

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

    <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();
                    }
                });
            });
        });
        const modernSwal = Swal.mixin({
            customClass: {
                popup: 'rounded-4 border-0 shadow-lg',
                title: 'fw-bold text-dark fs-4',
                html: 'text-muted',
                confirmButton: 'btn btn-primary rounded-pill px-4 py-2 fw-bold ms-2',
                cancelButton: 'btn btn-light text-muted rounded-pill px-4 py-2 fw-bold'
            },
            buttonsStyling: false,
            reverseButtons: true,
            padding: '2rem',
        });

        // Preset untuk Notifikasi Sukses 
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            customClass: {
                popup: 'rounded-3 shadow-sm border-0 bg-white'
            },
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });
    </script>

    @stack('scripts')

</body>

</html>
