188 lines
9.6 KiB
PHP
188 lines
9.6 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">
|
|
|
|
{{-- 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>
|
|
|
|
<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 |