277 lines
14 KiB
PHP
277 lines
14 KiB
PHP
<!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', 'Dashboard') - DIJEEELEKTRONIK</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.6/lottie.min.js"></script>
|
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
|
<style>
|
|
body {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #B5EAE0 0%, #9CD5CB 100%);
|
|
color: #1a1a1a;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.btn-secondary {
|
|
border: 2px solid #B5EAE0;
|
|
color: #1a1a1a;
|
|
padding: 10px 24px;
|
|
border-radius: 12px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: linear-gradient(135deg, #B5EAE0 0%, #9CD5CB 100%);
|
|
color: white;
|
|
}
|
|
|
|
.header-main {
|
|
background: linear-gradient(135deg, #2C7A7B 0%, #1D5354 100%);
|
|
}
|
|
|
|
.alert {
|
|
padding: 1rem;
|
|
border-radius: 12px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: #dcfce7;
|
|
border: 1px solid #86efac;
|
|
color: #166534;
|
|
}
|
|
|
|
.alert-error {
|
|
background-color: #fee2e2;
|
|
border: 1px solid #fca5a5;
|
|
color: #991b1b;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body x-data="{ userMenuOpen: false, cartOpen: false, mobileMenuOpen: false }">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-md">
|
|
<!-- Main Header -->
|
|
<div class="py-3 header-main">
|
|
<div class="container px-4 mx-auto">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Logo & Search -->
|
|
<div class="flex items-center flex-1">
|
|
@auth
|
|
<a href="{{ route('dashboard') }}" class="flex items-center mr-8">
|
|
<img src="{{ asset('assets/images/lonceng.png') }}" alt="Logo" class="w-auto h-8 mr-2">
|
|
<span class="text-xl font-bold text-white">ElektroStore</span>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('home') }}" class="flex items-center mr-8">
|
|
<img src="{{ asset('assets/images/lonceng.png') }}" alt="Logo" class="w-auto h-8 mr-2">
|
|
<span class="text-xl font-bold text-white">ElektroStore</span>
|
|
</a>
|
|
@endauth
|
|
|
|
<!-- Search Bar -->
|
|
<div class="flex-1 hidden max-w-2xl md:flex">
|
|
<form action="{{ route('barang.index') }}" method="GET" class="relative w-full">
|
|
<input type="text" name="search" placeholder="Cari produk elektronik..."
|
|
class="w-full py-2 px-4 rounded-lg border-0 focus:ring-2 focus:ring-[#9CD5CB]"
|
|
value="{{ request('search') }}">
|
|
<button type="submit" class="absolute top-0 right-0 h-full px-4 text-gray-500">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Icons -->
|
|
<div class="flex items-center space-x-6">
|
|
@auth
|
|
<!-- Cart -->
|
|
<a href="{{ route('keranjang.index') }}" class="relative text-white">
|
|
<i class="text-xl fas fa-shopping-cart"></i>
|
|
<span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-gray-800 bg-yellow-400 rounded-full -top-2 -right-2">
|
|
{{ Auth::user()->keranjang->sum('jumlah') ?? 0 }}
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Notifications -->
|
|
<a href="#" class="text-white">
|
|
<i class="text-xl fas fa-bell"></i>
|
|
</a>
|
|
|
|
<!-- User Menu -->
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open" class="flex items-center text-white focus:outline-none">
|
|
<div class="flex items-center justify-center w-8 h-8 mr-2 bg-white rounded-full">
|
|
<i class="fas fa-user-circle text-xl text-[#2C7A7B]"></i>
|
|
</div>
|
|
<span class="hidden md:inline-block">{{ Auth::user()->name }}</span>
|
|
<i class="ml-1 text-sm fas fa-chevron-down"></i>
|
|
</button>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div x-show="open"
|
|
@click.away="open = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 z-10 w-48 py-2 mt-2 bg-white rounded-lg shadow-lg">
|
|
<a href="{{ route('dashboard') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
|
|
<i class="fas fa-home w-5 mr-2 text-[#2C7A7B]"></i> Beranda
|
|
</a>
|
|
<a href="{{ route('barang.index') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
|
|
<i class="fas fa-box w-5 mr-2 text-[#2C7A7B]"></i> Daftar Barang
|
|
</a>
|
|
<!-- <a href="{{ route('transaksi.index') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
|
|
<i class="fas fa-credit-card w-5 mr-2 text-[#2C7A7B]"></i> Transaksi
|
|
</a> -->
|
|
<a href="{{ route('pesanan.index') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
|
|
<i class="fas fa-credit-card w-5 mr-2 text-[#2C7A7B]"></i> Pesanan Saya
|
|
</a>
|
|
<a href="{{ route('profile.show') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
|
|
<i class="fas fa-user-cog w-5 mr-2 text-[#2C7A7B]"></i> Pengaturan Profil
|
|
</a>
|
|
<div class="my-2 border-t border-gray-200"></div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="block w-full px-4 py-2 text-left text-red-500 hover:bg-gray-100">
|
|
<i class="w-5 mr-2 fas fa-sign-out-alt"></i> Keluar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- Login & Register Buttons -->
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ route('login') }}" class="text-white hover:text-gray-200">
|
|
<i class="fas fa-sign-in-alt mr-2"></i>
|
|
<span class="hidden md:inline">Masuk</span>
|
|
</a>
|
|
<a href="{{ route('register') }}" class="px-4 py-2 text-sm font-medium text-[#2C7A7B] bg-white rounded-lg hover:bg-gray-100">
|
|
<i class="fas fa-user-plus mr-2"></i>
|
|
<span class="hidden md:inline">Daftar</span>
|
|
</a>
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category Nav (like Shopee) -->
|
|
<div class="bg-white border-b">
|
|
<div class="container px-4 mx-auto">
|
|
<div class="flex items-center py-3 space-x-8 overflow-x-auto scrollbar-hide">
|
|
<a href="{{ route('barang.index', ['kategori' => 'Lampu']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-lightbulb"></i>
|
|
<span>Lampu</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'Kipas']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-fan"></i>
|
|
<span>Kipas</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'Kulkas']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-snowflake"></i>
|
|
<span>Kulkas</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'TV']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-tv"></i>
|
|
<span>TV</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'Magic Com']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-utensils"></i>
|
|
<span>Magic Com</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'Mesin Cuci']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-tshirt"></i>
|
|
<span>Mesin Cuci</span>
|
|
</a>
|
|
<a href="{{ route('barang.index', ['kategori' => 'Kompor']) }}" class="text-gray-600 hover:text-[#2C7A7B] whitespace-nowrap flex flex-col items-center text-sm">
|
|
<i class="mb-1 text-lg fas fa-fire"></i>
|
|
<span>Kompor</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Search Bar (shown only on mobile) -->
|
|
<div class="px-4 py-2 bg-white border-b md:hidden">
|
|
<form action="{{ route('barang.index') }}" method="GET" class="relative">
|
|
<input type="text" name="search" placeholder="Cari produk elektronik..."
|
|
class="w-full py-2 px-4 bg-gray-100 rounded-lg border-0 focus:ring-2 focus:ring-[#9CD5CB]"
|
|
value="{{ request('search') }}">
|
|
<button type="submit" class="absolute top-0 right-0 h-full px-4 text-gray-500">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container px-4 py-6 mx-auto">
|
|
@yield('content')
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-8 mt-8 bg-white border-t">
|
|
<div class="container px-4 mx-auto">
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-[#2C7A7B] mb-4">ElektroStore</h3>
|
|
<p class="text-gray-600">Toko elektronik terpercaya dengan produk berkualitas dan harga bersaing.</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-[#2C7A7B] mb-4">Layanan Pelanggan</h3>
|
|
<ul class="space-y-2 text-gray-600">
|
|
<li><a href="{{ route('bantuan') }}" class="hover:text-[#2C7A7B]">Bantuan</a></li>
|
|
<li><a href="{{ route('cara-pembelian') }}" class="hover:text-[#2C7A7B]">Cara Pembelian</a></li>
|
|
<li><a href="{{ route('pengiriman') }}" class="hover:text-[#2C7A7B]">Pengiriman</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-[#2C7A7B] mb-4">Kontak Kami</h3>
|
|
<p class="text-gray-600">info@elektrostore.com</p>
|
|
<p class="text-gray-600">+62 812 3456 7890</p>
|
|
<div class="flex mt-4 space-x-4">
|
|
<a href="#" class="text-[#2C7A7B] hover:text-[#1D5354]"><i class="fab fa-facebook-f"></i></a>
|
|
<a href="#" class="text-[#2C7A7B] hover:text-[#1D5354]"><i class="fab fa-instagram"></i></a>
|
|
<a href="#" class="text-[#2C7A7B] hover:text-[#1D5354]"><i class="fab fa-twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-8 mt-8 text-center text-gray-500 border-t border-gray-200">
|
|
<p>© {{ date('Y') }} ElektroStore. Hak Cipta Dilindungi.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
@stack('scripts')
|
|
</body>
|
|
|
|
</html> |