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

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

<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">Scanner un produit</a>
</div>

<div class="prod-filters">
    <input type="text" id="searchInput" placeholder="Rechercher…" class="prod-search">
    <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())
    <div class="prod-empty"><p>Aucun produit enregistré. <a href="{{ route('scanner') }}">Scanner votre premier produit</a></p></div>
@else

{{-- TABLEAU desktop --}}
<div class="prod-table-wrap prod-desktop">
<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-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">{{ $produit->created_at->format('d/m/Y') }}</td>
    <td><div class="prod-actions">
        <a href="{{ route('produits.show', $produit) }}" class="prod-action" title="Voir">👁</a>
        <a href="{{ route('produits.edit', $produit) }}" class="prod-action" title="Modifier">✏️</a>
        <form method="POST" action="{{ route('produits.destroy', $produit) }}" onsubmit="return confirm('Supprimer ?')">@csrf @method('DELETE')<button type="submit" class="prod-action prod-action--danger" title="Supprimer">🗑</button></form>
    </div></td>
</tr>
@endforeach
</tbody>
</table>
</div>

{{-- CARTES mobile avec swipe --}}
<div class="prod-cards prod-mobile" id="produitsCards">
@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
<div class="swipe-container prod-row-mobile"
     data-nom="{{ strtolower($produit->nom) }}"
     data-fournisseur="{{ strtolower($produit->fournisseur ?? '') }}"
     data-dlc="{{ $dlcStatus }}"
     data-id="{{ $produit->id }}">

    {{-- Fond rouge visible au swipe --}}
    <div class="swipe-delete-bg">
        <span>🗑 Supprimer</span>
    </div>

    {{-- Carte --}}
    <div class="prod-card swipe-card {{ $dlcStatus === 'expired' ? 'card-expired' : '' }}">
        <div class="prod-card-header">
            <div class="prod-card-title">
                <span class="prod-nom">{{ $produit->nom }}</span>
                @if($produit->dlc)
                    <span class="prod-dlc prod-dlc--{{ $dlcStatus }}">{{ $dlcLabel }}</span>
                @endif
            </div>
            <div class="prod-actions">
                <a href="{{ route('produits.show', $produit) }}" class="prod-action">👁</a>
                <a href="{{ route('produits.edit', $produit) }}" class="prod-action">✏️</a>
            </div>
        </div>
        <div class="prod-card-body">
            @if($produit->fournisseur)
            <div class="prod-card-row">
                <span class="prod-card-label">Fournisseur</span>
                <span class="prod-card-val">{{ $produit->fournisseur }}</span>
            </div>
            @endif
            @if($produit->numero_lot)
            <div class="prod-card-row">
                <span class="prod-card-label">N° Lot</span>
                <span class="prod-card-val prod-mono">{{ $produit->numero_lot }}</span>
            </div>
            @endif
            @if($produit->type)
            <div class="prod-card-row">
                <span class="prod-card-label">Type</span>
                <span class="prod-tag">{{ ucfirst($produit->type) }}</span>
            </div>
            @endif
            @if($produit->evenement)
            <div class="prod-card-row">
                <span class="prod-card-label">Événement</span>
                <span class="prod-card-val">{{ $produit->evenement->nom }}</span>
            </div>
            @endif
        </div>
    </div>

    {{-- Formulaire de suppression caché --}}
    <form class="delete-form" method="POST" action="{{ route('produits.destroy', $produit) }}" style="display:none">
        @csrf @method('DELETE')
    </form>
</div>
@endforeach
</div>

@endif
@endsection

@section('styles')
<style>
.prod-alert { 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; border:1px solid rgba(200,180,122,0.3); white-space:nowrap; }
.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); }
.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-empty { text-align:center; padding:64px 24px; color:var(--text-muted); font-size:14px; }

/* ── Tableau desktop ── */
.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; }

/* ── Swipe container ── */
.swipe-container { position:relative; overflow:hidden; border-radius:12px; margin-bottom:10px; }
.swipe-container.hidden { display:none; }

.swipe-delete-bg {
    position:absolute; top:0; right:0; bottom:0;
    width:100%;
    background:#dc2626;
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:24px;
    border-radius:12px;
    font-size:14px; font-weight:600; color:#fff;
    pointer-events:none;
}

.swipe-card {
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    transition:transform 0.15s ease;
    will-change:transform;
    z-index:1;
}
.swipe-card.card-expired { border-color:#fecaca; background:#fffafa; }

/* ── Cartes contenu ── */
.prod-cards { display:flex; flex-direction:column; gap:0; }
.prod-card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; gap:8px; }
.prod-card-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.prod-card-body { padding:0 16px 14px; display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border); padding-top:10px; }
.prod-card-row { display:flex; align-items:baseline; gap:8px; font-size:13px; }
.prod-card-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; min-width:80px; flex-shrink:0; }
.prod-card-val { color:var(--text); }

/* ── Commun ── */
.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-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; flex-shrink:0; }
.prod-action { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; color:var(--text-muted); background:none; border:none; cursor:pointer; text-decoration:none; font-size:15px; }
.prod-action:hover { background:var(--bg); }
.prod-action--danger:hover { background:var(--danger-bg); }

/* ── Responsive ── */
.prod-mobile { display:none; }
.prod-desktop { display:block; }
@media (max-width: 768px) {
    .prod-mobile  { display:flex; flex-direction:column; }
    .prod-desktop { display:none; }
    .prod-filters { flex-direction:column; }
    .prod-search  { min-width:unset; width:100%; }
    .prod-select  { width:100%; }
}

/* ── Toast confirmation ── */
.swipe-toast {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#dc2626; color:#fff; border-radius:10px;
    padding:12px 24px; font-size:14px; font-weight:600;
    opacity:0; pointer-events:none;
    transition:opacity .2s, transform .2s;
    z-index:999; white-space:nowrap;
}
.swipe-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
</style>
@endsection

@section('scripts')
<script>
// ── Filtres ──────────────────────────────────────────────
const searchInput = document.getElementById('searchInput');
const filterDlc   = document.getElementById('filterDlc');
const rows        = document.querySelectorAll('.prod-row, .prod-row-mobile, .swipe-container');

function applyFilters() {
    const search = searchInput.value.toLowerCase();
    const dlc    = filterDlc.value;
    rows.forEach(row => {
        const matchSearch = !search || (row.dataset.nom||'').includes(search) || (row.dataset.fournisseur||'').includes(search);
        const matchDlc    = !dlc   || row.dataset.dlc === dlc;
        row.classList.toggle('hidden', !(matchSearch && matchDlc));
    });
}
searchInput.addEventListener('input', applyFilters);
filterDlc.addEventListener('change', applyFilters);

// ── Swipe to delete ──────────────────────────────────────
const SWIPE_THRESHOLD = 80; // px pour déclencher la suppression

document.querySelectorAll('.swipe-container').forEach(container => {
    const card  = container.querySelector('.swipe-card');
    const form  = container.querySelector('.delete-form');
    let startX  = 0;
    let currentX = 0;
    let isDragging = false;

    // Touch start
    card.addEventListener('touchstart', e => {
        startX   = e.touches[0].clientX;
        currentX = 0;
        isDragging = true;
    }, { passive: true });

    // Touch move
    card.addEventListener('touchmove', e => {
        if (!isDragging) return;
        const dx = e.touches[0].clientX - startX;
        if (dx > 0) return; // swipe droite ignoré
        currentX = dx;
        const clamped = Math.max(dx, -160);
        card.style.transform = `translateX(${clamped}px)`;
    }, { passive: true });

    // Touch end
    card.addEventListener('touchend', () => {
        isDragging = false;
        if (currentX < -SWIPE_THRESHOLD) {
            // Confirmer suppression
            confirmDelete(container, card, form);
        } else {
            // Revenir en place
            card.style.transform = 'translateX(0)';
        }
    });
});

function confirmDelete(container, card, form) {
    // Glisse complètement hors écran
    card.style.transition = 'transform 0.25s ease';
    card.style.transform  = 'translateX(-100%)';

    // Toast annulation
    const toast = document.createElement('div');
    toast.className = 'swipe-toast';
    toast.innerHTML = '🗑 Supprimé &nbsp;<button onclick="cancelDelete(this)" style="background:rgba(255,255,255,0.3);border:none;color:#fff;padding:4px 10px;border-radius:6px;font-size:13px;cursor:pointer;margin-left:8px;">Annuler</button>';
    document.body.appendChild(toast);

    // Stocker la référence pour annulation
    toast._container = container;
    toast._card      = card;
    toast._cancelled = false;

    setTimeout(() => toast.classList.add('show'), 10);

    // Supprimer après 3 secondes si pas annulé
    toast._timer = setTimeout(() => {
        if (!toast._cancelled) {
            form.submit();
        }
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function cancelDelete(btn) {
    const toast = btn.closest('.swipe-toast');
    toast._cancelled = true;
    clearTimeout(toast._timer);

    // Remettre la carte en place
    const card = toast._card;
    card.style.transition = 'transform 0.3s ease';
    card.style.transform  = 'translateX(0)';

    toast.classList.remove('show');
    setTimeout(() => toast.remove(), 300);
}
</script>
@endsection