199 lines
10 KiB
PHP
199 lines
10 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', $produk->nama_produk)
|
|
|
|
@section('content')
|
|
|
|
<div class="container-fluid bg-light py-3 mb-4">
|
|
<div class="container">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-muted text-decoration-none">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a href="{{ route('shop') }}"
|
|
class="text-muted text-decoration-none">Belanja</a></li>
|
|
<li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $produk->nama_produk }}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container pb-5">
|
|
<div class="row g-5">
|
|
<div class="col-lg-6">
|
|
<div class="rounded-4 overflow-hidden shadow-sm border position-relative bg-white">
|
|
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
|
class="img-fluid w-100" style="object-fit: cover; max-height: 500px;"
|
|
alt="{{ $produk->nama_produk }}">
|
|
|
|
<div class="position-absolute top-0 start-0 m-3">
|
|
@if ($produk->stok > 0)
|
|
<span class="badge bg-primary shadow-sm px-3 py-2 rounded-pill">Stok Tersedia</span>
|
|
@else
|
|
<span class="badge bg-danger shadow-sm px-3 py-2 rounded-pill">Stok Habis</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="h-100 d-flex flex-column justify-content-center">
|
|
|
|
<div class="mb-2">
|
|
<span
|
|
class="badge bg-light text-dark border border-secondary text-uppercase px-3 py-2 rounded-pill fw-bold">
|
|
{{ $produk->kategori ?? 'Hasil Tani' }}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="fw-bold display-6 text-dark mb-2">{{ $produk->nama_produk }}</h1>
|
|
|
|
<div class="mb-4">
|
|
<h2 class="fw-bold text-primary display-5 mb-0">
|
|
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
|
<span class="fs-6 text-muted fw-normal">/ kg</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<p class="text-secondary mb-4" style="line-height: 1.8; font-size: 1.05rem;">
|
|
{{ $produk->deskripsi }}
|
|
</p>
|
|
|
|
<div class="d-flex align-items-center bg-white border rounded-4 p-3 mb-4 shadow-sm">
|
|
<div class="bg-light rounded-circle p-2 me-3 d-flex align-items-center justify-content-center text-primary"
|
|
style="width: 50px; height: 50px;">
|
|
<i class="fas fa-user-tie fs-4"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<p class="mb-0 text-muted small">Dijual oleh:</p>
|
|
<h6 class="mb-0 fw-bold text-dark">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3"
|
|
data-bs-toggle="modal" data-bs-target="#chatModal">
|
|
<i class="fas fa-comment-dots me-1"></i> Chat
|
|
</button>
|
|
</div>
|
|
|
|
<form action="{{ route('cart.add') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="id" value="{{ $produk->id }}">
|
|
|
|
<div class="d-flex align-items-center mb-4 flex-wrap gap-3">
|
|
<div class="input-group shadow-sm" style="width: 140px;">
|
|
<button type="button" class="btn btn-light border" onclick="updateQty(-1)">
|
|
<i class="fa fa-minus small"></i>
|
|
</button>
|
|
<input type="number" name="qty" id="input-qty"
|
|
class="form-control text-center bg-white border-top border-bottom border-0"
|
|
value="1" min="1" max="{{ $produk->stok }}" readonly>
|
|
<button type="button" class="btn btn-light border" onclick="updateQty(1)">
|
|
<i class="fa fa-plus small"></i>
|
|
</button>
|
|
</div>
|
|
<span class="text-muted small">
|
|
Sisa Stok: <strong class="text-dark">{{ $produk->stok }} Kg</strong>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 d-sm-flex">
|
|
<button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm flex-grow-1">
|
|
<i class="fa fa-shopping-basket me-2"></i> + Keranjang
|
|
</button>
|
|
|
|
<a href="javascript:void(0);" onclick="beliLangsung()"
|
|
class="btn btn-outline-secondary btn-lg rounded-pill px-4 flex-grow-1">
|
|
Beli Langsung
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (isset($produk_terkait) && count($produk_terkait) > 0)
|
|
<div class="mt-5 pt-5 border-top">
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<h3 class="fw-bold m-0 text-dark">Produk Sejenis</h3>
|
|
<a href="{{ route('shop') }}" class="text-primary text-decoration-none fw-bold small">
|
|
Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
@foreach ($produk_terkait as $related)
|
|
<div class="col-6 col-md-3">
|
|
<a href="{{ route('produk.detail', $related->id) }}" class="text-decoration-none">
|
|
<div class="card h-100 border-0 shadow-sm overflow-hidden rounded-4">
|
|
<div class="position-relative">
|
|
<img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
|
class="card-img-top" style="height: 200px; object-fit: cover;"
|
|
alt="{{ $related->nama_produk }}">
|
|
</div>
|
|
<div class="card-body p-3">
|
|
<h6 class="fw-bold text-dark mb-1 text-truncate">{{ $related->nama_produk }}</h6>
|
|
<p class="text-primary fw-bold mb-0">Rp
|
|
{{ number_format($related->harga, 0, ',', '.') }}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="modal fade" id="chatModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg rounded-4">
|
|
<div class="modal-header bg-primary text-white border-0 rounded-top-4">
|
|
<h5 class="modal-title fw-bold">Hubungi Petani</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></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 small text-muted text-uppercase">Pesan Anda</label>
|
|
<textarea name="isi_pesan" class="form-control bg-light border-0 rounded-3 p-3" rows="4" required
|
|
placeholder="Halo, saya tertarik dengan produk ini..."></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 shadow-sm">
|
|
<i class="fas fa-paper-plane me-2"></i> Kirim Pesan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('js')
|
|
<script>
|
|
// Fungsi untuk update input number
|
|
function updateQty(change) {
|
|
let input = document.getElementById('input-qty');
|
|
let newVal = parseInt(input.value) + change;
|
|
let max = parseInt(input.getAttribute('max'));
|
|
|
|
if (newVal >= 1 && newVal <= max) {
|
|
input.value = newVal;
|
|
}
|
|
}
|
|
|
|
// Redirect dengan membawa QTY
|
|
function beliLangsung() {
|
|
let qty = document.getElementById('input-qty').value;
|
|
let produkId = "{{ $produk->id }}";
|
|
window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
|
|
}
|
|
</script>
|
|
@endsection
|