@extends('plantilla.app')
@section('titulo', 'PRODUCTOS')
@section('contenido')

{{-- ALERTAS --}}
@if (session('error'))
    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
        <i class="fa-regular fa-circle-xmark mr-1"></i> {{ session('error') }}
    </div>
@endif

@if ($errors->any() && !session('error'))
    <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
        <i class="fa-regular fa-circle-xmark mr-1"></i> {{ $errors->first() }}
    </div>
@endif

@if (session('success'))
    <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
        <i class="fa-regular fa-circle-check mr-1"></i> {{ session('success') }}
    </div>
@endif

<div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
        <p class="text-xs uppercase tracking-wider text-slate-500">Gestión</p>
        <h1 class="text-2xl font-bold text-slate-900">Productos</h1>
        <p class="mt-1 text-sm text-slate-500">Administra el catálogo de productos y su disponibilidad.</p>
    </div>

    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">

        {{-- Formulario unificado de Filtros y Búsqueda --}}
        <form method="GET" action="{{ route('productos') }}" class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">

            {{-- Solo mostramos el select si es ADMIN --}}
            @if(Auth::user()->tipo == 'ADMIN')
                <div class="relative">
                    <i class="fa-solid fa-warehouse absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm z-10"></i>
                    <select
                        name="almacen_id"
                        onchange="this.form.submit()"
                        class="w-full sm:w-56 appearance-none rounded-xl border border-black/10 bg-white/80 pl-9 pr-8 py-2 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100 cursor-pointer transition"
                    >
                        <option value="">Todos los almacenes</option>
                        @if(isset($almacenes))
                            @foreach($almacenes as $almacen)
                                <option value="{{ $almacen->id }}" {{ request('almacen_id') == $almacen->id ? 'selected' : '' }}>
                                    {{ $almacen->nombre }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                    <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs pointer-events-none z-10"></i>
                </div>
            @endif

            {{-- Buscador por texto --}}
            <div class="relative">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                <input
                    type="text"
                    name="q"
                    value="{{ request('q') }}"
                    placeholder="Buscar código o desc..."
                    class="w-full sm:w-60 rounded-xl border border-black/10 bg-white/80 pl-9 pr-3 py-2 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100 transition"
                >
            </div>

            {{-- Botón submit oculto para permitir envío con tecla Enter en el input --}}
            <button type="submit" class="hidden"></button>
        </form>

        {{-- Botón abre modal Agregar --}}
        <button type="button" id="btnOpenCreate"
           class="inline-flex items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-amber-200 transition hover:bg-amber-600 active:scale-[0.99] whitespace-nowrap">
            <i class="fa-solid fa-plus"></i> Agregar
        </button>
    </div>
</div>

<div class="mt-5 glass-card rounded-2xl border border-black/10 bg-white/80 p-5 shadow-xl shadow-indigo-100 backdrop-blur">
    <div class="overflow-hidden rounded-xl border border-black/10 bg-white shadow-inner shadow-indigo-50">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-600">
                    <tr class="border-b border-black/10">
                        <th class="px-4 py-3 text-left font-semibold">Código</th>
                        <th class="px-4 py-3 text-left font-semibold">Descripción</th>
                        <th class="px-4 py-3 text-left font-semibold">Marca</th>
                        <th class="px-4 py-3 text-center font-semibold">U. Medida</th>
                        <th class="px-4 py-3 text-center font-semibold">Estado</th>
                        <th class="px-4 py-3 text-right font-semibold">P. Unitario</th>
                        <th class="px-4 py-3 text-right font-semibold">Cantidad</th>
                        <th class="px-4 py-3 text-right font-semibold">Almacén</th>
                        <th class="px-4 py-3 text-right font-semibold">Acciones</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-black/5">
                    @forelse ($productos as $prod)
                        @php $activo = strtoupper((string)$prod->estado) === 'ACTIVO'; @endphp

                        <tr class="transition hover:bg-indigo-50/60 odd:bg-white even:bg-slate-50/40">
                            <td class="px-4 py-3 font-semibold text-slate-800">{{ $prod->cod_prod }}</td>
                            <td class="px-4 py-3 text-slate-700">{{ $prod->descripcion }}</td>
                            <td class="px-4 py-3 text-slate-700">{{ $prod->marca ?? '—' }}</td>
                            <td class="px-4 py-3 text-center text-slate-700">{{ $prod->umedida ?? '—' }}</td>

                            <td class="px-4 py-3 text-center">
                                <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold
                                    {{ $activo ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                    <span class="h-1.5 w-1.5 rounded-full {{ $activo ? 'bg-emerald-600' : 'bg-rose-600' }}"></span>
                                    {{ $prod->estado }}
                                </span>
                            </td>

                            <td class="px-4 py-3 text-right font-semibold text-slate-800">
                                {{ number_format((float)$prod->punitario, 2) }}
                            </td>
                            <td class="px-4 py-3 text-right text-slate-700">{{ $prod->cantidad }}</td>
                            <td class="px-4 py-3 text-right text-slate-700">{{ $prod->almacen->nombre ?? '—' }}</td>

                            <td class="px-4 py-3">
                                <div class="flex justify-end gap-2">

                                    {{-- Editar --}}
                                    <button
                                        type="button"
                                        class="btnOpenEdit inline-flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600/10 text-indigo-700 ring-1 ring-indigo-100 transition hover:bg-indigo-600/15 hover:-translate-y-[1px] active:translate-y-0"
                                        title="Editar"
                                        data-id="{{ $prod->id }}"
                                        data-cod_prod="{{ $prod->cod_prod }}"
                                        data-descripcion="{{ $prod->descripcion }}"
                                        data-marca="{{ $prod->marca }}"
                                        data-umedida="{{ $prod->umedida }}"
                                        data-estado="{{ $prod->estado }}"
                                        data-punitario="{{ $prod->punitario }}"
                                        data-cantidad="{{ $prod->cantidad }}"
                                    >
                                        <i class="fa-regular fa-pen-to-square text-sm"></i>
                                    </button>

                                    @if(Auth::user()->tipo == 'ADMIN')
                                        {{-- Eliminar --}}
                                        <button
                                            type="button"
                                            class="btnOpenDelete inline-flex h-9 w-9 items-center justify-center rounded-xl bg-rose-600/10 text-rose-700 ring-1 ring-rose-100 transition hover:bg-rose-600/15 hover:-translate-y-[1px] active:translate-y-0"
                                            title="Eliminar"
                                            data-id="{{ $prod->id }}"
                                            data-descripcion="{{ $prod->descripcion }}"
                                        >
                                            <i class="fa-regular fa-trash-can text-sm"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-4 py-10 text-center text-slate-500">
                                <i class="fa-regular fa-folder-open mr-1 text-xl mb-2 block"></i>
                                No hay productos registrados para esta selección.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if (method_exists($productos, 'links'))
        <div class="mt-4">
            {{ $productos->appends(request()->query())->links() }}
        </div>
    @endif
</div>

{{-- ===================== MODAL CREAR ===================== --}}
<div id="modalCreate" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-16 w-[95%] max-w-2xl rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-indigo-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <div>
                <h3 class="text-base font-bold text-slate-900">
                    <i class="fa-solid fa-plus mr-2 text-amber-600"></i> Agregar Producto
                </h3>
                <p class="mt-1 text-xs text-slate-500">Puedes registrar manualmente o importar desde la API.</p>
            </div>

            <div class="flex items-center gap-2">
                <button type="button" id="btnOpenImport"
                    class="inline-flex items-center gap-2 rounded-xl bg-indigo-600/10 px-3 py-2 text-xs font-semibold text-indigo-700 ring-1 ring-indigo-100 transition hover:bg-indigo-600/15">
                    <i class="fa-solid fa-cloud-arrow-down"></i> Importar productos
                </button>

                <button type="button" class="btnCloseCreate h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
        </div>

        <form method="POST" action="{{ route('productos.store') }}" class="p-5 space-y-4">
            @csrf

            {{-- almacen_id desde el usuario --}}
            <input type="hidden" name="almacen_id" value="{{ auth()->user()->almacen_id }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs font-semibold text-slate-600">Código</label>
                    <input id="create_cod_prod" name="cod_prod" required
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Estado</label>
                    <select id="create_estado" name="estado"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                        <option value="ACTIVO">ACTIVO</option>
                        <option value="INACTIVO">INACTIVO</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="text-xs font-semibold text-slate-600">Descripción</label>
                    <input id="create_descripcion" name="descripcion" required
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Marca</label>
                    <input id="create_marca" name="marca"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">U. Medida</label>
                    <input id="create_umedida" name="umedida" placeholder="UND / KG / LT"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Precio Unitario</label>
                    <input id="create_punitario" name="punitario" type="number" step="0.01" min="0"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Cantidad</label>
                    <input id="create_cantidad" name="cantidad" type="number" step="0.0001" min="0"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>
                @if(Auth::user()->tipo == "ADMIN")
                <div>
                    <label class="text-xs font-semibold text-slate-600">Almacen</label>
                    <select name="almacen_id" id="create_almacen_id"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                        <option value="">Seleccionar almacén</option>
                        @foreach ($almacenes as $almacen)
                            <option value="{{ $almacen->id }}">{{ $almacen->nombre }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="btnCloseCreate rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-amber-200 hover:bg-amber-600">
                    Guardar
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===================== MODAL IMPORTAR (SUB-MODAL) ===================== --}}
<div id="modalImport" class="fixed inset-0 z-[70] hidden">
    <div class="absolute inset-0 bg-black/45 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-10 w-[95%] max-w-5xl rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-indigo-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <div>
                <h3 class="text-base font-bold text-slate-900">
                    <i class="fa-solid fa-cloud-arrow-down mr-2 text-indigo-600"></i> Importar productos
                </h3>
                <p class="text-xs text-slate-500 mt-1">Busca por código o nombre y selecciona un producto para cargarlo en el formulario.</p>
            </div>

            <button type="button" class="btnCloseImport h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="p-5 space-y-4">
            <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                <div class="relative w-full md:max-w-md">
                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                    <input id="importSearch" type="text" placeholder="Buscar por código o descripción..."
                           class="w-full rounded-xl border border-black/10 bg-white/80 pl-9 pr-3 py-2 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div class="flex items-center gap-2">
                    <button type="button" id="btnImportBuscar"
                            class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-200 hover:bg-indigo-700">
                        <i class="fa-solid fa-rotate"></i> Buscar
                    </button>

                    <button type="button" class="btnCloseImport rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                        Cancelar
                    </button>
                </div>
            </div>

            <div id="importStatus" class="hidden rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700"></div>

            <div class="overflow-hidden rounded-xl border border-black/10 bg-white">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 text-slate-600">
                        <tr class="border-b border-black/10">
                            <th class="px-4 py-3 text-left font-semibold">Código</th>
                            <th class="px-4 py-3 text-left font-semibold">Descripción</th>
                            <th class="px-4 py-3 text-left font-semibold">Marca</th>
                            <th class="px-4 py-3 text-center font-semibold">U.M</th>
                            <th class="px-4 py-3 text-right font-semibold">P.Unit</th>
                            <th class="px-4 py-3 text-right font-semibold">Acción</th>
                        </tr>
                        </thead>
                        <tbody id="importTbody" class="divide-y divide-black/5">
                        <tr>
                            <td colspan="6" class="px-4 py-10 text-center text-slate-500">
                                Escribe para buscar y presiona “Buscar”.
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <p class="text-xs text-slate-500">
                Al seleccionar un producto, se llenará el formulario de “Agregar Producto”. Luego presiona “Guardar”.
            </p>
        </div>
    </div>
</div>

{{-- ===================== MODAL EDITAR ===================== --}}
<div id="modalEdit" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-16 w-[95%] max-w-2xl rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-indigo-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <h3 class="text-base font-bold text-slate-900">
                <i class="fa-regular fa-pen-to-square mr-2 text-indigo-600"></i> Editar Producto
            </h3>

            <button type="button" class="btnCloseEdit h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form id="formEdit" method="POST" action="#" class="p-5 space-y-4">
            @csrf
            @method('PUT')

            <input type="hidden" name="almacen_id" value="{{ auth()->user()->almacen_id }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs font-semibold text-slate-600">Código</label>
                    <input id="edit_cod_prod" name="cod_prod" required class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Estado</label>
                    <select id="edit_estado" name="estado" class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                        <option value="ACTIVO">ACTIVO</option>
                        <option value="INACTIVO">INACTIVO</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="text-xs font-semibold text-slate-600">Descripción</label>
                    <input id="edit_descripcion" name="descripcion" required class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Marca</label>
                    <input id="edit_marca" name="marca" class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">U. Medida</label>
                    <input id="edit_umedida" name="umedida" class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Precio Unitario</label>
                    <input id="edit_punitario" name="punitario" type="number" step="0.01" min="0" class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="text-xs font-semibold text-slate-600">Cantidad</label>
                    <input id="edit_cantidad" name="cantidad" type="number" step="0.0001" min="0" class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                @if(Auth::user()->tipo == "ADMIN")
                <div>
                    <label class="text-xs font-semibold text-slate-600">Almacen</label>
                    <select name="almacen_id" id="create_almacen_id"
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                        <option value="">Seleccionar almacén</option>
                        @foreach ($almacenes as $almacen)
                            <option value="{{ $almacen->id }}">{{ $almacen->nombre }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="btnCloseEdit rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-200 hover:bg-indigo-700">
                    Guardar cambios
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ===================== MODAL ELIMINAR ===================== --}}
<div id="modalDelete" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-24 w-[95%] max-w-lg rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-rose-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <h3 class="text-base font-bold text-slate-900">
                <i class="fa-regular fa-trash-can mr-2 text-rose-600"></i> Eliminar producto
            </h3>

            <button type="button" class="btnCloseDelete h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="p-5">
            <p class="text-sm text-slate-700">
                ¿Seguro que deseas eliminar: <span id="delete_name" class="font-semibold text-slate-900"></span>?
            </p>

            <form id="formDelete" method="POST" action="#" class="mt-5 flex justify-end gap-2">
                @csrf
                @method('DELETE')

                <button type="button" class="btnCloseDelete rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-200 hover:bg-rose-700">
                    Eliminar
                </button>
            </form>
        </div>
    </div>
</div>

{{-- ===================== JS MODALES + IMPORT ===================== --}}
<script>
    // ====== Helpers abrir/cerrar ======
    const open = (m) => m.classList.remove('hidden');
    const close = (m) => m.classList.add('hidden');

    // Modales principales
    const modalCreate = document.getElementById('modalCreate');
    const modalEdit   = document.getElementById('modalEdit');
    const modalDelete = document.getElementById('modalDelete');

    // Abrir/Cerrar Crear
    document.getElementById('btnOpenCreate')?.addEventListener('click', () => open(modalCreate));
    document.querySelectorAll('.btnCloseCreate').forEach(btn => btn.addEventListener('click', () => close(modalCreate)));

    // ====== Editar ======
    const formEdit = document.getElementById('formEdit');
    document.querySelectorAll('.btnCloseEdit').forEach(btn => btn.addEventListener('click', () => close(modalEdit)));

    document.querySelectorAll('.btnOpenEdit').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;

            // Tu ruta PUT: /productos/{id}
            formEdit.action = `{{ url('/productos') }}/${id}`;

            document.getElementById('edit_cod_prod').value    = btn.dataset.cod_prod || '';
            document.getElementById('edit_descripcion').value = btn.dataset.descripcion || '';
            document.getElementById('edit_marca').value       = btn.dataset.marca || '';
            document.getElementById('edit_umedida').value     = btn.dataset.umedida || '';
            document.getElementById('edit_estado').value      = btn.dataset.estado || 'ACTIVO';
            document.getElementById('edit_punitario').value   = btn.dataset.punitario || 0;
            document.getElementById('edit_cantidad').value    = btn.dataset.cantidad || 0;

            open(modalEdit);
        });
    });

    // ====== Eliminar ======
    const formDelete = document.getElementById('formDelete');
    document.querySelectorAll('.btnCloseDelete').forEach(btn => btn.addEventListener('click', () => close(modalDelete)));

    document.querySelectorAll('.btnOpenDelete').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            const name = btn.dataset.descripcion || '';

            // Tu ruta DELETE: /productos/{id}
            formDelete.action = `{{ url('/productos') }}/${id}`;
            document.getElementById('delete_name').textContent = name;

            open(modalDelete);
        });
    });

    // ====== Modal Import (sub-modal) ======
    const modalImport = document.getElementById('modalImport');
    const btnOpenImport = document.getElementById('btnOpenImport');
    const btnImportBuscar = document.getElementById('btnImportBuscar');
    const importSearch = document.getElementById('importSearch');
    const importTbody = document.getElementById('importTbody');
    const importStatus = document.getElementById('importStatus');

    const openImport = () => open(modalImport);
    const closeImport = () => close(modalImport);

    btnOpenImport?.addEventListener('click', openImport);
    document.querySelectorAll('.btnCloseImport').forEach(b => b.addEventListener('click', closeImport));

    // No cerrar con ESC (ni el principal ni el import)
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            // NO cerrar modales
            e.preventDefault();
        }
    });

    // Debounce para búsqueda rápida
    let timer = null;
    const debounce = (fn, ms=350) => {
        clearTimeout(timer);
        timer = setTimeout(fn, ms);
    };

    function renderImportRows(items) {
        if (!Array.isArray(items) || items.length === 0) {
            importTbody.innerHTML = `
                <tr>
                  <td colspan="6" class="px-4 py-10 text-center text-slate-500">No se encontraron resultados.</td>
                </tr>`;
            return;
        }

        importTbody.innerHTML = items.map((it) => {
            const cod = it.cod_prod ?? '';
            const desc = it.descripcion ?? '';
            const marca = it.marca ?? '—';
            const um = it.umedida ?? '—';
            const pu = it.punitario ?? '0';
            const cant = it.cantidad ?? '0';

            const payload = encodeURIComponent(JSON.stringify({
                cod_prod: cod,
                descripcion: desc,
                marca: it.marca ?? '',
                umedida: it.umedida ?? '',
                punitario: pu,
                cantidad: cant
            }));

            return `
              <tr class="transition hover:bg-indigo-50/60 odd:bg-white even:bg-slate-50/40">
                <td class="px-4 py-3 font-semibold text-slate-800">${cod}</td>
                <td class="px-4 py-3 text-slate-700">${desc}</td>
                <td class="px-4 py-3 text-slate-700">${marca}</td>
                <td class="px-4 py-3 text-center text-slate-700">${um}</td>
                <td class="px-4 py-3 text-right font-semibold text-slate-800">${Number(pu).toFixed(2)}</td>
                <td class="px-4 py-3 text-right">
                  <button type="button"
                    class="btnUseImport inline-flex items-center gap-2 rounded-xl bg-emerald-600/10 px-3 py-2 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-100 transition hover:bg-emerald-600/15"
                    data-payload="${payload}">
                    <i class="fa-regular fa-circle-check"></i> Usar
                  </button>
                </td>
              </tr>`;
        }).join('');

        document.querySelectorAll('.btnUseImport').forEach(btn => {
            btn.addEventListener('click', () => {
                const data = JSON.parse(decodeURIComponent(btn.dataset.payload));

                document.getElementById('create_cod_prod').value = data.cod_prod || '';
                document.getElementById('create_descripcion').value = data.descripcion || '';
                document.getElementById('create_marca').value = data.marca || '';
                document.getElementById('create_umedida').value = data.umedida || '';
                document.getElementById('create_punitario').value = parseFloat(data.punitario || 0).toFixed(2);
                document.getElementById('create_cantidad').value = data.cantidad || 0;

                const estado = document.getElementById('create_estado');
                if (estado) estado.value = 'ACTIVO';

                closeImport();
                importStatus.classList.add('hidden');
            });
        });
    }

    async function buscarApi() {
        const buscar = (importSearch.value || '').trim();

        importStatus.classList.remove('hidden');
        importStatus.className = "rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700";
        importStatus.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> Buscando en la API...`;

        try {
            const res = await fetch(`{{ route('productos.apiBuscar') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                },
                body: JSON.stringify({
                    nro_pagina: 1,
                    cant_reg: 20,
                    total: 0,
                    buscar: buscar,
                    proy_almacens_id: "1173",
                    saldo_positivo: 0,
                    fecha: "{{ now()->toDateString() }}",
                    todos: 0
                })
            });

            const json = await res.json();
            if (!res.ok || !json.ok) throw new Error(json.message || 'Error consultando API');

            renderImportRows(json.data);
            importStatus.classList.add('hidden');
        } catch (err) {
            importStatus.classList.remove('hidden');
            importStatus.className = "rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800";
            importStatus.textContent = err.message || 'Error consultando la API';

            importTbody.innerHTML = `
              <tr>
                <td colspan="6" class="px-4 py-10 text-center text-rose-600">No se pudo cargar la información.</td>
              </tr>`;
        }
    }

    btnImportBuscar?.addEventListener('click', buscarApi);

    // búsqueda rápida al escribir (mínimo 2 caracteres)
    importSearch?.addEventListener('input', () => debounce(() => {
        if ((importSearch.value || '').trim().length >= 2) buscarApi();
    }, 350));
</script>

@endsection