@extends('layouts.app')

@section('title', 'Classement Ligue 1')

@section('content')
<div class="space-y-6">

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="medal" class="w-6 h-6 text-teal-600"></i>
        Classement Ligue 1
    </h1>

    @if($journee)

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('ligue1') }}" class="flex items-center gap-3">
            <label class="text-sm font-medium text-slate-700">Journée :</label>
            <select name="jou_id" onchange="this.form.submit()"
                class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                @foreach($listeJournee as $j)
                    <option value="{{ $j->jou_id }}" @selected($j->jou_id == $journee->jou_id)>
                        J{{ $j->jou_numero }} @if($j->jou_retour)(retour)@endif
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    @if($classementLigue1->isEmpty())
        <p class="text-gray-400 italic text-sm">Classement non disponible pour cette journée.</p>
    @else

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-teal-700 text-white">
                    <tr>
                        <th class="px-3 py-2 text-left font-medium">#</th>
                        <th class="px-3 py-2 text-left font-medium">Club</th>
                        <th class="px-3 py-2 text-left font-medium">Points</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($classementLigue1 as $cla)
                    <tr class="hover:bg-teal-50 transition-colors">
                        <td class="px-3 py-2 font-semibold text-slate-700">{{ $cla->jou_cla_position }}</td>
                        <td class="px-3 py-2 font-medium text-slate-800">
                            {{ $cla->jou_cla_equipe2 ?: $cla->jou_cla_equipe1 }}
                        </td>
                        <td class="px-3 py-2 font-bold text-teal-700">{{ $cla->jou_cla_points }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    @endif

    @else
        <p class="text-gray-400 italic text-sm">Aucune journée disponible.</p>
    @endif

</div>
@endsection