<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">

<!-- Navbar -->
<nav class="bg-gray-900 text-white px-4 py-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="{{ asset('images/navbar.png') }}" alt="Logo" class="w-32 h-auto">
    </div>

    <!-- Hamburger -->
    <div class="md:hidden">
        <button onclick="toggleMenu()" class="text-white text-2xl focus:outline-none">
            ☰
        </button>
    </div>

    <!-- Desktop Menu -->
    <div id="menu" class="hidden md:flex gap-6 items-center">
        <a href="/" class="text-white hover:text-blue-400 transition">Beranda</a>
        <a href="/booking/" class="text-white hover:text-blue-400 transition">Pemesanan</a>
        <a href="/customer/photos" class="text-white hover:text-blue-400 transition">Unduh Foto</a>
        <a href="/customer/contact" class="text-white hover:text-blue-400 transition">Galeri</a>
        <a href="/keranjang" class="text-white hover:text-blue-400 transition">Keranjang</a>
        
        <div class="relative">
            @guest
                <a href="{{ route('login') }}" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                    Login
                </a>
            @else
                <button onclick="toggleDropdown()" id="dropdownToggle" class="flex items-center gap-1 hover:underline focus:outline-none">
                    {{ Auth::user()->name ?? 'User' }} ▾ <!-- Jika Auth::user() null, tampilkan 'User' -->
                </button>
                <div id="dropdownMenu" class="absolute right-0 mt-2 w-48 bg-white text-black rounded shadow-lg hidden z-50">
                    <button onclick="toggleModal()" class="block w-full text-left px-4 py-2 hover:bg-gray-100">Ubah Data Diri</button>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="block w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button>
                    </form>
                </div>
            @endguest
        </div>
    </div>
</nav>


<!-- Mobile Menu -->
<div id="mobileMenu" class="md:hidden hidden bg-gray-800 text-white flex flex-col gap-2 px-4 py-4">
    <a href="/dashboard" class="hover:underline">Beranda</a>
    <a href="/booking/" class="hover:underline">Pemesanan</a>
    <a href="/customer/photos" class="hover:underline">Unduh Foto</a>
    <a href="/customer/contact" class="hover:underline">Galeri</a>

    <!-- Cek apakah pengguna sudah login -->
    @guest
        <a href="{{ route('login') }}" class="text-left hover:underline">Login</a>
    @else
        <button onclick="toggleModal()" class="text-left hover:underline">Ubah Data Diri</button>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="text-left hover:underline">Logout</button>
        </form>
    @endguest
</div>

<!-- Content -->
<div class="p-6 text-center">
    @yield('content')
</div>

<footer class="bg-black text-white py-8">
    <div class="max-w-6xl mx-auto px-6 text-center space-y-4">
        <p class="text-lg font-semibold">© 2025 Skyrent Photo. All Rights Reserved</p>

        <!-- Sosial Media Links -->
        <div class="flex justify-center gap-8">
            <a href="https://wa.me/6281234567890" target="_blank" class="text-white hover:text-green-400 transition duration-300">
                <i class="fab fa-whatsapp text-3xl"></i>
                <span class="sr-only">WhatsApp</span>
            </a>
            <a href="https://instagram.com/kuystudio" target="_blank" class="text-white hover:text-pink-400 transition duration-300">
                <i class="fab fa-instagram text-3xl"></i>
                <span class="sr-only">Instagram</span>
            </a>
            <a href="https://twitter.com/kuystudio" target="_blank" class="text-white hover:text-blue-400 transition duration-300">
                <i class="fab fa-twitter text-3xl"></i>
                <span class="sr-only">Twitter</span>
            </a>
        </div>

        <!-- Alamat dan Kontak -->
        <div class="mt-6">
            <p class="text-sm font-light">📍 Alamat: Jl. Serayu No. 38 Panderejo, Banyuwangi, Jawa Timur</p>
            <p class="text-sm font-light">📞 WhatsApp: <a href="https://wa.me/6285745551630" class="text-white hover:text-green-400">+62 812-3456-7890</a></p>
        </div>
    </div>
</footer>

<!-- Modal Edit Profil -->
<div id="editProfileModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg w-full max-w-md p-6 shadow-lg text-gray-900 relative">
        <h2 class="text-xl font-semibold mb-4">Ubah Data Diri</h2>
        <form action="{{ route('customer.profile.update') }}" method="POST">
            @csrf
            @method('PUT')
            
            <!-- Nama -->
            <div class="mb-3">
                <label for="name" class="block text-sm font-medium">Nama</label>
                <input type="text" id="name" name="name" value="{{ Auth::check() ? Auth::user()->name : '' }}" class="mt-1 w-full border rounded px-3 py-2" required>
            </div>
            
            <!-- Nomor HP -->
            <div class="mb-3">
                <label for="phone" class="block text-sm font-medium">Nomor HP</label>
                <input type="text" id="phone" name="phone" value="{{ Auth::check() ? Auth::user()->phone : '' }}" class="mt-1 w-full border rounded px-3 py-2" required>
            </div>
            
            <!-- Alamat -->
            <div class="mb-3">
                <label for="address" class="block text-sm font-medium">Alamat</label>
                <textarea id="address" name="address" class="mt-1 w-full border rounded px-3 py-2" required>{{ Auth::check() ? Auth::user()->address : '' }}</textarea>
            </div>
            
            <!-- Password Baru -->
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium">Password Baru (opsional)</label>
                <input type="password" id="password" name="password" class="mt-1 w-full border rounded px-3 py-2">
            </div>
            
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="toggleModal()" class="px-4 py-2 bg-gray-300 rounded">Batal</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Simpan</button>
            </div>
        </form>
        <button onclick="toggleModal()" class="absolute top-2 right-3 text-xl text-gray-500 hover:text-gray-800">&times;</button>
    </div>
</div>


<!-- Scripts -->
<script>
    function toggleMenu() {
        const mobileMenu = document.getElementById('mobileMenu');
        mobileMenu.classList.toggle('hidden');
    }

    function toggleModal() {
        const modal = document.getElementById('editProfileModal');
        modal.classList.toggle('hidden');
    }

    function toggleDropdown() {
        const dropdown = document.getElementById('dropdownMenu');
        dropdown.classList.toggle('hidden');
    }

    // Tutup dropdown jika klik di luar
    window.addEventListener('click', function(e) {
        const dropdown = document.getElementById('dropdownMenu');
        const toggleBtn = document.getElementById('dropdownToggle');
        if (!dropdown.contains(e.target) && !toggleBtn.contains(e.target)) {
            dropdown.classList.add('hidden');
        }
    });

    // Tutup modal jika klik di luar
    window.addEventListener('click', function(e) {
        const modal = document.getElementById('editProfileModal');
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
</script>

</body>
</html>
