@extends('layouts.app')

@section('title', 'Résultats')

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

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="clipboard-list" class="w-6 h-6 text-teal-600"></i>
        Résultats
    </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('resultat') }}" 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>

    @if($journee->jou_diffuser_resultats || $isAdmin)

    {{-- Scores de la journée --}}
    @php $saisieScores = $isAdmin && $journee->jou_diffuser_pronostics && !$journee->jou_diffuser_resultats; @endphp
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <h2 class="text-base font-semibold text-slate-700 mb-3 flex items-center gap-2">
            <i data-lucide="goal" class="w-4 h-4 text-teal-600"></i>
            Scores de la journée
            @if($saisieScores)
                <span class="text-xs font-normal text-amber-600 bg-amber-50 border border-amber-200 rounded px-2 py-0.5 ml-1">Saisie admin</span>
            @endif
        </h2>

        @if($saisieScores)
        <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 }}">
            <input type="hidden" name="redirect_to" value="resultat">
            <div class="flex flex-wrap gap-3 mb-4">
                @foreach($listeMatch as $match)
                <div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm">
                    @if($match->equ_logo)<img src="/images/equipes/{{ $match->equ_logo }}" class="w-5 h-5 object-contain">@endif
                    <span class="font-medium text-slate-700">{{ $match->equ_nom }}</span>
                    <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-1 py-0.5 text-center text-sm font-bold focus:outline-none focus:ring-2 focus:ring-teal-500">
                    @if($match->equ_logo_v)<img src="/images/equipes/{{ $match->equ_logo_v }}" class="w-5 h-5 object-contain">@endif
                    <span class="font-medium text-slate-700">{{ $match->equ_nom_v }}</span>
                </div>
                @endforeach
            </div>
            <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>
        </form>
        @else
        <div class="flex flex-wrap gap-3">
            @foreach($listeMatch as $match)
            <div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm">
                @if($match->equ_logo)<img src="/images/equipes/{{ $match->equ_logo }}" class="w-5 h-5 object-contain">@endif
                <span class="font-medium text-slate-700">{{ $match->equ_nom }}</span>
                <span class="font-bold text-teal-700 tabular-nums">
                    @if($match->ren_result !== null && $match->ren_result !== '')
                        {{ $match->ren_result }} – {{ $match->ren_result_v }}
                    @else
                        ? – ?
                    @endif
                </span>
                @if($match->equ_logo_v)<img src="/images/equipes/{{ $match->equ_logo_v }}" class="w-5 h-5 object-contain">@endif
                <span class="font-medium text-slate-700">{{ $match->equ_nom_v }}</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    @if($isAdmin && $tousScoresSaisis && !$journee->jou_diffuser_resultats)
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-center justify-between gap-4">
        <div class="flex items-center gap-2 text-amber-800 text-sm">
            <i data-lucide="check-circle-2" class="w-5 h-5 text-amber-600 shrink-0"></i>
            Tous les scores sont saisis. Vous pouvez calculer les points et diffuser les résultats.
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <form method="POST" action="{{ route('admin.journee.edit.command') }}">
                @csrf
                <input type="hidden" name="command" value="calculer">
                <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
                <input type="hidden" name="redirect_to" value="resultat">
                <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 cursor-pointer">
                    <i data-lucide="calculator" class="w-4 h-4"></i>
                    Calculer les points
                </button>
            </form>
            <form method="POST" action="{{ route('diffuser.command') }}">
                @csrf
                <input type="hidden" name="type" value="resultats">
                <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
                <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 cursor-pointer">
                    <i data-lucide="send" class="w-4 h-4"></i>
                    Diffuser les résultats
                </button>
            </form>
        </div>
    </div>
    @endif

    <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 table-resultat">
                <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>
                        @foreach($listeMatch as $match)
                        <th class="px-3 py-2 text-center font-medium leading-tight">
                            <div class="flex items-center justify-center gap-1">
                                @if($match->equ_logo)<img src="{{ asset('images/equipes/'.$match->equ_logo) }}" class="w-4 h-4 object-contain" alt="">@endif
                                <span>{{ $match->equ_nom }}</span>
                            </div>
                            <div class="flex items-center justify-center gap-1 opacity-75">
                                @if($match->equ_logo_v)<img src="{{ asset('images/equipes/'.$match->equ_logo_v) }}" class="w-4 h-4 object-contain" alt="">@endif
                                <span>{{ $match->equ_nom_v }}</span>
                            </div>
                        </th>
                        @endforeach
                        <th class="px-3 py-2 text-left font-medium">Pts</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">Fil rouge</th>
                    </tr>
                    <tr class="bg-teal-800 text-teal-100 text-xs">
                        <td class="px-3 py-1"></td>
                        <td class="px-3 py-1"></td>
                        @foreach($listeMatch as $match)
                        <td class="px-3 py-1 text-center font-bold tabular-nums tracking-wide">
                            @if($match->ren_result !== null && $match->ren_result !== '')
                                {{ $match->ren_result }} – {{ $match->ren_result_v }}
                            @else
                                <span class="opacity-40">? – ?</span>
                            @endif
                        </td>
                        @endforeach
                        <td class="px-3 py-1"></td>
                        <td class="px-3 py-1"></td>
                        <td class="px-3 py-1"></td>
                        <td class="px-3 py-1"></td>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($resultat as $pos => $ligne)
                    @php
                        $u    = $ligne['utilisateur'];
                        $juti = $ligne['juti'];
                        $pseudo = $u->uti_pseudo ?: $u->uti_nom.' '.$u->uti_prenom;
                        $sAveugle  = ($juti && $juti->juti_aveugle)    ? ' Aveugle'  : '';
                        $sFilRouge = ($ligne['etat_fil_rouge'] == 1)   ? ' FilRouge' : '';
                        $rowClass  = (($pos % 2 == 0) ? 'lignePaire' : 'ligneImpaire') . $sAveugle . $sFilRouge;
                    @endphp
                    <tr class="hover:bg-teal-50 transition-colors {{ $rowClass }}">
                        <td class="px-3 py-2 text-slate-600">{{ $pos + 1 }}</td>
                        <td class="px-3 py-2 font-medium text-slate-800 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <img src="{{ App\Models\User::avatarUrlForId($u->uti_id) }}" alt="" width="24" height="24" class="rounded-full shrink-0 object-cover">
                                {{ $pseudo }}
                                @if($juti && $juti->juti_aveugle)
                                    <i data-lucide="eye-off" class="w-3.5 h-3.5 text-gray-400 shrink-0" title="Grille aveugle"></i>
                                @endif
                            </div>
                        </td>
                        @foreach($listeMatch as $match)
                        @php
                            $p = $ligne['pronos'][$match->ren_id] ?? null;
                            $sClass = 'normal';
                            $sClassRisque = 'pasrisque';
                            if ($p) {
                                $iRisque = (int)($p->pro_risques ?? 0);
                                $sClassRisque = $iRisque > 0 ? 'risque'.$iRisque.'1' : 'pasrisque';
                                $hasScore = ($match->ren_result !== null && $match->ren_result !== ''
                                          && $match->ren_result_v !== null && $match->ren_result_v !== '');
                                if ($hasScore) {
                                    $dScore = (int)$match->ren_result - (int)$match->ren_result_v;
                                    $dProno = (int)$p->pro_prono - (int)$p->pro_prono_v;
                                    if ((int)$p->pro_prono == (int)$match->ren_result
                                        && (int)$p->pro_prono_v == (int)$match->ren_result_v) {
                                        $sClass = 'BonScore';
                                    } elseif (($dScore > 0 && $dProno > 0)
                                           || ($dScore == 0 && $dProno == 0)
                                           || ($dScore < 0 && $dProno < 0)) {
                                        $sClass = 'BonResultat';
                                    }
                                }
                            }
                        @endphp
                        <td class="cellProno {{ $sClass }} {{ $sClassRisque }} px-3 py-2 text-center">
                            @if($p) {{ $p->pro_prono }} - {{ $p->pro_prono_v }} @endif
                        </td>
                        @endforeach
                        <td class="px-3 py-2 font-semibold text-teal-700">
                            @if($juti || $ligne['points_live'] > 0)
                                {{ $ligne['points_affichage'] }}
                                @if(!$journee->jou_diffuser_resultats)
                                    <span class="text-gray-400 text-xs font-normal">*</span>
                                @endif
                                @if($ligne['etat_fil_rouge'] == 1)
                                    <span class="text-red-500 text-xs font-normal">×2</span>
                                @endif
                            @endif
                        </td>
                        <td class="px-3 py-2 text-green-600">{{ ($juti && $juti->juti_bonus) ? $juti->juti_bonus : '' }}</td>
                        <td class="px-3 py-2 text-red-500">{{ ($juti && $juti->juti_malus) ? $juti->juti_malus : '' }}</td>
                        <td class="px-3 py-2">
                            @if($ligne['etat_fil_rouge'] == 1)
                                <span class="text-red-600 font-bold">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>

    @else
        <p class="text-gray-400 italic text-sm">Les résultats ne sont pas encore diffusés.</p>
    @endif

    @endif
</div>
@push('scripts')
<script>
document.querySelectorAll('.input-score').forEach(function(input) {
    input.addEventListener('input', function() {
        let v = this.value.replace(/[^0-9\-]/g, '');
        // "21" → "2 - 1"
        if (/^\d{2}$/.test(v)) {
            this.value = v[0] + ' - ' + v[1];
        }
    });
    input.addEventListener('blur', function() {
        let v = this.value.replace(/\s/g, '');
        // Normalise "2-1" → "2 - 1"
        if (/^\d-\d$/.test(v)) {
            this.value = v[0] + ' - ' + v[2];
        }
    });
});
</script>
@endpush
@endsection