@extends(auth()->check() ? 'layouts.dasht' : 'layouts.base')
@section('content')
<div class="max-w-7xl mx-auto">
    {{-- Page Header --}}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Tesla Giveaways</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Win exclusive prizes — cars, cash, and investment credits</p>
    </div>

    {{-- Featured Giveaway Hero --}}
    @if($featured)
    <div class="mb-10 bg-gradient-to-br from-primary-600 to-primary-800 rounded-2xl overflow-hidden shadow-xl">
        <div class="grid grid-cols-1 md:grid-cols-2">
            @if($featured->image)
            <div class="relative">
                <img src="{{ asset('dash/' . $featured->image) }}" alt="{{ $featured->title }}" class="w-full h-64 md:h-80 object-cover">
                <div class="absolute top-4 left-4">
                    <span class="px-3 py-1 bg-yellow-400 text-yellow-900 text-xs font-bold rounded-full uppercase">Featured</span>
                </div>
            </div>
            @endif
            <div class="p-8 flex flex-col justify-center text-white {{ !$featured->image ? 'md:col-span-2' : '' }}">
                <h2 class="text-2xl md:text-3xl font-bold mb-3">{{ $featured->title }}</h2>
                @if($featured->prize_description)
                    <p class="text-white/80 mb-4">{{ $featured->prize_description }}</p>
                @endif
                <div class="flex flex-wrap gap-4 mb-6">
                    <div>
                        <div class="text-2xl font-bold">${{ number_format($featured->prize_value, 2) }}</div>
                        <div class="text-sm text-white/70">Prize Value</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold">{{ $featured->days_remaining }}</div>
                        <div class="text-sm text-white/70">Days Left</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold">{{ $featured->entry_count }}</div>
                        <div class="text-sm text-white/70">Entries</div>
                    </div>
                </div>
                <a href="{{ route('giveaways.show', $featured) }}" class="inline-block px-6 py-3 bg-white text-primary-600 font-bold rounded-xl hover:bg-gray-100 transition-colors w-fit">
                    View Details
                </a>
            </div>
        </div>
    </div>
    @endif

    {{-- Active Giveaways --}}
    @if($activeGiveaways->isNotEmpty())
    <div class="mb-10">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Active Giveaways</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($activeGiveaways as $giveaway)
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
                {{-- Image --}}
                <div class="relative">
                    @if($giveaway->image)
                        <img src="{{ asset('dash/' . $giveaway->image) }}" alt="{{ $giveaway->title }}" class="w-full h-48 object-cover">
                    @else
                        <div class="w-full h-48 bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900/30 dark:to-primary-800/30 flex items-center justify-center">
                            <i data-lucide="gift" class="w-16 h-16 text-primary-300 dark:text-primary-600"></i>
                        </div>
                    @endif
                    {{-- Prize type badge --}}
                    <div class="absolute top-3 right-3">
                        @switch($giveaway->prize_type)
                            @case('car')
                                <span class="px-2 py-1 bg-blue-500 text-white text-xs font-bold rounded-full">Car</span>
                                @break
                            @case('cash')
                                <span class="px-2 py-1 bg-green-500 text-white text-xs font-bold rounded-full">Cash</span>
                                @break
                            @case('investment_credit')
                                <span class="px-2 py-1 bg-purple-500 text-white text-xs font-bold rounded-full">Investment</span>
                                @break
                            @default
                                <span class="px-2 py-1 bg-gray-500 text-white text-xs font-bold rounded-full">Prize</span>
                        @endswitch
                    </div>
                </div>

                {{-- Content --}}
                <div class="p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">{{ $giveaway->title }}</h3>
                    <div class="text-primary-500 font-bold text-lg mb-3">${{ number_format($giveaway->prize_value, 2) }}</div>

                    {{-- Progress bar --}}
                    @if($giveaway->max_entries)
                        <div class="mb-3">
                            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                                <span>{{ $giveaway->entries_count }} entries</span>
                                <span>{{ $giveaway->max_entries }} max</span>
                            </div>
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                <div class="bg-primary-500 h-2 rounded-full" style="width: {{ min(100, ($giveaway->entries_count / $giveaway->max_entries) * 100) }}%"></div>
                            </div>
                        </div>
                    @else
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-3">{{ $giveaway->entries_count }} entries · Unlimited spots</div>
                    @endif

                    {{-- Days remaining --}}
                    <div class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 mb-3">
                        <i data-lucide="clock" class="w-4 h-4"></i>
                        <span>{{ $giveaway->days_remaining }} days left</span>
                    </div>

                    {{-- Eligibility badge --}}
                    @auth
                        @if(isset($entered[$giveaway->id]) && $entered[$giveaway->id])
                            <span class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-xs font-medium rounded-full mb-3">
                                <i data-lucide="check-circle" class="w-3 h-3 inline mr-1"></i> Entered
                            </span>
                        @elseif(isset($eligibility[$giveaway->id]) && $eligibility[$giveaway->id]['eligible'])
                            <span class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 text-xs font-medium rounded-full mb-3">
                                You're Eligible
                            </span>
                        @elseif(isset($eligibility[$giveaway->id]))
                            @switch($giveaway->entry_requirement)
                                @case('vip_only')
                                    <span class="inline-block px-3 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 text-xs font-medium rounded-full mb-3">VIP Required</span>
                                    @break
                                @case('purchase_required')
                                    <span class="inline-block px-3 py-1 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-xs font-medium rounded-full mb-3">Purchase Required</span>
                                    @break
                                @case('vip_and_purchase')
                                    <span class="inline-block px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs font-medium rounded-full mb-3">VIP + Purchase Required</span>
                                    @break
                            @endswitch
                        @endif
                    @endauth

                    <a href="{{ route('giveaways.show', $giveaway) }}" class="block w-full text-center px-4 py-2.5 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition-colors">
                        View Details
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Upcoming Giveaways --}}
    @if($upcomingGiveaways->isNotEmpty())
    <div class="mb-10">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Upcoming Giveaways</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($upcomingGiveaways as $giveaway)
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden opacity-80">
                <div class="relative">
                    @if($giveaway->image)
                        <img src="{{ asset('dash/' . $giveaway->image) }}" alt="{{ $giveaway->title }}" class="w-full h-48 object-cover grayscale-[30%]">
                    @else
                        <div class="w-full h-48 bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                            <i data-lucide="gift" class="w-16 h-16 text-gray-300 dark:text-gray-600"></i>
                        </div>
                    @endif
                </div>
                <div class="p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">{{ $giveaway->title }}</h3>
                    <div class="text-primary-500 font-bold mb-3">${{ number_format($giveaway->prize_value, 2) }}</div>
                    <div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 mb-3">
                        <i data-lucide="calendar" class="w-4 h-4"></i>
                        <span>Starting {{ $giveaway->starts_at->diffForHumans() }}</span>
                    </div>
                    <button disabled class="block w-full text-center px-4 py-2.5 bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded-lg font-medium cursor-not-allowed">
                        Coming Soon
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Empty State --}}
    @if($activeGiveaways->isEmpty() && $upcomingGiveaways->isEmpty())
    <div class="text-center py-20">
        <i data-lucide="gift" class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4"></i>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No Active Giveaways</h3>
        <p class="text-gray-500 dark:text-gray-400">Check back soon for exciting new giveaways!</p>
    </div>
    @endif
</div>
<script>
    if (typeof lucide !== 'undefined') lucide.createIcons();
</script>
@endsection
