@php
    $pageTitle = $title ?? 'Inventaris Pondok';
    $pageHeading = $heading ?? 'Dashboard';
    $brandLogo = asset('assets/img/logo/LOGO%20PUTRA.png');
    $favicon = asset('assets/img/logo/LOGO%20PONDOK%2064.png');
    $viteAssets = [
        'resources/assets/vendor/libs/jquery/jquery.js',
        'resources/assets/vendor/fonts/iconify/iconify.css',
        'resources/assets/vendor/libs/node-waves/node-waves.scss',
        'resources/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/scss/core.scss',
        'resources/assets/css/demo.css',
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/css/app.css',
        'resources/assets/vendor/js/helpers.js',
        'resources/assets/js/config.js',
        'resources/assets/vendor/js/bootstrap.js',
        'resources/assets/vendor/libs/node-waves/node-waves.js',
        'resources/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js',
        'resources/assets/vendor/libs/hammer/hammer.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/js/menu.js',
        'resources/assets/js/main.js',
        'resources/js/app.js',
    ];

    $menuItems = [
        ['label' => 'Dashboard', 'route' => 'dashboard', 'match' => 'dashboard', 'icon' => 'tabler-smart-home'],
        ['label' => 'Inventaris', 'route' => 'items.index', 'match' => 'items.*', 'icon' => 'tabler-package'],
        ['label' => 'Fasilitas', 'route' => 'facilities.index', 'match' => 'facilities.*', 'icon' => 'tabler-building-community'],
        ['label' => 'Peminjaman', 'route' => 'loans.index', 'match' => 'loans.*', 'icon' => 'tabler-arrows-left-right'],
        ['label' => 'Lokasi', 'route' => 'locations.index', 'match' => 'locations.*', 'icon' => 'tabler-map-pin'],
        ['label' => 'Tiket Maintenance', 'route' => 'tickets.index', 'match' => 'tickets.*', 'icon' => 'tabler-ticket', 'badge_new' => $pendingTicketsCount ?? 0, 'badge_total' => $totalTicketsCount ?? 0],
        ['label' => 'QR Maintenance', 'route' => 'qr.index', 'match' => 'qr.*', 'icon' => 'tabler-qrcode'],
        ['label' => 'Import Excel', 'route' => 'imports.index', 'match' => 'imports.*', 'icon' => 'tabler-file-import'],
        ['label' => 'Histori Maintenance', 'route' => 'maintenance.index', 'match' => 'maintenance.index', 'icon' => 'tabler-tool'],
        ['label' => 'Laporan', 'route' => 'reports.index', 'match' => 'reports.*', 'icon' => 'tabler-report-analytics'],
        ['label' => 'Pengaturan', 'route' => 'settings.index', 'match' => 'settings.*', 'icon' => 'tabler-settings'],
    ];
@endphp
<!DOCTYPE html>
<html
    lang="id"
    class="layout-navbar-fixed layout-menu-fixed layout-compact"
    dir="ltr"
    data-assets-path="{{ asset('assets') }}/"
    data-base-url="{{ url('') }}"
    data-template="vertical-menu-template"
    data-style="light"
    data-bs-theme="light"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $pageTitle }}</title>
    <link rel="icon" type="image/png" href="{{ $favicon }}">
    @vite($viteAssets)
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if (session('status') || session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: '{{ session('status') ?: session('success') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary waves-effect waves-light'
                    },
                    buttonsStyling: false
                });
            @endif

            @if (session('error'))
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan',
                    text: '{{ session('error') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary waves-effect waves-light'
                    },
                    buttonsStyling: false
                });
            @endif

            @if (session('info'))
                Swal.fire({
                    icon: 'info',
                    title: 'Informasi',
                    text: '{{ session('info') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary waves-effect waves-light'
                    },
                    buttonsStyling: false
                });
            @endif

            @if (session('warning'))
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: '{{ session('warning') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary waves-effect waves-light'
                    },
                    buttonsStyling: false
                });
            @endif

            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Kesalahan Input',
                    text: 'Ada kesalahan pada form. Silakan cek kembali.',
                    customClass: {
                        confirmButton: 'btn btn-primary waves-effect waves-light'
                    },
                    buttonsStyling: false
                });
            @endif

            // Konfirmasi Hapus Global
            $(document).on('click', '.confirm-delete', function(e) {
                e.preventDefault();
                const form = $(this).closest('form');
                
                Swal.fire({
                    title: 'Apakah Anda yakin?',
                    text: "Data yang dihapus tidak dapat dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-danger me-3 waves-effect waves-light',
                        cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                <div class="app-brand demo">
                    <a href="{{ route('dashboard') }}" class="app-brand-link">
                        <span class="app-brand-logo demo">
                            <img src="{{ $brandLogo }}" alt="Logo Putra" class="app-brand-image">
                        </span>
                        <span class="app-brand-text demo menu-text fw-bold ms-2">Inventaris Pondok</span>
                    </a>

                    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
                        <i class="icon-base ti tabler-chevron-left"></i>
                    </a>
                </div>

                <div class="menu-inner-shadow"></div>

                <ul class="menu-inner py-1">
                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Menu Utama</span>
                    </li>
                    @foreach ($menuItems as $menuItem)
                        <li class="menu-item {{ request()->routeIs($menuItem['match']) ? 'active' : '' }}">
                            <a href="{{ route($menuItem['route']) }}" class="menu-link">
                                <i class="menu-icon icon-base ti {{ $menuItem['icon'] }}"></i>
                                <div class="d-flex justify-content-between align-items-center w-100">
                                    <div>{{ $menuItem['label'] }}</div>
                                    <div class="d-flex gap-1">
                                        @if (isset($menuItem['badge_new']) && $menuItem['badge_new'] > 0)
                                            <span class="badge rounded-pill bg-danger" title="Tiket Baru">{{ $menuItem['badge_new'] }}</span>
                                        @endif
                                        @if (isset($menuItem['badge_total']) && $menuItem['badge_total'] > 0)
                                            <span class="badge rounded-pill bg-label-secondary" title="Total Tiket">{{ $menuItem['badge_total'] }}</span>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </aside>

            <div class="layout-page">
                <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4 layout-menu-toggle" href="javascript:void(0)">
                            <i class="icon-base ti tabler-menu-2 icon-md"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex flex-column align-items-start mt-2">
                                <span class="text-muted text-uppercase small d-block">Operasional Pondok</span>
                                <h5 class="mb-0 fw-bold">{{ $pageHeading }}</h5>
                            </div>
                        </div>

                        <ul class="navbar-nav flex-row align-items-center ms-auto">
                            <!-- Style Switcher -->
                            <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <i class="ti tabler-sun icon-md"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
                                            <span class="align-middle"><i class="ti tabler-sun me-3"></i>Light</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
                                            <span class="align-middle"><i class="ti tabler-moon me-3"></i>Dark</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
                                            <span class="align-middle"><i class="ti tabler-device-desktop me-3"></i>System</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!-- / Style Switcher-->

                            <!-- Notifications -->
                            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-1">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <i class="ti tabler-bell icon-md"></i>
                                    @if(($pendingTicketsCount ?? 0) > 0)
                                        <span class="badge bg-danger rounded-pill badge-notifications">{{ $pendingTicketsCount }}</span>
                                    @endif
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end py-0">
                                    <li class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h5 class="text-body mb-0 me-auto">Notifikasi</h5>
                                            @if(($pendingTicketsCount ?? 0) > 0)
                                                <span class="badge bg-label-primary rounded-pill">{{ $pendingTicketsCount }} Baru</span>
                                            @endif
                                        </div>
                                    </li>
                                    <li class="dropdown-notifications-list scrollable-container">
                                        <ul class="list-group list-group-flush">
                                            @if(($pendingTicketsCount ?? 0) > 0)
                                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
                                                    <a href="{{ route('tickets.index') }}" class="d-flex">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar">
                                                                <span class="avatar-initial rounded-circle bg-label-danger"><i class="ti tabler-ticket"></i></span>
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <h6 class="mb-1">Tiket Maintenance Baru</h6>
                                                            <p class="mb-0">Ada {{ $pendingTicketsCount }} laporan kerusakan menunggu pengecekan.</p>
                                                            <small class="text-muted">Klik untuk lihat detail</small>
                                                        </div>
                                                    </a>
                                                </li>
                                            @else
                                                <li class="list-group-item list-group-item-action dropdown-notifications-item text-center py-4">
                                                    <p class="mb-0 text-muted">Tidak ada notifikasi baru</p>
                                                </li>
                                            @endif
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <!--/ Notifications -->

                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-label-primary">{{ substr(auth()->user()?->name ?? 'A', 0, 1) }}</span>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item mt-0" href="{{ route('profile.edit') }}">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    <div class="avatar avatar-online">
                                                        <span class="avatar-initial rounded-circle bg-label-primary">{{ substr(auth()->user()?->name ?? 'A', 0, 1) }}</span>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-0">{{ auth()->user()?->name }}</h6>
                                                    <small class="text-muted">Admin inventaris</small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider my-1 mx-n2"></div>
                                    </li>
                                    <li>
                                        <form method="POST" action="{{ route('logout') }}" class="m-0">
                                            @csrf
                                            <div class="d-grid px-2 pt-2 pb-1">
                                                <button type="submit" class="btn btn-sm btn-danger d-flex align-items-center justify-content-center">
                                                    <small class="align-middle">Logout</small>
                                                    <i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
                                                </button>
                                            </div>
                                        </form>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>

                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        {{ $slot ?? '' }}
                        @yield('content')
                    </div>

                    <footer class="content-footer footer bg-footer-theme">
                        <div class="container-xxl d-flex flex-wrap justify-content-between py-3 flex-md-row flex-column">
                            <div class="mb-2 mb-md-0 text-muted">
                                © 2026 <span class="fw-bold">Inventaris Pondok</span>. All Rights Reserved.
                            </div>
                            <div class="d-none d-lg-inline-block">
                                <span class="text-muted">Developer by</span> <a href="https://yudhadigital.com" target="_blank" class="fw-bold text-success">Yudha Digital</a>
                            </div>
                        </div>
                    </footer>

                    <div class="content-backdrop fade"></div>
                </div>
            </div>
        </div>

        <div class="layout-overlay layout-menu-toggle"></div>
        <div class="drag-target"></div>
    </div>
    @stack('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const html = document.querySelector('html');
            const styleSwitcherItems = document.querySelectorAll('.dropdown-styles .dropdown-item');
            
            function setTheme(theme) {
                if (theme === 'system') {
                    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                    theme = isDark ? 'dark' : 'light';
                }
                
                html.setAttribute('data-style', theme);
                html.setAttribute('data-bs-theme', theme);
                localStorage.setItem('templateCustomizer-vertical-menu-template--Style', theme);
                
                // Update icon in navbar
                const icon = document.querySelector('.dropdown-style-switcher i');
                if (theme === 'dark') {
                    icon.className = 'ti tabler-moon icon-md';
                } else {
                    icon.className = 'ti tabler-sun icon-md';
                }
            }

            styleSwitcherItems.forEach(item => {
                item.addEventListener('click', function() {
                    const theme = this.getAttribute('data-theme');
                    setTheme(theme);
                });
            });

            // Apply theme on load
            const savedTheme = localStorage.getItem('templateCustomizer-vertical-menu-template--Style') || 'light';
            setTheme(savedTheme);
        });
    </script>
</body>
</html>
