96 lines
6.0 KiB
PHP
96 lines
6.0 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Belanja Mainan')
|
|
|
|
<!-- Halaman Belanja User -->
|
|
@section('content')
|
|
<div class="flex flex-col lg:flex-row gap-6">
|
|
{{-- Sidebar filter (desktop) / Collapse (mobile) --}}
|
|
<aside class="lg:w-64 shrink-0">
|
|
<div class="lg:sticky lg:top-24">
|
|
<div class="md:hidden mb-4">
|
|
<button type="button" id="filter-toggle" class="w-full flex items-center justify-between px-4 py-3 rounded-2xl border border-gray-200 bg-white font-medium text-gray-700 hover:bg-gray-50 transition">
|
|
<span>Filter</span>
|
|
<i class="fa-solid fa-chevron-down transition-transform" id="filter-icon"></i>
|
|
</button>
|
|
</div>
|
|
<div id="filter-panel" class="hidden md:block">
|
|
<x-card :padding="true">
|
|
<form method="GET" action="{{ route('shop.index') }}" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Cari</label>
|
|
<input type="text" name="search" value="{{ request('search') }}" placeholder="Nama produk..." class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Usia</label>
|
|
<select name="age_range" class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
|
|
<option value="">Semua usia</option>
|
|
<option value="0-3" {{ request('age_range') == '0-3' ? 'selected' : '' }}>0-3 tahun</option>
|
|
<option value="3-6" {{ request('age_range') == '3-6' ? 'selected' : '' }}>3-6 tahun</option>
|
|
<option value="6-12" {{ request('age_range') == '6-12' ? 'selected' : '' }}>6-12 tahun</option>
|
|
<option value="12-18" {{ request('age_range') == '12-18' ? 'selected' : '' }}>12-18 tahun</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
|
|
<select name="category" class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
|
|
<option value="">Semua</option>
|
|
@foreach($categories as $c)
|
|
<option value="{{ $c }}" {{ request('category') == $c ? 'selected' : '' }}>{{ $c }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Harga</label>
|
|
<div class="flex gap-2">
|
|
<input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="Min" min="0" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
|
|
<input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Max" min="0" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<x-button type="submit" variant="primary" size="sm" class="flex-1">Terapkan</x-button>
|
|
<a href="{{ route('shop.index') }}" class="inline-flex items-center justify-center px-4 py-2.5 rounded-2xl font-semibold text-gray-600 border border-gray-200 hover:bg-gray-50 text-sm">Reset</a>
|
|
</div>
|
|
</form>
|
|
</x-card>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{{-- Product grid --}}
|
|
<div class="flex-1 min-w-0">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
@forelse($products as $product)
|
|
<x-product-card
|
|
:name="$product->name"
|
|
:price="$product->price"
|
|
:age-range="$product->age_range"
|
|
:stock="$product->stock"
|
|
:image="$product->image_type ? 'data:image/' . $product->image_type . ';base64,' . base64_encode($product->image) : null"
|
|
>
|
|
<form action="{{ route('cart.store') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="product_id" value="{{ $product->id }}">
|
|
<x-button type="submit" variant="primary" size="sm" class="w-full mt-2">Tambah ke Keranjang</x-button>
|
|
</form>
|
|
</x-product-card>
|
|
@empty
|
|
<div class="col-span-full">
|
|
<x-card class="text-center py-12">
|
|
<div class="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-100 text-gray-400 mb-4">
|
|
<i class="fa-solid fa-search text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Tidak ada produk</h3>
|
|
<p class="text-gray-500 mt-1">Coba ubah filter atau kata kunci.</p>
|
|
<a href="{{ route('shop.index') }}" class="inline-flex mt-4 font-medium text-primary-600 hover:text-primary-700">Reset filter</a>
|
|
</x-card>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
@if($products->hasPages())
|
|
<div class="mt-8 flex justify-center">{{ $products->links() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endsection
|