@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>

        <main class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-4 w-full pb-20">
            <div class="flex flex-wrap justify-between gap-5"> <!-- Increased gap to 10 for medium spacing -->
                @foreach ($upcomingMatches as $match)
                    <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">
                        <div class="flex items-center justify-between w-full mb-6">
                            <div class="flex flex-col items-center w-5/12">
                                <img src="{{ asset($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($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-2xl text-black">SSP {{ $match->amount }}</p>
                        </div>

                        <!-- <a href="#" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            Get Ticket
                        </a> -->
                        <p class="mt-2 text-sm font-medium text-gray-500">Tickets now on sale at selected ticket centers.</p><a href="#" class="text-sm text-blue-600 hover:text-blue-800"> See Centers</a>
                    </div>
                @endforeach
            </div>
        </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