@extends('layouts.app')

@section('title', 'Produits')

@section('content')

{{-- Flash --}}
@if(session('success'))
    <div class="prod-alert prod-alert--success">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        {{ session('success') }}
    </div>
@endif

{{-- Header --}}
<div class="prod-header">
    <div>
        <h1 class="prod-title">Produits tracés</h1>
        <p class="prod-subtitle">{{ $produits->count() }} produit{{ $produits->count() > 1 ? 's' : '' }} enregistré{{ $produits->count() > 1 ? 's' : '' }}</p>
    </div>
    <a href="{{ route('scanner') }}" class="prod-btn-scan">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <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 un produit
    </a>
</div>

{{-- Filtres --}}
<div class="prod-filters">
    <input type="text" id="searchInput" placeholder="Rechercher un produit, fournisseur…" class="prod-search">
    <select id="filterType" class="prod-select">
        <option value="">Tous les types</option>
        @foreach($produits->pluck('type')->filter()->unique()->sort() as $type)
            <option value="{{ $type }}">{{ ucfirst($type) }}</option>
        @endforeach
    </select>
    <select id="filterDlc" class="prod-select">
        <option value="">Toutes les DLC</option>
        <option value="expired">Expirés</option>
        <option value="urgent">Expire dans 3 jours</option>
        <option value="ok">OK</option>
    </select>
</div>

@if($produits->isEmpty())
    {{-- État vide --}}
    <div class="prod-empty">
        <svg width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
        </svg>
        <p>Aucun produit enregistré pour l'instant.</p>
        <a href="{{ route('scanner') }}" class="prod-btn-scan">Scanner votre premier produit</a>
    </div>
@else
    {{-- Tableau --}}
    <div class="prod-table-wrap">
        <table class="prod-table" id="produitsTable">
            <thead>
                <tr>
                    <th>Produit</th>
                    <th>Fournisseur</th>
                    <th>N° Lot</th>
                    <th>Type</th>
                    <th>Événement</th>
                    <th>DLC</th>
                    <th>Ajouté le</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($produits as $produit)
                @php
                    $dlcStatus = '';
                    $dlcLabel  = '—';
                    if ($produit->dlc) {
                        $dlc = \Carbon\Carbon::parse($produit->dlc);
                        $dlcLabel = $dlc->format('d/m/Y');
                        if ($dlc->isPast())             $dlcStatus = 'expired';
                        elseif ($dlc->diffInDays() <= 3) $dlcStatus = 'urgent';
                        else                             $dlcStatus = 'ok';
                    }
                @endphp
                <tr class="prod-row" data-nom="{{ strtolower($produit->nom) }}" data-fournisseur="{{ strtolower($produit->fournisseur ?? '') }}" data-type="{{ $produit->type ?? '' }}" data-dlc="{{ $dlcStatus }}">
                    <td>
                        <div class="prod-nom">{{ $produit->nom }}</div>
                        @if($produit->notes)
                            <div class="prod-notes">{{ Str::limit($produit->notes, 50) }}</div>
                        @endif
                    </td>
                    <td class="prod-muted">{{ $produit->fournisseur ?? '—' }}</td>
                    <td class="prod-muted prod-mono">{{ $produit->numero_lot ?? '—' }}</td>
                    <td>
                        @if($produit->type)
                            <span class="prod-tag">{{ ucfirst($produit->type) }}</span>
                        @else
                            <span class="prod-muted">—</span>
                        @endif
                    </td>
                    <td class="prod-muted">
                        {{ $produit->evenement?->nom ?? '—' }}
                    </td>
                    <td>
                        @if($produit->dlc)
                            <span class="prod-dlc prod-dlc--{{ $dlcStatus }}">{{ $dlcLabel }}</span>
                        @else
                            <span class="prod-muted">—</span>
                        @endif
                    </td>
                    <td class="prod-muted prod-date">{{ $produit->created_at->format('d/m/Y') }}</td>
                    <td>
                        <div class="prod-actions">
                            <a href="{{ route('produits.show', $produit) }}" class="prod-action" title="Voir">
                                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </a>
                            <a href="{{ route('produits.edit', $produit) }}" class="prod-action" title="Modifier">
                                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </a>
                            <form method="POST" action="{{ route('produits.destroy', $produit) }}" onsubmit="return confirm('Supprimer ce produit ?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="prod-action prod-action--danger" title="Supprimer">
                                    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

@endsection

@section('styles')
<style>
.prod-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 8px;
    font-size: 13px; margin-bottom: 24px;
}
.prod-alert--success { background: var(--success-bg); color: var(--success); }

.prod-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.prod-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; font-weight: 600;
    color: var(--navy); margin: 0 0 4px;
}
.prod-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }

.prod-btn-scan {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 8px;
    background: var(--navy); color: var(--gold);
    font-size: 13px; font-weight: 500;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.04em; text-decoration: none;
    transition: opacity 0.15s;
    border: 1px solid rgba(200,180,122,0.3);
}
.prod-btn-scan:hover { opacity: 0.85; }

.prod-filters {
    display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.prod-search {
    flex: 1; min-width: 200px;
    padding: 9px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: 'Jost', sans-serif;
    color: var(--text); background: var(--white); outline: none;
}
.prod-search:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(45,74,95,0.08); }
.prod-select {
    padding: 9px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: 'Jost', sans-serif;
    color: var(--text); background: var(--white); outline: none; cursor: pointer;
}
.prod-select:focus { border-color: var(--navy-light); }

.prod-empty {
    text-align: center; padding: 64px 24px;
    color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.prod-empty svg { opacity: 0.3; }
.prod-empty p { font-size: 14px; margin: 0; }

.prod-table-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.prod-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.prod-table thead tr {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.prod-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px; font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap;
}
.prod-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.prod-row:last-child td { border-bottom: none; }
.prod-row:hover { background: var(--gold-pale); }
.prod-row.hidden { display: none; }

.prod-nom { font-weight: 500; color: var(--text); }
.prod-notes { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.prod-muted { color: var(--text-muted); }
.prod-mono { font-family: monospace; font-size: 12px; }
.prod-date { white-space: nowrap; }

.prod-tag {
    display: inline-block;
    padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 500;
    background: rgba(45,74,95,0.08); color: var(--navy);
}

.prod-dlc {
    display: inline-block;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.prod-dlc--ok      { background: var(--success-bg); color: var(--success); }
.prod-dlc--urgent  { background: var(--warning-bg); color: var(--warning); }
.prod-dlc--expired { background: var(--danger-bg);  color: var(--danger);  }

.prod-actions { display: flex; align-items: center; gap: 4px; }
.prod-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px;
    color: var(--text-muted); background: none; border: none;
    cursor: pointer; text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.prod-action:hover { background: var(--bg); color: var(--navy); }
.prod-action--danger:hover { background: var(--danger-bg); color: var(--danger); }

@media (max-width: 768px) {
    .prod-table-wrap { overflow-x: auto; }
    .prod-table th:nth-child(3),
    .prod-table td:nth-child(3),
    .prod-table th:nth-child(5),
    .prod-table td:nth-child(5),
    .prod-table th:nth-child(7),
    .prod-table td:nth-child(7) { display: none; }
}
</style>
@endsection

@section('scripts')
<script>
const searchInput  = document.getElementById('searchInput');
const filterType   = document.getElementById('filterType');
const filterDlc    = document.getElementById('filterDlc');
const rows         = document.querySelectorAll('.prod-row');

function applyFilters() {
    const search = searchInput.value.toLowerCase();
    const type   = filterType.value;
    const dlc    = filterDlc.value;

    rows.forEach(row => {
        const matchSearch = !search ||
            row.dataset.nom.includes(search) ||
            row.dataset.fournisseur.includes(search);
        const matchType = !type || row.dataset.type === type;
        const matchDlc  = !dlc  || row.dataset.dlc  === dlc;

        row.classList.toggle('hidden', !(matchSearch && matchType && matchDlc));
    });
}

searchInput.addEventListener('input', applyFilters);
filterType.addEventListener('change', applyFilters);
filterDlc.addEventListener('change', applyFilters);
</script>
@endsection