316 lines
16 KiB
PHP
316 lines
16 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', $produk->nama_produk)
|
|
|
|
@section('content')
|
|
|
|
{{-- BREADCRUMB --}}
|
|
<div class="container-fluid py-3 mb-3">
|
|
<div class="container">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-decoration-none">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('shop') }}" class="text-decoration-none">Belanja</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ Str::limit($produk->nama_produk, 40) }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container pb-5">
|
|
<div class="row g-4 g-lg-5">
|
|
|
|
{{-- GALERI PRODUK --}}
|
|
<div class="col-lg-5">
|
|
<div class="sticky-top" style="top: 120px; z-index: 1;">
|
|
|
|
{{-- GAMBAR UTAMA (BESAR) --}}
|
|
<div class="card border-0 rounded-4 shadow-sm overflow-hidden mb-3">
|
|
<div class="ratio ratio-4x3 bg-light">
|
|
<img id="main-image"
|
|
src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/no-image.jpg') }}"
|
|
class="object-fit-cover cursor-pointer" alt="{{ $produk->nama_produk }}"
|
|
onerror="this.src='{{ asset('template/frontend/img/no-image.jpg') }}';">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- THUMBNAIL (GAMBAR KECIL) --}}
|
|
<div class="d-flex gap-2 overflow-auto pb-2" style="scrollbar-width: thin;">
|
|
|
|
@if($produk->foto_produk)
|
|
<div class="flex-shrink-0" style="width: 80px; height: 80px;">
|
|
<img src="{{ asset('storage/' . $produk->foto_produk) }}"
|
|
class="img-thumbnail w-100 h-100 object-fit-cover rounded-3 border-primary thumbnail-active"
|
|
onclick="changeImage(this)" style="cursor: pointer; border-width: 2px;">
|
|
</div>
|
|
@endif
|
|
|
|
@if($produk->images && $produk->images->count() > 0)
|
|
@foreach($produk->images as $img)
|
|
<div class="flex-shrink-0" style="width: 80px; height: 80px;">
|
|
<img src="{{ asset('storage/' . $img->foto) }}"
|
|
class="img-thumbnail w-100 h-100 object-fit-cover rounded-3 border-0 opacity-75"
|
|
onclick="changeImage(this)" style="cursor: pointer; transition: all 0.2s;">
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- INFO & AKSI --}}
|
|
<div class="col-lg-7">
|
|
<div class="ps-lg-4">
|
|
|
|
{{-- Kategori Badge --}}
|
|
<div class="mb-3">
|
|
<span
|
|
class="badge bg-primary bg-opacity-10 px-3 py-2 rounded-pill fw-bold border border-primary border-opacity-10">
|
|
<i class="fas fa-tag me-1"></i> {{ $produk->kategori->nama_kategori ?? 'Sayur & Buah' }}
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Nama Produk --}}
|
|
<h1 class="display-6 fw-bold text-dark mb-2">{{ $produk->nama_produk }}</h1>
|
|
|
|
{{-- Harga --}}
|
|
<div class="d-flex align-items-baseline gap-2 mb-4 pb-4 border-bottom">
|
|
<h3 class="text-primary fw-bold mb-0">
|
|
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
|
</h3>
|
|
<span class="text-muted fs-5">/ kg</span>
|
|
</div>
|
|
|
|
{{-- Deskripsi --}}
|
|
<div class="mb-4">
|
|
<h6 class="fw-bold text-dark">Deskripsi Produk</h6>
|
|
<p class="text-black-50 small mb-0" style="line-height: 1.8;">
|
|
{{ $produk->deskripsi }}
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Info Penjual --}}
|
|
<div class="d-flex align-items-center bg-light border rounded-3 p-3 mb-4">
|
|
<div class="bg-white rounded-circle p-2 me-3 shadow-sm text-primary d-flex align-items-center justify-content-center"
|
|
style="width: 45px; height: 45px;">
|
|
<i class="fas fa-store fs-5"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<p class="text-muted small mb-0 fw-bold text-uppercase" style="font-size: 0.7rem;">Dijual Oleh
|
|
</p>
|
|
<h6 class="fw-bold text-dark mb-0">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-success btn-sm rounded-pill px-3 fw-bold"
|
|
data-bs-toggle="modal" data-bs-target="#chatModal">
|
|
<i class="fab fa-whatsapp me-1"></i> Chat
|
|
</button>
|
|
</div>
|
|
|
|
{{-- FORM PEMBELIAN --}}
|
|
<form action="{{ route('cart.add') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="id" value="{{ $produk->id }}">
|
|
|
|
<div class="mb-4">
|
|
{{-- Input Jumlah --}}
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted text-uppercase mb-2">Atur Jumlah</label>
|
|
<div class="d-flex align-items-center">
|
|
<div class="input-group" style="max-width: 180px;">
|
|
<button type="button" class="btn btn-outline-primary" onclick="updateQty(-1)">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<input type="text" class="form-control text-center fw-bold bg-white"
|
|
id="display-qty" value="1" readonly>
|
|
<input type="hidden" name="qty" id="real-input-qty" value="1" min="1"
|
|
max="{{ $produk->stok }}">
|
|
<button type="button" class="btn btn-outline-primary" onclick="updateQty(1)">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="ms-3 small text-muted">
|
|
Stok: <span class="fw-bold text-dark">{{ $produk->stok }} Kg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tombol Aksi --}}
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary rounded-pill py-2 shadow-sm fw-bold fs-6"
|
|
style="height: 50px;">
|
|
<i class="fas fa-cart-plus me-2"></i> Masukkan Keranjang
|
|
</button>
|
|
<a href="javascript:void(0);" onclick="beliLangsung()"
|
|
class="btn btn-outline-dark rounded-pill py-2 border-2 fw-bold fs-6"
|
|
style="height: 50px; line-height: 32px;">
|
|
Beli Sekarang
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Footer Info --}}
|
|
<div class="d-flex gap-4 pt-3 border-top">
|
|
<div class="d-flex align-items-center text-muted small">
|
|
<i class="fas fa-truck me-2 text-primary"></i> Pengiriman Cepat
|
|
</div>
|
|
<div class="d-flex align-items-center text-muted small">
|
|
<i class="fas fa-shield-alt me-2 text-primary"></i> Produk Segar
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- BAGIAN PRODUK TERKAIT --}}
|
|
@if (isset($produk_terkait) && $produk_terkait->count() > 0)
|
|
<div class="mt-5 pt-4 border-top">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<h4 class="fw-bold m-0 text-dark">Produk Sejenis</h4>
|
|
<a href="{{ route('shop') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
|
|
Lihat Lainnya <i class="fas fa-arrow-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
@foreach ($produk_terkait as $produk)
|
|
<div class="col-6 col-md-3">
|
|
<a href="{{ route('produk.detail', $produk->id) }}" class="text-decoration-none">
|
|
<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 d-flex justify-content-between flex-column p-3">
|
|
<div>
|
|
<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>
|
|
|
|
<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>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- MODAL CHAT --}}
|
|
<div class="modal fade" id="chatModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg rounded-3">
|
|
<div class="modal-header bg-primary text-white border-0">
|
|
<h5 class="modal-title fw-semibold text-white">
|
|
<i class="fab fa-whatsapp me-2"></i>Hubungi Penjual
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<form action="{{ route('pesan.kirim') }}" method="POST">
|
|
@csrf
|
|
<div class="modal-body p-4">
|
|
<input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
|
|
<input type="hidden" name="penerima_type" value="App\Models\Petani">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Kepada:</label>
|
|
<input type="text" class="form-control"
|
|
value="{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}" readonly>
|
|
</div>
|
|
|
|
<div class="mb-0">
|
|
<label class="form-label fw-bold">Pesan Anda:</label>
|
|
<textarea name="isi_pesan" class="form-control" rows="4" required
|
|
placeholder="Contoh: Halo, apakah stok untuk produk {{ $produk->nama_produk }} masih tersedia?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0 px-4 pb-4 pt-0">
|
|
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary rounded-pill px-4">
|
|
<i class="fab fa-whatsapp me-2"></i>Kirim Pesan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script>
|
|
const hargaSatuan = {{ $produk->harga }};
|
|
|
|
function updateQty(change) {
|
|
let display = document.getElementById('display-qty');
|
|
let input = document.getElementById('real-input-qty');
|
|
let subtotalEl = document.getElementById('subtotal');
|
|
|
|
let currentVal = parseInt(input.value);
|
|
let newVal = currentVal + change;
|
|
let max = parseInt(input.getAttribute('max'));
|
|
|
|
if (newVal >= 1 && newVal <= max) {
|
|
input.value = newVal;
|
|
display.value = newVal;
|
|
|
|
// Update subtotal
|
|
let subtotal = newVal * hargaSatuan;
|
|
subtotalEl.textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
|
|
}
|
|
}
|
|
|
|
function beliLangsung() {
|
|
let qty = document.getElementById('real-input-qty').value;
|
|
let produkId = "{{ $produk->id }}";
|
|
window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
|
|
}
|
|
|
|
// FUNGSI GANTI GAMBAR GALERI
|
|
function changeImage(element) {
|
|
document.getElementById('main-image').src = element.src;
|
|
|
|
let thumbnails = document.querySelectorAll('.img-thumbnail');
|
|
thumbnails.forEach(img => {
|
|
img.classList.remove('border-primary', 'thumbnail-active');
|
|
img.classList.add('border-0', 'opacity-75');
|
|
img.style.borderWidth = '1px';
|
|
});
|
|
|
|
// Highlight thumbnail yang sedang aktif
|
|
element.classList.remove('border-0', 'opacity-75');
|
|
element.classList.add('border-primary', 'thumbnail-active');
|
|
element.style.borderWidth = '2px';
|
|
element.style.opacity = '1';
|
|
}
|
|
</script>
|
|
@endsection |