@extends('layouts.app')

@section('title', $journee ? 'Édition J'.$journee->jou_numero : 'Nouvelle journée')

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

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.journee') }}" class="text-slate-400 hover:text-teal-600 transition">
            <i data-lucide="arrow-left" class="w-5 h-5"></i>
        </a>
        <h1 class="text-2xl font-bold text-slate-800">
            {{ $journee ? 'Journée '.$journee->jou_numero : 'Nouvelle journée' }}
        </h1>
    </div>

    {{-- Formulaire journée --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form method="POST" action="{{ route('admin.journee.edit.command') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="command" value="sauvegarder">
            <input type="hidden" name="jou_id" value="{{ $journee->jou_id ?? '' }}">

            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Numéro</label>
                    <input type="number" name="jou_numero" value="{{ $journee->jou_numero ?? '' }}" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
                <div class="space-y-1">
                    <label class="text-sm font-medium text-slate-700">Date de la journée</label>
                    <input type="date" name="jou_date_journee" value="{{ $journee?->jou_date_journee?->format('Y-m-d') }}"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                </div>
            </div>

            <div class="space-y-1">
                <label class="text-sm font-medium text-slate-700">Date limite pronostics</label>
                <input type="datetime-local" name="jou_date" value="{{ $journee?->jou_date?->format('Y-m-d\TH:i') }}"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
            </div>

            <div class="flex flex-wrap gap-4 pt-1">
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="jou_retour" @checked($journee?->jou_retour)
                        class="rounded border-gray-300 text-teal-600">
                    Match retour
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="jou_verrouille" @checked($journee?->jou_verrouille)
                        class="rounded border-gray-300 text-teal-600">
                    Verrouillée
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="jou_diffuser_pronostics" @checked($journee?->jou_diffuser_pronostics)
                        class="rounded border-gray-300 text-teal-600">
                    Diffuser pronostics
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="jou_diffuser_resultats" @checked($journee?->jou_diffuser_resultats)
                        class="rounded border-gray-300 text-teal-600">
                    Diffuser résultats
                </label>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit"
                    class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    Sauvegarder
                </button>
                <a href="{{ route('admin.journee') }}"
                    class="inline-flex items-center gap-2 border border-gray-300 text-slate-600 hover:bg-gray-50 text-sm font-medium px-4 py-2 rounded-lg transition">
                    Retour
                </a>
            </div>
        </form>
    </div>

    @if($journee)
    {{-- Matchs --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
            <h2 class="text-sm font-semibold text-slate-700 flex items-center gap-2">
                <i data-lucide="swords" class="w-4 h-4 text-teal-600"></i>
                Matchs de J{{ $journee->jou_numero }}
            </h2>
        </div>

        @if($journee->jou_diffuser_pronostics && !$journee->jou_diffuser_resultats)
        {{-- Saisie des résultats --}}
        <form method="POST" action="{{ route('admin.journee.edit.command') }}">
            @csrf
            <input type="hidden" name="command" value="sauvegarder_scores">
            <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
        @endif

        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-slate-500 text-xs uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-2 text-left">Domicile</th>
                    <th class="px-4 py-2 text-center w-32">Score</th>
                    <th class="px-4 py-2 text-left">Visiteur</th>
                    <th class="px-4 py-2"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($listeMatch as $match)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-2 text-slate-800 flex items-center gap-2">
                        @if($match->equ_logo)
                            <img src="/images/equipes/{{ $match->equ_logo }}" class="w-6 h-6 object-contain">
                        @endif
                        {{ $match->equ_nom }}
                    </td>
                    <td class="px-4 py-2 text-center">
                        @if($journee->jou_diffuser_pronostics && !$journee->jou_diffuser_resultats)
                            <input type="text"
                                name="score[{{ $match->ren_id }}]"
                                value="{{ $match->ren_result !== null ? $match->ren_result.' - '.$match->ren_result_v : '' }}"
                                placeholder="X - X" maxlength="5"
                                class="input-score w-16 border border-gray-300 rounded px-2 py-1 text-center text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                        @else
                            <span class="font-semibold text-teal-700 tabular-nums">
                                @if($match->ren_result !== null)
                                    {{ $match->ren_result }} – {{ $match->ren_result_v }}
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </span>
                        @endif
                    </td>
                    <td class="px-4 py-2 text-slate-600 flex items-center gap-2">
                        @if($match->equ_logo_v)
                            <img src="/images/equipes/{{ $match->equ_logo_v }}" class="w-6 h-6 object-contain">
                        @endif
                        {{ $match->equ_nom_v }}
                    </td>
                    <td class="px-4 py-2 text-right">
                        <form method="POST" action="{{ route('admin.journee.edit.command') }}" class="inline">
                            @csrf
                            <input type="hidden" name="command" value="supprimer_match">
                            <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
                            <input type="hidden" name="ren_id" value="{{ $match->ren_id }}">
                            <button type="submit" onclick="return confirm('Supprimer ce match ?')"
                                class="text-red-500 hover:text-red-700 text-xs font-medium">Suppr.</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        @if($journee->jou_diffuser_pronostics && !$journee->jou_diffuser_resultats)
            <div class="px-4 py-3 border-t border-gray-100 bg-gray-50">
                <button type="submit"
                    class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    Enregistrer les scores
                </button>
            </div>
        </form>
        @endif

        {{-- Ajouter un match --}}
        <div class="px-4 py-4 border-t border-gray-100 bg-gray-50">
            <form method="POST" action="{{ route('admin.journee.edit.command') }}" class="flex items-center gap-3 flex-wrap">
                @csrf
                <input type="hidden" name="command" value="ajouter_match">
                <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
                <select name="ren_equ_id"
                    class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                    <option value="">— Domicile —</option>
                    @foreach($listeEquipe as $e)
                        <option value="{{ $e->equ_id }}">{{ $e->equ_nom }}</option>
                    @endforeach
                </select>
                <select name="ren_equ_id_v"
                    class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                    <option value="">— Visiteur —</option>
                    @foreach($listeEquipe as $e)
                        <option value="{{ $e->equ_id }}">{{ $e->equ_nom }}</option>
                    @endforeach
                </select>
                <button type="submit"
                    class="inline-flex items-center gap-1 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-3 py-1.5 rounded-lg transition">
                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                    Ajouter
                </button>
            </form>
        </div>
    </div>

    {{-- Calcul --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="POST" action="{{ route('admin.journee.edit.command') }}" class="flex items-center gap-4">
            @csrf
            <input type="hidden" name="command" value="calculer">
            <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
            <button type="submit"
                class="inline-flex items-center gap-2 bg-slate-700 hover:bg-slate-800 text-white text-sm font-semibold px-4 py-2 rounded-lg transition">
                <i data-lucide="calculator" class="w-4 h-4"></i>
                Calculer les points
            </button>
            <span class="text-xs text-slate-400">Recalcule les points de tous les joueurs pour cette journée.</span>
        </form>
    </div>
    @endif
</div>
@endsection