135 lines
6.3 KiB
PHP
135 lines
6.3 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', 'Belanja Padi & Beras')
|
|
|
|
@section('content')
|
|
<!-- Page Header -->
|
|
<div class="container-fluid py-5 bg-light">
|
|
<div class="container text-center">
|
|
<h1 class="display-5 fw-bold text-dark">Belanja Produk Kami</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb justify-content-center mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
|
|
<li class="breadcrumb-item active">Shop</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shop Section -->
|
|
<div class="container py-5">
|
|
<div class="row g-4">
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-3">
|
|
<!-- Search -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3">Cari Produk</h5>
|
|
<form action="{{ route('shop') }}" method="GET">
|
|
<div class="input-group">
|
|
<input type="search" name="search" class="form-control" placeholder="Cari..."
|
|
value="{{ request('search') }}">
|
|
<button class="btn btn-success" type="submit">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3">Informasi</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-check-circle text-success me-2"></i>
|
|
<small>Total {{ $produks->total() }} Produk</small>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="fas fa-leaf text-success me-2"></i>
|
|
<small>100% Organik</small>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-truck text-success me-2"></i>
|
|
<small>Gratis Ongkir Min. 50 Kg</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div class="col-lg-9">
|
|
<div class="row g-4">
|
|
@forelse($produks as $produk)
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card border-0 shadow-sm h-100 product-card">
|
|
<!-- Stock Badge -->
|
|
<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>
|
|
|
|
<!-- Image -->
|
|
<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 p-3">
|
|
<span class="badge bg-success mb-2">{{ $produk->kategori ?? 'Umum' }}</span>
|
|
<h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
|
|
<p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
|
|
|
|
<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-success mb-0">
|
|
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
|
</h6>
|
|
</div>
|
|
<a href="{{ route('produk.detail', $produk->id) }}"
|
|
class="btn btn-success btn-sm rounded-pill">
|
|
<i class="fa fa-eye"></i> Detail
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-search fa-4x text-muted mb-3"></i>
|
|
<h4 class="text-muted">Produk Tidak Ditemukan</h4>
|
|
<p class="text-muted">Coba kata kunci lain atau hapus filter pencarian.</p>
|
|
<a href="{{ route('shop') }}" class="btn btn-outline-success rounded-pill mt-2">
|
|
<i class="fas fa-sync-alt me-2"></i> Reset Pencarian
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
@if ($produks->hasPages())
|
|
<div class="d-flex justify-content-center mt-5">
|
|
{{ $produks->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.product-card {
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
</style>
|
|
@endsection
|