@extends('layouts.app')

@section('title', 'Exports HACCP')

@section('styles')
<style>
    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .section-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #2D4A5F; }

    .exports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 768px) { .exports-grid { grid-template-columns: 1fr; } }

    .card { background: white; border-radius: 14px; border: 1px solid #dde3e8; padding: 24px; }

    .card-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; font-weight: 600; color: #2D4A5F;
        margin-bottom: 6px;
    }
    .card-sub { font-size: 12px; color: #6b7c8d; margin-bottom: 20px; }

    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7c8d; margin-bottom: 6px; }
    .form-input {
        width: 100%; padding: 11px 14px;
        border: 1px solid #dde3e8; border-radius: 8px;
        font-size: 13px; font-family: 'Jost', sans-serif;
        color: #1e2d3a; outline: none; transition: border-color .2s;
    }
    .form-input:focus { border-color: #3a5f78; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .btn-export {
        width: 100%; padding: 13px;
        border-radius: 10px; border: none;
        background: #2D4A5F; color: #C8B47A;
        font-family: 'Jost', sans-serif; font-size: 13px;
        font-weight: 500; letter-spacing: .1em;
        text-transform: uppercase; cursor: pointer;
        transition: background .2s; margin-top: 8px;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-export:hover { background: #3a5f78; }
    .btn-export svg { width: 16px; height: 16px; }

    .info-box {
        background: #f7f2e8; border-left: 3px solid #C8B47A;
        border-radius: 0 8px 8px 0; padding: 12px 16px;
        font-size: 12px; color: #633806; line-height: 1.6;
        margin-bottom: 16px;
    }

    .stat-row {
        display: flex; justify-content: space-between;
        padding: 10px 0; border-bottom: 1px solid #f0f2f4;
        font-size: 13px;
    }
    .stat-row:last-child { border-bottom: none; }
    .stat-key { color: #6b7c8d; }
    .stat-val { font-weight: 500; color: #2D4A5F; }

    .event-option { padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
    .event-option:last-child { border-bottom: none; }
    .event-option-name { font-size: 13px; font-weight: 500; color: #1e2d3a; }
    .event-option-meta { font-size: 11px; color: #6b7c8d; margin-top: 2px; }
</style>
@endsection

@section('content')

<div class="page-header">
    <h1 class="section-title">Exports HACCP</h1>
</div>

<div class="exports-grid">

    <!-- Formulaire export -->
    <div class="card">
        <div class="card-title">Générer un document HACCP</div>
        <div class="card-sub">Document officiel pour les contrôles sanitaires</div>

        <div class="info-box">
            📋 Ce document liste tous vos produits tracés avec leurs numéros de lot, DLC et fournisseurs — conforme aux exigences de la DDPP.
        </div>

        <form method="POST" action="{{ route('exports.generer') }}" target="_blank">
            @csrf

            <div class="form-group">
                <label class="form-label">Par événement (optionnel)</label>
                <select class="form-input" name="evenement_id">
                    <option value="">— Tous les produits —</option>
                    @foreach($evenements as $ev)
                        <option value="{{ $ev->id }}">
                            {{ $ev->nom }} — {{ $ev->date->format('d/m/Y') }}
                            ({{ $ev->produits_count }} produits)
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Ou par période</label>
                <div class="form-row">
                    <div>
                        <input class="form-input" type="date" name="date_debut" placeholder="Du">
                    </div>
                    <div>
                        <input class="form-input" type="date" name="date_fin" placeholder="Au">
                    </div>
                </div>
            </div>

            <button type="submit" class="btn-export">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
                </svg>
                Générer le PDF HACCP
            </button>
        </form>
    </div>

    <!-- Résumé -->
    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-title">Résumé de traçabilité</div>
            <div class="card-sub">Votre activité globale</div>
            <div class="stat-row">
                <span class="stat-key">Produits archivés (total)</span>
                <span class="stat-val">{{ $totalProduits }}</span>
            </div>
            <div class="stat-row">
                <span class="stat-key">Événements</span>
                <span class="stat-val">{{ $evenements->count() }}</span>
            </div>
            <div class="stat-row">
                <span class="stat-key">Durée légale conservation</span>
                <span class="stat-val">5 ans</span>
            </div>
            <div class="stat-row">
                <span class="stat-key">Dernière mise à jour</span>
                <span class="stat-val">{{ now()->format('d/m/Y') }}</span>
            </div>
        </div>

        <div class="card">
            <div class="card-title">Événements récents</div>
            <div class="card-sub">Cliquez "Générer" pour exporter par événement</div>
            @forelse($evenements->take(5) as $ev)
            <div class="event-option">
                <div class="event-option-name">{{ $ev->nom }}</div>
                <div class="event-option-meta">{{ $ev->date->format('d/m/Y') }} · {{ $ev->produits_count }} produit(s)</div>
            </div>
            @empty
            <p style="font-size:13px;color:#6b7c8d;">Aucun événement créé.</p>
            @endforelse
        </div>
    </div>

</div>

@endsection