@extends('layouts.default')

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

@section('content')
<div class="font-sans min-h-screen flex flex-col relative bg-gray-900 text-white">

    {{-- VIBRANT BACKGROUND WITH DARK OVERLAY --}}
    <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-gray-900 opacity-60"></div>
    </div>

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

        {{-- ⚽ ENHANCED HERO HEADER SECTION ⚽ --}}
        <header class="text-center py-12 md:py-20 bg-black bg-opacity-30">
            <h1 class="text-7xl md:text-8xl font-black tracking-tighter leading-tight text-white drop-shadow-lg">
                <span class="text-[#FF4500]">Matchday</span> <span class="text-[#1E90CF]">Adrenaline</span>
            </h1>
            <p class="mt-4 text-xl font-light text-gray-300">Upcoming Matches! Secure your ticket now.</p>
        </header>

        {{-- VIBRANT SEARCH FORM --}}
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 w-full pb-10">
            <form action="{{ route('matches.search') }}" method="GET" class="w-full flex items-stretch justify-center shadow-2xl rounded-xl overflow-hidden">
                <input type="text" name="search" placeholder="Search by Home Team, Away Team, or Stadium" class="w-full p-5 text-gray-800 rounded-l-xl border-none focus:outline-none focus:ring-4 focus:ring-[#FF4500] transition duration-300" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
                <button type="submit" class="bg-gradient-to-r from-[#FF4500] to-red-600 text-white px-8 py-5 text-lg font-bold hover:from-red-600 hover:to-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-[#FF4500] focus:ring-offset-2 flex items-center justify-center space-x-3 rounded-r-xl" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                    <span>Search</span> <i class="fas fa-search"></i>
                </button>
            </form>
            @if(session('success'))
                <div class="bg-green-600 bg-opacity-80 text-white px-4 py-3 rounded-xl mt-4 shadow-lg">
                    {{ session('success') }}
                </div>
            @endif
        </div>
        @if(session('error'))
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-red-600 bg-opacity-80 text-white px-4 py-3 rounded-xl mb-4 shadow-lg">
                {{ session('error') }}
            </div>
        @endif

        <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="flex flex-wrap justify-center gap-8">
                @endif
                
                {{-- VIBRANT MATCH CARD DESIGN --}}
                <div class="w-full max-w-sm bg-gray-800 rounded-3xl shadow-2xl p-7 flex flex-col items-center text-center transform hover:scale-[1.05] transition duration-500 ease-in-out border-t-8 border-[#1E90CF] relative overflow-hidden">
                    
                    {{-- Match Details --}}
                    <div class="flex items-center justify-between w-full mb-6">
                        <div class="flex flex-col items-center w-5/12">
                            <img src="{{ asset('storage/' . $match->home_team_flag) }}" alt="{{ $match->home_team }}" class="h-24 w-24 object-contain rounded-full border-4 border-[#1E90CF] shadow-xl p-1">
                            <span class="mt-3 text-xl font-bold text-white tracking-wide">{{ $match->home_team }}</span>
                        </div>

                        {{-- Stylized VS with a dynamic icon --}}
                        <div class="flex flex-col items-center mx-4">
                            <i class="fas fa-bolt text-5xl text-[#FF4500] animate-pulse"></i>
                            <span class="text-2xl font-extrabold text-gray-400 mt-1">VS</span>
                        </div>

                        <div class="flex flex-col items-center w-5/12">
                            <img src="{{ asset('storage/' . $match->away_team_flag) }}" alt="{{ $match->away_team }}" class="h-24 w-24 object-contain rounded-full border-4 border-[#1E90CF] shadow-xl p-1">
                            <span class="mt-3 text-xl font-bold text-white tracking-wide">{{ $match->away_team }}</span>
                        </div>
                    </div>

                    {{-- Time and Location Block --}}
                    <div class="mt-4 w-full pt-4 text-gray-200 bg-gray-900 rounded-xl shadow-inner p-4 border border-gray-700">
                        <p class="text-4xl font-extrabold text-[#FF4500] tracking-wider">{{ $match->match_date->format('h:i A') }}</p>
                        <p class="text-lg font-semibold mt-1 text-gray-400">{{ $match->match_date->format('l, F j, Y') }}</p>
                        <p class="mt-3 text-lg font-medium text-gray-300 flex items-center justify-center space-x-2">
                            <i class="fas fa-map-marker-alt text-[#1E90CF]"></i>
                            <span>{{ $match->stadium }}</span>
                        </p>
                    </div>

                    {{-- Pricing Details --}}
                    <div class="mt-6 w-full pt-3">
                        <div class="flex justify-between items-center mb-3">
                            <p class="text-xl font-semibold text-gray-300">VIP Price:</p>
                            <span class="bg-yellow-500 text-gray-900 font-extrabold text-2xl py-1 px-3 rounded-full shadow-md">SSP {{ $match->vip_amount }}</span>
                        </div>
                        <div class="flex justify-between items-center mb-4">
                            <p class="text-xl font-semibold text-gray-300">1st Class Price:</p>
                            <span class="bg-gray-400 text-gray-900 font-extrabold text-2xl py-1 px-3 rounded-full shadow-md">SSP {{ $match->{'1st_class_amount'} }}</span>
                        </div>
                    </div>

                    
                    {{-- DYNAMIC AND VIBRANT CTA BUTTON --}}
                    @auth
                    <a href="{{ route('fans.fancreateticket') }}" class="w-full text-xl font-bold bg-gradient-to-r from-green-500 to-teal-500 text-white py-4 mt-4 rounded-xl shadow-lg hover:from-green-600 hover:to-teal-600 transition duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                        <i class="fas fa-ticket-alt mr-2"></i> Buy Ticket Now
                    </a>
                    @else
                    <a href="{{ route('fans.create') }}" class="w-full text-xl font-bold bg-gradient-to-r from-[#FF4500] to-red-600 text-white py-4 mt-4 rounded-xl shadow-lg hover:from-red-600 hover:to-red-700 transition duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                        <i class="fas fa-ticket-alt mr-2"></i> Buy Ticket Now
                    </a>
                    @endauth


                    <p class="mt-4 text-sm font-medium text-gray-500">Tickets now on sale at selected ticket centers.</p>
                    <a href="{{ route('fans.ticket-center-show') }}" class="text-sm text-[#1E90CF] hover:text-blue-400 font-semibold mt-1">See Centers <i class="fas fa-arrow-right ml-1"></i></a>
                </div>

                @if ($loop->last)
                    </div>
                @endif
            @empty
                <div class="flex flex-col items-center justify-center py-20">
                    <div class="bg-gray-800 rounded-3xl shadow-2xl p-16 text-center max-w-lg border-t-8 border-[#FF4500]">
                        <i class="fas fa-calendar-times text-7xl text-gray-500 mb-6"></i>
                        <h2 class="text-3xl font-bold text-white mb-3">No Matches Available</h2>
                        <p class="text-gray-400 text-lg">There are currently no upcoming matches scheduled. Please check back later for updates and prepare for the next season!</p>
                    </div>
                </div>
            @endforelse
        </main>
    </div>

    <footer class="w-full bg-black bg-opacity-50 text-center py-6 mt-auto border-t border-gray-700">
        <p class="text-gray-400 text-sm font-light">&copy; {{ date('Y') }} South Sudan Football Federation. Ticketing Portal. All Rights Reserved.</p>
    </footer>
</div>
@endsection