@extends('layouts.app')

@section('title', 'Pronostiquer')

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

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="pen-line" class="w-6 h-6 text-teal-600"></i>
        Pronostiquer
    </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('pronostiquer') }}" 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_verrouille)
        <div class="flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 rounded-lg px-4 py-3 text-sm">
            <i data-lucide="lock" class="w-4 h-4 shrink-0"></i>
            Cette journée est verrouillée.
        </div>
    @else

    @php
        $journeeJouee = collect($listeMatch)->contains(fn($m) => $m->ren_result !== null && $m->ren_result !== '');
    @endphp

    <form method="POST" action="{{ route('pronostiquer.command') }}"
          @if(!$journeeJouee) data-autosave-url="{{ route('pronostiquer.autosave') }}" @endif>
        @csrf
        <input type="hidden" name="command" value="sauvegarder">
        <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">

        @if(!$journeeJouee)
        <div id="save-status" class="save-status"></div>
        @endif

        <div class="flex gap-4 items-start">

        {{-- ── Table pronos ───────────────────────────────────────── --}}
        <div class="w-1/2 min-w-0 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-4 py-2 text-left font-medium">Domicile</th>
                            <th class="px-4 py-2 text-center font-medium">Mon prono</th>
                            <th class="px-4 py-2 text-left font-medium">Visiteur</th>
                            @if($journeeJouee)
                            <th class="px-4 py-2 text-center font-medium">Score réel</th>
                            <th class="px-4 py-2 text-center font-medium">Pts</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($listeMatch as $match)
                        @php
                            $p = $pronoByMatch[$match->ren_id] ?? null;
                            $hasScore = ($match->ren_result !== null && $match->ren_result !== ''
                                      && $match->ren_result_v !== null && $match->ren_result_v !== '');
                            $sClass = 'normal';
                            $pts = null;
                            if ($hasScore && $p) {
                                $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';
                                    $pts = 3;
                                } elseif (($dScore > 0 && $dProno > 0)
                                       || ($dScore == 0 && $dProno == 0)
                                       || ($dScore < 0 && $dProno < 0)) {
                                    $sClass = 'BonResultat';
                                    $pts = 1;
                                } else {
                                    $pts = 0;
                                }
                            }
                        @endphp
                        <tr class="hover:bg-teal-50 transition-colors">
                            <td class="px-4 py-3 font-medium text-slate-800">
                                <div class="flex items-center gap-2 justify-end">
                                    <span>{{ $match->equ_nom }}</span>
                                    @if($match->equ_logo)
                                    <img src="{{ asset('images/equipes/'.$match->equ_logo) }}" alt="{{ $match->equ_nom }}" class="w-6 h-6 object-contain shrink-0">
                                    @endif
                                </div>
                            </td>
                            <td class="cellProno {{ $sClass }} px-4 py-3 text-center">
                                <input type="text"
                                       name="tbScore_{{ $match->ren_id }}"
                                       data-equ-id="{{ $match->ren_equ_id }}"
                                       data-equ-id-v="{{ $match->ren_equ_id_v }}"
                                       data-nom-dom="{{ $match->equ_nom }}"
                                       data-nom-ext="{{ $match->equ_nom_v }}"
                                       value="{{ $p ? $p->pro_prono.' - '.$p->pro_prono_v : '' }}"
                                       placeholder="X - X"
                                       maxlength="5"
                                       @if($journeeJouee) readonly @endif
                               class="input-score w-20 text-center bg-transparent border border-white/40 rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-white/60 @if($journeeJouee) cursor-default @endif">
                            </td>
                            <td class="px-4 py-3 text-slate-600">
                                <div class="flex items-center gap-2">
                                    @if($match->equ_logo_v)
                                    <img src="{{ asset('images/equipes/'.$match->equ_logo_v) }}" alt="{{ $match->equ_nom_v }}" class="w-6 h-6 object-contain shrink-0">
                                    @endif
                                    <span>{{ $match->equ_nom_v }}</span>
                                </div>
                            </td>
                            @if($journeeJouee)
                            <td class="px-4 py-3 text-center font-bold tabular-nums text-slate-700">
                                @if($hasScore)
                                    {{ $match->ren_result }} – {{ $match->ren_result_v }}
                                @else
                                    <span class="text-gray-300">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center font-semibold tabular-nums">
                                @if($pts === 3)
                                    <span class="text-green-700">+3</span>
                                @elseif($pts === 1)
                                    <span class="text-amber-600">+1</span>
                                @elseif($pts === 0)
                                    <span class="text-gray-400">0</span>
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
                    @if($journeeJouee && $juti)
                    <tfoot>
                        <tr class="bg-gray-50 font-semibold text-slate-700">
                            <td class="px-4 py-2" colspan="2">Total journée</td>
                            <td class="px-4 py-2"></td>
                            <td class="px-4 py-2 text-center text-teal-700">
                                {{ $juti->juti_points }}
                                @if($etatFilRouge === 1)
                                    <span class="text-red-500 text-xs font-normal">(÷2)</span>
                                @endif
                            </td>
                            <td class="px-4 py-2">
                                @if($juti->juti_bonus)
                                    <span class="text-green-600 text-xs">+{{ $juti->juti_bonus }} bonus</span>
                                @endif
                                @if($juti->juti_malus)
                                    <span class="text-red-500 text-xs">–{{ $juti->juti_malus }} malus</span>
                                @endif
                            </td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>

        {{-- ── Panneau historique (sticky) ────────────────────────── --}}
        <div id="calendrier-panel"
             class="hidden w-1/2 shrink-0 sticky top-4 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden text-xs">
            <div class="bg-teal-700 text-white px-3 py-2 flex items-center justify-between">
                <span id="cal-title" class="font-semibold">Historique des rencontres</span>
                <button type="button" id="cal-close" class="text-teal-200 hover:text-white leading-none text-lg">&times;</button>
            </div>
            {{-- En-têtes équipes --}}
            <div class="grid grid-cols-2 gap-px bg-teal-100">
                <div id="cal-head-dom" class="bg-teal-50 px-2 py-1.5 font-semibold text-teal-800 text-center truncate"></div>
                <div id="cal-head-ext" class="bg-teal-50 px-2 py-1.5 font-semibold text-teal-800 text-center truncate"></div>
            </div>
            <div id="cal-body" class="divide-y divide-gray-100 max-h-[70vh] overflow-y-auto"></div>
            <div id="cal-loading" class="px-3 py-4 text-center text-slate-400 italic">Chargement…</div>
        </div>

        </div>{{-- /flex --}}

        {{-- Fil rouge --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            @if($etatFilRouge === -1)
                <p class="text-purple-600 font-medium text-sm flex items-center gap-2">
                    <i data-lucide="flag" class="w-4 h-4"></i>
                    Fil rouge déjà joué cette demi-saison.
                </p>
            @elseif($etatFilRouge === 1)
                <p class="text-red-600 font-semibold text-sm flex items-center gap-2 @if(!$journeeJouee) mb-2 @endif">
                    <i data-lucide="flag" class="w-4 h-4"></i>
                    Fil rouge activé — points ÷ 2.
                </p>
                @if(!$journeeJouee)
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="cbFilRouge" checked class="rounded border-gray-300 text-teal-600">
                    Désactiver le fil rouge
                </label>
                @endif
            @elseif(!$journeeJouee)
                <label class="flex items-center gap-2 text-sm text-slate-700 cursor-pointer">
                    <input type="checkbox" name="cbFilRouge" class="rounded border-gray-300 text-teal-600">
                    <i data-lucide="flag" class="w-4 h-4 text-gray-400"></i>
                    Activer le fil rouge (points ÷ 2)
                </label>
            @endif
        </div>

        @if(!$journeeJouee)
        <div class="flex items-center gap-3">
            <button type="submit"
                class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition">
                <i data-lucide="save" class="w-4 h-4"></i>
                Enregistrer
            </button>
            <span id="save-status" class="save-status text-sm"></span>
        </div>
        @endif
    </form>

    @endif

    @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
    const calUrl   = '{{ route('pronostiquer.calendrier') }}';
    const panel    = document.getElementById('calendrier-panel');
    const body     = document.getElementById('cal-body');
    const loading  = document.getElementById('cal-loading');
    const headDom  = document.getElementById('cal-head-dom');
    const headExt  = document.getElementById('cal-head-ext');
    let   lastKey  = null;

    const resultColor = { W: '#16a34a', D: '#d97706', L: '#dc2626' };
    const resultLabel = { W: 'V', D: 'N', L: 'D' };

    function matchCell(m) {
        if (!m) return '<div class="h-8"></div>';

        const logoDom = m.logo_dom ? `<img src="/images/equipes/${m.logo_dom}" class="w-3 h-3 object-contain shrink-0">` : '';
        const logoExt = m.logo_ext ? `<img src="/images/equipes/${m.logo_ext}" class="w-3 h-3 object-contain shrink-0">` : '';
        const border  = { W: '#16a34a', D: '#d97706', L: '#dc2626' }[m.result] || '#e5e7eb';

        const boldDom = m.is_home  ? 'font-bold text-slate-900' : 'text-slate-500';
        const boldExt = !m.is_home ? 'font-bold text-slate-900' : 'text-slate-500';

        return `<div class="grid items-center gap-1 px-2 py-1.5 border-l-[3px]"
                     style="grid-template-columns:1fr 3rem 1fr; border-color:${border}">
            <div class="flex items-center justify-end gap-1 min-w-0">
                <span class="truncate text-right text-xs ${boldDom}" title="${m.dom}">${m.dom}</span>
                ${logoDom}
            </div>
            <div class="text-center tabular-nums font-bold text-xs whitespace-nowrap">${m.score}</div>
            <div class="flex items-center gap-1 min-w-0">
                ${logoExt}
                <span class="truncate text-xs ${boldExt}" title="${m.ext}">${m.ext}</span>
            </div>
        </div>`;
    }

    async function load(equId, equIdV, nomDom, nomExt) {
        const key = equId + '-' + equIdV;
        if (key === lastKey) return;
        lastKey = key;

        headDom.textContent = nomDom;
        headExt.textContent = nomExt;
        body.innerHTML = '';
        loading.classList.remove('hidden');
        panel.classList.remove('hidden');

        try {
            const res  = await fetch(`${calUrl}?equ_id=${equId}&equ_id_v=${equIdV}`);
            const rows = await res.json();
            loading.classList.add('hidden');

            if (!rows.length) {
                body.innerHTML = '<div class="px-3 py-4 text-center text-slate-400 italic">Aucun historique.</div>';
                return;
            }

            body.innerHTML = rows.map(r => `
                <div class="grid grid-cols-[2.5rem_1fr_1fr] items-center gap-px bg-gray-100">
                    <div class="bg-white px-1 py-1 text-center text-slate-500 font-medium">J${r.numero}</div>
                    <div class="bg-white">${matchCell(r.dom || null)}</div>
                    <div class="bg-white border-l border-gray-100">${matchCell(r.ext || null)}</div>
                </div>
            `).join('');
        } catch {
            loading.textContent = 'Erreur de chargement.';
        }
    }

    // Focus sur un input de score → charger l'historique
    document.querySelectorAll('.input-score').forEach(input => {
        input.addEventListener('focus', () => {
            const equId   = input.dataset.equId;
            const equIdV  = input.dataset.equIdV;
            const nomDom  = input.dataset.nomDom;
            const nomExt  = input.dataset.nomExt;
            if (equId && equIdV) load(equId, equIdV, nomDom, nomExt);
        });
    });

    // Bouton fermeture
    document.getElementById('cal-close').addEventListener('click', () => {
        panel.classList.add('hidden');
        lastKey = null;
    });
})();
</script>
@endpush