@extends('layouts.app')

@section('title', $evenement->nom)

@section('styles')
<style>
    .back-link {
        display: inline-flex; align-items: center; gap: 6px;
        color: #6b7c8d; font-size: 13px; text-decoration: none;
        margin-bottom: 20px; transition: color .2s;
    }
    .back-link:hover { color: #2D4A5F; }
    .back-link svg { width: 16px; height: 16px; }

    .event-header {
        background: #2D4A5F; border-radius: 14px;
        padding: 24px; margin-bottom: 20px; color: white;
    }
    .event-header-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 26px; font-weight: 600; color: #C8B47A;
        margin-bottom: 12px;
    }
    .event-header-meta { display: flex; flex-wrap: wrap; gap: 16px; }
    .event-header-item {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; color: rgba(255,255,255,0.7);
    }
    .event-header-item svg { width: 14px; height: 14px; }

    .stats-row {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 12px; margin-bottom: 20px;
    }
    .stat-box {
        background: white; border-radius: 10px;
        border: 1px solid #dde3e8; padding: 16px; text-align: center;
    }
    .stat-num {
        font-family: 'Cormorant Garamond', serif;
        font-size: 28px; font-weight: 600; color: #2D4A5F;
    }
    .stat-label { font-size: 11px; color: #6b7c8d; margin-top: 2px; }

    .card { background: white; border-radius: 12px; border: 1px solid #dde3e8; padding: 20px; }
    .card-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; font-weight: 600; color: #2D4A5F;
        margin-bottom: 16px;
    }

    .produit-row {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 0; border-bottom: 1px solid #f0f2f4;
    }
    .produit-row:last-child { border-bottom: none; }
    .produit-icon {
        width: 36px; height: 36px; border-radius: 8px;
        background: #f7f2e8; display: flex; align-items: center;
        justify-content: center; font-size: 16px; flex-shrink: 0;
    }
    .produit-info { flex: 1; min-width: 0; }
    .produit-name { font-size: 13px; font-weight: 500; color: #1e2d3a; }
    .produit-meta { font-size: 11px; color: #6b7c8d; margin-top: 2px; }

    .dlc-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
    .dlc-ok { background: #E1F5EE; color: #085041; }
    .dlc-warn { background: #FAEEDA; color: #633806; }
    .dlc-danger { background: #FCEBEB; color: #791F1F; }

    .empty-state { text-align: center; padding: 40px; color: #6b7c8d; font-size: 13px; }

    .btn-primary {
        display: inline-flex; align-items: center; gap: 8px;
        background: #2D4A5F; color: #C8B47A;
        border: none; border-radius: 10px;
        padding: 11px 20px; font-size: 13px;
        font-family: 'Jost', sans-serif; font-weight: 500;
        letter-spacing: .06em; cursor: pointer;
        text-decoration: none; transition: background .2s;
    }
    .btn-primary:hover { background: #3a5f78; }
    .btn-primary svg { width: 16px; height: 16px; }

    .alert-success {
        background: #E1F5EE; border: 1px solid #9FE1CB;
        border-radius: 10px; padding: 12px 16px;
        font-size: 13px; color: #085041; margin-bottom: 16px;
    }
</style>
@endsection

@section('content')

@if(session('success'))
<div class="alert-success">✓ {{ session('success') }}</div>
@endif

<a href="{{ route('evenements.index') }}" class="back-link">
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
    </svg>
    Retour aux événements
</a>

<div class="event-header">
    <div class="event-header-name">{{ $evenement->nom }}</div>
    <div class="event-header-meta">
        <div class="event-header-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25"/>
            </svg>
            {{ $evenement->date->format('d/m/Y') }}
        </div>
        @if($evenement->lieu)
        <div class="event-header-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
            </svg>
            {{ $evenement->lieu }}
        </div>
        @endif
        @if($evenement->nb_convives)
        <div class="event-header-item">
            {{ $evenement->nb_convives }} convives
        </div>
        @endif
        @if($evenement->memo)
        <div class="event-header-item">
            📝 {{ $evenement->memo }}
        </div>
        @endif
    </div>
</div>

<div class="stats-row">
    <div class="stat-box">
        <div class="stat-num">{{ $produits->count() }}</div>
        <div class="stat-label">Produits</div>
    </div>
    <div class="stat-box">
        <div class="stat-num">{{ $produits->whereNotNull('numero_lot')->count() }}</div>
        <div class="stat-label">Lots tracés</div>
    </div>
    <div class="stat-box">
        <div class="stat-num">{{ $produits->whereNotNull('fournisseur')->unique('fournisseur')->count() }}</div>
        <div class="stat-label">Fournisseurs</div>
    </div>
</div>

<div class="card">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
        <h2 class="card-title" style="margin-bottom:0;">Produits tracés</h2>
        <a href="{{ route('scanner') }}?evenement_id={{ $evenement->id }}" class="btn-primary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 012-2h4M3 15v4a2 2 0 002 2h4m10-16h-4m4 0v4m0 12h-4m4 0v-4M9 12h6"/>
            </svg>
            Scanner
        </a>
    </div>

    @forelse($produits as $produit)
    @php
        $jours = $produit->dlc ? (int) ceil((strtotime($produit->dlc) - strtotime('today')) / 86400) : 999;
        $dlcClass = $jours < 0 ? 'dlc-danger' : ($jours <= 3 ? 'dlc-warn' : 'dlc-ok');
        $dlcLabel = $produit->dlc ? ($jours < 0 ? 'Expiré' : ($jours === 0 ? "Auj." : 'DLC '.$produit->dlc->format('d/m'))) : 'Sans DLC';
    @endphp
    <div class="produit-row">
        <div class="produit-icon">🍽️</div>
        <div class="produit-info">
            <div class="produit-name">{{ $produit->nom }}</div>
            <div class="produit-meta">
                Lot {{ $produit->numero_lot ?? '—' }}
                @if($produit->fournisseur) · {{ $produit->fournisseur }} @endif
                · {{ $produit->created_at->format('d/m/Y') }}
            </div>
        </div>
        <span class="dlc-badge {{ $dlcClass }}">{{ $dlcLabel }}</span>
    </div>
    @empty
    <div class="empty-state">
        Aucun produit tracé pour cet événement.<br>
        <a href="{{ route('scanner') }}?evenement_id={{ $evenement->id }}" style="color:#2D4A5F; margin-top:8px; display:inline-block;">Scanner un produit →</a>
    </div>
    @endforelse
</div>

@endsection