<!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', 'Laravel') }}</title>

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

        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased text-gray-800">
        <div class="min-h-screen bg-slate-50 flex">
            
            <aside class="w-64 bg-white shadow-sm border-r border-gray-200 fixed h-full z-50 text-gray-700 flex flex-col justify-between">
                <div>
                    <div class="p-6 border-b border-gray-100">
                        <h2 class="text-2xl font-black tracking-tighter text-green-800 uppercase">Tempe Zhi</h2>
                        <p class="text-[10px] text-gray-400 font-black uppercase tracking-[0.2em] mt-1">
                            {{ auth()->user()->role->nama_role ?? 'Admin' }} Panel
                        </p>
                    </div>
                    
                    <nav class="mt-6 px-3 space-y-1 overflow-y-auto max-h-[calc(100vh-180px)] custom-scrollbar">
                        
                        @if(auth()->user()->role->slug === 'admin')
                            <a href="{{ route('admin.dashboard') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('admin.dashboard') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">
                                Beranda
                            </a>

                            <div x-data="{ open: {{ request()->routeIs('admin.users.*') ? 'true' : 'false' }} }">
                                <button @click="open = !open" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold text-gray-600 hover:bg-green-50 hover:text-green-800 rounded-xl focus:outline-none transition-all">
                                    <span>Manajemen Pengguna</span>
                                    <svg class="w-4 h-4 transform transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                </button>
                                <div x-show="open" x-cloak class="mt-1 pl-2 space-y-1 bg-gray-50 rounded-xl py-1">
                                    <a href="{{ route('admin.users.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg transition-colors {{ request()->routeIs('admin.users.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Akun Pengguna</a>
                                </div>
                            </div>

                            <div x-data="{ open: {{ request()->routeIs('admin.bahan-baku.*', 'admin.kategori-produk.*', 'admin.produk.*', 'staffgudang.stokproduk.*') ? 'true' : 'false' }} }">
                                <button @click="open = !open" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold text-gray-600 hover:bg-green-50 hover:text-green-800 rounded-xl focus:outline-none transition-all">
                                    <span>Operasional Pabrik</span>
                                    <svg class="w-4 h-4 transform transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                </button>
                                <div x-show="open" x-cloak class="mt-1 pl-2 space-y-1 bg-gray-50 rounded-xl py-1">
                                    <a href="{{ route('admin.bahan-baku.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.bahan-baku.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Bahan Baku</a>
                                    <a href="{{ route('admin.kategori-produk.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.kategori-produk.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Kategori Produk</a>
                                    <a href="{{ route('admin.produk.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.produk.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Produk</a>
                                    <a href="{{ route('staffgudang.stokproduk.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('staffgudang.stokproduk.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Stok Produk Jadi</a>
                                </div>
                            </div>

                            <div x-data="{ open: {{ request()->routeIs('pesanan.*', 'pengiriman.*', 'admin.lokasi.*', 'admin.articles.*', 'admin.sertifikat.*', 'admin.kunjungan.*') ? 'true' : 'false' }} }">
                                <button @click="open = !open" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold text-gray-600 hover:bg-green-50 hover:text-green-800 rounded-xl focus:outline-none transition-all">
                                    <span>Penjualan & Informasi</span>
                                    <svg class="w-4 h-4 transform transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                </button>
                                <div x-show="open" x-cloak class="mt-1 pl-2 space-y-1 bg-gray-50 rounded-xl py-1">
                                    <a href="{{ route('pesanan.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('pesanan.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Pesanan Customer</a>
                                    <a href="{{ route('pengiriman.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('pengiriman.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Data Pengiriman</a>
                                    <a href="{{ route('admin.lokasi.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.lokasi.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Lokasi Distribusi</a>
                                    <a href="{{ route('admin.articles.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.articles.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Artikel</a>
                                    <a href="{{ route('admin.sertifikat.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.sertifikat.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kelola Sertifikat</a>
                                    <a href="{{ route('admin.kunjungan.index') }}" class="flex items-center px-4 py-2 text-xs font-bold rounded-lg {{ request()->routeIs('admin.kunjungan.*') ? 'text-green-800 bg-green-100/60' : 'text-gray-500 hover:text-green-800' }}">Kunjungan Industri</a>
                                </div>
                            </div>
                        @endif

                        @if(auth()->user()->role->slug === 'owner')
                            <a href="{{ route('owner.dashboard') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('owner.dashboard') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Beranda</a>
                            <a href="{{ route('staffproduksi.produksi.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffproduksi.produksi.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Data Produksi</a>
                            <a href="{{ route('pesanan.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('pesanan.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Pesanan Customer</a>
                            <a href="{{ route('staffgudang.stokproduk.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffgudang.stokproduk.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Stok Produk Jadi</a>
                            <a href="{{ route('staffgudang.stokbahanbaku.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffgudang.stokbahanbaku.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Stok Bahan Baku</a>      
                            <a href="{{ route('pengiriman.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('pengiriman.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Data Pengiriman</a>
                        @endif

                        @if(auth()->user()->role->slug === 'staff-produksi')
                            <a href="{{ route('staffproduksi.dashboard') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffproduksi.dashboard') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Beranda </a>
                            <a href="{{ route('staffproduksi.produksi.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffproduksi.produksi.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Data Produksi Harian</a>
                            <a href="{{ route('pesanan.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('pesanan.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Pesanan Customer</a>
                        @endif

                        @if(auth()->user()->role->slug === 'staff-gudang')
                            <a href="{{ route('staffgudang.dashboard') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffgudang.dashboard') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Beranda</a>
                            <a href="{{ route('staffgudang.stokbahanbaku.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffgudang.stokbahanbaku.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Stok Bahan Baku</a>            
                            <a href="{{ route('staffgudang.stokproduk.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('staffgudang.stokproduk.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Stok Produk</a>
                            <a href="{{ route('produksi.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('produksi.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Data Produksi Harian</a>
                            <a href="{{ route('pengiriman.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('pengiriman.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Data Pengiriman</a>
                        @endif

                        @if(auth()->user()->role->slug === 'customer-mitra')
                            <a href="{{ route('customer.dashboard') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('customer.dashboard') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Beranda</a> 
                            <a href="{{ route('customer.pesanan.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('customer.pesanan.index') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Pesanan Saya</a>
                            <a href="{{ route('customer.katalog.index') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('customer.katalog.*') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Katalog Produk</a>
                            <a href="{{ route('customer.pesanan.riwayat') }}" class="flex items-center px-4 py-2.5 text-sm font-bold rounded-xl transition-all {{ request()->routeIs('customer.pesanan.riwayat') ? 'bg-green-800 text-white shadow-md' : 'text-gray-600 hover:bg-green-50 hover:text-green-800' }}">Riwayat Pesanan</a>
                        @endif

                    </nav>
                </div>

                <div class="p-4 border-t border-gray-100 mb-4">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-black text-red-600 hover:bg-red-50 rounded-xl transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                            Keluar Sistem
                        </button>
                    </form>
                </div>
            </aside>

            <div class="flex-1 ml-64 flex flex-col min-h-screen">
                
                <header class="bg-white border-b border-gray-100 sticky top-0 z-40 shadow-sm">
                    <div class="px-8 py-4 flex justify-between items-center">
                        <span class="text-xs font-bold tracking-wide text-green-800">
                            "Rumah Produksi Tempe Kedelai"
                        </span>
                        
                        <x-dropdown align="right" width="48">
                            <x-slot name="trigger">
                                <button class="flex items-center space-x-3 focus:outline-none transition group">
                                    <div class="text-right hidden sm:block">
                                        <p class="text-sm font-black text-gray-800 group-hover:text-green-800 transition-colors">{{ auth()->user()->name }}</p>
                                        <p class="text-[9px] font-black text-green-600 uppercase tracking-wider">{{ auth()->user()->role->nama_role ?? 'Admin' }}</p>
                                    </div>
                                    <div class="w-10 h-10 bg-green-800 text-white rounded-xl flex items-center justify-center font-black text-base shadow-sm group-hover:scale-105 transition-transform">
                                        {{ substr(auth()->user()->name, 0, 1) }}
                                    </div>
                                </button>
                            </x-slot>

                            <x-slot name="content">
                                <x-dropdown-link :href="route('profile.edit')" class="font-medium text-gray-700 hover:bg-green-50 hover:text-green-900">
                                    {{ __('Profil Saya') }}
                                </x-dropdown-link>

                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <x-dropdown-link :href="route('logout')" class="font-medium text-red-600 hover:bg-red-50"
                                            onclick="event.preventDefault(); this.closest('form').submit();">
                                        {{ __('Keluar') }}
                                    </x-dropdown-link>
                                </form>
                            </x-slot>
                        </x-dropdown>
                    </div>
                </header>

                <main class="p-8 flex-1">
                    @if(isset($slot))
                        {{ $slot }}
                    @else
                        @yield('content')
                    @endif
                </main>
            </div>

        </div>
    </body>
</html>