@php
    $clientOptions = $clients->map(fn ($c) => ['id' => $c->id, 'label' => $c->code.' · '.$c->business_name])->values();
    $productOptions = $purchaseProductOptions ?? \App\Support\SearchOptions::products();
    $taxDefaultRate = $taxDefaultRate ?? \App\Services\Orders\OrderLineCalculator::defaultTaxRate();
    $taxDefaultMode = $taxDefaultMode ?? \App\Services\Orders\OrderLineCalculator::defaultTaxMode();
    $supplierOptions = $suppliers->map(fn ($s) => ['id' => $s->id, 'label' => $s->business_name])->values();
    $categoryOptions = $categories->map(fn ($i) => ['id' => $i->id, 'label' => $i->name])->values();
    $brandOptions = $brands->map(fn ($i) => ['id' => $i->id, 'label' => $i->name])->values();
    $presentationOptions = $presentations->map(fn ($i) => ['id' => $i->id, 'label' => $i->name])->values();
    $unitOptions = $units->map(fn ($i) => ['id' => $i->id, 'label' => $i->name])->values();
    $businessTypeOptions = $businessTypes->map(fn ($t) => ['id' => $t->id, 'label' => $t->name])->values();
    $orderOptions = $unpaidOrders->map(fn ($o) => [
        'id' => $o->id,
        'label' => $o->number.' · '.$o->client->business_name.' · $'.$o->total,
        'client_id' => $o->client_id,
    ])->values();
@endphp

{{-- Abrir caja --}}
<div class="modal fade" id="modalOpenCash" tabindex="-1" data-bs-backdrop="true">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ route('cash.open') }}">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Abrir caja</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <label class="form-label">Saldo inicial</label>
                <input class="form-control mb-3" type="number" step="0.0001" min="0" name="opening_balance" required>
                <label class="form-label">Observaciones</label>
                <textarea class="form-control" name="notes"></textarea>
            </div>
            <div class="modal-footer"><button class="btn btn-success" type="submit">Abrir caja</button></div>
        </form>
    </div>
</div>

{{-- Egreso (disponible siempre; exige caja abierta al guardar) --}}
<div class="modal fade" id="modalExpense" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ route('expenses.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Nuevo egreso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                @if(! $openCash)
                    <div class="alert alert-warning mb-3">
                        No hay caja abierta. Abre la caja del día para registrar egresos.
                        @if(auth()->user()->hasPermission('cash.open'))
                            <div class="mt-2">
                                <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#modalOpenCash">
                                    Abrir caja
                                </button>
                            </div>
                        @endif
                    </div>
                @endif

                @error('cash')
                    <div class="alert alert-danger">{{ $message }}</div>
                @enderror

                <label class="form-label">Categoría</label>
                <select class="form-select mb-3 @error('category') is-invalid @enderror" name="category" required @disabled(! $openCash)>
                    <option value="">Seleccione…</option>
                    @foreach(\App\Enums\ExpenseCategory::cases() as $cat)
                        <option value="{{ $cat->value }}" @selected(old('category') === $cat->value)>{{ $cat->label() }}</option>
                    @endforeach
                </select>
                @error('category')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror

                <label class="form-label">Monto</label>
                <input class="form-control mb-3 @error('amount') is-invalid @enderror" type="number" step="0.0001" min="0.0001" name="amount" value="{{ old('amount') }}" required @disabled(! $openCash)>
                @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror

                <label class="form-label">Descripción</label>
                <textarea class="form-control mb-3 @error('description') is-invalid @enderror" name="description" required @disabled(! $openCash)>{{ old('description') }}</textarea>
                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror

                <label class="form-label">Comprobante <span class="text-secondary">(opcional)</span></label>
                <input class="form-control @error('attachment') is-invalid @enderror" type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png,.webp" @disabled(! $openCash)>
                <div class="form-text">PDF o imagen, máx. 5 MB.</div>
                @error('attachment')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit" @disabled(! $openCash)>Registrar egreso</button>
            </div>
        </form>
    </div>
</div>

{{-- Pedido --}}
@include('orders.partials.modal-nuevo-pedido')

{{-- Stock rápido --}}
<div class="modal fade" id="modalNewStock" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" id="formNewStock" action="#">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Agregar stock</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <label class="form-label">Producto</label>
                <div
                    class="searchable mb-3"
                    id="newStockProductSearch"
                    data-name="product_id_ui"
                    data-required="1"
                    data-placeholder="Escriba para buscar producto…"
                    data-allow-create="1"
                    data-create-label="Agregar"
                    data-options="{{ json_encode($productOptions) }}"
                ></div>
                <div class="inline-create-panel d-none mb-3" id="stockNewProductPanel">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong>Nuevo producto</strong>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="cancelStockNewProduct">Cancelar</button>
                    </div>
                    <p class="small text-secondary mb-2">SKU automático (PRD-######).</p>
                    <div class="row g-2">
                        <div class="col-8"><input class="form-control" id="snp_name" placeholder="Nombre"></div>
                        <div class="col-4">
                            <select class="form-select" id="snp_unit_id">
                                @foreach($units as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
                            </select>
                        </div>
                    </div>
                    <div class="text-danger small mt-2 d-none" id="snp_error"></div>
                    <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="saveStockNewProduct">Guardar y seleccionar</button>
                </div>
                <label class="form-label">Proveedor</label>
                <div
                    class="searchable mb-3"
                    data-name="supplier_id"
                    data-required="1"
                    data-placeholder="Escriba para buscar proveedor…"
                    data-options="{{ json_encode($supplierOptions) }}"
                ></div>
                <label class="form-label">Cantidad</label>
                <input class="form-control mb-3" type="number" step="0.0001" min="0.0001" name="quantity" required>
                <label class="form-label">Costo unitario</label>
                <input class="form-control mb-3" type="number" step="0.0001" min="0" name="unit_cost" required>
                <label class="form-label">Precio venta ref.</label>
                <input class="form-control mb-3" type="number" step="0.0001" min="0" name="reference_sale_price">
                <label class="form-label">Notas</label>
                <textarea class="form-control" name="notes"></textarea>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="submit">Agregar</button></div>
        </form>
    </div>
</div>

{{-- Agregar stock a producto de tabla --}}
<div class="modal fade" id="modalAddStock" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" id="addStockForm" action="#">
            @csrf
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0">Agregar stock · <span id="addStockProductName"></span></h5>
                    <div class="small text-secondary" id="addStockPackInfo"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Proveedor</label>
                <div
                    class="searchable mb-3"
                    data-name="supplier_id"
                    data-required="1"
                    data-placeholder="Escriba para buscar proveedor…"
                    data-options="{{ json_encode($supplierOptions) }}"
                ></div>
                <div class="border rounded p-3 bg-light mb-3" id="dashPackEntry">
                    <div class="fw-semibold mb-2">Empaque de esta compra</div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label" for="dash_units_per_pack">Unidades/Empaque</label>
                            <input class="form-control" type="number" min="1" step="1" name="units_per_pack" id="dash_units_per_pack" value="1" required>
                            <div class="form-text">Ej. 6, 12 o 24</div>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label" for="dash_pack_name">Tipo de empaque</label>
                            <input class="form-control" name="pack_name" id="dash_pack_name" list="dash_pack_presets" placeholder="Caja, Six-pack, 12-pack…">
                            <datalist id="dash_pack_presets">
                                <option value="Caja"></option>
                                <option value="Six-pack"></option>
                                <option value="12-pack"></option>
                                <option value="Pack"></option>
                            </datalist>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Ingresar como</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="entry_mode" id="dash_mode_packs" value="packs" autocomplete="off">
                            <label class="btn btn-outline-primary" for="dash_mode_packs" id="dash_mode_packs_label">Empaques / cajas</label>
                            <input type="radio" class="btn-check" name="entry_mode" id="dash_mode_base" value="base" checked autocomplete="off">
                            <label class="btn btn-outline-primary" for="dash_mode_base" id="dash_mode_base_label">Unidades</label>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label" id="dash_qty_label" for="dash_quantity">Cantidad</label>
                            <input class="form-control" type="number" step="0.0001" min="0.0001" name="quantity" id="dash_quantity" required>
                            <div class="form-text" id="dash_qty_hint"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" id="dash_cost_label" for="dash_unit_cost">Costo</label>
                            <input class="form-control" type="number" step="0.0001" min="0" name="unit_cost" id="dash_unit_cost" required>
                            <input type="hidden" name="cost_mode" id="dash_cost_mode" value="base">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" id="dash_pvp_label" for="dash_sale_price">P.V.P.</label>
                            <input class="form-control" type="number" step="0.0001" min="0" name="reference_sale_price" id="dash_sale_price" placeholder="Precio de venta">
                        </div>
                    </div>
                    <div class="alert alert-light border small mb-0 mt-3" id="dash_stock_preview">El inventario se guarda siempre en unidades base.</div>
                </div>
                <label class="form-label">Notas</label>
                <textarea class="form-control" name="notes"></textarea>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="submit">Agregar stock</button></div>
        </form>
    </div>
</div>

{{-- Producto --}}
<div class="modal fade" id="modalNewProduct" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('products.store') }}">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Nuevo producto</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12"><label class="form-label">Nombre</label><input class="form-control" name="name" required></div>
                    <p class="small text-secondary mb-0">El SKU se genera automáticamente.</p>
                    <div class="col-md-3">
                        <label class="form-label">Categoría</label>
                        <div class="searchable" id="dashNewProductCategory" data-name="category_id" data-placeholder="Escriba para buscar o crear…" data-options="{{ json_encode($categoryOptions) }}" data-allow-create="1" data-create-label="Crear categoría"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Marca</label>
                        <div class="searchable" id="dashNewProductBrand" data-name="brand_id" data-placeholder="Escriba para buscar o crear…" data-options="{{ json_encode($brandOptions) }}" data-allow-create="1" data-create-label="Crear marca"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label d-inline-flex align-items-center gap-1">
                            Presentación
                            <x-help-tip text="Formato del producto (Lata 355ml, Botella 1L). Es descriptivo; no multiplica el inventario." />
                        </label>
                        <div class="searchable" id="dashNewProductPresentation" data-name="presentation_id" data-placeholder="Ej. Lata 355ml…" data-options="{{ json_encode($presentationOptions) }}" data-allow-create="1" data-create-label="Crear presentación"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label d-inline-flex align-items-center gap-1">
                            Unidad de inventario
                            <x-help-tip text="Unidad mínima con la que se guarda el stock: lata, botella, pieza. No uses “caja” aquí." />
                        </label>
                        <div class="searchable" id="dashNewProductUnit" data-name="unit_id" data-required="1" data-placeholder="Ej. lata, botella…" data-options="{{ json_encode($unitOptions) }}" data-allow-create="1" data-create-label="Crear unidad"></div>
                    </div>
                    @include('products.partials.pack-fields')
                    <div class="col-md-4"><label class="form-label">Stock mínimo (unidades)</label><input class="form-control" type="number" step="0.0001" min="0" name="minimum_stock" value="0" required></div>
                    <div class="col-md-4"><label class="form-label">Foto</label><input class="form-control" type="file" name="photo" accept="image/jpeg,image/png,image/webp"></div>
                    <div class="col-12"><label><input type="checkbox" name="is_active" value="1" checked> Activo</label></div>
                </div>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="submit">Guardar producto</button></div>
        </form>
    </div>
</div>

{{-- Cliente --}}
<div class="modal fade" id="modalNewClient" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('clients.store') }}">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Nuevo cliente</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-8"><label class="form-label">Negocio</label><input class="form-control" name="business_name" required></div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo</label>
                        <div class="searchable" data-name="business_type_id" data-required="1" data-placeholder="Buscar tipo…" data-options="{{ json_encode($businessTypeOptions) }}"></div>
                    </div>
                    <p class="small text-secondary mb-0">El código se genera automáticamente.</p>
                    <div class="col-md-6"><label class="form-label">Razón social</label><input class="form-control" name="billing[legal_name]" required></div>
                    <div class="col-md-6"><label class="form-label">RUC/cédula</label><input class="form-control" name="billing[tax_identification]" required></div>
                    <div class="col-12"><label class="form-label">Dirección facturación</label><textarea class="form-control" name="billing[address]" required></textarea></div>
                    <div class="col-md-4"><label class="form-check"><input class="form-check-input" type="checkbox" name="credit[is_enabled]" value="1"> Crédito</label></div>
                    <div class="col-md-4"><label class="form-label">Límite</label><input class="form-control" type="number" step="0.0001" min="0" name="credit[credit_limit]" value="0" required></div>
                    <div class="col-md-4"><label class="form-label">Días</label><input class="form-control" type="number" min="0" name="credit[credit_days]" value="0" required></div>
                    <div class="col-12"><label><input type="checkbox" name="is_active" value="1" checked> Activo</label></div>
                </div>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="submit">Guardar cliente</button></div>
        </form>
    </div>
</div>

{{-- Ver crédito --}}
<div class="modal fade" id="modalViewCredit" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Detalle de crédito</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body" id="creditDetails"></div>
        </div>
    </div>
</div>

{{-- Registrar pago --}}
<div class="modal fade" id="modalRegisterPayment" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('payments.store') }}">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Registrar pago · <span id="payClientName"></span></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <label class="form-label">Pedido</label>
                <div
                    class="searchable mb-3"
                    id="payOrderSearch"
                    data-name="order_id"
                    data-required="1"
                    data-placeholder="Escriba para buscar pedido…"
                    data-options="{{ json_encode($orderOptions) }}"
                ></div>
                <label class="form-label">Fecha</label>
                <input class="form-control mb-3" type="datetime-local" name="paid_at" value="{{ now()->format('Y-m-d\TH:i') }}" required>
                <label class="form-label">Monto</label>
                <input class="form-control mb-3" type="number" step="0.0001" min="0.0001" name="amount" required>
                <label class="form-label">Método</label>
                <select class="form-select mb-3" name="method">
                    @foreach(\App\Enums\PaymentMethod::collectableCases() as $m)
                        <option value="{{ $m->value }}">{{ $m->label() }}</option>
                    @endforeach
                </select>
                <label class="form-label">Referencia</label>
                <input class="form-control mb-3" name="reference">
                <label class="form-label">Comprobante</label>
                <input class="form-control" type="file" name="receipt">
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="submit">Registrar pago</button></div>
        </form>
    </div>
</div>

{{-- Seleccionar producto para gestionar stock --}}
<div class="modal fade" id="modalSelectStockProduct" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0">Ver stock de producto</h5>
                    <div class="small text-secondary">Elija el producto para ir a su inventario</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Producto</label>
                <div
                    class="searchable"
                    id="selectStockProductSearch"
                    data-name="stock_product_id"
                    data-required="1"
                    data-placeholder="Escriba SKU o nombre…"
                    data-options="{{ json_encode($purchaseProductOptions ?? $productOptions) }}"
                ></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="button" id="btnGoStockProduct">
                    <i class="bi bi-box-seam"></i> Ir a inventario
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(() => {
    const inventoryBase = @json(url('/products'));
    document.getElementById('btnGoStockProduct')?.addEventListener('click', () => {
        const id = document.getElementById('selectStockProductSearch')?.getValue?.()
            || document.querySelector('#selectStockProductSearch input[type="hidden"]')?.value;
        if (!id) {
            alert('Seleccione un producto');
            return;
        }
        window.location.href = `${inventoryBase}/${id}/inventory`;
    });
    document.getElementById('selectStockProductSearch')?.addEventListener('searchable:change', (e) => {
        if (e.detail?.id) {
            window.location.href = `${inventoryBase}/${e.detail.id}/inventory`;
        }
    });
})();
</script>

<script>
(() => {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    const clientPanel = document.getElementById('orderNewClientPanel');
    const productPanel = document.getElementById('orderNewProductPanel');
    const stockProductPanel = document.getElementById('stockNewProductPanel');
    const clientSearch = document.getElementById('orderClientSearch');
    const productSearch = document.getElementById('orderProductSearch');
    const stockProductSearch = document.getElementById('newStockProductSearch');

    async function postJson(url, payload) {
        const res = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(payload),
        });
        const data = await res.json().catch(() => ({}));
        return { res, data };
    }

    clientSearch?.addEventListener('searchable:create', (e) => {
        clientPanel.classList.remove('d-none');
        productPanel?.classList.add('d-none');
        const q = e.detail.query || '';
        document.getElementById('nc_business_name').value = q;
        document.getElementById('nc_legal_name').value = q;
        document.getElementById('nc_error').classList.add('d-none');
    });

    productSearch?.addEventListener('searchable:create', (e) => {
        productPanel.classList.remove('d-none');
        clientPanel?.classList.add('d-none');
        document.getElementById('np_name').value = e.detail.query || '';
        document.getElementById('np_error').classList.add('d-none');
    });

    stockProductSearch?.addEventListener('searchable:create', (e) => {
        stockProductPanel.classList.remove('d-none');
        document.getElementById('snp_name').value = e.detail.query || '';
        document.getElementById('snp_error').classList.add('d-none');
    });

    document.getElementById('cancelNewClient')?.addEventListener('click', () => clientPanel.classList.add('d-none'));
    document.getElementById('cancelNewProduct')?.addEventListener('click', () => productPanel.classList.add('d-none'));
    document.getElementById('cancelStockNewProduct')?.addEventListener('click', () => stockProductPanel.classList.add('d-none'));

    document.getElementById('saveNewClient')?.addEventListener('click', async () => {
        const errorBox = document.getElementById('nc_error');
        errorBox.classList.add('d-none');
        const payload = {
            business_name: document.getElementById('nc_business_name').value.trim(),
            business_type_id: document.getElementById('nc_business_type_id').value,
            billing: {
                legal_name: document.getElementById('nc_legal_name').value.trim(),
                tax_identification: document.getElementById('nc_tax_id').value.trim(),
                address: document.getElementById('nc_address').value.trim(),
            },
            credit: { is_enabled: 0, credit_limit: 0, credit_days: 0 },
            is_active: 1,
        };
        const { res, data } = await postJson(`{{ route('clients.store') }}`, payload);
        if (!res.ok) {
            errorBox.textContent = data.errors ? Object.values(data.errors)[0][0] : (data.message || 'No se pudo crear el cliente');
            errorBox.classList.remove('d-none');
            return;
        }
        clientSearch.addOption({ id: data.id, label: data.label });
        clientPanel.classList.add('d-none');
    });

    async function createProductFromPanel({ nameId, unitId, categoryId, brandId, presentationId, minStockId, errorId, searchEl, panelEl }) {
        const errorBox = document.getElementById(errorId);
        errorBox.classList.add('d-none');
        const payload = {
            name: document.getElementById(nameId).value.trim(),
            unit_id: document.getElementById(unitId).value,
            category_id: categoryId ? (document.getElementById(categoryId).value || null) : null,
            brand_id: brandId ? (document.getElementById(brandId).value || null) : null,
            presentation_id: presentationId ? (document.getElementById(presentationId).value || null) : null,
            minimum_stock: minStockId ? (document.getElementById(minStockId).value || 0) : 0,
            is_active: 1,
            is_returnable: 0,
        };
        const { res, data } = await postJson(`{{ route('products.store') }}`, payload);
        if (!res.ok) {
            errorBox.textContent = data.errors ? Object.values(data.errors)[0][0] : (data.message || 'No se pudo crear el producto');
            errorBox.classList.remove('d-none');
            return;
        }
        searchEl.addOption({ id: data.id, label: data.label });
        panelEl.classList.add('d-none');
    }

    document.getElementById('saveNewProduct')?.addEventListener('click', () => createProductFromPanel({
        nameId: 'np_name',
        unitId: 'np_unit_id',
        categoryId: 'np_category_id',
        brandId: 'np_brand_id',
        presentationId: 'np_presentation_id',
        minStockId: 'np_minimum_stock',
        errorId: 'np_error',
        searchEl: productSearch,
        panelEl: productPanel,
    }));

    document.getElementById('saveStockNewProduct')?.addEventListener('click', () => createProductFromPanel({
        nameId: 'snp_name',
        unitId: 'snp_unit_id',
        errorId: 'snp_error',
        searchEl: stockProductSearch,
        panelEl: stockProductPanel,
    }));

    document.getElementById('formNewStock')?.addEventListener('submit', function (e) {
        const productId = this.querySelector('[name="product_id_ui"]')?.value;
        if (!productId) {
            e.preventDefault();
            alert('Seleccione un producto');
            return;
        }
        this.action = `{{ url('/dashboard/products') }}/${productId}/add-stock`;
    });

    async function createCatalogItem(catalog, name) {
        const urls = {
            categories: @json(route('catalogs.store', 'categories')),
            brands: @json(route('catalogs.store', 'brands')),
            presentations: @json(route('catalogs.store', 'presentations')),
            units: @json(route('catalogs.store', 'units')),
        };
        const res = await fetch(urls[catalog], {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({ name }),
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) {
            throw new Error(data.errors ? Object.values(data.errors)[0][0] : (data.message || 'No se pudo crear'));
        }
        return data;
    }

    function bindCatalogCreate(el, catalog) {
        el?.addEventListener('searchable:create', async (e) => {
            const name = (e.detail.query || '').trim();
            if (!name) return;
            try {
                const data = await createCatalogItem(catalog, name);
                el.addOption({ id: data.id, label: data.label });
            } catch (err) {
                alert(err.message || 'No se pudo crear');
            }
        });
    }

    bindCatalogCreate(document.getElementById('dashNewProductCategory'), 'categories');
    bindCatalogCreate(document.getElementById('dashNewProductBrand'), 'brands');
    bindCatalogCreate(document.getElementById('dashNewProductPresentation'), 'presentations');
    bindCatalogCreate(document.getElementById('dashNewProductUnit'), 'units');
})();
</script>