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

<head>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>
        @if (@$general->sitename)
            {{ __(@$general->sitename) . '-' }}
        @endif
        {{ __(@$pageTitle) }}
    </title>
    <link rel="shortcut icon" type="image/png" href="{{ getFile('icon', @$general->favicon) }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            corePlugins: {
                preflight: false, // Prevents Tailwind from breaking Bootstrap styles
            }
        }
    </script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>

    <link rel="stylesheet" href="{{ asset('asset/admin/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('asset/admin/css/font-awsome.min.css') }}">
    @csrf

    <link rel="stylesheet" href="{{ asset('asset/admin/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('asset/admin/css/components.css') }}">
    <link rel="stylesheet" href="{{ asset('asset/admin/css/custom.css') }}">

    <style>
        [x-cloak] { display: none !important; }

        /* Sidebar Responsive Fixes */
        @media (max-width: 1024px) {
            .main-sidebar {
                position: fixed !important;
                top: 0;
                left: 0;
                height: 100vh;
                width: 260px;
                z-index: 1050; /* Above Navbar */
                background-color: #111827 !important; 
                transition: transform 0.3s ease-in-out !important;
                display: block !important;
                box-shadow: 10px 0 15px -3px rgba(0, 0, 0, 0.1);
            }
            
            /* Logic for Alpine Toggle */
            .sidebar-closed {
                transform: translateX(-100%) !important;
            }
            .sidebar-open {
                transform: translateX(0) !important;
            }

            /* Main content should not shift on mobile when sidebar is fixed */
            .main-content {
                margin-left: 0 !important;
            }
        }

        /* Desktop sidebar spacer */
        /*@media (min-width: 1025px) {*/
        /*    .main-content {*/
                /*margin-left: 260px; */
                /* Adjust this to match your sidebar width 
        /*        transition: all 0.3s;*/
        /*    }*/
        /*}*/

        svg.lucide {
            display: inline-block;
            vertical-align: middle;
        }
    </style>

    @stack('style')
</head>

<body x-data="{ sidebarOpen: false }" @toggle-sidebar.window="sidebarOpen = !sidebarOpen" class="bg-gray-100">
    <div id="app">
<div class="min-h-screen w-full flex flex-col bg-gray-50">
            
            <div x-show="sidebarOpen" 
                 x-cloak 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 @click="sidebarOpen = false" 
                 class="fixed inset-0 z-[1040] bg-black/60 lg:hidden">
            </div>



            @include('backend.layout.navbar')
            
            <div class="main-sidebar" :class="sidebarOpen ? 'sidebar-open' : 'sidebar-closed'">
                @include('backend.layout.sidebar')
            </div>

<div class="min-h-screen bg-gray-100 transition-all duration-300 ease-in-out lg:ml-64 p-4 md:p-8">
    <div class="w-full">
        @yield('content')
    </div>
</div>

            @include('backend.layout.footer')
        </div>
    </div>

    <script src="{{ asset('asset/admin/js/jquery.min.js') }}"></script>
    <script src="{{ asset('asset/admin/js/proper.min.js') }}"></script>
    <script src="{{ asset('asset/admin/js/bootstrap.min.js') }}"></script>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            lucide.createIcons();
        });
        
        // Re-init icons after any Alpine transitions if needed
        document.addEventListener("alpine:initialized", () => {
            lucide.createIcons();
        });
    </script>

    @stack('script')
</body>
</html>