@include(FilamentCms::getViewPrefix() . '.partials.header')
@include(FilamentCms::getViewPrefix() . '.partials.navigation')

<!-- Tour Dates Section -->
<section id="tour-dates" class="bg-gray-900/60 flex items-center justify-center pt-26 px-4 pb-10 md:pb-44 md:pb-58">

    <div class="container mx-auto max-w-4xl h-full">
        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-9 glow-text">
            <span class="hidden md:block">{{ fcms__('content-tour-dates.title') }}</span>
            <span class="md:hidden">{{ fcms__('content-tour-dates.mobile-title') }}</span>
        </h1>
        <!-- Desktop: Table Layout -->
        <div class="hidden md:block bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border mb-7">
            <table class="w-full border border-gray-800 rounded-lg overflow-hidden">
                <thead class="bg-gray-900 text-blue-400 uppercase text-sm">
                <tr>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.date') }}</th>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.location') }}</th>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.event') }}</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                @foreach(array_slice(fcms__('content-tour-dates.dates'),0 ,6) as $tourDate)
                    <tr class="hover:bg-sky-800 transition @if(new DateTime() > new DateTime($tourDate['date'])) bg-gray-800 text-gray-400  @endif">
                        <td class="py-3 px-4 align-top">{{ $tourDate['date'] }}</td>
                        <td class="py-3 px-4 align-top">{!! $tourDate['location'] !!}</td>
                        <td class="py-3 px-4 align-top">{!! $tourDate['event'] !!}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="text-sm text-gray-500 mt-5 ml-5">
                <a href="{{ droute('tour-dates-archive') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.to-archive.title') }}">
                    {{ fcms__('content-tour-dates.to-archive.text') }}
                </a>
            </div>
        </div>

        <!-- MOBILE: Cards Layout -->
        <div class="block md:hidden bg-gray-800/50 backdrop-blur-sm p-2 rounded-lg cyber-border mb-34">
            <div class="space-y-2">
                @foreach(array_slice(fcms__('content-tour-dates.dates'),0 ,6) as $tourDate)
                <div class="bg-gray-900 p-2 rounded-lg border border-gray-800 @if(new DateTime() > new DateTime($tourDate['date'])) bg-gray-800 text-gray-400 @endif">
                    <div class="text-indigo-400 font-semibold mb-0.5 @if(new DateTime() > new DateTime($tourDate['date'])) text-gray-400 @endif">{{ $tourDate['date'] }}</div>
                    <div class="text-gray-300 mb-1 @if(new DateTime() > new DateTime($tourDate['date'])) text-gray-400 @endif">{!! $tourDate['location'] !!}</div>
                    <div class="text-lg font-bold @if(new DateTime() > new DateTime($tourDate['date'])) text-gray-400 @endif">{!! $tourDate['event'] !!}</div>
                </div>
                @endforeach
            </div>
            <div class="text-sm text-gray-500 mt-5 ml-5 mb-4">
                <a href="{{ droute('tour-dates-archive') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.to-archive.title') }}">
                    {{ fcms__('content-tour-dates.to-archive.text') }}
                </a>
            </div>
        </div>
    </div>
</section>

@include(FilamentCms::getViewPrefix() . '.partials.footer')
