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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Manufacturing System') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />

    <!-- Bootstrap Icons -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        body {
            font-family: 'Figtree', sans-serif;
        }

        .sidebar-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 10px;
        }
    </style>
</head>

<body class="bg-gray-100">

    <div x-data="{ sidebarOpen: false }" class="flex h-screen overflow-hidden">

        <!-- Sidebar -->
        <aside
            :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
            class="fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-white transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0">

            <!-- Logo -->
            <div class="flex items-center justify-center h-16 border-b border-slate-700">
                <h1 class="text-xl font-bold tracking-wide">
                    Manufacturing System
                </h1>
            </div>

            <!-- Navigation -->
            <nav class="p-4 space-y-2 overflow-y-auto sidebar-scroll h-full">

                <a href="/dashboard"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-speedometer2 mr-3"></i>
                    Dashboard
                </a>

                <a href="/materials"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-box-seam mr-3"></i>
                    Raw Materials
                </a>

                <a href="/products"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-bag-check mr-3"></i>
                    Products
                </a>

                <a href="/production"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-gear-wide-connected mr-3"></i>
                    Production
                </a>

                <a href="/inventory"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-clipboard-data mr-3"></i>
                    Inventory
                </a>

                <a href="/reports"
                    class="flex items-center px-4 py-3 rounded-lg hover:bg-slate-800 transition">
                    <i class="bi bi-bar-chart-line mr-3"></i>
                    Reports
                </a>

            </nav>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">

            <!-- Top Navbar -->
            <header class="bg-white shadow-sm border-b">

                <div class="flex items-center justify-between px-6 py-4">

                    <!-- Mobile Menu -->
                    <button
                        @click="sidebarOpen = !sidebarOpen"
                        class="lg:hidden text-slate-700 text-2xl">

                        <i class="bi bi-list"></i>

                    </button>

                    <!-- Title -->
                    <div>
                        <h2 class="text-xl font-semibold text-slate-800">
                            {{ $header ?? 'Dashboard' }}
                        </h2>
                    </div>

                    <!-- User -->
                    <!-- User -->
                    <div class="flex items-center gap-4">

                        <!-- User Info -->
                        <div class="text-right hidden sm:block">

                            <p class="text-sm font-semibold text-slate-700">
                                {{ Auth::user()->name ?? 'Admin' }}
                            </p>

                            <p class="text-xs text-slate-500">
                                Administrator
                            </p>

                        </div>

                        <!-- Avatar -->
                        <div class="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold">

                            {{ strtoupper(substr(Auth::user()->name ?? 'A',0,1)) }}

                        </div>

                        <!-- Logout -->
                        <form method="POST"
                            action="{{ route('logout') }}">

                            @csrf

                            <button type="submit"
                                class="flex items-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-xl shadow-sm transition">

                                <i class="bi bi-box-arrow-right"></i>

                                <span class="hidden md:block">
                                    Logout
                                </span>

                            </button>

                        </form>

                    </div>

                </div>

            </header>

            <!-- Page Content -->
            <main class="flex-1 overflow-y-auto p-6 bg-gray-100">

                {{ $slot }}

            </main>

        </div>

    </div>

</body>

</html>