@extends('layouts.app')
@section('title', $produit->nom)
@section('content')

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

<div class="pshow-header">
    <a href="{{ route('produits.index') }}" class="pshow-back">
        ← Retour aux produits
    </a>
    <div class="pshow-actions">
        <a href="{{ route('produits.edit', $produit) }}" class="pshow-btn pshow-btn--edit">Modifier</a>
        <form method="POST" action="{{ route('produits.destroy', $produit) }}" onsubmit="return confirm('Supprimer ce produit ?')">
            @csrf @method('DELETE')
            <button type="submit" class="pshow-btn pshow-btn--delete">Supprimer</button>
        </form>
    </div>
</div>

<div class="pshow-grid">

    {{-- Infos principales --}}
    <div class="pshow-card pshow-card--main">
        <div class="pshow-card-title">
            <h1>{{ $produit->nom }}</h1>
            @if($produit->type)
                <span class="pshow-tag">{{ ucfirst($produit->type) }}</span>
            @endif
        </div>

        <dl class="pshow-dl">
            <div class="pshow-dl-row">
                <dt>Fournisseur</dt>
                <dd>{{ $produit->fournisseur ?? '—' }}</dd>
            </div>
            <div class="pshow-dl-row">
                <dt>N° de lot</dt>
                <dd class="pshow-mono">{{ $produit->numero_lot ?? '—' }}</dd>
            </div>
            <div class="pshow-dl-row">
                <dt>DLC / DDM</dt>
                <dd>
                    @if($produit->dlc)
                        @php
                            $dlc    = \Carbon\Carbon::parse($produit->dlc);
                            $jours  = (int) ceil(now()->startOfDay()->floatDiffInDays($dlc->copy()->startOfDay(), false));
                            $status = $dlc->isPast() ? 'expired' : ($jours <= 3 ? 'urgent' : 'ok');
                        @endphp
                        <span class="pshow-dlc pshow-dlc--{{ $status }}">
                            {{ $dlc->format('d/m/Y') }}
                            @if($status === 'expired')  — Expiré
                            @elseif($jours <= 0)        — Aujourd'hui
                            @elseif($jours === 1)       — Demain
                            @else                       — Dans {{ $jours }} jour{{ $jours > 1 ? 's' : '' }}
                            @endif
                        </span>
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div class="pshow-dl-row">
                <dt>Événement</dt>
                <dd>{{ $produit->evenement?->nom ?? '—' }}</dd>
            </div>
            <div class="pshow-dl-row">
                <dt>Archivé le</dt>
                <dd>{{ $produit->created_at->format('d/m/Y à H:i') }}</dd>
            </div>
            @if($produit->notes)
            <div class="pshow-dl-row pshow-dl-row--full">
                <dt>Notes</dt>
                <dd>{{ $produit->notes }}</dd>
            </div>
            @endif
        </dl>

        {{-- Durée légale de conservation --}}
        <div class="pshow-legal">
            <div class="pshow-legal-title">📋 Conservation légale HACCP</div>
            @if($produit->dlc)
                @php $legalDate = \Carbon\Carbon::parse($produit->dlc)->addMonths(6); @endphp
                <p>Photo à conserver jusqu'au <strong>{{ $legalDate->format('d/m/Y') }}</strong> (6 mois après DLC)</p>
            @else
                <p>Pas de DLC renseignée — conservation recommandée <strong>5 ans</strong> (produit DDM/sec)</p>
            @endif
        </div>
    </div>

    {{-- Photo étiquette --}}
    @if($produit->photo_etiquette)
    <div class="pshow-card pshow-card--photo">
        <div class="pshow-card-header">Photo de l'étiquette</div>
        <div class="pshow-photo-wrap">
            <img src="{{ Storage::url($produit->photo_etiquette) }}"
                 alt="Étiquette {{ $produit->nom }}"
                 class="pshow-photo pshow-zoomable"
                 data-modal="photoModal">
            <div class="pshow-photo-hint">Cliquer pour agrandir</div>
        </div>
    </div>
    @endif

    {{-- Photo document --}}
    @if($produit->photo_document)
    <div class="pshow-card pshow-card--photo">
        <div class="pshow-card-header">Document associé</div>
        <div class="pshow-photo-wrap">
            <img src="{{ Storage::url($produit->photo_document) }}"
                 alt="Document {{ $produit->nom }}"
                 class="pshow-photo pshow-zoomable"
                 data-modal="docModal">
            <div class="pshow-photo-hint">Cliquer pour agrandir</div>
        </div>
    </div>
    @endif

</div>

{{-- Modal zoom étiquette --}}
@if($produit->photo_etiquette)
<div id="photoModal" class="pshow-modal" role="dialog" aria-modal="true" aria-label="Zoom étiquette">
    <button class="pshow-modal-close" aria-label="Fermer">✕</button>
    <img src="{{ Storage::url($produit->photo_etiquette) }}" alt="Étiquette {{ $produit->nom }}">
</div>
@endif

{{-- Modal zoom document --}}
@if($produit->photo_document)
<div id="docModal" class="pshow-modal" role="dialog" aria-modal="true" aria-label="Zoom document">
    <button class="pshow-modal-close" aria-label="Fermer">✕</button>
    <img src="{{ Storage::url($produit->photo_document) }}" alt="Document {{ $produit->nom }}">
</div>
@endif

@endsection

@section('styles')
<style>
.pshow-alert { padding:12px 16px; border-radius:8px; background:var(--success-bg); color:var(--success); font-size:13px; margin-bottom:20px; }
.pshow-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.pshow-back { font-size:13px; color:var(--text-muted); text-decoration:none; display:flex; align-items:center; gap:6px; }
.pshow-back:hover { color:var(--navy); }
.pshow-actions { display:flex; gap:8px; }
.pshow-btn { padding:9px 18px; border-radius:8px; font-size:13px; font-family:'Jost',sans-serif; font-weight:500; cursor:pointer; text-decoration:none; border:none; display:inline-flex; align-items:center; }
.pshow-btn--edit { background:var(--navy); color:var(--gold); }
.pshow-btn--delete { background:var(--danger-bg); color:var(--danger); }
.pshow-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.pshow-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; }
.pshow-card--main { grid-column: 1; }
.pshow-card--photo { grid-column: 2; }
.pshow-card-title { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.pshow-card-title h1 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600; color:var(--navy); margin:0; }
.pshow-card-header { font-size:12px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; }
.pshow-tag { display:inline-block; padding:3px 12px; border-radius:20px; font-size:12px; background:rgba(45,74,95,0.08); color:var(--navy); }
.pshow-dl { display:flex; flex-direction:column; gap:12px; }
.pshow-dl-row { display:grid; grid-template-columns:140px 1fr; gap:8px; align-items:start; }
.pshow-dl-row dt { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; padding-top:1px; }
.pshow-dl-row dd { font-size:14px; color:var(--text); font-weight:500; margin:0; }
.pshow-mono { font-family:monospace; font-size:13px !important; }
.pshow-dlc { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.pshow-dlc--ok { background:var(--success-bg); color:var(--success); }
.pshow-dlc--urgent { background:var(--warning-bg); color:var(--warning); }
.pshow-dlc--expired { background:var(--danger-bg); color:var(--danger); }
.pshow-legal { margin-top:20px; padding:14px 16px; background:var(--gold-pale); border-radius:8px; border-left:3px solid var(--gold); }
.pshow-legal-title { font-size:12px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.pshow-legal p { font-size:13px; color:var(--text-muted); margin:0; }
.pshow-photo-wrap { position:relative; }
.pshow-photo { width:100%; border-radius:8px; display:block; }
.pshow-zoomable { cursor:zoom-in; transition:opacity .15s; }
.pshow-zoomable:hover { opacity:.88; }
.pshow-photo-hint { font-size:11px; color:var(--text-muted); text-align:center; margin-top:8px; }

/* Modal */
.pshow-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.88);
    align-items: center;
    justify-content: center;
}
.pshow-modal.is-open {
    display: flex;
}
.pshow-modal img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
.pshow-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.pshow-modal-close:hover { background: rgba(255,255,255,0.22); }

@media(max-width:768px) {
    .pshow-grid { grid-template-columns:1fr; }
    .pshow-card--photo { grid-column:1; }
}
</style>
@endsection

@push('scripts')
<script>
(function () {
    // Ouvre le modal dont l'id est passé en data-modal
    document.querySelectorAll('.pshow-zoomable').forEach(function (img) {
        img.addEventListener('click', function () {
            var modalId = img.getAttribute('data-modal');
            var modal   = document.getElementById(modalId);
            if (!modal) return;
            modal.classList.add('is-open');
            document.body.style.overflow = 'hidden';
        });
    });

    // Ferme en cliquant sur le fond ou le bouton ✕
    document.querySelectorAll('.pshow-modal').forEach(function (modal) {
        modal.addEventListener('click', function (e) {
            // Ferme si clic sur le fond OU sur le bouton close (pas sur l'image)
            if (e.target === modal || e.target.classList.contains('pshow-modal-close')) {
                modal.classList.remove('is-open');
                document.body.style.overflow = '';
            }
        });
    });

    // Ferme avec Échap
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.pshow-modal.is-open').forEach(function (modal) {
                modal.classList.remove('is-open');
                document.body.style.overflow = '';
            });
        }
    });
})();
</script>
@endpush