@extends('layouts.default')

@section('title', 'Upcoming Matches | Ticketing Portal')

@section('content')
<div class="font-sans min-h-screen flex flex-col relative bg-gradient-to-br from-gray-900 via-blue-900 to-gray-900">

    <!-- Animated background pattern -->
    <div class="absolute inset-0 h-full w-full bg-cover bg-center bg-no-repeat bg-fixed opacity-20" style="background-image: url('{{ asset('storage/imgs/ssff_ticket_bg.jpg') }}');">
        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-blue-900/30 to-gray-900/50"></div>
    </div>

    <!-- Animated floating elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 left-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-10 w-96 h-96 bg-green-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
    </div>

    <div class="relative z-10 flex flex-col flex-grow">
        @include('layouts.nav')

        <!-- Hero Header with Animation -->
        <header class="text-center py-12 px-4">
            <div class="inline-block animate-fade-in">
                <h1 class="text-6xl md:text-7xl font-extrabold tracking-tighter leading-tight bg-gradient-to-r from-white via-blue-100 to-green-100 bg-clip-text text-transparent mb-3">
                    Upcoming Matches
                </h1>
                <div class="h-1 w-32 mx-auto bg-gradient-to-r from-blue-500 via-green-500 to-blue-500 rounded-full animate-pulse"></div>
            </div>
            <p class="mt-4 text-gray-300 text-lg font-light">Buy official tickets for all SSFF League, Bright Stars, and domestic cup matches.! 🎟️⚽</p>
        </header>

        <!-- Enhanced Search Section -->
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 w-full pb-12">
            <form action="{{ route('matches.search') }}" method="GET" class="w-full">
                <div class="relative group">
                    <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-green-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-300"></div>
                    <div class="relative flex items-center bg-white rounded-lg shadow-2xl overflow-hidden">
                        <input type="text" 
                               name="search" 
                               placeholder="Search for a match eg Home Team, Away Team" 
                               class="w-full p-5 text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-0 text-lg">
                        <button type="submit" 
                                class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-5 hover:from-blue-700 hover:to-blue-800 transition duration-300 flex items-center justify-center space-x-2 group">
                            <span class="font-semibold">Search</span> 
                            <i class="fas fa-search group-hover:scale-110 transition-transform duration-300"></i>
                        </button>
                    </div>
                </div>
            </form>

            @if(session('success'))
                <div class="mt-4 bg-gradient-to-r from-green-500 to-green-600 text-white px-6 py-4 rounded-lg shadow-lg animate-slide-down">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mt-4 bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-4 rounded-lg shadow-lg animate-slide-down">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                </div>
            @endif
        </div>

        <!-- Match Cards Section -->
        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full pb-20">
            @forelse ($upcomingMatches as $match)
                @if ($loop->first)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @endif
                
                <div class="group bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-2xl overflow-hidden transform hover:scale-105 hover:-rotate-1 transition-all duration-300 ease-out border-2 border-transparent hover:border-blue-400 animate-fade-in-up" style="animation-delay: {{ $loop->index * 0.1 }}s;">
                    
                    <!-- Ticket Corner Ribbon -->
                    <div class="absolute top-0 right-0 bg-gradient-to-br from-red-500 to-red-600 text-white px-4 py-2 rounded-bl-2xl shadow-lg z-10">
                        <i class="fas fa-ticket-alt mr-1"></i>
                        <span class="text-xs font-bold">ON SALE</span>
                    </div>

                    <div class="p-6">
                        <!-- Teams Section with Enhanced Styling -->
                        <div class="flex items-center justify-between w-full mb-6 relative">
                            <div class="flex flex-col items-center w-5/12 transform group-hover:scale-110 transition-transform duration-300">
                                <div class="relative">
                                    <div class="absolute inset-0 bg-blue-400 rounded-full blur-xl opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
                                    <img src="{{ asset('storage/' . $match->home_team_flag) }}" 
                                         alt="{{ $match->home_team }}" 
                                         class="relative h-24 w-24 object-contain rounded-full border-4 border-blue-400 shadow-xl bg-white p-2">
                                </div>
                                <span class="mt-3 text-lg font-bold text-gray-800 text-center leading-tight">{{ $match->home_team }}</span>
                                <span class="text-xs text-gray-500 uppercase tracking-wide">Home</span>
                            </div>

                            <!-- VS Badge with Animation -->
                            <div class="flex flex-col items-center mx-2">
                                <div class="bg-gradient-to-br from-red-500 to-red-600 text-white rounded-full h-16 w-16 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-500">
                                    <span class="text-xl font-black">VS</span>
                                </div>
                            </div>

                            <div class="flex flex-col items-center w-5/12 transform group-hover:scale-110 transition-transform duration-300">
                                <div class="relative">
                                    <div class="absolute inset-0 bg-green-400 rounded-full blur-xl opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
                                    <img src="{{ asset('storage/' . $match->away_team_flag) }}" 
                                         alt="{{ $match->away_team }}" 
                                         class="relative h-24 w-24 object-contain rounded-full border-4 border-green-400 shadow-xl bg-white p-2">
                                </div>
                                <span class="mt-3 text-lg font-bold text-gray-800 text-center leading-tight">{{ $match->away_team }}</span>
                                <span class="text-xs text-gray-500 uppercase tracking-wide">Away</span>
                            </div>
                        </div>

                        <!-- Match Details with Icons -->
                        <div class="mt-6 pt-6 border-t-2 border-gray-200">
                            <div class="bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl p-4 mb-4">
                                <div class="flex items-center justify-center mb-2">
                                    <i class="fas fa-clock text-blue-600 mr-2"></i>
                                    <p class="text-3xl font-black text-blue-600">{{ $match->match_date->format('h:i A') }}</p>
                                </div>
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-calendar-alt text-gray-600 mr-2 text-sm"></i>
                                    <p class="text-sm font-semibold text-gray-700">{{ $match->match_date->format('l, F j, Y') }}</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-center text-gray-600 bg-gray-100 rounded-lg py-2 px-3">
                                <i class="fas fa-map-marker-alt text-red-500 mr-2"></i>
                                <p class="text-sm font-semibold">{{ $match->stadium }}</p>
                            </div>
                        </div>

                        <!-- Pricing Section with Enhanced Design -->
                        <div class="mt-6 pt-6 border-t-2 border-gray-200 space-y-3">
                            <div class="bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-lg p-4 border-l-4 border-yellow-500">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-crown text-yellow-600 mr-2"></i>
                                        <span class="text-sm font-semibold text-gray-700">VIP Tickets</span>
                                    </div>
                                    <span class="text-xl font-black text-yellow-700">SSP {{ $match->vip_amount }}</span>
                                </div>
                            </div>
                            
                            <div class="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-4 border-l-4 border-blue-500">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-star text-blue-600 mr-2"></i>
                                        <span class="text-sm font-semibold text-gray-700">1st Class Tickets</span>
                                    </div>
                                    <span class="text-xl font-black text-blue-700">SSP {{ $match->{'1st_class_amount'} }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- CTA Button with Enhanced Design -->
                        <div class="mt-6">
                            @auth
                            <a href="{{ route('fans.fancreateticket') }}" 
                               class="block w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white text-center font-bold py-4 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-300 group">
                                <i class="fas fa-ticket-alt mr-2 group-hover:animate-bounce"></i>
                                Buy Tickets Now
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform duration-300"></i>
                            </a>
                            @else
                            <a href="{{ route('fans.create') }}" 
                               class="block w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white text-center font-bold py-4 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-300 group">
                                <i class="fas fa-ticket-alt mr-2 group-hover:animate-bounce"></i>
                                Buy Tickets Now
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform duration-300"></i>
                            </a>
                            @endauth

                            <div class="mt-4 text-center">
                                <p class="text-xs text-gray-500 mb-2">
                                    <i class="fas fa-store mr-1"></i>
                                    Available at selected ticket centers
                                </p>
                                <a href="{{ route('fans.ticket-center-show') }}" 
                                   class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800 font-semibold hover:underline">
                                    <i class="fas fa-map-marked-alt mr-1"></i>
                                    Find Ticket Centers
                                    <i class="fas fa-chevron-right ml-1 text-xs"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($loop->last)
                    </div>
                @endif
            @empty
                <div class="flex flex-col items-center justify-center py-20">
                    <div class="bg-gradient-to-br from-white to-gray-100 rounded-2xl shadow-2xl p-12 text-center max-w-md border-2 border-gray-200">
                        <div class="bg-gradient-to-br from-gray-100 to-gray-200 rounded-full w-32 h-32 flex items-center justify-center mx-auto mb-6">
                            <i class="fas fa-calendar-times text-6xl text-gray-400"></i>
                        </div>
                        <h2 class="text-3xl font-bold text-gray-800 mb-3">No Matches Available</h2>
                        <p class="text-gray-600 text-lg leading-relaxed">There are currently no upcoming matches scheduled. Check back soon for exciting new fixtures! ⚽</p>
                        <div class="mt-6">
                            <a href="{{ route('fans.ticket-center-show') }}" 
                               class="inline-block bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-300 transform hover:scale-105">
                                <i class="fas fa-bell mr-2"></i>
                                Get Notified
                            </a>
                        </div>
                    </div>
                </div>
            @endforelse
        </main>
    </div>

    <!-- Enhanced Footer -->
    <footer class="relative z-10 w-full bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-center py-6 mt-auto border-t border-gray-700">
        <div class="flex items-center justify-center space-x-2 mb-2">
            <i class="fas fa-futbol text-green-500 animate-spin-slow"></i>
            <p class="text-white text-sm font-light">South Sudan Football Federation</p>
            <i class="fas fa-futbol text-blue-500 animate-spin-slow"></i>
        </div>
        <p class="text-gray-400 text-xs">&copy; {{ date('Y') }} All rights reserved. Ticketing Portal.</p>
    </footer>
</div>

<style>
@keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out;
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
    opacity: 0;
}

.animate-slide-down {
    animation: slide-down 0.4s ease-out;
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}
</style>
@endsection