270 lines
13 KiB
PHP
270 lines
13 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', 'Belanja Padi & Beras')
|
|
|
|
@section('content')
|
|
{{-- Header Halaman --}}
|
|
<div class="container-fluid py-5 bg-light border-bottom mb-5">
|
|
<div class="container text-center">
|
|
<h1 class="display-5 fw-bold text-dark mb-3">Belanja Produk Kami</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb justify-content-center mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">Home</a></li>
|
|
<li class="breadcrumb-item active text-muted">Shop</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Konten Utama --}}
|
|
<div class="container pb-5">
|
|
<div class="row g-4">
|
|
|
|
{{-- SIDEBAR FILTER --}}
|
|
<div class="col-lg-3">
|
|
|
|
{{-- Filter Wilayah Lengkap--}}
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body p-4">
|
|
<h6 class="fw-bold mb-3 text-uppercase small text-muted">Filter Wilayah Lengkap</h6>
|
|
<form action="{{ route('shop') }}" method="GET">
|
|
@foreach(request()->only(['search', 'kategori', 'sort']) as $key => $val)
|
|
<input type="hidden" name="{{ $key }}" value="{{ $val }}">
|
|
@endforeach
|
|
|
|
<div class="mb-2">
|
|
<label class="small fw-bold">Provinsi</label>
|
|
<select name="provinsi" id="filter_provinsi" class="form-select form-select-sm">
|
|
<option value="">Semua Provinsi</option>
|
|
@foreach(\Laravolt\Indonesia\Models\Province::all() as $prov)
|
|
<option value="{{ $prov->code }}" {{ request('provinsi')==$prov->code ? 'selected' : ''
|
|
}}>{{ $prov->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="small fw-bold">Kota/Kabupaten</label>
|
|
<select name="kota" id="filter_kota" class="form-select form-select-sm" {{
|
|
!request('provinsi') ? 'disabled' : '' }}>
|
|
<option value="">Semua Kota</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="small fw-bold">Kecamatan</label>
|
|
<select name="kecamatan" id="filter_kecamatan" class="form-select form-select-sm" {{
|
|
!request('kota') ? 'disabled' : '' }}>
|
|
<option value="">Semua Kecamatan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="small fw-bold">Desa</label>
|
|
<select name="desa" id="filter_desa" class="form-select form-select-sm" {{
|
|
!request('kecamatan') ? 'disabled' : '' }}>
|
|
<option value="">Semua Desa</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-sm w-100 rounded-pill shadow-sm">
|
|
<i class="fas fa-search me-1"></i> Cari Produk
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card Kategori --}}
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body p-4">
|
|
<h6 class="fw-bold mb-3 text-uppercase small text-muted">Kategori</h6>
|
|
<div class="d-flex flex-column gap-2">
|
|
|
|
@php
|
|
$kategoriList = \App\Models\Kategori::all();
|
|
$currentKat = request('kategori');
|
|
@endphp
|
|
|
|
{{-- Tombol Semua Kategori --}}
|
|
<a href="{{ route('shop', array_merge(request()->query(), ['kategori' => null])) }}"
|
|
class="d-flex justify-content-between align-items-center text-decoration-none {{ !$currentKat ? 'fw-bold text-primary' : 'text-secondary' }}">
|
|
<span>Semua Kategori</span>
|
|
</a>
|
|
|
|
{{-- Looping Kategori Database --}}
|
|
@foreach($kategoriList as $kat)
|
|
<a href="{{ route('shop', array_merge(request()->query(), ['kategori' => $kat->slug])) }}"
|
|
class="d-flex justify-content-between align-items-center text-decoration-none {{ $currentKat == $kat->slug ? 'fw-bold text-primary' : 'text-secondary' }}">
|
|
|
|
<span>{{ $kat->nama_kategori }}</span>
|
|
|
|
@if($currentKat == $kat->slug)
|
|
<i class="fas fa-check small"></i>
|
|
@endif
|
|
</a>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Banner Info Kecil --}}
|
|
<div class="card border-0 shadow-sm bg-primary text-white">
|
|
<div class="card-body p-4">
|
|
<h5 class="fw-bold mb-2"><i class="fas fa-leaf me-2"></i>Produk Segar</h5>
|
|
<p class="small mb-0 opacity-75">Semua produk kami diambil langsung dari petani lokal terpercaya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- LIST PRODUK --}}
|
|
<div class="col-lg-9">
|
|
|
|
{{-- Top Bar (Info Jumlah & Sorting) --}}
|
|
<div class="d-flex justify-content-between align-items-center mb-4 bg-white p-3 rounded shadow-sm border">
|
|
<div class="d-none d-md-block text-muted small">
|
|
Menampilkan <span class="fw-bold text-dark">{{ $produks->firstItem() ?? 0 }}-{{ $produks->lastItem()
|
|
?? 0 }}</span>
|
|
dari <span class="fw-bold text-dark">{{ $produks->total() }}</span> produk
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<label class="small text-muted me-2 text-nowrap">Urutkan:</label>
|
|
<form id="sortForm" action="{{ route('shop') }}" method="GET">
|
|
{{-- Pertahankan query lain (search/kategori) saat sorting --}}
|
|
@foreach(request()->except('sort') as $key => $value)
|
|
<input type="hidden" name="{{ $key }}" value="{{ $value }}">
|
|
@endforeach
|
|
|
|
<select name="sort" class="form-select form-select-sm border-0 bg-light fw-bold text-dark"
|
|
onchange="document.getElementById('sortForm').submit()"
|
|
style="width: 160px; cursor: pointer;">
|
|
<option value="terbaru" {{ request('sort')=='terbaru' ? 'selected' : '' }}>Paling Baru
|
|
</option>
|
|
<option value="termurah" {{ request('sort')=='termurah' ? 'selected' : '' }}>Harga Terendah
|
|
</option>
|
|
<option value="termahal" {{ request('sort')=='termahal' ? 'selected' : '' }}>Harga Tertinggi
|
|
</option>
|
|
<option value="terlaris" {{ request('sort')=='terlaris' ? 'selected' : '' }}>Paling Laris
|
|
</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Grid Produk --}}
|
|
<div class="row g-4">
|
|
@forelse($produks as $produk)
|
|
<div class="col-md-6 col-lg-4">
|
|
<a href="{{ route('produk.detail', $produk->id) }}" class="text-decoration-none">
|
|
<div class="card border-0 shadow-sm h-100 product-card">
|
|
<div class="position-absolute top-0 end-0 m-2 z-1">
|
|
<span class="badge bg-warning text-dark">
|
|
Stok: {{ $produk->stok }} Kg
|
|
</span>
|
|
</div>
|
|
|
|
<div class="overflow-hidden" style="height: 200px;">
|
|
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
|
|
class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
|
|
style="object-fit: cover;">
|
|
</div>
|
|
|
|
<div class="card-body d-flex justify-content-between flex-column p-3">
|
|
<div>
|
|
<span class="badge bg-primary mb-2">{{ $produk->kategori->nama_kategori ?? 'Umum'
|
|
}}</span>
|
|
<h6 class="fw-bold mb-2 text-dark">{{ $produk->nama_produk }}</h6>
|
|
<p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
|
<div>
|
|
<small class="text-muted">Harga/Kg</small>
|
|
<h6 class="fw-bold text-primary mb-0">
|
|
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
|
</h6>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm rounded-pill">
|
|
<i class="fa fa-eye"></i> Detail
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="text-center py-5 bg-white rounded-3 shadow-sm border border-dashed">
|
|
<i class="fas fa-search fa-3x text-muted opacity-50 mb-3"></i>
|
|
<h5 class="fw-bold text-dark">Produk Tidak Ditemukan</h5>
|
|
<p class="text-muted mb-4">Coba ubah kata kunci pencarian atau reset filter Anda.</p>
|
|
<a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill px-4">
|
|
<i class="fas fa-sync-alt me-2"></i> Reset Filter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
@if ($produks->hasPages())
|
|
<div class="d-flex justify-content-center mt-5">
|
|
{{ $produks->withQueryString()->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
function setupCascading(source, target, routeName, placeholder) {
|
|
$(source).on('change', function() {
|
|
let code = $(this).val();
|
|
$(target).html('<option value="">Memuat...</option>').prop('disabled', true);
|
|
|
|
if(target === '#filter_kota') {
|
|
$('#filter_kecamatan, #filter_desa').html('<option value="">Semua...</option>').prop('disabled', true);
|
|
}
|
|
|
|
if (code) {
|
|
$.post("{{ url('/') }}/" + routeName, {code: code, _token: '{{ csrf_token() }}'}, function(data) {
|
|
$(target).html('<option value="">' + placeholder + '</option>').prop('disabled', false);
|
|
$.each(data, function(key, val) {
|
|
$(target).append(`<option value="${val.code}">${val.name}</option>`);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
setupCascading('#filter_provinsi', '#filter_kota', 'get-kota', 'Semua Kota');
|
|
setupCascading('#filter_kota', '#filter_kecamatan', 'get-kecamatan', 'Semua Kecamatan');
|
|
setupCascading('#filter_kecamatan', '#filter_desa', 'get-desa', 'Semua Desa');
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Hover Effect */
|
|
.product-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* Zoom Image on Hover */
|
|
.product-card:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.overflow-hidden img {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
</style>
|
|
@endsection |