@extends('layouts.app')

@section('title', 'Classement')

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

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

    @if(isset($message))
        <p class="text-gray-400 italic text-sm">{{ $message }}</p>
    @else

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('classement') }}" class="flex items-center gap-3">
            <label for="jou_id" class="text-sm font-medium text-slate-700">Journée :</label>
            <select name="jou_id" id="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>

    <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">Joueur</th>
                        <th class="px-3 py-2 text-left font-medium">Points</th>
                        <th class="px-3 py-2 text-left font-medium">Bonus</th>
                        <th class="px-3 py-2 text-left font-medium">Malus</th>
                        <th class="px-3 py-2 text-left font-medium">Diff.</th>
                        <th class="px-3 py-2 text-left font-medium">Mvt</th>
                        <th class="px-3 py-2 text-left font-medium">Fil rouge</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($classement as $ligne)
                    <tr class="hover:bg-teal-50 transition-colors">
                        <td class="px-3 py-2 font-semibold text-slate-700">{{ $ligne['classement'] }}</td>
                        <td class="px-3 py-2">
                            <div class="flex items-center gap-2">
                                <img src="{{ App\Models\User::avatarUrlForId($ligne['uti_id']) }}"
                                     alt="" width="28" height="28"
                                     class="rounded-full shrink-0 object-cover">
                                <span class="font-medium text-slate-800">
                                    {{ $ligne['uti_pseudo'] ?: $ligne['uti_nom'].' '.$ligne['uti_prenom'] }}
                                </span>
                            </div>
                        </td>
                        <td class="px-3 py-2 font-bold text-teal-700">{{ $ligne['points'] }}</td>
                        <td class="px-3 py-2 text-green-600">{{ $ligne['bonus'] }}</td>
                        <td class="px-3 py-2 text-red-500">{{ $ligne['malus'] }}</td>
                        <td class="px-3 py-2 text-slate-600">{{ $ligne['bonusmoinsmalus'] ?: '—' }}</td>
                        <td class="px-3 py-2">
                            @if($ligne['mouvement'] > 0)
                                <span class="inline-flex items-center gap-1 text-green-600 font-semibold">
                                    <i data-lucide="arrow-up" class="w-4 h-4"></i>{{ $ligne['mouvement'] }}
                                </span>
                            @elseif($ligne['mouvement'] < 0)
                                <span class="inline-flex items-center gap-1 text-red-500 font-semibold">
                                    <i data-lucide="arrow-down" class="w-4 h-4"></i>{{ abs($ligne['mouvement']) }}
                                </span>
                            @else
                                <span class="text-gray-400">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-2">
                            @if($ligne['etat_fil_rouge'] == 1)
                                <span class="inline-flex items-center gap-1 text-red-600 font-bold">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>OUI
                                </span>
                            @elseif($ligne['etat_fil_rouge'] == -1)
                                <span class="text-purple-600 font-medium">Joué</span>
                            @else
                                <span class="text-green-600 font-medium">Non</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    @endif
</div>
@endsection