495 lines
22 KiB
PHP
495 lines
22 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Home - Shop Bibit Cabai Bondowoso')
|
|
|
|
@section('styles')
|
|
<style>
|
|
/* ── Hero Section ───────────────────────────── */
|
|
.hero-image {
|
|
max-height: 400px;
|
|
object-fit: cover;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
width: 100%;
|
|
}
|
|
|
|
/* Mobile: gambar naik ke atas, teks di bawah */
|
|
@media (max-width: 767.98px) {
|
|
.hero-section {
|
|
text-align: center;
|
|
padding-top: 30px !important;
|
|
padding-bottom: 30px !important;
|
|
}
|
|
.hero-img-col {
|
|
order: -1;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-image {
|
|
max-height: 200px;
|
|
border-radius: 10px;
|
|
}
|
|
.hero-section h1 {
|
|
font-size: 1.8rem !important;
|
|
}
|
|
.hero-section p.lead {
|
|
font-size: 0.95rem;
|
|
}
|
|
.hero-section .btn {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
/* ── Product Card ───────────────────────────── */
|
|
.product-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: none;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
|
|
}
|
|
.product-image {
|
|
height: 250px;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
.product-card:hover .product-image {
|
|
transform: scale(1.05);
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.product-image {
|
|
height: 150px;
|
|
}
|
|
.card-body {
|
|
padding: 10px;
|
|
}
|
|
.card-title {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
}
|
|
|
|
.badge-bestseller {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 15px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
z-index: 2;
|
|
box-shadow: 0 2px 10px rgba(238, 90, 36, 0.3);
|
|
}
|
|
|
|
.price-text {
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
color: #28a745;
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.price-text {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 6px !important;
|
|
}
|
|
/* Sembunyikan teks "Terjual" di mobile agar tidak penuh */
|
|
.sold-label { display: none; }
|
|
/* Quantity input lebih kecil */
|
|
.quantity-input { width: 40px !important; font-size: 0.85rem; }
|
|
.input-group .btn { padding: 4px 8px; font-size: 0.8rem; }
|
|
.btn { font-size: 0.8rem; }
|
|
/* Section title */
|
|
.display-5 { font-size: 1.4rem !important; }
|
|
/* Feature icon lebih kecil */
|
|
.feature-icon-circle { width: 56px !important; height: 56px !important; }
|
|
.feature-icon-circle .fa-2x { font-size: 1.2rem !important; }
|
|
}
|
|
|
|
.quantity-input {
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-fluid p-0">
|
|
<!-- Hero Section -->
|
|
<section class="bg-success text-white py-5 hero-section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<h1 class="display-4 fw-bold mb-4">Bibit Cabai Berkualitas</h1>
|
|
<p class="lead mb-4">Dapatkan bibit cabai terbaik dari Bondowoso untuk hasil panen yang optimal.</p>
|
|
<a href="{{ route('products.best-selling') }}" class="btn btn-light btn-lg">
|
|
<i class="fas fa-fire me-2"></i>Lihat Produk Terlaris
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-12 text-center hero-img-col">
|
|
<img src="{{ asset('images/bara f1.jpeg') }}"
|
|
alt="Bibit Cabai"
|
|
class="img-fluid hero-image"
|
|
onerror="this.src='https://via.placeholder.com/400x300/28a745/ffffff?text=Bibit+Cabai+Hero'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Produk Terlaris Section -->
|
|
<section class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="display-5 fw-bold text-success">BIBIT TERLARIS</h2>
|
|
<p class="lead text-muted">Produk pilihan petani Bondowoso</p>
|
|
</div>
|
|
|
|
@if($featuredProducts->count() > 0)
|
|
<div class="row g-4">
|
|
@foreach($featuredProducts as $product)
|
|
<div class="col-lg-4 col-md-6 col-6">
|
|
<div class="card product-card h-100 position-relative">
|
|
@if($product->total_sold > 0)
|
|
<div class="badge-bestseller">
|
|
<i class="fas fa-fire"></i> Terlaris
|
|
</div>
|
|
@endif
|
|
|
|
<div class="overflow-hidden">
|
|
<img src="{{ $product->image ? asset('storage/' . $product->image) : 'https://via.placeholder.com/300x250/28a745/ffffff?text=' . urlencode($product->name) }}"
|
|
class="card-img-top product-image"
|
|
alt="{{ $product->name }}"
|
|
loading="lazy"
|
|
onerror="this.src='https://via.placeholder.com/300x250/28a745/ffffff?text={{ urlencode($product->name) }}'">
|
|
</div>
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">{{ $product->name }}</h5>
|
|
<div class="price-text mb-3">Rp {{ number_format($product->price, 0, ',', '.') }}</div>
|
|
|
|
@if($product->total_sold > 0)
|
|
<small class="text-muted mb-3 sold-label">
|
|
<i class="fas fa-chart-line me-1"></i>
|
|
Terjual: {{ number_format($product->total_sold) }} bibit
|
|
</small>
|
|
@endif
|
|
|
|
<div class="mt-auto">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<small class="text-muted">
|
|
<i class="fas fa-boxes me-1"></i>
|
|
Stok: {{ number_format($product->stock) }}
|
|
</small>
|
|
@if($product->stock > 0)
|
|
<span class="badge bg-success">Tersedia</span>
|
|
@else
|
|
<span class="badge bg-danger">Habis</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($product->stock > 0)
|
|
<div class="input-group mb-3">
|
|
<button class="btn btn-outline-success" type="button" onclick="decreaseQty({{ $product->id }})">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<input type="number" class="form-control quantity-input" id="qty-{{ $product->id }}" value="1" min="1" max="{{ $product->stock }}">
|
|
<button class="btn btn-outline-success" type="button" onclick="increaseQty({{ $product->id }}, {{ $product->stock }})">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="btn btn-success w-100" onclick="checkout({{ $product->id }})">
|
|
<i class="fas fa-shopping-cart me-1"></i>
|
|
Beli Sekarang
|
|
</button>
|
|
<a href="{{ route('products.show', $product->id) }}" class="btn btn-outline-success w-100 mt-2">
|
|
<i class="fas fa-eye me-1"></i>
|
|
Lihat Detail Produk
|
|
</a>
|
|
@else
|
|
<button class="btn btn-secondary w-100" disabled>
|
|
<i class="fas fa-ban me-1"></i>
|
|
Stok Habis
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="text-center mt-5">
|
|
<a href="{{ route('products.best-selling') }}" class="btn btn-outline-success btn-lg">
|
|
Lihat Semua Produk Terlaris <i class="fas fa-arrow-right ms-2"></i>
|
|
</a>
|
|
</div>
|
|
@else
|
|
<div class="text-center">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Belum ada data penjualan. Produk terlaris akan muncul setelah ada transaksi.
|
|
</div>
|
|
|
|
<!-- Sample Products Placeholder -->
|
|
<div class="row g-4 mt-4">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card product-card h-100">
|
|
<img src="https://via.placeholder.com/300x250/28a745/ffffff?text=Bibit+Cabai+Merah"
|
|
class="card-img-top product-image"
|
|
alt="Sample Product">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Bibit Cabai Merah (Sample)</h5>
|
|
<div class="price-text mb-3">Rp 15.000</div>
|
|
<button class="btn btn-secondary w-100" disabled>
|
|
<i class="fas fa-shopping-cart me-1"></i>Sample Product
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Semua Produk Section -->
|
|
<section class="py-5 bg-white">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<h2 class="display-5 fw-bold text-success">SEMUA PRODUK</h2>
|
|
<p class="lead text-muted">Pilihan lengkap bibit cabai kami</p>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
@foreach($allProducts as $product)
|
|
<div class="col-lg-4 col-md-6 col-6">
|
|
<div class="card product-card h-100 position-relative">
|
|
<div class="overflow-hidden">
|
|
<img src="{{ $product->image ? asset('storage/' . $product->image) : 'https://via.placeholder.com/300x250/28a745/ffffff?text=' . urlencode($product->name) }}"
|
|
class="card-img-top product-image"
|
|
alt="{{ $product->name }}"
|
|
loading="lazy">
|
|
</div>
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">{{ $product->name }}</h5>
|
|
<div class="price-text mb-3">Rp {{ number_format($product->price, 0, ',', '.') }}</div>
|
|
|
|
<div class="mt-auto">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<small class="text-muted">
|
|
<i class="fas fa-boxes me-1"></i>
|
|
Stok: {{ number_format($product->stock) }}
|
|
</small>
|
|
@if($product->stock > 0)
|
|
<span class="badge bg-success">Tersedia</span>
|
|
@else
|
|
<span class="badge bg-danger">Habis</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($product->stock > 0)
|
|
<div class="input-group mb-3">
|
|
<button class="btn btn-outline-success" type="button" onclick="decreaseQty('all-{{ $product->id }}')">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<input type="number" class="form-control quantity-input" id="qty-all-{{ $product->id }}" value="1" min="1" max="{{ $product->stock }}">
|
|
<button class="btn btn-outline-success" type="button" onclick="increaseQty('all-{{ $product->id }}', {{ $product->stock }})">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="btn btn-success w-100" onclick="checkoutAll({{ $product->id }}, 'all-{{ $product->id }}')">
|
|
<i class="fas fa-shopping-cart me-1"></i>
|
|
Beli Sekarang
|
|
</button>
|
|
<a href="{{ route('products.show', $product->id) }}" class="btn btn-outline-success w-100 mt-2">
|
|
<i class="fas fa-eye me-1"></i>
|
|
Lihat Detail Produk
|
|
</a>
|
|
@else
|
|
<button class="btn btn-secondary w-100" disabled>
|
|
<i class="fas fa-ban me-1"></i>
|
|
Stok Habis
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-5 bg-white">
|
|
<div class="container">
|
|
<div class="row g-4">
|
|
<div class="col-lg-3 col-md-6 col-6">
|
|
<div class="text-center">
|
|
<div class="bg-success text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center feature-icon-circle" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-seedling fa-2x"></i>
|
|
</div>
|
|
<h5>Bibit Berkualitas</h5>
|
|
<p class="text-muted">Bibit pilihan dengan kualitas terjamin dan hasil optimal.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-6">
|
|
<div class="text-center">
|
|
<div class="bg-success text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center feature-icon-circle" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-truck fa-2x"></i>
|
|
</div>
|
|
<h5>Pengiriman Cepat</h5>
|
|
<p class="text-muted">Pengiriman ke seluruh kabupaten Bondowoso dengan packaging aman.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-6">
|
|
<div class="text-center">
|
|
<div class="bg-success text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center feature-icon-circle" style="width: 80px; height: 80px;">
|
|
<i class="fas fa-headset fa-2x"></i>
|
|
</div>
|
|
<h5>Support 24/7</h5>
|
|
<p class="text-muted">Tim support siap membantu Anda kapan saja.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Modal Konfirmasi Alamat -->
|
|
<div class="modal fade" id="addressModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-map-marker-alt me-2"></i>Pilih Alamat Pengiriman
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="savedAddressSection">
|
|
<div class="alert alert-success">
|
|
<i class="fas fa-user-check me-2"></i>
|
|
<strong>Gunakan data yang tersimpan?</strong>
|
|
</div>
|
|
<div class="card border-success mb-3">
|
|
<div class="card-body">
|
|
<p class="mb-1"><i class="fas fa-user me-2 text-success"></i><span id="savedName">-</span></p>
|
|
<p class="mb-1"><i class="fas fa-phone me-2 text-success"></i><span id="savedPhone">-</span></p>
|
|
<p class="mb-1"><i class="fas fa-envelope me-2 text-success"></i><span id="savedEmail">-</span></p>
|
|
<p class="mb-0"><i class="fas fa-map-marker-alt me-2 text-success"></i><span id="savedAddress">-</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-success" id="useSavedAddressBtn">
|
|
<i class="fas fa-check-circle me-2"></i>Ya, Gunakan Data Ini
|
|
</button>
|
|
<button class="btn btn-outline-secondary" id="useNewAddressBtn">
|
|
<i class="fas fa-plus-circle me-2"></i>Gunakan Alamat Baru
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="noSavedAddressSection" style="display:none;">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Belum ada data tersimpan. Anda akan mengisi form checkout secara manual.
|
|
</div>
|
|
<div class="d-grid">
|
|
<button class="btn btn-success" id="continueNewBtn">
|
|
<i class="fas fa-arrow-right me-2"></i>Lanjut ke Checkout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const isLoggedIn = @json(auth()->check());
|
|
const loginUrl = "{{ route('login') }}";
|
|
|
|
let pendingProductId = null;
|
|
let pendingQtyKey = null;
|
|
let savedUserData = null;
|
|
|
|
function increaseQty(productId, maxStock) {
|
|
const input = document.getElementById('qty-' + productId);
|
|
let value = parseInt(input.value);
|
|
if (value < maxStock) input.value = value + 1;
|
|
}
|
|
|
|
function decreaseQty(productId) {
|
|
const input = document.getElementById('qty-' + productId);
|
|
let value = parseInt(input.value);
|
|
if (value > 1) input.value = value - 1;
|
|
}
|
|
|
|
function openAddressModal(productId, qtyKey) {
|
|
if (!isLoggedIn) {
|
|
window.location.href = loginUrl;
|
|
return;
|
|
}
|
|
pendingProductId = productId;
|
|
pendingQtyKey = qtyKey;
|
|
|
|
fetch("{{ route('checkout.last-address') }}")
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
savedUserData = data;
|
|
const hasData = data.name || data.address;
|
|
|
|
if (hasData) {
|
|
document.getElementById('savedName').textContent = data.name || '-';
|
|
document.getElementById('savedPhone').textContent = data.phone || '-';
|
|
document.getElementById('savedEmail').textContent = data.email || '-';
|
|
document.getElementById('savedAddress').textContent =
|
|
[data.address, data.city, data.postal_code].filter(Boolean).join(', ') || '-';
|
|
|
|
document.getElementById('savedAddressSection').style.display = 'block';
|
|
document.getElementById('noSavedAddressSection').style.display = 'none';
|
|
} else {
|
|
document.getElementById('savedAddressSection').style.display = 'none';
|
|
document.getElementById('noSavedAddressSection').style.display = 'block';
|
|
}
|
|
|
|
new bootstrap.Modal(document.getElementById('addressModal')).show();
|
|
})
|
|
.catch(() => {
|
|
goToCheckout(false);
|
|
});
|
|
}
|
|
|
|
function goToCheckout(useSaved) {
|
|
const qty = document.getElementById('qty-' + pendingQtyKey).value;
|
|
let url = `/checkout?product_id=${pendingProductId}&quantity=${qty}`;
|
|
if (useSaved) url += '&use_saved=1';
|
|
|
|
const modalEl = document.getElementById('addressModal');
|
|
const modal = bootstrap.Modal.getInstance(modalEl);
|
|
if (modal) modal.hide();
|
|
|
|
window.location.href = url;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementById('useSavedAddressBtn')?.addEventListener('click', () => goToCheckout(true));
|
|
document.getElementById('useNewAddressBtn')?.addEventListener('click', () => goToCheckout(false));
|
|
document.getElementById('continueNewBtn')?.addEventListener('click', () => goToCheckout(false));
|
|
});
|
|
|
|
function checkout(productId) {
|
|
openAddressModal(productId, productId);
|
|
}
|
|
|
|
function checkoutAll(productId, inputKey) {
|
|
openAddressModal(productId, inputKey);
|
|
}
|
|
</script>
|
|
@endsection |