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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>@yield('title', 'Portal Pengadaan Papua - TUNJUK-i')</title>

    @vite('resources/css/app.css')
    @livewireStyles

    <style>
        /* Custom Styles */
        .line-clamp-1 {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .transition-all {
            transition: all 0.3s ease;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            padding: 8px;
            z-index: 100;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 8px;
            color: #4a5568;
            transition: all 0.2s ease;
            text-decoration: none;
            font-size: 14px;
        }

        .dropdown-item:hover {
            background: #f7fafc;
            color: #c9a84c;
        }

        .dropdown-item i {
            width: 20px;
            color: #c9a84c;
        }

        /* Mobile Menu */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 64px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .mobile-menu.open {
            display: block;
        }

        .mobile-menu-content {
            background: white;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
        }

        .mobile-menu-item {
            display: block;
            padding: 12px 16px;
            border-radius: 8px;
            color: #4a5568;
            text-decoration: none;
            transition: all 0.2s ease;
            border-bottom: 1px solid #f0f0f0;
        }

        .mobile-menu-item:hover {
            background: #f7fafc;
            color: #c9a84c;
        }

        .mobile-menu-item i {
            width: 24px;
            color: #c9a84c;
        }

        @media (max-width: 768px) {
            .desktop-menu {
                display: none !important;
            }

            .mobile-hamburger {
                display: block !important;
            }
        }

        @media (min-width: 769px) {
            .mobile-hamburger {
                display: none !important;
            }

            .mobile-menu {
                display: none !important;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans antialiased">

    <!-- ============================================================ -->
    <!-- NAVBAR MARKETPLACE -->
    <!-- ============================================================ -->
    <nav class="bg-[#0b2b4a] text-white shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">

                <!-- Brand -->
                <div class="flex items-center space-x-3">
                    @include('partials.logo')
                    <span class="text-xs bg-[#c9a84c] text-[#0b2b4a] px-2 py-0.5 rounded">
                        Portal Pengadaan P-OAP
                    </span>
                </div>

                <!-- ============================================================ -->
                <!-- DESKTOP MENU -->
                <!-- ============================================================ -->
                <div class="desktop-menu flex items-center space-x-1">
                    <!-- Home -->
                    <a href="{{ route('marketplace') }}"
                        class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                        <i class="fas fa-home"></i>
                        Home
                    </a>

                    <!-- Profil P-OAP -->
                    <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <button @click="open = !open"
                            class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                            <i class="fas fa-address-card"></i>
                            Profil P-OAP
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div x-show="open"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            class="dropdown-menu show" style="display: none;" x-cloak>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-building"></i> Profil Lembaga
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-users"></i> Struktur Organisasi
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-tasks"></i> Tugas & Fungsi
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-phone"></i> Kontak
                            </a>
                        </div>
                    </div>

                    <!-- Regulasi -->
                    <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <button @click="open = !open"
                            class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                            <i class="fas fa-gavel"></i>
                            Regulasi
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div x-show="open"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            class="dropdown-menu show" style="display: none;" x-cloak>
                            <!-- UU Otsus -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-gavel text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">UU Otsus Papua</div>
                                    <div class="text-xs text-gray-400">Undang-Undang Otonomi Khusus Papua</div>
                                </div>
                            </a>
                            <!-- Kepres tentang Agen Pengadaan -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-file-signature text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Kepres Agen Pengadaan</div>
                                    <div class="text-xs text-gray-400">Keputusan Presiden tentang Agen Pengadaan</div>
                                </div>
                            </a>
                            <!-- Peraturan LKPP tentang Agen Pengadaan -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-building text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Peraturan LKPP</div>
                                    <div class="text-xs text-gray-400">Peraturan LKPP tentang Agen Pengadaan</div>
                                </div>
                            </a>
                            <!-- Tambahan: Peraturan LPSE -->
                            <a href="#" class="dropdown-item border-t border-gray-100 mt-1 pt-1">
                                <i class="fas fa-file-alt text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Peraturan LPSE</div>
                                    <div class="text-xs text-gray-400">Peraturan Layanan Pengadaan Secara Elektronik</div>
                                </div>
                            </a>
                            <!-- Tambahan: Kebijakan Pengadaan -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-scroll text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Kebijakan Pengadaan</div>
                                    <div class="text-xs text-gray-400">Kebijakan Pengadaan Barang/Jasa</div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Pusat Bantuan -->
                    <!-- Pusat Bantuan -->
                    <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <button @click="open = !open"
                            class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                            <i class="fas fa-question-circle"></i>
                            Pusat Bantuan
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div x-show="open"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform -translate-y-2"
                            x-transition:enter-end="opacity-100 transform translate-y-0"
                            class="dropdown-menu show" style="display: none;" x-cloak>
                            <!-- Panduan Penggunaan -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-book-open text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Panduan Penggunaan</div>
                                    <div class="text-xs text-gray-400">Petunjuk lengkap menggunakan portal</div>
                                </div>
                            </a>
                            <!-- FAQ -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-question-circle text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">FAQ</div>
                                    <div class="text-xs text-gray-400">Pertanyaan yang sering diajukan</div>
                                </div>
                            </a>
                            <!-- Video Tutorial -->
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-video text-[#c9a84c]"></i>
                                <div>
                                    <div class="font-semibold text-gray-700">Video Tutorial</div>
                                    <div class="text-xs text-gray-400">Tutorial video penggunaan portal</div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Dashboard Tunjuk-i -->
                    @auth
                    <a href="{{ route('dashboard') }}"
                        class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                        <i class="fas fa-tachometer-alt"></i>
                        Dashboard
                    </a>
                    @else
                    <a href="{{ route('login') }}"
                        class="px-4 py-2 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition flex items-center gap-2">
                        <i class="fas fa-sign-in-alt"></i>
                        Login
                    </a>
                    @endauth

                    <!-- Marketplace (Active) -->
                    <a href="{{ route('marketplace') }}"
                        class="px-4 py-2 rounded-lg text-sm font-medium bg-[#c9a84c] text-[#0b2b4a] hover:bg-yellow-500 transition flex items-center gap-2">
                        <i class="fas fa-store"></i>
                        Marketplace
                    </a>

                    <!-- Register (Jika Belum Login) -->
                    @guest
                    <a href="{{ route('register') }}"
                        class="px-4 py-2 rounded-lg text-sm font-medium bg-white/10 text-white hover:bg-white/20 transition flex items-center gap-2">
                        <i class="fas fa-user-plus"></i>
                        Register
                    </a>
                    @endguest
                </div>

                <!-- ============================================================ -->
                <!-- MOBILE HAMBURGER -->
                <!-- ============================================================ -->
                <div class="mobile-hamburger flex items-center">
                    <button @click="mobileOpen = !mobileOpen"
                        class="text-white hover:text-[#c9a84c] transition p-2">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- ============================================================ -->
    <!-- MOBILE MENU -->
    <!-- ============================================================ -->
    <div class="mobile-menu" x-data="{ mobileOpen: false }" x-show="mobileOpen" x-cloak>
        <div class="mobile-menu-content">
            <div class="flex justify-between items-center mb-6">
                <span class="text-lg font-bold text-[#0b2b4a]">Menu</span>
                <button @click="mobileOpen = false" class="text-gray-600 hover:text-gray-800">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <a href="{{ route('landing') }}" class="mobile-menu-item">
                <i class="fas fa-home"></i> Home
            </a>

            <div class="border-b border-gray-100">
                <a href="#" class="mobile-menu-item" @click.prevent>
                    <i class="fas fa-address-card"></i> Profil P-OAP
                </a>
                <div class="pl-8 space-y-1">
                    <a href="#" class="mobile-menu-item text-sm">- Profil Lembaga</a>
                    <a href="#" class="mobile-menu-item text-sm">- Struktur Organisasi</a>
                    <a href="#" class="mobile-menu-item text-sm">- Tugas & Fungsi</a>
                    <a href="#" class="mobile-menu-item text-sm">- Kontak</a>
                </div>
            </div>

            <div class="border-b border-gray-100">
                <a href="#" class="mobile-menu-item" @click.prevent>
                    <i class="fas fa-gavel"></i> Regulasi
                </a>
                <div class="pl-8 space-y-1">
                    <a href="#" class="mobile-menu-item text-sm">- Peraturan Presiden</a>
                    <a href="#" class="mobile-menu-item text-sm">- Peraturan LPSE</a>
                    <a href="#" class="mobile-menu-item text-sm">- Kebijakan Pengadaan</a>
                    <a href="#" class="mobile-menu-item text-sm">- Hukum & Perundangan</a>
                </div>
            </div>

            <a href="#" class="mobile-menu-item">
                <i class="fas fa-question-circle"></i> Pusat Bantuan
            </a>

            @auth
            <a href="{{ route('dashboard') }}" class="mobile-menu-item">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('logout') }}" class="mobile-menu-item text-red-500"
                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
            </form>
            @else
            <a href="{{ route('login') }}" class="mobile-menu-item">
                <i class="fas fa-sign-in-alt"></i> Login
            </a>
            <a href="{{ route('register') }}" class="mobile-menu-item">
                <i class="fas fa-user-plus"></i> Register
            </a>
            @endauth

            <a href="{{ route('marketplace') }}" class="mobile-menu-item bg-[#c9a84c] text-white rounded-lg mt-4">
                <i class="fas fa-store"></i> Marketplace
            </a>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- MAIN CONTENT -->
    <!-- ============================================================ -->
    <main>
        {{ $slot }}
        

    </main>

    @livewireScripts
    @vite('resources/js/app.js')
    @stack('scripts')

    @include('partials.footer')
</body>

</html>