<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kathles</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        body {
            background: #f4f6fb;
            font-family: 'Segoe UI', sans-serif;
        }

        /* SIDEBAR */
        .sidebar {
            width: 240px;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, #111827, #1f2937);
            color: white;
            padding: 20px;
            transition: all .3s ease;
            z-index: 1000;
        }

        /* DESKTOP COLLAPSE */
        .sidebar.collapsed {
            margin-left: -240px;
        }

        /* MOBILE SHOW */
        .sidebar.show {
            margin-left: 0;
        }

        .sidebar a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            text-decoration: none;
            padding: 10px;
            border-radius: 12px;
            margin: 8px 0;
            transition: .2s;
        }

        .sidebar a:hover {
            background: #374151;
        }

        /* CONTENT */
        .content {
            margin-left: 260px;
            padding: 20px;
            transition: all .3s ease;
        }

        /* CONTENT FULL (saat sidebar collapse desktop) */
        .content.full {
            margin-left: 20px;
        }

        /* HEADER */
        .header {
            background: white;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
            margin-bottom: 20px;
        }

        /* OVERLAY (mobile) */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            display: none;
            z-index: 900;
        }

        #overlay.show {
            display: block;
        }

        /* MOBILE */
        @media(max-width:768px) {

            .sidebar {
                margin-left: -240px;
            }

            .content {
                margin-left: 0;
            }

            .content.full {
                margin-left: 0;
            }

        }
    </style>
    <link rel="manifest" href="/manifest.json">

    <meta name="theme-color"
        content="#f59e0b">

    <meta name="apple-mobile-web-app-capable"
        content="yes">

    <meta name="apple-mobile-web-app-status-bar-style"
        content="black">
</head>

<body>

    <!-- SIDEBAR -->
    <div class="sidebar" id="sidebar">
        <h4 class="mb-4 d-flex align-items-center gap-2">
            <img src="{{ asset('images/logo.png') }}"
                width="36"
                height="36"
                alt="Kathles">

            <span>Kathles</span>
        </h4>

        <a href="/dashboard"><i class="bi bi-speedometer2"></i> Dashboard</a>
        <a href="/sales/create"><i class="bi bi-cart"></i> Kasir</a>
        <a href="/products"><i class="bi bi-box"></i> Produk</a>
        <a href="/prices"><i class="bi bi-tag"></i> Harga</a>
        <a href="/units">
            <i class="bi bi-rulers"></i>
            Unit
        </a>
        <a href="/sales"><i class="bi bi-receipt"></i> Penjualan</a>
        <a href="#"><i class="bi bi-bar-chart"></i> Laporan</a>
    </div>

    <!-- OVERLAY -->
    <div id="overlay" onclick="toggleSidebar()"></div>

    <!-- CONTENT -->
    <div class="content" id="content">

        <div class="header d-flex justify-content-between align-items-center">

            <button class="btn btn-light" onclick="toggleSidebar()">
                <i class="bi bi-list"></i>
            </button>

            <b>@yield('title')</b>

            <div>👤 Admin</div>

        </div>

        @yield('content')

    </div>

    <script>
        function toggleSidebar() {

            let sidebar = document.getElementById('sidebar');
            let content = document.getElementById('content');
            let overlay = document.getElementById('overlay');

            if (window.innerWidth <= 768) {
                /* MOBILE */
                sidebar.classList.toggle('show');
                overlay.classList.toggle('show');
            } else {
                /* DESKTOP */
                sidebar.classList.toggle('collapsed');
                content.classList.toggle('full');
            }

        }
    </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>
        if ('serviceWorker' in navigator) {

            navigator.serviceWorker
                .register('/sw.js')
                .then(function() {

                    console.log('SW Registered');

                });

        }
    </script>
</body>

</html>