@extends('layouts.app')

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

@section('contenido')

<style>
/* Estilos principales para replicar el diseño de los otros módulos */
.table-premium {
    border-collapse: collapse;
    width: 100%;
}

.table-premium thead {
    background: #f8fafc;
    text-transform: uppercase;
    font-size: .7rem;
    color: #64748b;
    letter-spacing: 0.05em;
}

.table-premium thead th {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: left;
}

.table-premium tbody td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-premium tbody tr:hover {
    background: #f8fafc;
}

/* Estilos para el contenedor de la tabla */
.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Header */
.header-section {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

/* Formulario */
.form-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.form-card .form-title {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}

.form-card .form-subtitle {
    font-size: 0.7rem;
    color: #94a3b8;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 4px;
}

.form-label .required {
    color: #ef4444;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fafbfc;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fafbfc;
    color: #1e293b;
    transition: all 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.form-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.btn-submit {
    width: 100%;
    padding: 10px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-submit:hover {
    background: #1d4ed8;
}

/* Badges */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-income {
    background: #dcfce7;
    color: #166534;
}

.status-outcome {
    background: #fee2e2;
    color: #991b1b;
}

.status-count {
    background: #f1f5f9;
    color: #475569;
}

.warehouse-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 0.7rem;
    font-weight: 500;
    color: #475569;
}

.lote-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 8px;
    background: #eef2ff;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4338ca;
}

/* Info lote */
.lote-info-box {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 16px;
}

.lote-info-box .info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.lote-info-box .info-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

/* Nuevo lote box */
.nuevo-lote-box {
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    padding: 16px;
}

.nuevo-lote-box .box-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d4ed8;
}

.nuevo-lote-box .box-subtitle {
    font-size: 0.7rem;
    color: #2563eb;
}

/* Mensajes */
.alert-success {
    border-radius: 10px;
    border: 1px solid #bbf7d0;
    background: #dcfce7;
    padding: 12px 16px;
    color: #166534;
    font-size: 0.875rem;
}

.alert-error {
    border-radius: 10px;
    border: 1px solid #fca5a5;
    background: #fee2e2;
    padding: 12px 16px;
    color: #991b1b;
    font-size: 0.875rem;
}

/* Botones de navegación */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: #f8fafc;
}

/* Paginación */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: #64748b;
}

.breadcrumb {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.empty-state .empty-icon svg {
    width: 24px;
    height: 24px;
}

/* Grid de formulario */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Anchos fijos para las columnas */
.col-fecha { width: 12%; }
.col-almacen { width: 10%; }
.col-producto { width: 15%; }
.col-lote { width: 10%; }
.col-vencimiento { width: 10%; }
.col-tipo { width: 8%; }
.col-cantidad { width: 7%; }
.col-stock { width: 12%; }
.col-motivo { width: 16%; }
</style>

<div class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6">

    {{-- HEADER --}}
    <div class="header-section">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <div class="breadcrumb">Logística & Inventario / Inventario</div>
                <div class="flex items-center gap-3 mt-1">
                    <div class="header-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7L12 3 4 7m16 0v10l-8 4m8-14-8 4m0 10-8-4V7m8 14V11M4 7l8 4"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-slate-800">Ajustes de Stock</h1>
                        <p class="text-sm text-slate-400">Registra ingresos, salidas y conteos físicos por almacén y lote.</p>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('inventario.index', ['almacen' => $almacenId]) }}" class="btn-outline">
                    ← Stock Actual
                </a>
                <a href="{{ route('inventario.lotes', ['almacen' => $almacenId]) }}" class="btn-outline">
                    Lotes y Vencimientos
                </a>
            </div>
        </div>
    </div>

    {{-- MENSAJES --}}
    @if (session('ok'))
        <div class="alert-success">
            {{ session('ok') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert-error">
            {{ session('error') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert-error">
            <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="form-card">
                @csrf

                <div>
                    <h3 class="form-title">Nuevo ajuste</h3>
                    <p class="form-subtitle">Selecciona el almacén, producto y lote que deseas modificar.</p>
                </div>

                {{-- ALMACÉN --}}
                <div>
                    <label for="almacen_id" class="form-label">
                        Almacén <span class="required">*</span>
                    </label>
                    <select name="almacen_id" id="almacen_id" required class="form-select">
                        <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="form-label">
                        Producto <span class="required">*</span>
                    </label>
                    <select name="producto_id" id="producto_id" required class="form-select">
                        <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="form-label">
                        Lote <span class="required">*</span>
                    </label>
                    <select name="stock_producto_id" id="stock_producto_id" required disabled class="form-select">
                        <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 lote-info-box">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="info-label">Stock actual</p>
                            <p id="stock-actual-lote" class="info-value">0</p>
                        </div>
                        <div>
                            <p class="info-label">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 nuevo-lote-box">
                    <div>
                        <p class="box-title">Crear nuevo lote</p>
                        <p class="box-subtitle">Utiliza esta opción para registrar stock perteneciente a un lote que todavía no existe.</p>
                    </div>

                    <div>
                        <label for="nuevo_lote" class="form-label">
                            Número de lote <span class="required">*</span>
                        </label>
                        <input type="text" name="nuevo_lote" id="nuevo_lote" value="{{ old('nuevo_lote') }}"
                               maxlength="100" placeholder="Ej: LOTE-2026-001" class="form-input">
                    </div>

                    <div>
                        <label for="nueva_fecha_vencimiento" class="form-label">
                            Fecha de vencimiento <span class="required">*</span>
                        </label>
                        <input type="date" name="nueva_fecha_vencimiento" id="nueva_fecha_vencimiento"
                               value="{{ old('nueva_fecha_vencimiento') }}" class="form-input">
                    </div>
                </div>

                {{-- TIPO --}}
                <div>
                    <label for="tipo" class="form-label">
                        Tipo de ajuste <span class="required">*</span>
                    </label>
                    <select name="tipo" id="tipo" required class="form-select">
                        <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="form-label">
                        Cantidad <span class="required">*</span>
                    </label>
                    <input type="number" name="cantidad" id="cantidad" min="0" step="1"
                           value="{{ old('cantidad') }}" required class="form-input">
                    <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="form-label">Motivo</label>
                    <input type="text" name="motivo" id="motivo" value="{{ old('motivo') }}"
                           maxlength="200" placeholder="Ej: producto vencido, conteo mensual…" class="form-input">
                </div>

                <button type="submit" class="btn-submit">Registrar ajuste</button>
            </form>
        </div>

        {{-- HISTORIAL --}}
        <div class="lg:col-span-2">
            <div class="table-container">
                {{-- 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>

                    <form method="GET" action="{{ route('inventario.ajustes') }}" class="flex gap-2">
                        <select name="almacen" onchange="this.form.submit()" class="form-select" style="width:auto;min-width:150px;">
                            <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="table-premium">
                        <thead>
                            <tr>
                                <th class="col-fecha">FECHA</th>
                                <th class="col-almacen">ALMACÉN</th>
                                <th class="col-producto">PRODUCTO</th>
                                <th class="col-lote">LOTE</th>
                                <th class="col-vencimiento text-center">VENCIMIENTO</th>
                                <th class="col-tipo text-center">TIPO</th>
                                <th class="col-cantidad text-center">CANT.</th>
                                <th class="col-stock text-center">STOCK</th>
                                <th class="col-motivo">MOTIVO</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($ajustes as $a)
                                @php
                                    $lote = $a->stockProducto ?? null;
                                @endphp

                                <tr class="hover:bg-slate-50/60">
                                    <td class="col-fecha text-slate-500 whitespace-nowrap">
                                        {{ $a->created_at?->format('d/m/Y H:i') ?? '—' }}
                                    </td>

                                    <td class="col-almacen">
                                        @if ($a->almacen)
                                            <span class="warehouse-badge">{{ $a->almacen->nombre }}</span>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>

                                    <td class="col-producto">
                                        <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>

                                    <td class="col-lote">
                                        @if ($lote?->lote)
                                            <span class="lote-badge">{{ $lote->lote }}</span>
                                        @else
                                            <span class="text-slate-400">SIN LOTE</span>
                                        @endif
                                    </td>

                                    <td class="col-vencimiento text-center whitespace-nowrap text-slate-500">
                                        @if ($lote?->fecha_vencimiento)
                                            {{ \Carbon\Carbon::parse($lote->fecha_vencimiento)->format('d/m/Y') }}
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>

                                    <td class="col-tipo text-center">
                                        @if ($a->tipo === 'ingreso')
                                            <span class="status-badge status-income">Ingreso</span>
                                        @elseif ($a->tipo === 'salida')
                                            <span class="status-badge status-outcome">Salida</span>
                                        @else
                                            <span class="status-badge status-count">Conteo</span>
                                        @endif
                                    </td>

                                    <td class="col-cantidad text-center font-medium text-slate-600">
                                        {{ number_format($a->cantidad) }}
                                    </td>

                                    <td class="col-stock 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>

                                    <td class="col-motivo text-slate-500">{{ $a->motivo ?: '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="py-8">
                                        <div class="empty-state">
                                            <div class="empty-icon">
                                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 7L12 3 4 7m16 0v10l-8 4m8-14-8 4m0 10-8-4V7m8 14V11M4 7l8 4"/>
                                                </svg>
                                            </div>
                                            <p class="font-medium text-slate-500">Aún no hay ajustes registrados.</p>
                                            <p class="text-xs text-slate-400 mt-1">Los movimientos que registres aparecerán aquí.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- PAGINACIÓN --}}
                @if ($ajustes->hasPages())
                    <div class="pagination-bar">
                        <div class="flex items-center gap-3">
                            <span>Mostrando {{ $ajustes->firstItem() ?? 0 }} a {{ $ajustes->lastItem() ?? 0 }} de {{ $ajustes->total() }} registros</span>
                            <select onchange="window.location.href = this.value" class="form-select" style="width:auto;padding:4px 8px;font-size:0.8rem;">
                                @foreach([10, 25, 50, 100] as $perPage)
                                    <option value="{{ request()->fullUrlWithQuery(['per_page' => $perPage]) }}"
                                            @selected(request('per_page', 10) == $perPage)>
                                        {{ $perPage }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            {{ $ajustes->links() }}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- 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');

    function cargarLotesProducto() {
        const productoId = productoSelect.value;
        informacionLote.classList.add('hidden');
        nuevoLoteContainer.classList.add('hidden');
        stockActualLote.textContent = '0';
        vencimientoLote.textContent = '—';

        if (!productoId) {
            loteSelect.value = '';
            loteSelect.disabled = true;
            mensajeLotes.textContent = 'Primero selecciona un producto.';
            return;
        }

        loteSelect.disabled = false;
        const opcionNuevo = loteSelect.querySelector('option[value="nuevo"]');
        let cantidadLotes = 0;

        Array.from(loteSelect.options).forEach(function (option) {
            if (option.value === '') {
                option.hidden = true;
                return;
            }
            if (option.value === 'nuevo') {
                option.hidden = false;
                return;
            }
            const optionProductoId = option.dataset.productoId;
            if (optionProductoId === productoId) {
                option.hidden = false;
                cantidadLotes++;
            } else {
                option.hidden = true;
            }
        });

        mensajeLotes.textContent = cantidadLotes > 0
            ? `Se encontraron ${cantidadLotes} lote(s) para este producto.`
            : 'Este producto no tiene lotes registrados. Puedes crear uno nuevo.';

        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 = '';
    }

    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('-');
            vencimientoLote.textContent = partes.length === 3
                ? `${partes[2]}/${partes[1]}/${partes[0]}`
                : vencimiento;
        } else {
            vencimientoLote.textContent = 'Sin vencimiento';
        }
        informacionLote.classList.remove('hidden');
    }

    productoSelect.addEventListener('change', cargarLotesProducto);

    loteSelect.addEventListener('change', function () {
        const valor = this.value;
        if (valor === 'nuevo') {
            informacionLote.classList.add('hidden');
            nuevoLoteContainer.classList.remove('hidden');
            nuevoLoteInput.required = true;
            nuevaFechaInput.required = true;
            return;
        }
        nuevoLoteContainer.classList.add('hidden');
        nuevoLoteInput.required = false;
        nuevaFechaInput.required = false;
        const option = this.options[this.selectedIndex];
        mostrarInformacionLote(option);
    });

    almacenSelect.addEventListener('change', function () {
        const almacenId = this.value;
        if (!almacenId) return;
        const url = new URL(window.location.href);
        url.searchParams.set('almacen', almacenId);
        window.location.href = url.toString();
    });

    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);

    cargarLotesProducto();
    actualizarTextoCantidad();

    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