@extends('layouts.app')
@section('title', 'Accueil')
@section('content')

<div class="space-y-6">
    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="home" class="w-6 h-6 text-teal-600"></i>
        Accueil
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-3 flex items-center gap-2">
                <i data-lucide="calendar-clock" class="w-4 h-4"></i>
                Prochaine journée
            </h2>
            @if($prochaineJournee)
                <p class="text-3xl font-bold text-slate-800">J{{ $prochaineJournee->jou_numero }}</p>
                <p class="text-gray-500 mt-1">{{ $prochaineJournee->jou_date_journee?->format('d/m/Y') }}</p>
                <a href="{{ route('pronostiquer', ['jou_id' => $prochaineJournee->jou_id]) }}"
                   class="mt-4 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="pen-line" class="w-4 h-4"></i>Pronostiquer
                </a>
            @else
                <p class="text-gray-400 italic">Aucune journée à venir.</p>
            @endif
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-3 flex items-center gap-2">
                <i data-lucide="flag" class="w-4 h-4"></i>
                Dernière journée jouée
            </h2>
            @if($derniereJournee)
                <p class="text-3xl font-bold text-slate-800">J{{ $derniereJournee->jou_numero }}</p>
                <p class="text-gray-500 mt-1">{{ $derniereJournee->jou_date_journee?->format('d/m/Y') }}</p>
                <a href="{{ route('resultat', ['jou_id' => $derniereJournee->jou_id]) }}"
                   class="mt-4 inline-flex items-center gap-2 border border-teal-600 text-teal-600 hover:bg-teal-50 text-sm font-semibold px-4 py-2 rounded-lg transition">
                    <i data-lucide="bar-chart-2" class="w-4 h-4"></i>Voir les résultats
                </a>
            @else
                <p class="text-gray-400 italic">Aucun résultat disponible.</p>
            @endif
        </div>
    </div>
</div>

@endsection