{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/inventory/adjust-in/create.blade.php | v1.6 | 01/08/2026 --}}
{{-- v1.6 — Bug fix: type="search" + autocomplete="new-password"; oninput debounce 300ms desde 2 chars; btnClearProd recarga lista. --}}
{{-- v1.5 — Botón "Volver a Inventario" movido al panel-toolbar del card Seleccionar Producto. --}}
{{-- v1.4 — Layout 5 filas (Producto / Ubicación col-12 4-dropdowns / Lote+Cantidades / Obs / Botones); cascade Rack. --}}
{{-- v1.3 — autocomplete="off" en fTexto; catch del fetch muestra error en tabla (no silencioso). --}}
{{-- v1.2 — autocomplete="off" en lot_number y supplier_ref (previene autofill del navegador). --}}
{{-- v1.1 — Panel de filtros de producto (Grupo/Categoría/Marca/Tipo/Texto + tabla st-table); bin obligatorio. --}}
{{-- v1.0 — Formulario de Ajuste de Entrada: cascada AJAX almacén→zona→bin, búsqueda de producto, generación de lote ADJ-. --}}

@extends('layouts.vertical', ['pageTitle' => 'Ajuste de Entrada'])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-box-arrow-in-down"></i> Ajuste de Entrada
        <small>Registro de inventario por ajuste o stock inicial</small>
    </h1>
</div>
@endsection

@section('content')
<form action="{{ route('warehouse.inventory.adjust-in.store') }}" method="POST" id="frmAdjIn">
@csrf

{{-- ── Panel de selección de producto ──────────────────────────────────────── --}}
<div class="panel">
    <div class="panel-hdr">
        <h2><i class="fal fa-box me-2"></i> Seleccionar Producto</h2>
        <div class="panel-toolbar">
            <a href="{{ route('warehouse.inventory.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fal fa-arrow-left me-1"></i> Volver a Inventario
            </a>
        </div>
    </div>
    <div class="panel-container show">
        <div class="panel-content">

            {{-- Filtros --}}
            <div class="row g-2 align-items-end mb-3">
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Grupo</label>
                    <select id="fGrupo" class="form-select form-select-sm">
                        <option value="">— Todos —</option>
                        @foreach($groups as $g)
                        <option value="{{ $g->id }}">{{ $g->es_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Categoría</label>
                    <select id="fCategoria" class="form-select form-select-sm">
                        <option value="">— Todas —</option>
                        @foreach($categories as $c)
                        <option value="{{ $c->id }}" data-group="{{ $c->group_id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Marca</label>
                    <select id="fMarca" class="form-select form-select-sm">
                        <option value="">— Todas —</option>
                        @foreach($brands as $b)
                        <option value="{{ $b->id }}">{{ $b->validbrand_id }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Tipo de Material</label>
                    <select id="fTipo" class="form-select form-select-sm">
                        <option value="">— Todos —</option>
                        <option value="TR">TR — Mercancía</option>
                        <option value="RM">RM — Materia Prima</option>
                        <option value="FG">FG — Producto Terminado</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted mb-1">Buscar</label>
                    <input type="search" id="fTexto" name="product_search_term"
                           class="form-control form-control-sm"
                           placeholder="Nombre, código, número de parte…"
                           autocomplete="new-password">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-success btn-sm w-100" id="btnFiltrarProd">
                        <i class="fal fa-filter"></i>
                    </button>
                </div>
            </div>

            {{-- Resultado: tabla de productos --}}
            <div id="adjProdTableWrap" style="display:none;">
                <div class="table-responsive" style="max-height:280px;overflow-y:auto;">
                    <table class="st-table" id="adjProdTable">
                        <thead class="bg-primary-600">
                            <tr>
                                <th>Código</th>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Unidad</th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="adjProdTbody">
                            <tr><td colspan="5" class="text-center text-muted py-3">Sin resultados</td></tr>
                        </tbody>
                    </table>
                </div>
                <div id="adjProdPagNote" class="text-muted fs-nano text-end mt-1" style="display:none;"></div>
            </div>

            {{-- Producto seleccionado --}}
            <input type="hidden" id="adjProductId" name="product_id">
            <div id="adjProductSelected" class="alert alert-info d-flex align-items-center gap-3 mt-2" style="display:none!important;">
                <i class="fal fa-check-circle fa-2x text-info flex-shrink-0"></i>
                <div class="flex-grow-1">
                    <div class="fw-bold" id="adjSelectedName">—</div>
                    <div class="fs-nano text-muted">
                        <span id="adjSelectedCode"></span>
                        &nbsp;·&nbsp;Tipo: <span id="adjSelectedType"></span>
                        &nbsp;·&nbsp;Unidad: <span id="adjSelectedUnit"></span>
                    </div>
                </div>
                <button type="button" class="btn btn-xs btn-outline-secondary" id="btnClearProd">
                    <i class="fal fa-times"></i> Cambiar
                </button>
            </div>

        </div>
    </div>
</div>

<div class="row g-3">

    {{-- ── Fila 2: Ubicación de Destino (col-12, 4 dropdowns en una fila) ──── --}}
    <div class="col-12">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-map-marker-alt me-2"></i> Ubicación de Destino</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-bold small mb-1">Almacén *</label>
                            <select id="adjWarehouse" name="warehouse_id" class="form-select" required>
                                <option value="">— Seleccionar —</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}">{{ $wh->code }} — {{ $wh->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small mb-1">Zona *</label>
                            <select id="adjZone" name="zone_id" class="form-select" disabled required>
                                <option value="">— Seleccionar almacén —</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small mb-1">Rack</label>
                            <select id="adjRack" class="form-select" disabled>
                                <option value="">— Seleccionar zona —</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold small mb-1">Bin / Ubicación *</label>
                            <select id="adjBin" name="location_id" class="form-select" disabled required>
                                <option value="">— Seleccionar rack —</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Fila 3: Datos del Lote + Cantidades ─────────────────────────────── --}}
    <div class="col-md-6">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-tag me-2"></i> Datos del Lote</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-bold small mb-1">Número de lote *</label>
                            <div class="input-group">
                                <input type="text" id="adjLotNumber" name="lot_number"
                                       class="form-control uppercase-input" maxlength="50"
                                       placeholder="ADJ-YYYY-NNNN" required autocomplete="off">
                                <button type="button" class="btn btn-outline-secondary" id="btnGenLot"
                                        title="Generar automáticamente">
                                    <i class="fal fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Fecha de entrada *</label>
                            <input type="date" name="entry_date"
                                   class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Fecha de caducidad</label>
                            <input type="date" name="expiry_date" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-bold small mb-1">Referencia proveedor</label>
                            <input type="text" name="supplier_ref"
                                   class="form-control uppercase-input" maxlength="100"
                                   placeholder="Factura, remisión, etc." autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-calculator me-2"></i> Cantidades</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Cantidad *</label>
                            <input type="number" name="quantity" class="form-control"
                                   min="0.0001" step="0.0001" placeholder="0.00" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Costo unitario *</label>
                            <input type="number" name="unit_cost" class="form-control"
                                   min="0" step="0.000001" placeholder="0.00" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Moneda</label>
                            <select name="currency" class="form-select">
                                <option value="MXN" selected>MXN</option>
                                <option value="USD">USD</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small mb-1">Tipo de ajuste *</label>
                            <select name="adj_type" class="form-select" required>
                                @foreach($adjTypes as $key => $label)
                                <option value="{{ $key }}" {{ $key === 'ADJUSTMENT_IN' ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Fila 4: Observaciones ────────────────────────────────────────────── --}}
    <div class="col-12">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-comment-alt me-2"></i> Observaciones</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <label class="form-label fw-bold small mb-1">Notas / Motivo *</label>
                    <textarea name="notes" class="form-control" rows="2"
                              placeholder="Motivo del ajuste…" maxlength="500" required></textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Fila 5: Botones ─────────────────────────────────────────────────── --}}
    <div class="col-12 text-end pb-3">
        <a href="{{ route('warehouse.inventory.index') }}" class="btn btn-light me-2">
            <i class="fal fa-times me-1"></i> Cancelar
        </a>
        <button type="submit" class="btn btn-primary btn-lg" id="btnSubmitAdj">
            <i class="fal fa-check me-2"></i> Registrar Ajuste de Entrada
        </button>
    </div>

</div>{{-- /row --}}
</form>
@endsection

@section('scripts')
<script>
(function () {
    var CSRF     = document.querySelector('meta[name=csrf-token]').content;
    var PROD_URL = '{{ route('warehouse.inventory.adjust-in.search-product') }}';
    var ADJ_URL  = '{{ route('warehouse.inventory.adjust-in.next-adj') }}';
    var ZONE_URL = '{{ url('/warehouse/locations/zones') }}';
    var RACK_URL = '{{ route('warehouse.inventory.adjust-in.racks') }}';
    var BINS_URL = '{{ route('warehouse.inventory.adjust-in.bins') }}';

    // ── Material type labels ───────────────────────────────────────────────
    var mtLabels = { TR: 'Mercancía', RM: 'Mat. Prima', FG: 'Prod. Terminado' };

    // ── Generador de número de lote ────────────────────────────────────────
    function genLot() {
        fetch(ADJ_URL, { headers: {'X-Requested-With':'XMLHttpRequest'} })
            .then(r => r.json()).then(d => {
                document.getElementById('adjLotNumber').value = d.lot_number;
            });
    }
    document.getElementById('btnGenLot').addEventListener('click', genLot);
    genLot();

    // ── Filtro de categorías por grupo ────────────────────────────────────
    document.getElementById('fGrupo').addEventListener('change', function () {
        var gid  = this.value;
        var cSel = document.getElementById('fCategoria');
        Array.from(cSel.options).forEach(function (opt) {
            if (!opt.value) return;
            opt.style.display = (!gid || opt.dataset.group === gid) ? '' : 'none';
        });
        if (cSel.options[cSel.selectedIndex]?.style.display === 'none') {
            cSel.value = '';
        }
    });

    // ── Buscar productos ──────────────────────────────────────────────────
    function buscarProductos() {
        var params = new URLSearchParams({
            term:          document.getElementById('fTexto').value.trim(),
            group_id:      document.getElementById('fGrupo').value,
            category_id:   document.getElementById('fCategoria').value,
            brand_id:      document.getElementById('fMarca').value,
            material_type: document.getElementById('fTipo').value,
        });

        fetch(PROD_URL + '?' + params.toString(), {
            headers: {'X-Requested-With':'XMLHttpRequest'}
        }).then(r => r.json()).then(function (data) {
            var tbody = document.getElementById('adjProdTbody');
            var wrap  = document.getElementById('adjProdTableWrap');
            var note  = document.getElementById('adjProdPagNote');
            wrap.style.display = '';

            if (!data.length) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Sin resultados para el filtro aplicado.</td></tr>';
                note.style.display = 'none';
                return;
            }

            tbody.innerHTML = data.map(function (p) {
                return '<tr>'
                    + '<td class="fs-sm">' + (p.product_number ? '<strong>' + p.product_number + '</strong><br>' : '') + (p.product_code || '—') + '</td>'
                    + '<td>' + p.product_name + '</td>'
                    + '<td><span class="badge bg-secondary">' + (mtLabels[p.material_type] || p.material_type || '—') + '</span></td>'
                    + '<td class="text-center">' + (p.unity || '—') + '</td>'
                    + '<td class="text-center">'
                    +   '<button type="button" class="btn btn-xs btn-primary btn-seleccionar-prod"'
                    +     ' data-id="' + p.id + '"'
                    +     ' data-name="' + p.product_name.replace(/"/g,'&quot;') + '"'
                    +     ' data-code="' + (p.product_code || '') + '"'
                    +     ' data-unit="' + (p.unity || '') + '"'
                    +     ' data-type="' + (p.material_type || '') + '">'
                    +     '<i class="fal fa-check me-1"></i>Seleccionar'
                    +   '</button>'
                    + '</td></tr>';
            }).join('');

            if (data.length === 50) {
                note.textContent = 'Mostrando los primeros 50 resultados — refina los filtros para ver más.';
                note.style.display = '';
            } else {
                note.style.display = 'none';
            }
        }).catch(function (err) {
            var wrap  = document.getElementById('adjProdTableWrap');
            var tbody = document.getElementById('adjProdTbody');
            wrap.style.display = '';
            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger py-3"><i class="fal fa-exclamation-triangle me-1"></i>Error al buscar productos. Recarga la página e intenta de nuevo.</td></tr>';
        });
    }

    var _adjSearchTimer = null;
    document.getElementById('btnFiltrarProd').addEventListener('click', buscarProductos);
    document.getElementById('fTexto').addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); clearTimeout(_adjSearchTimer); buscarProductos(); }
    });
    document.getElementById('fTexto').addEventListener('input', function () {
        var term = this.value.trim();
        clearTimeout(_adjSearchTimer);
        if (term.length === 1) return; // esperar al 2do carácter
        _adjSearchTimer = setTimeout(buscarProductos, 300);
    });

    // ── Seleccionar producto de la tabla ──────────────────────────────────
    document.getElementById('adjProdTbody').addEventListener('click', function (e) {
        var btn = e.target.closest('.btn-seleccionar-prod');
        if (!btn) return;
        document.getElementById('adjProductId').value    = btn.dataset.id;
        document.getElementById('adjSelectedName').textContent = btn.dataset.name;
        document.getElementById('adjSelectedCode').textContent = btn.dataset.code;
        document.getElementById('adjSelectedType').textContent = mtLabels[btn.dataset.type] || btn.dataset.type || '—';
        document.getElementById('adjSelectedUnit').textContent = btn.dataset.unit || '—';
        var sel = document.getElementById('adjProductSelected');
        sel.style.removeProperty('display');
        // Ocultar tabla después de seleccionar
        document.getElementById('adjProdTableWrap').style.display = 'none';
    });

    // ── Limpiar producto seleccionado ─────────────────────────────────────
    document.getElementById('btnClearProd').addEventListener('click', function () {
        document.getElementById('adjProductId').value = '';
        document.getElementById('adjProductSelected').style.display = 'none';
        document.getElementById('fTexto').value = '';
        buscarProductos(); // recarga la lista completa al limpiar la selección
    });

    // ── Cascada Almacén → Zona → Rack → Bin ──────────────────────────────
    document.getElementById('adjWarehouse').addEventListener('change', function () {
        var wid  = this.value;
        var zSel = document.getElementById('adjZone');
        var rSel = document.getElementById('adjRack');
        var bSel = document.getElementById('adjBin');
        zSel.innerHTML = '<option value="">— Cargando… —</option>';
        zSel.disabled  = true;
        rSel.innerHTML = '<option value="">— Seleccionar zona —</option>';
        rSel.disabled  = true;
        bSel.innerHTML = '<option value="">— Seleccionar rack —</option>';
        bSel.disabled  = true;
        if (!wid) { zSel.innerHTML = '<option value="">— Seleccionar almacén —</option>'; return; }

        fetch(ZONE_URL + '/' + wid, { headers: {'X-Requested-With':'XMLHttpRequest'} })
            .then(r => r.json()).then(function (zones) {
                zSel.innerHTML = '<option value="">— Seleccionar —</option>'
                    + zones.map(z => '<option value="' + z.id + '">' + z.code + ' — ' + z.name + '</option>').join('');
                zSel.disabled = false;
            }).catch(function () {
                zSel.innerHTML = '<option value="">— Error al cargar —</option>';
            });
    });

    document.getElementById('adjZone').addEventListener('change', function () {
        var zid  = this.value;
        var rSel = document.getElementById('adjRack');
        var bSel = document.getElementById('adjBin');
        rSel.innerHTML = '<option value="">— Cargando… —</option>';
        rSel.disabled  = true;
        bSel.innerHTML = '<option value="">— Seleccionar rack —</option>';
        bSel.disabled  = true;
        if (!zid) { rSel.innerHTML = '<option value="">— Seleccionar zona —</option>'; return; }

        fetch(RACK_URL + '?zone_id=' + zid, { headers: {'X-Requested-With':'XMLHttpRequest'} })
            .then(r => r.json()).then(function (racks) {
                if (!racks.length) {
                    // Sin racks: cargar bins directamente por zona
                    rSel.innerHTML = '<option value="">— Sin racks en esta zona —</option>';
                    rSel.disabled = false;
                    var wid = document.getElementById('adjWarehouse').value;
                    fetch(BINS_URL + '?warehouse_id=' + wid + '&zone_id=' + zid, {
                        headers: {'X-Requested-With':'XMLHttpRequest'}
                    }).then(r => r.json()).then(function (bins) {
                        bSel.innerHTML = bins.length
                            ? '<option value="">— Seleccionar bin —</option>'
                              + bins.map(b => '<option value="' + b.id + '">' + (b.bin_id || '') + ' — ' + (b.code || '') + '</option>').join('')
                            : '<option value="">— Sin bins activos en esta zona —</option>';
                        bSel.disabled = false;
                    }).catch(function () {
                        bSel.innerHTML = '<option value="">— Error al cargar —</option>';
                        bSel.disabled = false;
                    });
                    return;
                }
                rSel.innerHTML = '<option value="">— Seleccionar —</option>'
                    + racks.map(r => '<option value="' + r.id + '">' + r.code + (r.description ? ' — ' + r.description : '') + '</option>').join('');
                rSel.disabled = false;
            }).catch(function () {
                rSel.innerHTML = '<option value="">— Error al cargar —</option>';
            });
    });

    document.getElementById('adjRack').addEventListener('change', function () {
        var rid  = this.value;
        var zid  = document.getElementById('adjZone').value;
        var wid  = document.getElementById('adjWarehouse').value;
        var bSel = document.getElementById('adjBin');
        bSel.innerHTML = '<option value="">— Cargando… —</option>';
        bSel.disabled  = true;
        var url = BINS_URL + '?warehouse_id=' + wid + '&zone_id=' + zid;
        if (rid) url += '&rack_id=' + rid;
        fetch(url, { headers: {'X-Requested-With':'XMLHttpRequest'} })
            .then(r => r.json()).then(function (bins) {
                bSel.innerHTML = bins.length
                    ? '<option value="">— Seleccionar bin —</option>'
                      + bins.map(b => '<option value="' + b.id + '">' + (b.bin_id || '') + ' — ' + (b.code || '') + '</option>').join('')
                    : '<option value="">— Sin bins activos —</option>';
                bSel.disabled = false;
            }).catch(function () {
                bSel.innerHTML = '<option value="">— Error al cargar —</option>';
                bSel.disabled = false;
            });
    });

    // ── Validación antes de enviar ─────────────────────────────────────────
    document.getElementById('frmAdjIn').addEventListener('submit', function (e) {
        if (!document.getElementById('adjProductId').value) {
            e.preventDefault();
            showNotification('Selecciona un producto de la tabla de resultados.', 'warning');
            return;
        }
        if (!document.getElementById('adjWarehouse').value) {
            e.preventDefault();
            showNotification('Selecciona un almacén.', 'warning');
            return;
        }
        if (!document.getElementById('adjZone').value) {
            e.preventDefault();
            showNotification('Selecciona una zona.', 'warning');
            return;
        }
        if (!document.getElementById('adjBin').value) {
            e.preventDefault();
            showNotification('El bin es obligatorio para el ajuste de entrada.', 'warning');
            return;
        }
        document.getElementById('btnSubmitAdj').disabled = true;
    });

})();
</script>
@endsection