184 lines
7.8 KiB
PHP
184 lines
7.8 KiB
PHP
<!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">×</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>
|