@extends('layouts.default')

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

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

    <div class="absolute inset-0 h-full w-full bg-cover bg-center bg-no-repeat bg-fixed opacity-10" style="background-image: url('{{ asset('storage/imgs/ssff_ticket_bg.jpg') }}');">
        <div class="absolute inset-0 bg-gray-900 opacity-10"></div>
    </div>

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

        <header class="text-center py-6">
            <h1 class="text-6xl font-extrabold tracking-tighter leading-tight">Upcoming Matches</h1>
        </header>

        {{-- add search form --}}
        <div class="max-w-4xl mx-auto px-2 sm:px-6 lg:px-4 w-full pb-20">
            <form action="{{ route('matches.search') }}" method="GET" class="w-full flex items-center justify-center">
                <input type="text" name="search" placeholder="Search for a match eg Home Team, Away Team" class="w-full p-4 rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <button type="submit" class="bg-blue-500 text-white px-4 py-4 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center space-x-2">
                    <span>Search</span> <i class="fas fa-search"></i>
                </button>
            </form>
            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif
        </div>
        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        <main class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-4 w-full pb-20">
            @forelse ($upcomingMatches as $match)
                @if ($loop->first)
                    <div class="flex flex-wrap justify-between gap-5">
                @endif
                
                <div class="w-full max-w-sm bg-white rounded-xl shadow-2xl p-6 flex flex-col items-center text-center transform hover:-translate-y-2 transition duration-300 ease-in-out border border-gray-200 mt-2">
                    <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-20 w-20 object-contain rounded-lg border-2 border-indigo-100 shadow-md">
                            <span class="mt-2 text-lg font-semibold text-gray-800">{{ $match->home_team }}</span>
                        </div>

                        <span class="text-3xl font-bold text-black mx-4">VS</span>

                        <div class="flex flex-col items-center w-5/12">
                            <img src="{{ asset('storage/' . $match->away_team_flag) }}" alt="{{ $match->away_team }}" class="h-20 w-20 object-contain rounded-lg border-2 border-indigo-100 shadow-md">
                            <span class="mt-2 text-lg font-semibold text-gray-800">{{ $match->away_team }}</span>
                        </div>
                    </div>

                    <div class="mt-4 w-full border-t border-gray-200 pt-4 text-gray-700">
                        <p class="text-3xl font-bold text-[#1E90CF]">{{ $match->match_date->format('h:i A') }}</p>
                        <p class="text-md font-medium mt-1 text-gray-600">{{ $match->match_date->format('l, F j, Y') }}</p>
                        <p class="mt-2 text-md font-medium text-gray-500">{{ $match->stadium }}</p>
                    </div>

                    <div class="mt-4 w-full border-t border-gray-800 pt-2">
                        <p class="mb-2 text-xl text-black">SSP {{ $match->vip_amount }} VIP Price</p>
                        <p class="mb-2 text-xl text-black">SSP {{ $match->{'1st_class_amount'} }} 1st Class Price</p>
                    </div>

                    
                    @auth
                    <a href="{{ route('fans.fancreateticket') }}" class="text-sm text-blue-600 font-semibold bg-red-300 rounded-sm border-solid border-red-300 px-2 py-1">Buy Ticket</a>
                    @else
                    <a href="{{ route('fans.create') }}" class="text-sm text-blue-600 font-semibold bg-red-300 rounded-sm border-solid border-red-300 px-2 py-1">Buy Ticket</a>
                    @endauth


                    <p class="mt-2 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-blue-600 hover:text-blue-800">See Centers</a>
                </div>

                @if ($loop->last)
                    </div>
                @endif
            @empty
                <div class="flex flex-col items-center justify-center py-20">
                    <div class="bg-white rounded-xl shadow-lg p-12 text-center max-w-md">
                        <i class="fas fa-calendar-times text-6xl text-gray-400 mb-4"></i>
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">No Matches Available</h2>
                        <p class="text-gray-600">There are currently no upcoming matches scheduled. Please check back later for updates.</p>
                    </div>
                </div>
            @endforelse
        </main>
    </div>

    <footer class="w-full bg-gray-800 text-center py-4 mt-auto">
        <p class="text-white text-sm font-light">&copy; {{ date('Y') }} South Sudan Football Federation. Ticketing Portal.</p>
    </footer>
</div>
@endsection