@extends('layouts.app')

@push('styles')
<style>
    .countdown-timer {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin: 2rem 0;
    }
    .countdown-item {
        text-align: center;
        background: white;
        padding: 1rem;
        border-radius: 0.75rem;
        min-width: 80px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .countdown-value {
        display: block;
        font-size: 2rem;
        font-weight: 800;
        color: #0C951E;
        line-height: 1;
    }
    .countdown-label {
        display: block;
        font-size: 0.75rem;
        color: #6B7280;
        margin-top: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
</style>
@endpush

@section('content')
<div class="mb-6">
    <div class="bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl p-8 text-white text-center">
        <h1 class="text-4xl font-black mb-2">⚡ FLASH SALE ⚡</h1>
        <p class="text-xl opacity-90">Diskon Hingga 50%!</p>
        
        @if($flashSale && $flashSale->end_time)
        <div class="countdown-timer" id="countdown">
            <div class="countdown-item">
                <span class="countdown-value" id="days">00</span>
                <span class="countdown-label">Hari</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-value" id="hours">00</span>
                <span class="countdown-label">Jam</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-value" id="minutes">00</span>
                <span class="countdown-label">Menit</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-value" id="seconds">00</span>
                <span class="countdown-label">Detik</span>
            </div>
        </div>
        @endif
    </div>
</div>

@if($products->count() > 0)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    @foreach($products as $product)
    <div class="bg-white rounded-xl overflow-hidden hover:shadow-xl transition-all border border-gray-100 group relative">
        <!-- Flash Sale Badge -->
        <div class="absolute top-3 left-3 z-10">
            <div class="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold animate-pulse">
                FLASH SALE
            </div>
        </div>

        <!-- Discount Badge -->
        @if($product->discount_price && $product->discount_price < $product->price)
        <div class="absolute top-3 right-3 z-10">
            <div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-black">
                -{{ round((($product->price - $product->discount_price) / $product->price) * 100) }}%
            </div>
        </div>
        @endif

        <!-- Product Image -->
        <div class="aspect-square bg-gradient-to-br from-gray-100 to-gray-200 relative overflow-hidden">
            @if($product->brand && $product->brand->image_url)
            <img src="{{ $product->brand->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
            <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 hidden items-center justify-center">
                <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            @else
            <div class="absolute inset-0 w-full h-full flex items-center justify-center">
                <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            @endif
        </div>

        <!-- Product Info -->
        <div class="p-4">
            @if($product->brand)
            <p class="text-xs text-gray-500 mb-1">{{ $product->brand->brand }}</p>
            @endif
            <h3 class="font-semibold text-gray-900 mb-2 line-clamp-2">{{ $product->name }}</h3>
            
            <!-- Price -->
            <div class="mb-3">
                @if($product->discount_price && $product->discount_price < $product->price)
                <div class="flex items-baseline gap-2">
                    <span class="text-sm text-gray-400 line-through">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                </div>
                <p class="text-xl font-bold text-red-600">Rp {{ number_format($product->discount_price, 0, ',', '.') }}</p>
                @else
                <p class="text-xl font-bold text-[#0C951E]">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
                @endif
            </div>

            <!-- Stock Info -->
            @if(isset($product->stock) && $product->stock > 0)
            <div class="mb-3">
                <div class="flex items-center justify-between text-xs mb-1">
                    <span class="text-gray-500">Stok tersisa</span>
                    <span class="font-semibold text-red-600">{{ $product->stock }} item</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-1.5">
                    <div class="bg-red-500 h-1.5 rounded-full" style="width: {{ min(($product->stock / 100) * 100, 100) }}%"></div>
                </div>
            </div>
            @endif

            <!-- Buy Button -->
            <a href="{{ route('orders.checkout', ['slug' => $product->brand->slug ?? 'unknown', 'product_id' => $product->id]) }}" 
               class="block w-full py-2.5 bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white rounded-lg font-bold text-center transition-all">
                Beli Sekarang
            </a>
        </div>
    </div>
    @endforeach
</div>
@else
<div class="text-center py-16">
    <svg class="w-24 h-24 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <h3 class="text-2xl font-bold text-gray-900 mb-2">Flash Sale Belum Dimulai</h3>
    <p class="text-gray-500 mb-6">Nantikan flash sale berikutnya untuk penawaran menarik!</p>
    <a href="{{ route('home') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-[#0C951E] hover:bg-[#0a7d18] text-white rounded-lg font-medium transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Kembali ke Home
    </a>
</div>
@endif

@push('scripts')
@if($flashSale && $flashSale->end_time)
<script>
    const endTime = new Date('{{ $flashSale->end_time }}').getTime();

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = endTime - now;

        if (distance < 0) {
            document.getElementById('countdown').innerHTML = '<p class="text-white text-xl font-bold">Flash Sale Telah Berakhir</p>';
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        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);

        document.getElementById('days').textContent = String(days).padStart(2, '0');
        document.getElementById('hours').textContent = String(hours).padStart(2, '0');
        document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
</script>
@endif
@endpush
@endsection