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

<div class="pedit-header">
    <a href="{{ route('produits.show', $produit) }}" class="pedit-back">← Retour</a>
    <h1 class="pedit-title">Modifier le produit</h1>
</div>

@php
    $selectedIds = old('evenement_ids',
        $produit->evenements->pluck('id')->toArray()
        ?: ($produit->evenement_id ? [$produit->evenement_id] : [])
    );
@endphp

<div class="card pedit-card">
    <form method="POST" action="{{ route('produits.update', $produit) }}" class="pedit-form" id="peditForm">
        @csrf @method('PATCH')

        {{-- Champs cachés pour les événements cochés --}}
        <div id="hidden-inputs">
            @foreach($selectedIds as $sid)
                <input type="hidden" name="evenement_ids[]" value="{{ $sid }}">
            @endforeach
        </div>

        <div class="pedit-row">
            <div class="pedit-field">
                <label for="nom">Nom du produit *</label>
                <input type="text" id="nom" name="nom" value="{{ old('nom', $produit->nom) }}" required>
                @error('nom')<span class="pedit-error">{{ $message }}</span>@enderror
            </div>
            <div class="pedit-field">
                <label for="fournisseur">Fournisseur</label>
                <input type="text" id="fournisseur" name="fournisseur" value="{{ old('fournisseur', $produit->fournisseur) }}">
            </div>
        </div>

        <div class="pedit-row">
            <div class="pedit-field">
                <label for="numero_lot">N° de lot</label>
                <input type="text" id="numero_lot" name="numero_lot" value="{{ old('numero_lot', $produit->numero_lot) }}">
            </div>
            <div class="pedit-field">
                <label for="dlc">DLC / DDM</label>
                <input type="date" id="dlc" name="dlc" value="{{ old('dlc', $produit->dlc ? \Carbon\Carbon::parse($produit->dlc)->format('Y-m-d') : '') }}">
            </div>
        </div>

        {{-- Événements — bouton qui ouvre le bottom sheet --}}
        <div class="pedit-field">
            <label>Événements associés</label>
            <button type="button" class="pedit-evt-trigger" onclick="openEvtSheet()">
                <span id="evt-trigger-label">
                    @if(count($selectedIds) === 0)
                        Sélectionner des événements
                    @elseif(count($selectedIds) === 1)
                        1 événement sélectionné
                    @else
                        {{ count($selectedIds) }} événements sélectionnés
                    @endif
                </span>
                <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="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>

        <div class="pedit-row">
            <div class="pedit-field">
                <label>Type de produit</label>
                <div class="pedit-types">
                    @foreach(['Poisson','Viande','Laitier','Végétal','Pâtisserie','Boisson','Autre'] as $t)
                        <label class="pedit-type {{ old('type', $produit->type) === $t ? 'active' : '' }}">
                            <input type="radio" name="type" value="{{ $t }}" {{ old('type', $produit->type) === $t ? 'checked' : '' }} hidden>
                            {{ $t }}
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="pedit-field">
            <label for="notes">Notes</label>
            <textarea id="notes" name="notes" rows="3">{{ old('notes', $produit->notes) }}</textarea>
        </div>

        <div class="pedit-footer">
            <a href="{{ route('produits.show', $produit) }}" class="pedit-btn pedit-btn--cancel">Annuler</a>
            <button type="submit" class="pedit-btn pedit-btn--save">Enregistrer les modifications</button>
        </div>
    </form>
</div>

{{-- Overlay --}}
<div class="evt-overlay" id="evtOverlay" onclick="closeEvtSheet()"></div>

{{-- Bottom Sheet --}}
<div class="evt-sheet" id="evtSheet">
    <div class="evt-sheet-handle"></div>
    <div class="evt-sheet-header">
        <span class="evt-sheet-title">Événements associés</span>
        <button type="button" class="evt-sheet-close" onclick="closeEvtSheet()">✕</button>
    </div>
    <div class="evt-sheet-search-wrap">
        <input type="text" class="evt-sheet-search" id="evtSearch"
               placeholder="Rechercher…" oninput="filterEvts(this.value)">
    </div>
    <div class="evt-sheet-list" id="evtList">
        @foreach($evenements as $evt)
        <div class="evt-item {{ in_array($evt->id, $selectedIds) ? 'selected' : '' }}"
             id="evt-item-{{ $evt->id }}"
             data-nom="{{ strtolower($evt->nom) }}"
             onclick="toggleEvt({{ $evt->id }})">
            <div class="evt-item-info">
                <span class="evt-item-nom">{{ $evt->nom }}</span>
                <span class="evt-item-date">{{ \Carbon\Carbon::parse($evt->date)->format('d/m/Y') }}</span>
            </div>
            <div class="evt-item-check" id="check-{{ $evt->id }}">
                @if(in_array($evt->id, $selectedIds))
                    <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#2D4A5F" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    <div class="evt-sheet-footer">
        <button type="button" class="evt-sheet-validate" onclick="closeEvtSheet()">
            Valider — <span id="evt-count-label">{{ count($selectedIds) }} sélectionné(s)</span>
        </button>
    </div>
</div>

@endsection

@section('styles')
<style>
.pedit-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.pedit-back { font-size:13px; color:var(--text-muted); text-decoration:none; }
.pedit-back:hover { color:var(--navy); }
.pedit-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--navy); margin:0; }
.pedit-card { max-width:800px; }
.pedit-form { display:flex; flex-direction:column; gap:20px; }
.pedit-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pedit-field { display:flex; flex-direction:column; gap:6px; }
.pedit-field label { font-size:11px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
.pedit-field input[type=text],
.pedit-field input[type=date],
.pedit-field textarea {
    padding:10px 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; transition:border-color .15s;
}
.pedit-field input:focus,
.pedit-field textarea:focus { border-color:var(--navy-light); }
.pedit-error { font-size:11px; color:var(--danger); }

/* ── Bouton trigger ── */
.pedit-evt-trigger {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border:1px solid var(--border); border-radius:8px;
    font-size:13px; font-family:'Jost',sans-serif; color:var(--text);
    background:var(--white); cursor:pointer; width:100%;
    transition:border-color .15s;
}
.pedit-evt-trigger:hover { border-color:var(--navy-light); }
.pedit-evt-trigger svg { flex-shrink:0; color:var(--text-muted); }

/* ── Types ── */
.pedit-types { display:flex; flex-wrap:wrap; gap:8px; }
.pedit-type { padding:7px 14px; border-radius:20px; font-size:12px; border:1.5px solid var(--border); cursor:pointer; transition:all .15s; color:var(--text-muted); }
.pedit-type.active,
.pedit-type:has(input:checked) { background:var(--navy); color:var(--gold); border-color:var(--navy); }

/* ── Footer ── */
.pedit-footer { display:flex; justify-content:flex-end; gap:12px; padding-top:8px; border-top:1px solid var(--border); }
.pedit-btn { padding:10px 20px; border-radius:8px; font-size:13px; font-weight:500; font-family:'Jost',sans-serif; cursor:pointer; text-decoration:none; border:none; }
.pedit-btn--cancel { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
.pedit-btn--save   { background:var(--navy); color:var(--gold); }

/* ── Overlay ── */
.evt-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.4); z-index:200;
}
.evt-overlay.show { display:block; }

/* ── Bottom Sheet ── */
.evt-sheet {
    position:fixed; bottom:0; left:0; right:0;
    background:#fff; border-radius:20px 20px 0 0;
    z-index:201; max-height:80vh;
    display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -4px 30px rgba(0,0,0,.15);
}
.evt-sheet.open { transform:translateY(0); }

.evt-sheet-handle {
    width:40px; height:4px; background:#e2e8f0;
    border-radius:2px; margin:12px auto 0;
    flex-shrink:0;
}
.evt-sheet-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px 8px; flex-shrink:0;
}
.evt-sheet-title { font-size:16px; font-weight:600; color:var(--navy); font-family:'Cormorant Garamond',serif; }
.evt-sheet-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); padding:4px 8px; }

.evt-sheet-search-wrap { padding:8px 16px; flex-shrink:0; }
.evt-sheet-search {
    width:100%; padding:10px 14px; border:1px solid var(--border);
    border-radius:10px; font-size:14px; font-family:'Jost',sans-serif;
    outline:none; box-sizing:border-box;
}
.evt-sheet-search:focus { border-color:var(--navy-light); }

.evt-sheet-list { flex:1; overflow-y:auto; padding:8px 16px; }

.evt-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 12px; border-radius:10px; margin-bottom:6px;
    border:1.5px solid var(--border); cursor:pointer;
    transition:all .15s; background:#fff;
}
.evt-item:hover { border-color:var(--navy-light); background:var(--gold-pale); }
.evt-item.selected { border-color:var(--navy); background:rgba(45,74,95,0.06); }
.evt-item-info { display:flex; flex-direction:column; gap:2px; flex:1; }
.evt-item-nom { font-size:14px; font-weight:500; color:var(--text); }
.evt-item-date { font-size:12px; color:var(--text-muted); }
.evt-item-check { width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.evt-item.hidden { display:none; }

.evt-sheet-footer { padding:16px; flex-shrink:0; border-top:1px solid var(--border); }
.evt-sheet-validate {
    width:100%; padding:14px; background:var(--navy); color:var(--gold);
    border:none; border-radius:12px; font-size:15px; font-weight:600;
    font-family:'Jost',sans-serif; cursor:pointer;
}

@media (max-width:768px) {
    .pedit-row { grid-template-columns:1fr; }
    .pedit-footer { flex-direction:column; }
    .pedit-btn { text-align:center; }
}
</style>
@endsection

@section('scripts')
<script>
// IDs sélectionnés (initialisés depuis PHP)
let selectedEvtIds = @json($selectedIds);

function openEvtSheet() {
    document.getElementById('evtSheet').classList.add('open');
    document.getElementById('evtOverlay').classList.add('show');
    document.getElementById('evtSearch').focus();
}

function closeEvtSheet() {
    document.getElementById('evtSheet').classList.remove('open');
    document.getElementById('evtOverlay').classList.remove('show');
    updateHiddenInputs();
    updateTriggerLabel();
}

function toggleEvt(id) {
    const item  = document.getElementById('evt-item-' + id);
    const check = document.getElementById('check-' + id);
    const idx   = selectedEvtIds.indexOf(id);

    if (idx === -1) {
        selectedEvtIds.push(id);
        item.classList.add('selected');
        check.innerHTML = '<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#2D4A5F" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
    } else {
        selectedEvtIds.splice(idx, 1);
        item.classList.remove('selected');
        check.innerHTML = '';
    }

    // Mettre à jour le compteur dans le footer
    document.getElementById('evt-count-label').textContent =
        selectedEvtIds.length + ' sélectionné(s)';
}

function updateHiddenInputs() {
    const container = document.getElementById('hidden-inputs');
    container.innerHTML = '';
    selectedEvtIds.forEach(id => {
        const input = document.createElement('input');
        input.type  = 'hidden';
        input.name  = 'evenement_ids[]';
        input.value = id;
        container.appendChild(input);
    });
}

function updateTriggerLabel() {
    const label = document.getElementById('evt-trigger-label');
    if (selectedEvtIds.length === 0) {
        label.textContent = 'Sélectionner des événements';
    } else if (selectedEvtIds.length === 1) {
        label.textContent = '1 événement sélectionné';
    } else {
        label.textContent = selectedEvtIds.length + ' événements sélectionnés';
    }
}

function filterEvts(query) {
    const q = query.toLowerCase();
    document.querySelectorAll('.evt-item').forEach(item => {
        const match = !q || item.dataset.nom.includes(q);
        item.classList.toggle('hidden', !match);
    });
}

// Types radio
document.querySelectorAll('.pedit-type').forEach(label => {
    label.addEventListener('click', () => {
        document.querySelectorAll('.pedit-type').forEach(l => l.classList.remove('active'));
        label.classList.add('active');
    });
});
</script>
@endsection