451 lines
19 KiB
PHP
451 lines
19 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('content')
|
|
<div class="container px-4 py-4 mx-auto">
|
|
|
|
<!-- Statistics Cards (Condensed)
|
|
<div class="grid grid-cols-2 gap-4 mb-8 md:grid-cols-4">
|
|
<div class="p-4 bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center">
|
|
<div class="p-2 text-blue-600 bg-blue-100 rounded-full">
|
|
<i class="text-xl fas fa-box"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">Total Barang</p>
|
|
<h3 class="text-lg font-bold text-gray-800">{{ $totalBarang }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center">
|
|
<div class="p-2 text-green-600 bg-green-100 rounded-full">
|
|
<i class="text-xl fas fa-shopping-cart"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">Total Pesanan</p>
|
|
<h3 class="text-lg font-bold text-gray-800">{{ $totalPesanan }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center">
|
|
<div class="p-2 text-yellow-600 bg-yellow-100 rounded-full">
|
|
<i class="text-xl fas fa-clock"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">Pesanan Pending</p>
|
|
<h3 class="text-lg font-bold text-gray-800">{{ $pesananPending }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center">
|
|
<div class="p-2 text-purple-600 bg-purple-100 rounded-full">
|
|
<i class="text-xl fas fa-money-bill-wave"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-xs text-gray-500">Total Transaksi</p>
|
|
<h3 class="text-lg font-bold text-gray-800">{{ $totalTransaksi }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
{{-- Promotions Slider / Banner
|
|
@if($banners->count() > 0)
|
|
<div class="mb-8">
|
|
<div class="bg-white shadow-sm rounded-xl">
|
|
<div class="relative w-full">
|
|
<!-- Carousel wrapper -->
|
|
<div class="relative h-56 overflow-hidden rounded-lg md:h-64" id="carouselContainer">
|
|
@foreach($banners as $key => $banner)
|
|
<div class="absolute w-full h-full carousel-item" id="slide-{{ $key }}" style="display: {{ $key === 0 ? 'block' : 'none' }};">
|
|
<a href="{{ $banner->url ?? '#' }}">
|
|
<img src="{{ Storage::url($banner->gambar) }}" class="object-cover w-full h-full" alt="{{ $banner->judul }}">
|
|
<div class="absolute bottom-0 left-0 right-0 px-4 py-3 bg-gradient-to-t from-black/70 to-transparent">
|
|
<!-- <h3 class="font-bold text-white">{{ $banner->judul }}</h3> -->
|
|
@if($banner->deskripsi)
|
|
<p class="text-sm text-white">{{ $banner->deskripsi }}</p>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Indicators and Controls -->
|
|
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
|
|
@foreach($banners as $key => $banner)
|
|
<button type="button" class="w-3 h-3 rounded-full bg-white/50" id="indicator-{{ $key }}" onclick="showSlide({{ $key }})"></button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer focus:outline-none" onclick="changeSlide(-1)">
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 hover:bg-white/50">
|
|
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
|
|
</svg>
|
|
<span class="sr-only">Previous</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer focus:outline-none" onclick="changeSlide(1)">
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 hover:bg-white/50">
|
|
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
|
</svg>
|
|
<span class="sr-only">Next</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fungsi carousel sederhana
|
|
let currentSlideIndex = 0;
|
|
const totalSlides = {{ $banners->count() }};
|
|
|
|
function showSlide(n) {
|
|
// Sembunyikan semua slide
|
|
const slides = document.querySelectorAll('.carousel-item');
|
|
const indicators = document.querySelectorAll('[id^="indicator-"]');
|
|
|
|
// Sembunyikan semua slide
|
|
for (let i = 0; i < slides.length; i++) {
|
|
slides[i].style.display = "none";
|
|
indicators[i].classList.remove('bg-white');
|
|
indicators[i].classList.add('bg-white/50');
|
|
}
|
|
|
|
// Reset index jika diluar range
|
|
currentSlideIndex = n;
|
|
if (currentSlideIndex >= slides.length) {
|
|
currentSlideIndex = 0;
|
|
}
|
|
if (currentSlideIndex < 0) {
|
|
currentSlideIndex = slides.length - 1;
|
|
}
|
|
|
|
// Tampilkan slide aktif
|
|
slides[currentSlideIndex].style.display = "block";
|
|
indicators[currentSlideIndex].classList.remove('bg-white/50');
|
|
indicators[currentSlideIndex].classList.add('bg-white');
|
|
|
|
console.log('Menampilkan slide:', currentSlideIndex);
|
|
}
|
|
|
|
function changeSlide(n) {
|
|
showSlide(currentSlideIndex + n);
|
|
}
|
|
|
|
// Auto-rotate slides setiap 5 detik
|
|
let slideInterval = setInterval(function() {
|
|
changeSlide(1);
|
|
}, 5000);
|
|
|
|
// Inisialisasi slide pertama
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
showSlide(0);
|
|
});
|
|
</script>
|
|
@else
|
|
<div class="mb-8">
|
|
<div class="p-4 bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center justify-center h-48 bg-gray-200 rounded-lg">
|
|
<p class="text-gray-500">Banner Produk Baru</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
--}}
|
|
|
|
|
|
|
|
<!-- Product Categories -->
|
|
<!-- <h2 class="mb-4 text-xl font-bold text-gray-800">Kategori Populer</h2>
|
|
<div class="grid grid-cols-4 gap-4 mb-8 md:grid-cols-8">
|
|
<a href="#" class="flex flex-col items-center">
|
|
<div class="flex items-center justify-center w-12 h-12 mb-2 bg-yellow-100 rounded-full">
|
|
<i class="text-yellow-600 fas fa-lightbulb"></i>
|
|
</div>
|
|
<span class="text-xs text-center">Lampu</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center">
|
|
<div class="flex items-center justify-center w-12 h-12 mb-2 bg-blue-100 rounded-full">
|
|
<i class="text-blue-600 fas fa-fan"></i>
|
|
</div>
|
|
<span class="text-xs text-center">Kipas</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center">
|
|
<div class="flex items-center justify-center w-12 h-12 mb-2 bg-teal-100 rounded-full">
|
|
<i class="text-teal-600 fas fa-snowflake"></i>
|
|
</div>
|
|
<span class="text-xs text-center">Kulkas</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex flex-col items-center">
|
|
<div class="flex items-center justify-center w-12 h-12 mb-2 bg-purple-100 rounded-full">
|
|
<i class="text-purple-600 fas fa-tv"></i>
|
|
</div>
|
|
<span class="text-xs text-center">TV</span>
|
|
</a>
|
|
</div> -->
|
|
|
|
<!-- Product Grid -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-bold text-gray-800">Produk Terbaru</h2>
|
|
<a href="{{ route('barang.index') }}" class="text-[#2C7A7B] hover:underline">Lihat Semua</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-8 md:grid-cols-3 lg:grid-cols-5">
|
|
@forelse(App\Models\Barang::latest()->take(10)->get() as $barang)
|
|
<div class="overflow-hidden transition-transform bg-white shadow-sm rounded-xl hover:scale-105">
|
|
<a href="{{ route('barang.show', $barang) }}">
|
|
<div class="h-40 overflow-hidden">
|
|
@if($barang->gambar)
|
|
<img class="object-cover w-full h-full"
|
|
src="{{ Storage::url($barang->gambar) }}"
|
|
alt="{{ $barang->nama_barang }}">
|
|
@else
|
|
<div class="flex items-center justify-center w-full h-full bg-gray-200">
|
|
<i class="text-3xl text-gray-400 fas fa-image"></i>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="p-3">
|
|
<h3 class="text-sm font-medium text-gray-800 line-clamp-2">{{ $barang->nama }}</h3>
|
|
<p class="text-[#2C7A7B] font-bold mt-2">Rp {{ number_format($barang->harga, 0, ',', '.') }}</p>
|
|
<div class="flex items-center mt-2">
|
|
<i class="text-xs text-yellow-400 fas fa-star"></i>
|
|
<span class="ml-1 text-xs text-gray-500">| Terjual {{ rand(0, 0) }}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@empty
|
|
<div class="p-8 text-center bg-white col-span-full rounded-xl">
|
|
<i class="mb-3 text-5xl text-gray-300 fas fa-box-open"></i>
|
|
<p class="text-gray-500">Belum ada produk yang tersedia</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Recent Orders (Condensed) -->
|
|
<!-- <div class="overflow-hidden bg-white shadow-sm rounded-xl">
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<h2 class="text-lg font-semibold text-gray-800">Pesanan Terbaru</h2>
|
|
<a href="{{ route('pesanan.index') }}" class="text-sm text-[#2C7A7B] hover:underline">Lihat Semua</a>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-xs font-medium text-left text-gray-500 uppercase">Produk</th>
|
|
<th class="px-4 py-3 text-xs font-medium text-left text-gray-500 uppercase">Status</th>
|
|
<th class="px-4 py-3 text-xs font-medium text-left text-gray-500 uppercase">Total</th>
|
|
<th class="px-4 py-3 text-xs font-medium text-right text-gray-500 uppercase">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@forelse($pesanan->take(3) as $item)
|
|
<tr>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
@if($item->barang->gambar)
|
|
<img class="object-cover w-8 h-8 rounded-md"
|
|
src="{{ Storage::url($item->barang->gambar) }}"
|
|
alt="{{ $item->barang->nama_barang }}">
|
|
@endif
|
|
<div class="ml-3">
|
|
<div class="text-xs font-medium text-gray-900 line-clamp-1">{{ $item->barang->nama }}</div>
|
|
<div class="text-xs text-gray-500">{{ $item->jumlah }} unit</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ $item->status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
|
($item->status === 'diproses' ? 'bg-blue-100 text-blue-800' :
|
|
($item->status === 'dikirim' ? 'bg-purple-100 text-purple-800' :
|
|
($item->status === 'selesai' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'))) }}">
|
|
{{ ucfirst($item->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-xs whitespace-nowrap">
|
|
<div class="font-medium text-gray-900">Rp {{ number_format($item->total_harga, 0, ',', '.') }}</div>
|
|
<div class="text-gray-500">{{ $item->created_at->format('d M Y') }}</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-xs font-medium text-right whitespace-nowrap">
|
|
<a href="{{ route('pesanan.show', $item) }}" class="text-[#2C7A7B] hover:text-[#1D5354]">Detail</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="px-4 py-3 text-sm text-center text-gray-500">
|
|
Tidak ada pesanan terbaru
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
|
|
{{-- Script untuk banner carousel
|
|
<script>
|
|
// Variabel global untuk carousel
|
|
let currentBannerIndex = 0;
|
|
const totalBanners = {{ $banners->count() }}; // Jumlah banner dari server
|
|
let bannerInterval;
|
|
|
|
// Fungsi untuk menampilkan slide tertentu
|
|
function showBannerSlide(index) {
|
|
console.log('Menampilkan slide:', index);
|
|
|
|
// Sembunyikan semua slide
|
|
const slides = document.querySelectorAll('.banner-slide');
|
|
slides.forEach(slide => {
|
|
slide.style.opacity = '0';
|
|
slide.style.zIndex = '0';
|
|
});
|
|
|
|
// Nonaktifkan semua indikator
|
|
const indicators = document.querySelectorAll('.banner-indicator');
|
|
indicators.forEach(indicator => {
|
|
indicator.classList.remove('bg-white');
|
|
indicator.classList.add('bg-white/50');
|
|
});
|
|
|
|
// Tampilkan slide yang aktif
|
|
if (slides[index]) {
|
|
slides[index].style.opacity = '1';
|
|
slides[index].style.zIndex = '10';
|
|
}
|
|
|
|
// Aktifkan indikator yang sesuai
|
|
if (indicators[index]) {
|
|
indicators[index].classList.remove('bg-white/50');
|
|
indicators[index].classList.add('bg-white');
|
|
}
|
|
|
|
// Update index saat ini
|
|
currentBannerIndex = index;
|
|
|
|
// Reset interval otomatis
|
|
clearInterval(bannerInterval);
|
|
startBannerInterval();
|
|
}
|
|
|
|
// Fungsi untuk slide berikutnya
|
|
function nextBannerSlide() {
|
|
console.log('Ke slide berikutnya');
|
|
const nextIndex = (currentBannerIndex + 1) % totalBanners;
|
|
showBannerSlide(nextIndex);
|
|
}
|
|
|
|
// Fungsi untuk slide sebelumnya
|
|
function prevBannerSlide() {
|
|
console.log('Ke slide sebelumnya');
|
|
const prevIndex = (currentBannerIndex - 1 + totalBanners) % totalBanners;
|
|
showBannerSlide(prevIndex);
|
|
}
|
|
|
|
// Fungsi untuk memulai interval otomatis
|
|
function startBannerInterval() {
|
|
bannerInterval = setInterval(function() {
|
|
nextBannerSlide();
|
|
}, 5000);
|
|
}
|
|
|
|
// Bind fungsi ke window untuk akses global
|
|
window.showBannerSlide = showBannerSlide;
|
|
window.nextBannerSlide = nextBannerSlide;
|
|
window.prevBannerSlide = prevBannerSlide;
|
|
|
|
// Inisialisasi saat DOM sudah siap
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM loaded, initializing carousel');
|
|
console.log('Total banners:', totalBanners);
|
|
|
|
// Tambahkan event listener untuk tombol
|
|
document.getElementById('next-banner-button').addEventListener('click', nextBannerSlide);
|
|
document.getElementById('prev-banner-button').addEventListener('click', prevBannerSlide);
|
|
|
|
// Tambahkan event listener untuk indikator
|
|
document.querySelectorAll('.banner-indicator').forEach(function(indicator, index) {
|
|
indicator.addEventListener('click', function() {
|
|
showBannerSlide(index);
|
|
});
|
|
});
|
|
|
|
// Mulai dengan slide pertama
|
|
showBannerSlide(0);
|
|
|
|
// Mulai rotasi otomatis jika ada lebih dari 1 banner
|
|
if (totalBanners > 1) {
|
|
startBannerInterval();
|
|
}
|
|
|
|
// Countdown timer for flash sale
|
|
const countdownElements = document.querySelectorAll('.countdown');
|
|
|
|
function updateCountdowns() {
|
|
countdownElements.forEach(element => {
|
|
const endTime = parseInt(element.getAttribute('data-end')) * 1000;
|
|
const now = new Date().getTime();
|
|
const distance = endTime - now;
|
|
|
|
if (distance < 0) {
|
|
element.innerHTML = 'Flash Sale Berakhir';
|
|
return;
|
|
}
|
|
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
element.innerHTML = `Berakhir dalam: ${hours}j ${minutes}m ${seconds}d`;
|
|
});
|
|
}
|
|
|
|
if (countdownElements.length > 0) {
|
|
updateCountdowns();
|
|
setInterval(updateCountdowns, 1000);
|
|
}
|
|
|
|
// Set progress bar width
|
|
document.querySelectorAll('.progress-bar').forEach(bar => {
|
|
const width = bar.getAttribute('data-width');
|
|
bar.style.width = width + '%';
|
|
});
|
|
});
|
|
</script>
|
|
--}}
|
|
@endpush
|
|
|
|
@push('styles')
|
|
{{-- Style untuk carousel
|
|
<style>
|
|
/* Carousel classes */
|
|
.banner-slide {
|
|
z-index: 10;
|
|
opacity: 1;
|
|
}
|
|
|
|
.banner-slide.hidden {
|
|
z-index: 0;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
--}}
|
|
@endpush |