@extends('layouts.app')

@section('title', 'Stock cuisine')

@push('styles')
<style>
    .food-stock-card {
        border-radius: 1rem;
        border: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.94));
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    }

    .food-stock-toolbar {
        backdrop-filter: blur(16px);
    }

    .food-stock-stat-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0.85rem 0.95rem;
    }

    .food-stock-stat-card p:last-child {
        line-height: 1;
    }

    .food-stock-filter-grid {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 210px)) auto;
    }

    .food-stock-filter-card {
        padding: 0.82rem 0.88rem;
    }

    .food-stock-filter-block label {
        margin-bottom: 0.28rem;
        font-size: 0.62rem;
        line-height: 0.82rem;
        letter-spacing: 0.04em;
    }

    .food-stock-filter-actions {
        display: flex;
        align-items: end;
        gap: 0.38rem;
        min-width: 152px;
    }

    .food-stock-filter-actions > * {
        min-height: 38px;
    }

    .food-stock-field {
        width: 100%;
        border-radius: 0.85rem;
        border: 1px solid #e2e8f0;
        padding: 0.62rem 0.78rem;
        font-size: 0.84rem;
        line-height: 1.05rem;
    }

    .food-stock-field:focus {
        outline: none;
        border-color: #fb923c;
        box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18);
    }

    .food-stock-item-card {
        display: grid;
        gap: 0.45rem;
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.45fr) auto auto;
        grid-template-areas: "main meta qty actions";
        align-items: center;
        padding: 0.58rem 0.68rem;
    }

    .food-stock-item-main {
        grid-area: main;
        min-width: 0;
    }

    .food-stock-item-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.22rem;
        margin-bottom: 0.14rem;
    }

    .food-stock-item-title-line {
        display: flex;
        align-items: center;
        gap: 0.28rem;
        min-width: 0;
    }

    .food-stock-item-title-line h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.92rem;
        line-height: 1.06rem;
        font-weight: 700;
        color: rgb(15 23 42);
    }

    .food-stock-item-subline {
        margin-top: 0.12rem;
        overflow: hidden;
        color: rgb(100 116 139);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.7rem;
        line-height: 0.92rem;
    }

    .food-stock-item-meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        gap: 0.18rem 0.45rem;
        align-items: center;
        min-width: 0;
    }

    .food-stock-item-fact {
        white-space: nowrap;
        font-size: 0.7rem;
        line-height: 0.92rem;
        color: rgb(51 65 85);
    }

    .food-stock-item-fact strong {
        margin-right: 0.16rem;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: rgb(148 163 184);
    }

    .food-stock-item-qty {
        grid-area: qty;
        align-self: start;
        min-width: 78px;
        text-align: right;
        white-space: nowrap;
    }

    .food-stock-item-qty-label {
        font-size: 0.6rem;
        line-height: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgb(148 163 184);
    }

    .food-stock-item-qty-value {
        margin-top: 0.1rem;
        font-size: 1rem;
        line-height: 1;
        font-weight: 800;
        color: rgb(15 23 42);
    }

    .food-stock-item-qty-unit {
        margin-top: 0.06rem;
        font-size: 0.66rem;
        color: rgb(100 116 139);
    }

    .food-stock-actions {
        grid-area: actions;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.3rem;
        min-width: 168px;
    }

    .food-stock-actions form {
        flex: 1 1 76px;
    }

    .food-stock-actions > a,
    .food-stock-actions > button,
    .food-stock-actions form > button {
        min-height: 31px;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        font-size: 0.74rem !important;
    }

    .food-stock-item-card .rounded-full {
        padding: 0.2rem 0.46rem !important;
        font-size: 0.65rem !important;
        line-height: 0.88rem !important;
    }

    @media (max-width: 640px) {
        .food-stock-mini-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .food-stock-stat-card {
            padding: 0.78rem 0.82rem;
        }
    }

    @media (max-width: 1024px) {
        .food-stock-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .food-stock-item-card {
            gap: 0.45rem;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "main qty"
                "meta meta"
                "actions actions";
            padding: 0.56rem 0.62rem;
            align-items: start;
        }

        .food-stock-actions {
            justify-content: flex-start;
            min-width: 0;
        }
    }

    @media (max-width: 640px) {
        .food-stock-filter-grid,
        .food-stock-actions {
            grid-template-columns: 1fr;
        }

        .food-stock-filter-card {
            padding: 0.7rem;
        }

        .food-stock-filter-grid {
            gap: 0.45rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .food-stock-filter-grid > .food-stock-filter-block:first-child,
        .food-stock-filter-actions {
            grid-column: 1 / -1;
        }

        .food-stock-filter-block label {
            margin-bottom: 0.22rem;
            font-size: 0.58rem;
            line-height: 0.76rem;
        }

        .food-stock-filter-actions {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.34rem;
            min-width: 0;
        }

        .food-stock-filter-actions > * {
            min-height: 34px;
        }

        .food-stock-item-card {
            gap: 0.34rem;
            padding: 0.52rem 0.56rem;
        }

        .food-stock-item-badges {
            gap: 0.18rem;
            margin-bottom: 0.08rem;
        }

        .food-stock-item-title-line {
            gap: 0.2rem;
        }

        .food-stock-item-title-line h2 {
            font-size: 0.88rem;
            line-height: 1rem;
        }

        .food-stock-item-subline {
            margin-top: 0.06rem;
            font-size: 0.67rem;
            line-height: 0.86rem;
        }

        .food-stock-item-meta {
            gap: 0.12rem 0.36rem;
        }

        .food-stock-item-fact {
            font-size: 0.67rem;
            line-height: 0.86rem;
        }

        .food-stock-item-fact strong {
            margin-right: 0.12rem;
            font-size: 0.57rem;
        }

        .food-stock-item-qty {
            display: flex;
            align-items: baseline;
            gap: 0.18rem;
            min-width: auto;
            text-align: right;
        }

        .food-stock-item-qty-label {
            display: none;
        }

        .food-stock-item-qty-value {
            margin-top: 0;
            font-size: 0.96rem;
        }

        .food-stock-item-qty-unit {
            margin-top: 0;
            font-size: 0.64rem;
        }

        .food-stock-actions {
            gap: 0.26rem;
            justify-content: flex-start;
        }

        .food-stock-actions form {
            flex: 0 0 auto;
        }

        .food-stock-actions > a,
        .food-stock-actions > button,
        .food-stock-actions form > button {
            min-height: 30px;
            padding-top: 0.34rem !important;
            padding-bottom: 0.34rem !important;
            padding-left: 0.58rem !important;
            padding-right: 0.58rem !important;
            font-size: 0.71rem !important;
        }

        .food-stock-item-card .rounded-full {
            padding: 0.16rem 0.4rem !important;
            font-size: 0.61rem !important;
            line-height: 0.8rem !important;
        }

        .food-stock-field {
            border-radius: 0.78rem;
            padding: 0.58rem 0.72rem;
            font-size: 0.8rem;
        }
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50 py-4 sm:py-5">
    <div class="container mx-auto px-3 sm:px-4">
        <div class="mx-auto max-w-7xl">
            @if(session('success'))
                <div class="mb-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mb-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            <div class="food-stock-toolbar mb-4 rounded-3xl bg-white/78 p-4 sm:p-5 shadow-sm">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <div class="mb-2 inline-flex items-center rounded-full bg-orange-50 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-orange-700 sm:px-3">
                            Cuisine uniquement
                        </div>
                        <h1 class="text-2xl font-bold text-slate-900 sm:text-3xl">Stock cuisine</h1>
                        <p class="mt-1 max-w-2xl text-sm text-slate-500">
                            Gere uniquement les ingredients, sauces, boissons et emballages utilises dans tes produits food.
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('prestataire.food-orders.dashboard') }}" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Cuisine</a>
                        <a href="{{ route('prestataire.food-products.index') }}" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Menu</a>
                        <a href="{{ route('prestataire.food-stock.create') }}" class="inline-flex items-center rounded-2xl bg-orange-500 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-orange-600">Ajouter</a>
                    </div>
                </div>
            </div>

            <div class="food-stock-mini-grid mb-5 grid gap-3 sm:grid-cols-3 xl:grid-cols-6">
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Articles</p>
                        <p class="mt-1 text-xl font-bold text-slate-900">{{ $stats['total_items'] }}</p>
                    </div>
                    <span class="text-xl">🥫</span>
                </div>
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Faible</p>
                        <p class="mt-1 text-xl font-bold text-amber-600">{{ $stats['low_stock'] }}</p>
                    </div>
                    <span class="text-xl">⚠️</span>
                </div>
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Rupture</p>
                        <p class="mt-1 text-xl font-bold text-red-600">{{ $stats['out_of_stock'] }}</p>
                    </div>
                    <span class="text-xl">⛔</span>
                </div>
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Valeur</p>
                        <p class="mt-1 text-xl font-bold text-emerald-700">{{ number_format($stats['stock_value'], 2, ',', ' ') }} €</p>
                    </div>
                    <span class="text-xl">💶</span>
                </div>
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Lies menu</p>
                        <p class="mt-1 text-xl font-bold text-slate-900">{{ $stats['linked_items'] }}</p>
                    </div>
                    <span class="text-xl">🍽️</span>
                </div>
                <div class="food-stock-card food-stock-stat-card">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Non lies</p>
                        <p class="mt-1 text-xl font-bold text-slate-900">{{ $stats['unused_items'] }}</p>
                    </div>
                    <span class="text-xl">🧪</span>
                </div>
            </div>

            <form method="GET" class="food-stock-card food-stock-filter-card mb-4">
                <div class="food-stock-filter-grid">
                    <div class="food-stock-filter-block">
                        <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Recherche</label>
                        <input
                            type="text"
                            name="search"
                            value="{{ request('search') }}"
                            placeholder="Nom, fournisseur, reference..."
                            class="food-stock-field"
                        >
                    </div>
                    <div class="food-stock-filter-block">
                        <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Categorie</label>
                        <select
                            name="category"
                            class="food-stock-field"
                        >
                            <option value="">Toutes</option>
                            @foreach($categories as $category)
                                <option value="{{ $category }}" @selected(request('category') === $category)>{{ ucfirst(str_replace('_', ' ', $category)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="food-stock-filter-block">
                        <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Etat</label>
                        <select
                            name="status"
                            class="food-stock-field"
                        >
                            <option value="">Tous</option>
                            <option value="ok" @selected(request('status') === 'ok')>Stock OK</option>
                            <option value="low" @selected(request('status') === 'low')>Stock faible</option>
                            <option value="out" @selected(request('status') === 'out')>Rupture</option>
                            <option value="unused" @selected(request('status') === 'unused')>Non lie au menu</option>
                        </select>
                    </div>
                    <div class="food-stock-filter-actions">
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800">Filtrer</button>
                        @if(request()->filled('search') || request()->filled('category') || request()->filled('status'))
                            <a href="{{ route('prestataire.food-stock.index') }}" class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Effacer</a>
                        @endif
                    </div>
                </div>
            </form>

            @if($items->count() === 0)
                <div class="food-stock-card p-8 text-center sm:p-10">
                    <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-orange-50 text-3xl">🥫</div>
                    <h2 class="text-lg font-bold text-slate-900 sm:text-xl">Aucun article cuisine</h2>
                    <p class="mx-auto mt-2 max-w-md text-sm text-slate-500">Ajoute ici les ingredients et consommables reels, puis selectionne-les ensuite dans tes recettes food.</p>
                    <a href="{{ route('prestataire.food-stock.create') }}" class="mt-4 inline-flex items-center rounded-2xl bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-600">Ajouter</a>
                </div>
            @else
                <div class="space-y-3">
                    @foreach($items as $item)
                        @php
                            $quantity = (float) $item->quantity;
                            $reorderLevel = (float) ($item->reorder_level ?? 0);
                            $quantityLabel = rtrim(rtrim(number_format($quantity, 3, ',', ' '), '0'), ',');
                            $reorderLevelLabel = rtrim(rtrim(number_format($reorderLevel, 3, ',', ' '), '0'), ',');
                            $usageCount = (int) ($item->usage_count ?? 0);
                            $sublineParts = array_values(array_filter([
                                $item->supplier,
                                $item->sku ? 'Ref ' . $item->sku : null,
                                $item->location,
                            ]));
                            $status = $quantity <= 0 ? 'out' : ($quantity <= $reorderLevel ? 'low' : 'ok');
                            $statusClasses = [
                                'ok' => 'bg-emerald-50 text-emerald-700',
                                'low' => 'bg-amber-50 text-amber-700',
                                'out' => 'bg-red-50 text-red-700',
                            ];
                        @endphp

                        <div class="food-stock-card food-stock-item-card">
                            <div class="food-stock-item-main">
                                <div class="food-stock-item-badges">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold {{ $statusClasses[$status] }}">
                                        {{ $status === 'ok' ? 'Stock OK' : ($status === 'low' ? 'Stock faible' : 'Rupture') }}
                                    </span>
                                    @if($usageCount > 0)
                                        <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">
                                            {{ $usageCount }} recette{{ $usageCount > 1 ? 's' : '' }}
                                        </span>
                                    @endif
                                    @if($usageCount === 0)
                                        <span class="rounded-full bg-orange-50 px-2.5 py-1 text-orange-700">Pas lie au menu</span>
                                    @endif
                                </div>

                                <div class="food-stock-item-title-line">
                                    <h2>{{ $item->name }}</h2>
                                    <span class="rounded-full bg-slate-100 px-2 py-0.5 text-slate-600">
                                        {{ ucfirst(str_replace('_', ' ', $item->category ?? 'autre')) }}
                                    </span>
                                </div>

                                @if(!empty($sublineParts))
                                    <p class="food-stock-item-subline">{{ implode(' • ', $sublineParts) }}</p>
                                @endif
                            </div>

                            <div class="food-stock-item-meta">
                                <span class="food-stock-item-fact">
                                    <strong>Cout</strong>{{ number_format((float) $item->cost_per_unit, 2, ',', ' ') }} € / {{ $item->unit }}
                                </span>
                                <span class="food-stock-item-fact">
                                    <strong>Valeur</strong>{{ number_format($quantity * (float) $item->cost_per_unit, 2, ',', ' ') }} €
                                </span>
                                <span class="food-stock-item-fact">
                                    <strong>Alerte</strong>{{ $reorderLevelLabel }} {{ $item->unit }}
                                </span>
                            </div>

                            <div class="food-stock-item-qty">
                                <p class="food-stock-item-qty-label">Stock</p>
                                <p class="food-stock-item-qty-value">{{ $quantityLabel }}</p>
                                <p class="food-stock-item-qty-unit">{{ $item->unit }}</p>
                            </div>

                            <div class="food-stock-actions">
                                <button
                                    type="button"
                                    data-stock-item="{{ $item->id }}"
                                    data-stock-name="{{ e($item->name) }}"
                                    data-stock-qty="{{ $quantity }}"
                                    data-stock-unit="{{ $item->unit }}"
                                    class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-3.5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800"
                                >
                                    Ajuster
                                </button>
                                <a href="{{ route('prestataire.food-stock.edit', $item) }}" class="inline-flex items-center justify-center rounded-2xl bg-slate-100 px-3.5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                                    Modifier
                                </a>
                                <form action="{{ route('prestataire.food-stock.destroy', $item) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button
                                        type="submit"
                                        class="inline-flex w-full items-center justify-center rounded-2xl bg-red-50 px-3.5 py-2.5 text-sm font-semibold text-red-600 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
                                        @disabled($usageCount > 0)
                                        onclick="return confirm('Supprimer cet article du stock cuisine ?');"
                                    >
                                        Supprimer
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if($items->hasPages())
                    <div class="mt-6">
                        {{ $items->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>
</div>

<div id="foodStockModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/55 p-4">
    <div class="w-full max-w-md rounded-3xl bg-white p-4 shadow-2xl sm:p-5">
        <div class="mb-4 flex items-start justify-between gap-3">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Ajustement</p>
                <h3 id="foodStockModalTitle" class="mt-1 text-lg font-bold text-slate-900 sm:text-xl">Stock cuisine</h3>
                <p class="mt-1 text-sm text-slate-500">Stock actuel: <span id="foodStockModalQty">0</span> <span id="foodStockModalUnit"></span></p>
            </div>
            <button type="button" id="foodStockModalClose" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200">×</button>
        </div>

        <form id="foodStockModalForm" method="POST" class="space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-3">
                <button type="button" data-stock-action="add" class="food-stock-action inline-flex items-center justify-center rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm font-semibold text-emerald-700">
                    Ajouter
                </button>
                <button type="button" data-stock-action="remove" class="food-stock-action inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700">
                    Retirer
                </button>
            </div>

            <div>
                <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Quantite</label>
                <input type="number" name="quantity" min="0.001" step="0.001" value="1" required class="food-stock-field">
            </div>

            <div>
                <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Raison</label>
                <input type="text" name="reason" maxlength="200" placeholder="Inventaire, perte, livraison fournisseur..." class="food-stock-field">
            </div>

            <input type="hidden" name="action" id="foodStockModalAction" value="add">

            <div class="grid grid-cols-2 gap-3">
                <button type="button" id="foodStockModalCancel" class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                    Annuler
                </button>
                <button type="submit" class="inline-flex items-center justify-center rounded-2xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-600">
                    Valider
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('foodStockModal');
    const form = document.getElementById('foodStockModalForm');
    const title = document.getElementById('foodStockModalTitle');
    const qty = document.getElementById('foodStockModalQty');
    const unit = document.getElementById('foodStockModalUnit');
    const actionInput = document.getElementById('foodStockModalAction');
    const actionButtons = Array.from(document.querySelectorAll('.food-stock-action'));

    const closeModal = function () {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    };

    const syncActionUi = function (action) {
        actionInput.value = action;

        actionButtons.forEach(function (button) {
            const isActive = button.dataset.stockAction === action;
            button.className = isActive
                ? 'food-stock-action inline-flex items-center justify-center rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700'
                : 'food-stock-action inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700';
        });

        if (action === 'remove') {
            actionButtons.forEach(function (button) {
                if (button.dataset.stockAction === 'remove') {
                    button.className = 'food-stock-action inline-flex items-center justify-center rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700';
                }
            });
        }
    };

    document.querySelectorAll('[data-stock-item]').forEach(function (button) {
        button.addEventListener('click', function () {
            const itemId = button.dataset.stockItem;
            form.action = '{{ url('prestataire/food/stock') }}/' + itemId + '/adjust';
            title.textContent = button.dataset.stockName || 'Stock cuisine';
            qty.textContent = button.dataset.stockQty || '0';
            unit.textContent = button.dataset.stockUnit || '';
            syncActionUi('add');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        });
    });

    actionButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            syncActionUi(button.dataset.stockAction || 'add');
        });
    });

    document.getElementById('foodStockModalClose')?.addEventListener('click', closeModal);
    document.getElementById('foodStockModalCancel')?.addEventListener('click', closeModal);
    modal?.addEventListener('click', function (event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            closeModal();
        }
    });
});
</script>
@endpush