@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