271 lines
8.9 KiB
PHP
271 lines
8.9 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Produk Terlaris - Shop Bibit Cabai Bondowoso')
|
|
|
|
@section('content')
|
|
<div class="container py-5">
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 fw-bold text-success">
|
|
<i class="fas fa-fire text-warning me-3"></i>BIBIT TERLARIS
|
|
</h1>
|
|
<p class="lead text-muted">Bibit cabai paling diminati petani di Bondowoso</p>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
@if(isset($statistics) && $statistics['total_products_sold'] > 0)
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-4">
|
|
<div class="stats-card text-center">
|
|
<i class="fas fa-seedling fa-2x mb-3"></i>
|
|
<h3>{{ number_format($statistics['total_products_sold']) }}</h3>
|
|
<p class="mb-0">Total Bibit Terjual</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="stats-card text-center">
|
|
<i class="fas fa-shopping-bag fa-2x mb-3"></i>
|
|
<h3>{{ number_format($statistics['total_completed_orders']) }}</h3>
|
|
<p class="mb-0">Pesanan Selesai</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="stats-card text-center">
|
|
<i class="fas fa-crown fa-2x mb-3"></i>
|
|
<h3>{{ $statistics['most_popular_product']->name ?? 'Belum Ada' }}</h3>
|
|
<p class="mb-0">Produk Terpopuler</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Products Grid -->
|
|
@if($bestSellingProducts->count() > 0)
|
|
<div class="row g-4">
|
|
@foreach($bestSellingProducts as $index => $product)
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card product-card h-100 shadow-sm">
|
|
<!-- Ranking Badge untuk Top 3 -->
|
|
@if($index < 3)
|
|
<div class="position-absolute top-0 start-0 m-2" style="z-index: 10;">
|
|
<span class="badge badge-ranking">
|
|
<i class="fas fa-trophy me-1"></i>#{{ $index + 1 }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Badge Terjual -->
|
|
<div class="position-absolute top-0 end-0 m-2" style="z-index: 10;">
|
|
<span class="badge bg-danger">
|
|
<i class="fas fa-fire"></i> {{ number_format($product->total_sold) }} terjual
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Product Image -->
|
|
<img src="{{ asset('storage/' . $product->image) }}"
|
|
class="card-img-top"
|
|
alt="{{ $product->name }}"
|
|
style="height: 250px; object-fit: cover;">
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<!-- Product Name -->
|
|
<h5 class="card-title mb-2">{{ $product->name }}</h5>
|
|
|
|
<!-- Price -->
|
|
<div class="price-tag mb-3">
|
|
Rp {{ number_format($product->price, 0, ',', '.') }}
|
|
</div>
|
|
|
|
<!-- Stock Info -->
|
|
<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>
|
|
<span class="badge {{ $product->stock > 0 ? 'bg-success' : 'bg-danger' }}">
|
|
{{ $product->stock > 0 ? 'Tersedia' : 'Habis' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Sales Statistics -->
|
|
<div class="sales-info mb-3 p-2 bg-light rounded">
|
|
<small class="d-flex justify-content-between">
|
|
<span><i class="fas fa-chart-line me-1 text-success"></i>{{ number_format($product->total_sold) }} terjual</span>
|
|
<span><i class="fas fa-users me-1 text-primary"></i>{{ number_format($product->total_orders) }} pembeli</span>
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Quantity Form -->
|
|
<div class="mt-auto">
|
|
@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 text-center"
|
|
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>
|
|
@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>
|
|
@else
|
|
<!-- No Data State -->
|
|
<div class="text-center py-5">
|
|
<div class="mb-4">
|
|
<i class="fas fa-chart-line fa-5x text-muted"></i>
|
|
</div>
|
|
<h3 class="text-muted mb-3">Belum Ada Produk Terlaris</h3>
|
|
<p class="text-muted mb-4">
|
|
Produk terlaris akan muncul setelah ada transaksi yang selesai.<br>
|
|
Saat ini belum ada produk yang terjual.
|
|
</p>
|
|
<a href="{{ route('home') }}" class="btn btn-success">
|
|
<i class="fas fa-home me-2"></i>Kembali ke Beranda
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.product-card {
|
|
border: none;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
|
|
}
|
|
|
|
.badge-ranking {
|
|
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
|
color: #000;
|
|
font-weight: bold;
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.price-tag {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #28a745;
|
|
}
|
|
|
|
.stats-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.stats-card i {
|
|
color: #28a745;
|
|
}
|
|
|
|
.stats-card h3 {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.stats-card p {
|
|
color: #6c757d;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.sales-info {
|
|
border-left: 3px solid #28a745;
|
|
}
|
|
|
|
.quantity-input {
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.quantity-input::-webkit-outer-spin-button,
|
|
.quantity-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.quantity-input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.display-4 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.stats-card h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.price-tag {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
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 checkout(productId) {
|
|
const quantity = document.getElementById('qty-' + productId).value;
|
|
window.location.href = `/checkout?product_id=${productId}&quantity=${quantity}`;
|
|
}
|
|
</script>
|
|
@endpush |