@props([
    'flashSales' => [],
    'showCountdown' => true
])

@if(count($flashSales) > 0)
<div class="bg-gradient-to-r from-red-600 to-orange-500 rounded-lg shadow-lg overflow-hidden">
    <div class="p-4">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <span class="text-2xl">⚡</span>
                <h3 class="text-xl font-bold text-white">Ventes Flash</h3>
            </div>
            <span class="bg-white/20 text-white text-xs px-3 py-1 rounded-full">
                {{ count($flashSales) }} offre(s) en cours
            </span>
        </div>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @foreach($flashSales as $sale)
            <div class="bg-white rounded-lg p-4 shadow-md">
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <h4 class="font-semibold text-gray-900">{{ $sale->name }}</h4>
                        @if($sale->description)
                        <p class="text-sm text-gray-600">{{ Str::limit($sale->description, 60) }}</p>
                        @endif
                    </div>
                    <span class="bg-red-100 text-red-600 text-lg font-bold px-3 py-1 rounded-lg">
                        -{{ $sale->value }}%
                    </span>
                </div>

                @if($showCountdown && $sale->ends_at)
                <div x-data="countdown('{{ $sale->ends_at->toISOString() }}')" class="mt-3">
                    <p class="text-xs text-gray-500 mb-2">Temps restant:</p>
                    <div class="flex gap-2">
                        <div class="bg-gray-900 text-white rounded px-2 py-1 text-center min-w-[40px]">
                            <span class="text-lg font-bold" x-text="hours"></span>
                            <span class="text-xs block">h</span>
                        </div>
                        <div class="bg-gray-900 text-white rounded px-2 py-1 text-center min-w-[40px]">
                            <span class="text-lg font-bold" x-text="minutes"></span>
                            <span class="text-xs block">min</span>
                        </div>
                        <div class="bg-gray-900 text-white rounded px-2 py-1 text-center min-w-[40px]">
                            <span class="text-lg font-bold" x-text="seconds"></span>
                            <span class="text-xs block">sec</span>
                        </div>
                    </div>
                </div>
                @endif

                @if($sale->min_purchase)
                <p class="text-xs text-gray-500 mt-2">
                    Minimum d'achat: {{ number_format($sale->min_purchase, 0, ',', ' ') }} FCFA
                </p>
                @endif
            </div>
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
function countdown(endDate) {
    return {
        hours: '00',
        minutes: '00',
        seconds: '00',
        expired: false,
        
        init() {
            this.updateCountdown();
            setInterval(() => this.updateCountdown(), 1000);
        },
        
        updateCountdown() {
            const end = new Date(endDate).getTime();
            const now = new Date().getTime();
            const distance = end - now;
            
            if (distance < 0) {
                this.expired = true;
                this.hours = '00';
                this.minutes = '00';
                this.seconds = '00';
                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);
            
            this.hours = String(days * 24 + hours).padStart(2, '0');
            this.minutes = String(minutes).padStart(2, '0');
            this.seconds = String(seconds).padStart(2, '0');
        }
    };
}
</script>
@endpush
@endif
