@extends('layouts.app')

@section('titulo', 'Ajustes de Stock')

@section('contenido')

{{-- ========================================================= --}}
{{-- ENCABEZADO --}}
{{-- ========================================================= --}}

<div class="flex flex-wrap items-start justify-between gap-4">


<div>

    <nav class="text-xs text-slate-400 mb-1">
        Logística & Inventario / Inventario
    </nav>

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-3">

        <span class="w-10 h-10 rounded-xl bg-brand-100 text-brand-600 flex items-center justify-center">
            <x-icon name="layers" />
        </span>

        Ajustes de Stock

    </h1>

    <p class="text-sm text-slate-500 mt-1">
        Registra ingresos, salidas y conteos físicos por almacén y lote.
    </p>

</div>


<div class="flex flex-wrap gap-2">

    {{-- STOCK ACTUAL --}}
    <a href="{{ route('inventario.index', ['almacen' => $almacenId]) }}"
       class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50">

        ← Stock Actual

    </a>


    {{-- LOTES --}}
    <a href="{{ route('inventario.lotes', ['almacen' => $almacenId]) }}"
       class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50">

        Lotes y Vencimientos

    </a>

</div>
 

</div>

{{-- ========================================================= --}}
{{-- MENSAJES --}}
{{-- ========================================================= --}}

@if (session('ok'))

 
<div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
    {{ session('ok') }}
</div>
 

@endif

@if (session('error'))

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

@endif

@if ($errors->any())

 
<div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">

    <p class="font-semibold mb-1">
        Revisa los siguientes datos:
    </p>

    <ul class="list-disc pl-5 space-y-1">

        @foreach ($errors->all() as $error)

            <li>
                {{ $error }}
            </li>

        @endforeach

    </ul>

</div>
 

@endif

{{-- ========================================================= --}}
{{-- CONTENIDO PRINCIPAL --}}
{{-- ========================================================= --}}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

 
{{-- ===================================================== --}}
{{-- FORMULARIO --}}
{{-- ===================================================== --}}

<div class="lg:col-span-1">

    <form method="POST"
          action="{{ route('inventario.ajustes.store') }}"
          class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm space-y-5">

        @csrf


        {{-- ================================================= --}}
        {{-- TÍTULO --}}
        {{-- ================================================= --}}

        <div>

            <h3 class="font-semibold text-slate-700">
                Nuevo ajuste
            </h3>

            <p class="text-xs text-slate-400 mt-1">
                Selecciona el almacén, producto y lote que deseas modificar.
            </p>

        </div>


        {{-- ================================================= --}}
        {{-- ALMACÉN --}}
        {{-- ================================================= --}}

        <div>

            <label for="almacen_id"
                   class="block text-sm font-medium text-slate-700">

                Almacén

                <span class="text-red-500">*</span>

            </label>


            <select name="almacen_id"
                    id="almacen_id"
                    required
                    class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">

                <option value="">
                    — Selecciona almacén —
                </option>


                @foreach ($almacenes as $almacen)

                    <option value="{{ $almacen->id }}"
                        @selected(old('almacen_id', $almacenId) == $almacen->id)>

                        {{ $almacen->nombre }}

                        @if ($almacen->tipo)
                            — {{ ucfirst($almacen->tipo) }}
                        @endif

                    </option>

                @endforeach

            </select>

        </div>


        {{-- ================================================= --}}
        {{-- PRODUCTO --}}
        {{-- ================================================= --}}

        <div>

            <label for="producto_id"
                   class="block text-sm font-medium text-slate-700">

                Producto

                <span class="text-red-500">*</span>

            </label>


            <select name="producto_id"
                    id="producto_id"
                    required
                    class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">

                <option value="">
                    — Selecciona producto —
                </option>


                @foreach ($productos as $p)

                    <option value="{{ $p->id }}"
                        @selected(old('producto_id') == $p->id)>

                        {{ $p->nombre }}

                        @if ($p->codigo_barras)
                            — {{ $p->codigo_barras }}
                        @endif

                    </option>

                @endforeach

            </select>


            <p class="text-xs text-slate-400 mt-1">
                Primero selecciona el almacén y el producto.
            </p>

        </div>


{{-- ================================================= --}}
{{-- LOTE --}}
{{-- ================================================= --}}

<div>

    <label for="stock_producto_id"
           class="block text-sm font-medium text-slate-700">

        Lote

        <span class="text-red-500">*</span>

    </label>

    <select name="stock_producto_id"
            id="stock_producto_id"
            required
            disabled
            class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm
                   focus:border-brand-500 focus:outline-none disabled:bg-slate-100
                   disabled:text-slate-400">

        <option value="">
            — Selecciona producto primero —
        </option>

        @if (isset($lotesDisponibles))

            @foreach ($lotesDisponibles as $lote)

                <option
                    value="{{ $lote->id }}"
                    data-producto-id="{{ $lote->producto_id }}"
                    data-stock="{{ $lote->stock }}"
                    data-vencimiento="{{ $lote->fecha_vencimiento }}"
                    @selected(old('stock_producto_id') == $lote->id)
                >

                    {{ $lote->lote ?: 'SIN LOTE' }}

                    — Stock: {{ number_format($lote->stock) }}

                    @if ($lote->fecha_vencimiento)

                        — Vence:
                        {{ \Carbon\Carbon::parse($lote->fecha_vencimiento)->format('d/m/Y') }}

                    @endif

                </option>

            @endforeach

        @endif

        <option value="nuevo">
            + Crear nuevo lote
        </option>

    </select>

    <p id="mensaje-lotes"
       class="text-xs text-slate-400 mt-1">

        Primero selecciona un producto.

    </p>

</div>


        {{-- ================================================= --}}
        {{-- INFORMACIÓN DEL LOTE --}}
        {{-- ================================================= --}}

        <div id="informacion-lote"
             class="hidden rounded-xl border border-slate-200 bg-slate-50 p-4">

            <div class="grid grid-cols-2 gap-4">

                <div>

                    <p class="text-xs text-slate-400">
                        Stock actual
                    </p>

                    <p id="stock-actual-lote"
                       class="text-lg font-bold text-slate-700">

                        0

                    </p>

                </div>


                <div>

                    <p class="text-xs text-slate-400">
                        Vencimiento
                    </p>

                    <p id="vencimiento-lote"
                       class="text-sm font-semibold text-slate-700">

                        —

                    </p>

                </div>

            </div>

        </div>


        {{-- ================================================= --}}
        {{-- NUEVO LOTE --}}
        {{-- ================================================= --}}

        <div id="nuevo-lote-container"
             class="hidden rounded-xl border border-blue-200 bg-blue-50 p-4 space-y-4">

            <div>

                <p class="text-sm font-semibold text-blue-700">
                    Crear nuevo lote
                </p>

                <p class="text-xs text-blue-600 mt-1">
                    Utiliza esta opción para registrar stock perteneciente a un lote que todavía no existe.
                </p>

            </div>


            {{-- NÚMERO DE LOTE --}}

            <div>

                <label for="nuevo_lote"
                       class="block text-sm font-medium text-slate-700">

                    Número de lote

                    <span class="text-red-500">*</span>

                </label>

                <input type="text"
                       name="nuevo_lote"
                       id="nuevo_lote"
                       value="{{ old('nuevo_lote') }}"
                       maxlength="100"
                       placeholder="Ej: LOTE-2026-001"
                       class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">

            </div>


            {{-- FECHA VENCIMIENTO --}}

            <div>

                <label for="nueva_fecha_vencimiento"
                       class="block text-sm font-medium text-slate-700">

                    Fecha de vencimiento

                    <span class="text-red-500">*</span>

                </label>

                <input type="date"
                       name="nueva_fecha_vencimiento"
                       id="nueva_fecha_vencimiento"
                       value="{{ old('nueva_fecha_vencimiento') }}"
                       class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">

            </div>

        </div>


        {{-- ================================================= --}}
        {{-- TIPO --}}
        {{-- ================================================= --}}

        <div>

            <label for="tipo"
                   class="block text-sm font-medium text-slate-700">

                Tipo de ajuste

                <span class="text-red-500">*</span>

            </label>


            <select name="tipo"
                    id="tipo"
                    required
                    class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">

                <option value="ingreso"
                    @selected(old('tipo', 'ingreso') === 'ingreso')>

                    Ingreso (+) — sumar al stock

                </option>


                <option value="salida"
                    @selected(old('tipo') === 'salida')>

                    Salida (−) — merma, rotura, vencido

                </option>


                <option value="conteo"
                    @selected(old('tipo') === 'conteo')>

                    Conteo físico (=) — fijar stock exacto

                </option>

            </select>

        </div>


        {{-- ================================================= --}}
        {{-- CANTIDAD --}}
        {{-- ================================================= --}}

        <div>

            <label for="cantidad"
                   class="block text-sm font-medium text-slate-700">

                Cantidad

                <span class="text-red-500">*</span>

            </label>


            <input type="number"
                   name="cantidad"
                   id="cantidad"
                   min="0"
                   step="1"
                   value="{{ old('cantidad') }}"
                   required
                   class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">


            <p id="texto-cantidad"
               class="text-xs text-slate-400 mt-1">

                Para "Conteo físico", esta cantidad será el nuevo stock exacto.

            </p>

        </div>


        {{-- ================================================= --}}
        {{-- MOTIVO --}}
        {{-- ================================================= --}}

        <div>

            <label for="motivo"
                   class="block text-sm font-medium text-slate-700">

                Motivo

            </label>


            <input type="text"
                   name="motivo"
                   id="motivo"
                   value="{{ old('motivo') }}"
                   maxlength="200"
                   placeholder="Ej: producto vencido, conteo mensual…"
                   class="mt-1 w-full rounded-lg border border-slate-300 focus:border-brand-500 focus:outline-none">

        </div>


        {{-- ================================================= --}}
        {{-- BOTÓN --}}
        {{-- ================================================= --}}

        <button type="submit"
                class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 transition">

            Registrar ajuste

        </button>

    </form>

</div>


{{-- ===================================================== --}}
{{-- HISTORIAL --}}
{{-- ===================================================== --}}

<div class="lg:col-span-2">

    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">


        {{-- ================================================= --}}
        {{-- CABECERA --}}
        {{-- ================================================= --}}

        <div class="px-5 py-4 border-b border-slate-100 flex flex-wrap items-center justify-between gap-3">

            <div>

                <h3 class="font-semibold text-slate-700">
                    Historial de ajustes
                </h3>

                <p class="text-xs text-slate-400 mt-1">
                    Registro de movimientos realizados sobre el inventario.
                </p>

            </div>


            {{-- ================================================= --}}
            {{-- FILTRO ALMACÉN --}}
            {{-- ================================================= --}}

            <form method="GET"
                  action="{{ route('inventario.ajustes') }}"
                  class="flex gap-2">

                <select name="almacen"
                        onchange="this.form.submit()"
                        class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600 focus:bg-white focus:border-brand-500 focus:outline-none">

                    <option value="">
                        Todos los almacenes
                    </option>


                    @foreach ($almacenes as $almacen)

                        <option value="{{ $almacen->id }}"
                            @selected($almacenId == $almacen->id)>

                            {{ $almacen->nombre }}

                        </option>

                    @endforeach

                </select>

            </form>

        </div>


        {{-- ================================================= --}}
        {{-- TABLA --}}
        {{-- ================================================= --}}

        <div class="overflow-x-auto">

            <table class="w-full text-sm">

                <thead class="bg-slate-50 text-slate-500 text-left">

                    <tr>

                        <th class="px-5 py-3 font-semibold">
                            Fecha
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Almacén
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Producto
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Lote
                        </th>

                        <th class="px-5 py-3 font-semibold text-center">
                            Vencimiento
                        </th>

                        <th class="px-5 py-3 font-semibold text-center">
                            Tipo
                        </th>

                        <th class="px-5 py-3 font-semibold text-center">
                            Cant.
                        </th>

                        <th class="px-5 py-3 font-semibold text-center">
                            Stock
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Motivo
                        </th>

                    </tr>

                </thead>


                <tbody class="divide-y divide-slate-100">

                    @forelse ($ajustes as $a)

                        <tr class="hover:bg-slate-50/60">


                            {{-- ================================================= --}}
                            {{-- FECHA --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-slate-500 whitespace-nowrap">

                                {{ $a->created_at?->format('d/m/Y H:i') ?? '—' }}

                            </td>


                            {{-- ================================================= --}}
                            {{-- ALMACÉN --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3">

                                @if ($a->almacen)

                                    <span class="inline-flex items-center rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">

                                        {{ $a->almacen->nombre }}

                                    </span>

                                @else

                                    <span class="text-slate-400">
                                        —
                                    </span>

                                @endif

                            </td>


                            {{-- ================================================= --}}
                            {{-- PRODUCTO --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3">

                                <div class="font-medium text-slate-700">

                                    {{ $a->producto?->nombre ?? '—' }}

                                </div>


                                @if ($a->producto?->codigo_barras)

                                    <div class="text-xs text-slate-400 mt-0.5">

                                        {{ $a->producto->codigo_barras }}

                                    </div>

                                @endif

                            </td>


                            {{-- ================================================= --}}
                            {{-- LOTE --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3">

                                @php
                                    $lote = $a->stockProducto ?? null;
                                @endphp


                                @if ($lote?->lote)

                                    <span class="inline-flex items-center rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-700">

                                        {{ $lote->lote }}

                                    </span>

                                @else

                                    <span class="text-slate-400">
                                        SIN LOTE
                                    </span>

                                @endif

                            </td>


                            {{-- ================================================= --}}
                            {{-- VENCIMIENTO --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-center whitespace-nowrap text-slate-500">

                                @if ($lote?->fecha_vencimiento)

                                    {{ \Carbon\Carbon::parse($lote->fecha_vencimiento)->format('d/m/Y') }}

                                @else

                                    —

                                @endif

                            </td>


                            {{-- ================================================= --}}
                            {{-- TIPO --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-center">

                                @if ($a->tipo === 'ingreso')

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">

                                        Ingreso

                                    </span>

                                @elseif ($a->tipo === 'salida')

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-red-50 text-red-600 text-xs font-semibold">

                                        Salida

                                    </span>

                                @else

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-semibold">

                                        Conteo

                                    </span>

                                @endif

                            </td>


                            {{-- ================================================= --}}
                            {{-- CANTIDAD --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-center text-slate-600 font-medium">

                                {{ number_format($a->cantidad) }}

                            </td>


                            {{-- ================================================= --}}
                            {{-- STOCK --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-center whitespace-nowrap">

                                <span class="text-slate-400">

                                    {{ number_format($a->stock_anterior) }}

                                </span>


                                <span class="text-slate-300 mx-1">
                                    →
                                </span>


                                <span class="font-semibold text-slate-700">

                                    {{ number_format($a->stock_nuevo) }}

                                </span>

                            </td>


                            {{-- ================================================= --}}
                            {{-- MOTIVO --}}
                            {{-- ================================================= --}}

                            <td class="px-5 py-3 text-slate-500">

                                {{ $a->motivo ?: '—' }}

                            </td>


                        </tr>

                    @empty

                        <tr>

                            <td colspan="9"
                                class="px-5 py-10 text-center text-slate-400">

                                <div class="flex flex-col items-center justify-center">

                                    <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center mb-3">

                                        <x-icon name="layers" />

                                    </div>


                                    <p class="font-medium text-slate-500">

                                        Aún no hay ajustes registrados.

                                    </p>


                                    <p class="text-xs mt-1">

                                        Los movimientos que registres aparecerán aquí.

                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- ================================================= --}}
        {{-- PAGINACIÓN --}}
        {{-- ================================================= --}}

        @if ($ajustes->hasPages())

            <div class="px-5 py-3 border-t border-slate-100">

                {{ $ajustes->links() }}

            </div>

        @endif

    </div>

</div>
 

</div>

{{-- ========================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ========================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const loteSelect = document.getElementById('stock_producto_id');

    const informacionLote = document.getElementById('informacion-lote');

    const stockActual = document.getElementById('stock-actual-lote');

    const vencimiento = document.getElementById('vencimiento-lote');

    const nuevoLoteContainer = document.getElementById('nuevo-lote-container');

    const nuevoLote = document.getElementById('nuevo_lote');

    const nuevaFechaVencimiento = document.getElementById('nueva_fecha_vencimiento');

    const tipo = document.getElementById('tipo');

    const cantidad = document.getElementById('cantidad');

    const textoCantidad = document.getElementById('texto-cantidad');


    /**
     * Actualiza la información visual del lote seleccionado.
     */
    function actualizarLote() {

        if (!loteSelect) {
            return;
        }

        const opcion = loteSelect.options[loteSelect.selectedIndex];

        if (!opcion || !opcion.value) {

            informacionLote?.classList.add('hidden');

            nuevoLoteContainer?.classList.add('hidden');

            if (nuevoLote) {
                nuevoLote.required = false;
            }

            if (nuevaFechaVencimiento) {
                nuevaFechaVencimiento.required = false;
            }

            return;
        }


        /**
         * NUEVO LOTE
         */
        if (opcion.value === 'nuevo') {

            informacionLote?.classList.add('hidden');

            nuevoLoteContainer?.classList.remove('hidden');

            if (nuevoLote) {
                nuevoLote.required = true;
            }

            if (nuevaFechaVencimiento) {
                nuevaFechaVencimiento.required = true;
            }

            return;
        }


        /**
         * LOTE EXISTENTE
         */
        nuevoLoteContainer?.classList.add('hidden');

        if (nuevoLote) {
            nuevoLote.required = false;
        }

        if (nuevaFechaVencimiento) {
            nuevaFechaVencimiento.required = false;
        }


        const stock = opcion.dataset.stock ?? '0';

        const fecha = opcion.dataset.vencimiento ?? '';


        if (stockActual) {

            stockActual.textContent =
                new Intl.NumberFormat('es-PE').format(Number(stock));

        }


        if (vencimiento) {

            if (fecha) {

                const partes = fecha.split('-');

                if (partes.length === 3) {

                    vencimiento.textContent =
                        `${partes[2]}/${partes[1]}/${partes[0]}`;

                } else {

                    vencimiento.textContent = fecha;

                }

            } else {

                vencimiento.textContent = 'Sin vencimiento';

            }

        }


        informacionLote?.classList.remove('hidden');

    }


    /**
     * Actualiza el texto según el tipo de ajuste.
     */
    function actualizarTipo() {

        if (!tipo || !cantidad || !textoCantidad) {
            return;
        }


        if (tipo.value === 'conteo') {

            cantidad.min = '0';

            textoCantidad.textContent =
                'Para "Conteo físico", esta cantidad será el nuevo stock exacto.';

        } else if (tipo.value === 'salida') {

            cantidad.min = '1';

            textoCantidad.textContent =
                'La cantidad indicada será descontada del stock del lote seleccionado.';

        } else {

            cantidad.min = '1';

            textoCantidad.textContent =
                'La cantidad indicada será sumada al stock del lote seleccionado.';

        }

    }


    /**
     * Eventos.
     */
    loteSelect?.addEventListener('change', actualizarLote);

    tipo?.addEventListener('change', actualizarTipo);


    /**
     * Estado inicial.
     */
    actualizarLote();

    actualizarTipo();

});

</script>
{{-- ========================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ========================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const almacenSelect = document.getElementById('almacen_id');
    const productoSelect = document.getElementById('producto_id');
    const loteSelect = document.getElementById('stock_producto_id');

    const informacionLote = document.getElementById('informacion-lote');
    const stockActualLote = document.getElementById('stock-actual-lote');
    const vencimientoLote = document.getElementById('vencimiento-lote');

    const nuevoLoteContainer = document.getElementById('nuevo-lote-container');

    const nuevoLoteInput = document.getElementById('nuevo_lote');
    const nuevaFechaInput = document.getElementById('nueva_fecha_vencimiento');

    const mensajeLotes = document.getElementById('mensaje-lotes');

    const tipoSelect = document.getElementById('tipo');
    const textoCantidad = document.getElementById('texto-cantidad');


    /*
    |--------------------------------------------------------------------------
    | PRODUCTO → LOTES
    |--------------------------------------------------------------------------
    */

    function cargarLotesProducto() {

        const productoId = productoSelect.value;

        /*
        |--------------------------------------------------------------------------
        | Limpiar estado
        |--------------------------------------------------------------------------
        */

        informacionLote.classList.add('hidden');

        nuevoLoteContainer.classList.add('hidden');

        stockActualLote.textContent = '0';

        vencimientoLote.textContent = '—';


        /*
        |--------------------------------------------------------------------------
        | No hay producto
        |--------------------------------------------------------------------------
        */

        if (!productoId) {

            loteSelect.value = '';
            loteSelect.disabled = true;

            mensajeLotes.textContent =
                'Primero selecciona un producto.';

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | Habilitar lote
        |--------------------------------------------------------------------------
        */

        loteSelect.disabled = false;


        /*
        |--------------------------------------------------------------------------
        | Guardar opción "nuevo"
        |--------------------------------------------------------------------------
        */

        const opcionNuevo = loteSelect.querySelector(
            'option[value="nuevo"]'
        );


        /*
        |--------------------------------------------------------------------------
        | Ocultar / mostrar lotes según producto
        |--------------------------------------------------------------------------
        */

        let cantidadLotes = 0;

        Array.from(loteSelect.options).forEach(function (option) {

            /*
            |--------------------------------------------------------------------------
            | Placeholder
            |--------------------------------------------------------------------------
            */

            if (option.value === '') {

                option.hidden = true;

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | Nuevo lote
            |--------------------------------------------------------------------------
            */

            if (option.value === 'nuevo') {

                option.hidden = false;

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | Lote existente
            |--------------------------------------------------------------------------
            */

            const optionProductoId =
                option.dataset.productoId;


            if (optionProductoId === productoId) {

                option.hidden = false;

                cantidadLotes++;

            } else {

                option.hidden = true;

            }

        });


        /*
        |--------------------------------------------------------------------------
        | Mensaje
        |--------------------------------------------------------------------------
        */

        if (cantidadLotes > 0) {

            mensajeLotes.textContent =
                `Se encontraron ${cantidadLotes} lote(s) para este producto.`;

        } else {

            mensajeLotes.textContent =
                'Este producto no tiene lotes registrados. Puedes crear uno nuevo.';

        }


        /*
        |--------------------------------------------------------------------------
        | Restaurar lote anterior si corresponde
        |--------------------------------------------------------------------------
        */

        const loteAnterior =
            @json(old('stock_producto_id'));


        if (
            loteAnterior &&
            loteAnterior !== 'nuevo'
        ) {

            const opcionAnterior =
                loteSelect.querySelector(
                    `option[value="${loteAnterior}"]`
                );


            if (
                opcionAnterior &&
                opcionAnterior.dataset.productoId === productoId
            ) {

                loteSelect.value = loteAnterior;

                mostrarInformacionLote(opcionAnterior);

                return;

            }

        }


        loteSelect.value = '';


    }


    /*
    |--------------------------------------------------------------------------
    | MOSTRAR INFORMACIÓN DEL LOTE
    |--------------------------------------------------------------------------
    */

    function mostrarInformacionLote(option) {

        if (!option || option.value === '' || option.value === 'nuevo') {

            informacionLote.classList.add('hidden');

            return;
        }


        const stock =
            option.dataset.stock ?? '0';

        const vencimiento =
            option.dataset.vencimiento;


        stockActualLote.textContent =
            Number(stock).toLocaleString('es-PE');


        if (vencimiento) {

            const partes =
                vencimiento.split('-');

            if (partes.length === 3) {

                vencimientoLote.textContent =
                    `${partes[2]}/${partes[1]}/${partes[0]}`;

            } else {

                vencimientoLote.textContent =
                    vencimiento;

            }

        } else {

            vencimientoLote.textContent =
                'Sin vencimiento';

        }


        informacionLote.classList.remove('hidden');

    }


    /*
    |--------------------------------------------------------------------------
    | CAMBIO DE PRODUCTO
    |--------------------------------------------------------------------------
    */

    productoSelect.addEventListener(
        'change',
        function () {

            cargarLotesProducto();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | CAMBIO DE LOTE
    |--------------------------------------------------------------------------
    */

    loteSelect.addEventListener(
        'change',
        function () {

            const valor =
                this.value;


            /*
            |--------------------------------------------------------------------------
            | CREAR NUEVO LOTE
            |--------------------------------------------------------------------------
            */

            if (valor === 'nuevo') {

                informacionLote.classList.add('hidden');

                nuevoLoteContainer.classList.remove('hidden');

                nuevoLoteInput.required = true;

                nuevaFechaInput.required = true;

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | LOTE EXISTENTE
            |--------------------------------------------------------------------------
            */

            nuevoLoteContainer.classList.add('hidden');

            nuevoLoteInput.required = false;

            nuevaFechaInput.required = false;


            const option =
                this.options[this.selectedIndex];


            mostrarInformacionLote(option);

        }
    );


    /*
    |--------------------------------------------------------------------------
    | CAMBIO DE ALMACÉN
    |--------------------------------------------------------------------------
    */

    almacenSelect.addEventListener(
        'change',
        function () {

            const almacenId =
                this.value;


            if (!almacenId) {

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | Recargar página conservando almacén
            |--------------------------------------------------------------------------
            */

            const url =
                new URL(window.location.href);

            url.searchParams.set(
                'almacen',
                almacenId
            );

            window.location.href =
                url.toString();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | TIPO DE AJUSTE
    |--------------------------------------------------------------------------
    */

    function actualizarTextoCantidad() {

        if (tipoSelect.value === 'conteo') {

            textoCantidad.textContent =
                'Para "Conteo físico", esta cantidad será el nuevo stock exacto.';

        } else if (tipoSelect.value === 'ingreso') {

            textoCantidad.textContent =
                'Esta cantidad se sumará al stock actual del lote.';

        } else if (tipoSelect.value === 'salida') {

            textoCantidad.textContent =
                'Esta cantidad se descontará del stock actual del lote.';

        }

    }


    tipoSelect.addEventListener(
        'change',
        actualizarTextoCantidad
    );


    /*
    |--------------------------------------------------------------------------
    | INICIALIZAR
    |--------------------------------------------------------------------------
    */

    cargarLotesProducto();

    actualizarTextoCantidad();


    /*
    |--------------------------------------------------------------------------
    | SI HAY UN LOTE "NUEVO" DESDE OLD()
    |--------------------------------------------------------------------------
    */

    const loteInicial =
        @json(old('stock_producto_id'));


    if (loteInicial === 'nuevo') {

        loteSelect.value = 'nuevo';

        nuevoLoteContainer.classList.remove('hidden');

        nuevoLoteInput.required = true;

        nuevaFechaInput.required = true;

    }

});

</script>

@endsection