@extends('layouts.app')
@section('title', 'Registrar Ingreso')
@section('page-title', 'Registrar Ingreso de Stock')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.ingresos.index') }}">Ingreso de Stock</a></li>
    <li class="breadcrumb-item active">Nuevo</li>
@endsection
@section('content')

{{-- ═══ CABECERA DE ACCIONES ═══ --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0 text-muted"><i class="fas fa-arrow-circle-down mr-1 text-success"></i>Nuevo Ingreso de Stock</h5>
    <div>
        <button type="button" class="btn btn-outline-info btn-sm mr-1" data-toggle="modal" data-target="#modalOC">
            <i class="fas fa-file-invoice mr-1"></i>Cargar desde OC
        </button>
        <button type="button" class="btn btn-outline-success btn-sm" data-toggle="modal" data-target="#modalImportar">
            <i class="fas fa-file-excel mr-1"></i>Importar Excel
        </button>
    </div>
</div>

<form method="POST" action="{{ route('logistica.ingresos.store') }}" id="formIngreso">
@csrf

{{-- ═══ DATOS DEL DOCUMENTO ═══ --}}
<div class="card mb-3">
    <div class="card-header py-2">
        <h6 class="mb-0"><i class="fas fa-file-alt mr-2 text-secondary"></i>Datos del Documento</h6>
    </div>
    <div class="card-body pb-2">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Fecha <span class="text-danger">*</span></label>
                    <input type="date" name="fecha_ingreso"
                        class="form-control form-control-sm @error('fecha_ingreso') is-invalid @enderror"
                        value="{{ old('fecha_ingreso', $ordenCompra?->fecha_pedido?->format('Y-m-d') ?? date('Y-m-d')) }}" required>
                    @error('fecha_ingreso')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Tipo Doc. <span class="text-danger">*</span></label>
                    <select name="tipo_doc" class="form-control form-control-sm @error('tipo_doc') is-invalid @enderror" required>
                        <option value="01" {{ old('tipo_doc','01')=='01'?'selected':'' }}>01 - Factura</option>
                        <option value="03" {{ old('tipo_doc')=='03'?'selected':'' }}>03 - Boleta</option>
                        <option value="09" {{ old('tipo_doc')=='09'?'selected':'' }}>09 - Guía Remisión</option>
                        <option value="12" {{ old('tipo_doc')=='12'?'selected':'' }}>12 - Ticket</option>
                        <option value="NE" {{ old('tipo_doc')=='NE'?'selected':'' }}>NE - Nota Entrada</option>
                    </select>
                    @error('tipo_doc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <label class="small font-weight-bold">Serie</label>
                    <input type="text" name="serie" class="form-control form-control-sm" maxlength="10"
                        value="{{ old('serie') }}" placeholder="F001">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Correlativo</label>
                    <input type="text" name="correlativo" class="form-control form-control-sm" maxlength="20"
                        value="{{ old('correlativo') }}" placeholder="000001">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="small font-weight-bold">Proveedor</label>
                    <select name="proveedor_id" id="proveedor_id" class="form-control form-control-sm">
                        <option value="">— Sin proveedor —</option>
                        @foreach($proveedores as $prov)
                            <option value="{{ $prov->id }}"
                                {{ (old('proveedor_id') == $prov->id || $ordenCompra?->proveedor_id == $prov->id) ? 'selected' : '' }}>
                                {{ Str::limit($prov->razon_social, 35) }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Ref. OC</label>
                    <input type="text" name="orden_compra_ref" id="oc_ref_input" class="form-control form-control-sm" maxlength="20"
                        value="{{ old('orden_compra_ref', $ordenCompra?->numero) }}" placeholder="OC-2026-001">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="form-group mb-1">
                    <label class="small font-weight-bold">Moneda <span class="text-danger">*</span></label>
                    <select name="moneda" class="form-control form-control-sm" required>
                        <option value="PEN" {{ old('moneda','PEN')=='PEN'?'selected':'' }}>PEN — Soles</option>
                        <option value="USD" {{ old('moneda')=='USD'?'selected':'' }}>USD — Dólares</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group mb-1">
                    <label class="small font-weight-bold">Forma de Pago <span class="text-danger">*</span></label>
                    <select name="forma_pago" id="forma_pago" class="form-control form-control-sm" required>
                        <option value="CONTADO" {{ old('forma_pago','CONTADO')=='CONTADO'?'selected':'' }}>Contado</option>
                        <option value="CREDITO" {{ old('forma_pago')=='CREDITO'?'selected':'' }}>Crédito</option>
                    </select>
                </div>
            </div>
            <div class="col-md-1" id="dias_credito_wrap" style="display:none">
                <div class="form-group mb-1">
                    <label class="small font-weight-bold">Días</label>
                    <input type="number" name="dias_credito" class="form-control form-control-sm" min="1" max="365"
                        value="{{ old('dias_credito', 30) }}">
                </div>
            </div>
            <div class="col-md-7">
                <div class="form-group mb-1">
                    <label class="small font-weight-bold">Observaciones / Referencia</label>
                    <input type="text" name="observacion" class="form-control form-control-sm" maxlength="500"
                        value="{{ old('observacion') }}" placeholder="Guía de remisión, nota de entrega, etc.">
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══ TABLA DE ÍTEMS ═══ --}}
<div class="card mb-3">
    <div class="card-header py-2 d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><i class="fas fa-boxes mr-2 text-secondary"></i>Ítems del Ingreso</h6>
        <button type="button" class="btn btn-success btn-sm" id="btnAgregarFila">
            <i class="fas fa-plus mr-1"></i>Agregar ítem
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0" id="tablaItems">
                <thead class="thead-light">
                    <tr>
                        <th style="width:28px" class="text-center">#</th>
                        <th style="min-width:220px">Producto <span class="text-danger">*</span></th>
                        <th style="width:175px">Almacén / Sección <span class="text-danger">*</span></th>
                        <th style="width:90px" class="text-center">Cantidad <span class="text-danger">*</span></th>
                        <th style="width:48px" class="text-center">U.M.</th>
                        <th style="width:105px" class="text-right">Costo Unit. <span class="text-danger">*</span></th>
                        <th style="width:100px" class="text-right">Subtotal</th>
                        <th style="width:120px">Vencimiento</th>
                        <th style="width:28px"></th>
                    </tr>
                </thead>
                <tbody id="itemsBody">
                    {{-- Las filas son generadas por JS --}}
                </tbody>
                <tfoot>
                    <tr class="table-light">
                        <td colspan="6" class="text-right font-weight-bold pr-3 py-2">Total estimado:</td>
                        <td class="text-right font-weight-bold text-success py-2" id="totalDisplay">S/ 0.00</td>
                        <td colspan="2"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between">
    <div>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save mr-1"></i>Registrar Ingreso
        </button>
        <a href="{{ route('logistica.ingresos.index') }}" class="btn btn-secondary ml-2">
            <i class="fas fa-times mr-1"></i>Cancelar
        </a>
    </div>
    <small class="text-muted align-self-center"><span id="contadorItems">0</span> ítem(s) en la lista</small>
</div>

</form>

{{-- ═══════════════════════════════════════════
     MODAL — Cargar desde Orden de Compra
═══════════════════════════════════════════ --}}
<div class="modal fade" id="modalOC" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white py-2">
                <h6 class="modal-title"><i class="fas fa-file-invoice mr-2"></i>Cargar desde Orden de Compra</h6>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0">
                @if($ordenesAprobadas->isEmpty())
                    <div class="alert alert-info m-3 mb-0">No hay órdenes de compra aprobadas pendientes de recepción.</div>
                @else
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>N° OC</th>
                                    <th>Proveedor</th>
                                    <th>Fecha</th>
                                    <th class="text-right">Total</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ordenesAprobadas as $oc)
                                <tr>
                                    <td><code>{{ $oc->numero }}</code></td>
                                    <td>{{ Str::limit($oc->proveedor->razon_social, 35) }}</td>
                                    <td>{{ $oc->fecha_pedido?->format('d/m/Y') }}</td>
                                    <td class="text-right">S/ {{ number_format($oc->total, 2) }}</td>
                                    <td>
                                        <a href="{{ route('logistica.ingresos.create', ['oc_id' => $oc->id]) }}"
                                           class="btn btn-primary btn-xs">
                                            <i class="fas fa-file-import mr-1"></i>Cargar
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════
     MODAL — Importar desde Excel
═══════════════════════════════════════════ --}}
<div class="modal fade" id="modalImportar" tabindex="-1" data-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white py-2">
                <h6 class="modal-title"><i class="fas fa-file-excel mr-2"></i>Importar Ingresos desde Excel</h6>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                {{-- Zona de carga --}}
                <div id="dropZone" class="border-2 border-dashed rounded p-4 text-center mb-3"
                     style="border:2px dashed #ced4da; cursor:pointer; transition:.2s"
                     ondragover="event.preventDefault();this.style.borderColor='#28a745'"
                     ondragleave="this.style.borderColor='#ced4da'"
                     ondrop="handleDrop(event)">
                    <i class="fas fa-cloud-upload-alt fa-3x text-success mb-2"></i>
                    <p class="mb-1 font-weight-bold">Arrastra tu archivo Excel aquí</p>
                    <p class="text-muted small mb-2">o haz clic para seleccionar</p>
                    <input type="file" id="excelFile" accept=".xlsx,.xls" style="display:none" onchange="leerExcel(this.files[0])">
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="document.getElementById('excelFile').click()">
                        <i class="fas fa-folder-open mr-1"></i>Seleccionar archivo .xlsx
                    </button>
                    <div id="nombreArchivo" class="mt-2 text-muted small"></div>
                </div>

                {{-- Preview --}}
                <div id="previewSection" style="display:none">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0 text-success"><i class="fas fa-table mr-1"></i>Vista previa — <span id="totalFilas">0</span> fila(s)</h6>
                        <span id="alertaErrores" class="badge badge-warning" style="display:none"></span>
                    </div>
                    <div class="table-responsive" style="max-height:300px;overflow-y:auto">
                        <table class="table table-xs table-bordered table-hover small" id="previewTable">
                            <thead class="thead-light sticky-top">
                                <tr>
                                    <th>Fila</th>
                                    <th>Fecha</th>
                                    <th>RUC Prov.</th>
                                    <th>Proveedor</th>
                                    <th>Tipo Prov.</th>
                                    <th>Almacén</th>
                                    <th>Categoría</th>
                                    <th>Producto</th>
                                    <th>Unidad</th>
                                    <th>Cantidad</th>
                                    <th>Precio Unit.</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody id="previewBody"></tbody>
                        </table>
                    </div>
                    <small class="text-muted"><i class="fas fa-info-circle mr-1"></i>Columnas de proveedor y categoría son opcionales. Si activa "Crear automáticamente", se crearán si no existen.</small>
                </div>

                {{-- Resultado importación --}}
                <div id="resultadoImport" style="display:none"></div>

            </div>
            <div class="modal-footer py-2 justify-content-between flex-wrap" style="gap:8px">
                <div>
                    <button type="button" class="btn btn-outline-secondary btn-sm mr-1" id="btnPlantillaVacia">
                        <i class="fas fa-download mr-1"></i>Plantilla Vacía
                    </button>
                    <button type="button" class="btn btn-outline-info btn-sm" id="btnPlantillaEjemplos">
                        <i class="fas fa-file-excel mr-1"></i>Plantilla con Ejemplos
                    </button>
                </div>
                <div class="d-flex align-items-center" style="gap:10px">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="chkAutoCrear">
                        <label class="custom-control-label small" for="chkAutoCrear" title="Si el producto o proveedor no existen, se crearán automáticamente">
                            Crear productos y proveedores automáticamente
                        </label>
                    </div>
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-success btn-sm" id="btnProcesarExcel" style="display:none">
                        <i class="fas fa-cloud-upload-alt mr-1"></i>Importar <span id="btnImportCount"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ═══ ROW TEMPLATE (oculto, clonado por JS) ═══ --}}
<template id="rowTemplate">
    <tr class="item-row" data-index="__IDX__">
        <td class="text-center pt-2 row-num font-weight-bold text-muted small">__NUM__</td>
        <td class="position-relative p-1">
            <input type="hidden" name="items[__IDX__][producto_id]" class="prod-id" value="">
            <input type="text" class="form-control form-control-sm prod-search"
                   placeholder="Buscar por nombre o código..." autocomplete="off">
            <div class="autocomplete-list list-group shadow" style="display:none;position:absolute;z-index:9999;top:100%;left:4px;right:4px;max-height:200px;overflow-y:auto;"></div>
        </td>
        <td class="p-1">
            <select name="items[__IDX__][almacen_id]" class="form-control form-control-sm almacen-sel" required>
                <option value="">— Almacén —</option>
                @foreach($almacenes as $alm)
                <option value="{{ $alm->id }}" data-tipo="{{ $alm->tipo }}">{{ $alm->nombre }}</option>
                @endforeach
            </select>
            {{-- Sección: visible solo cuando se selecciona Almacén Principal --}}
            <select name="items[__IDX__][seccion]" class="form-control form-control-sm seccion-sel mt-1" style="display:none">
                <option value="">— Sección —</option>
                <option value="insumos">Insumos Químicos</option>
                <option value="envases">Envases y Empaques</option>
                <option value="pt">Producto Terminado</option>
                <option value="subproductos">Subproductos</option>
                <option value="general">General / Otros</option>
            </select>
        </td>
        <td class="p-1">
            <input type="number" name="items[__IDX__][cantidad]" class="form-control form-control-sm text-center qty-input"
                   min="0.001" step="0.001" value="1" required>
        </td>
        <td class="text-center pt-2 um-label small text-muted">—</td>
        <td class="p-1">
            <input type="number" name="items[__IDX__][costo_unitario]" class="form-control form-control-sm text-right price-input"
                   min="0" step="0.0001" value="0.00" required>
        </td>
        <td class="text-right pt-2 pr-2 subtotal-cell font-weight-bold text-success small">S/ 0.00</td>
        <td class="p-1">
            <input type="date" name="items[__IDX__][fecha_vencimiento]" class="form-control form-control-sm">
        </td>
        <td class="text-center pt-1">
            <button type="button" class="btn btn-outline-danger btn-xs btn-del" title="Eliminar fila">
                <i class="fas fa-times"></i>
            </button>
        </td>
    </tr>
</template>

@push('scripts')
{{-- XLSX.js para plantillas y lectura de Excel --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
const BUSCAR_URL = '{{ route("logistica.ingresos.productos-buscar") }}';
const IMPORTAR_URL = '{{ route("logistica.ingresos.importar") }}';
const CSRF = '{{ csrf_token() }}';

/* ─────────────────────────────────────────────
   Datos para almacenes (pre-cargados en JS)
───────────────────────────────────────────── */
const ALMACENES = {
    @foreach($almacenes as $alm)
    {{ $alm->id }}: { nombre: '{{ addslashes($alm->nombre) }}', tipo: '{{ $alm->tipo }}' },
    @endforeach
};

/* ─────────────────────────────────────────────
   Tabla dinámica de ítems
───────────────────────────────────────────── */
let rowIdx = 0;

function addRow(data = null) {
    rowIdx++;
    const tpl  = document.getElementById('rowTemplate').innerHTML;
    const html = tpl.replaceAll('__IDX__', rowIdx).replaceAll('__NUM__', rowIdx);
    const tr   = document.createElement('tr');
    tr.outerHTML; // dummy
    const tbody = document.getElementById('itemsBody');
    tbody.insertAdjacentHTML('beforeend', html.replace('<tr', '<tr id="row-' + rowIdx + '"'));

    const row = tbody.lastElementChild;

    // Si vienen datos pre-cargados (desde OC o Excel)
    if (data) {
        row.querySelector('.prod-id').value      = data.producto_id || '';
        row.querySelector('.prod-search').value  = data.prod_label || '';
        row.querySelector('.um-label').textContent = data.um || '—';
        row.querySelector('.qty-input').value    = data.cantidad || 1;
        row.querySelector('.price-input').value  = data.costo || '0.0000';
        if (data.almacen_id) {
            const sel = row.querySelector('.almacen-sel');
            sel.value = data.almacen_id;
        }
        if (data.fecha_vencimiento) {
            row.querySelector('[name$="[fecha_vencimiento]"]').value = data.fecha_vencimiento;
        }
        recalcSubtotal(row);
    }

    attachRowEvents(row);
    updateCounter();
    return row;
}

// IDs de almacenes que son "Principal" (tipo=principal)
const ALMACEN_PRINCIPAL_IDS = [
    @foreach($almacenes->where('tipo','principal') as $alm)
    {{ $alm->id }},
    @endforeach
];

function attachRowEvents(row) {
    const searchInput = row.querySelector('.prod-search');
    const prodId      = row.querySelector('.prod-id');
    const dropdown    = row.querySelector('.autocomplete-list');
    const qtyInput    = row.querySelector('.qty-input');
    const priceInput  = row.querySelector('.price-input');
    const almacenSel  = row.querySelector('.almacen-sel');
    const seccionSel  = row.querySelector('.seccion-sel');
    const btnDel      = row.querySelector('.btn-del');

    // Mostrar/ocultar sección según almacén seleccionado
    function toggleSeccion() {
        const isPrincipal = ALMACEN_PRINCIPAL_IDS.includes(parseInt(almacenSel.value));
        seccionSel.style.display = isPrincipal ? '' : 'none';
        if (!isPrincipal) seccionSel.value = '';
    }
    almacenSel.addEventListener('change', toggleSeccion);
    toggleSeccion(); // init

    // Autocomplete búsqueda
    let searchTimer = null;
    searchInput.addEventListener('input', function () {
        const q = this.value.trim();
        prodId.value = '';
        if (q.length < 1) { dropdown.style.display = 'none'; return; }
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => buscarProducto(q, dropdown, row), 250);
    });

    searchInput.addEventListener('blur', function () {
        setTimeout(() => { dropdown.style.display = 'none'; }, 200);
    });

    // Recalcular subtotal
    qtyInput.addEventListener('input',   () => recalcSubtotal(row));
    priceInput.addEventListener('input',  () => recalcSubtotal(row));

    // Eliminar fila
    btnDel.addEventListener('click', function () {
        row.remove();
        renumberRows();
        updateCounter();
        recalcTotal();
    });
}

function buscarProducto(q, dropdown, row) {
    fetch(`${BUSCAR_URL}?q=${encodeURIComponent(q)}`)
        .then(r => r.json())
        .then(data => {
            dropdown.innerHTML = '';
            if (!data.length) {
                dropdown.innerHTML = '<div class="list-group-item list-group-item-action text-muted small py-1 px-2"><i class="fas fa-search mr-1"></i>Sin resultados</div>';
                dropdown.style.display = 'block';
                return;
            }
            data.forEach(p => {
                const item = document.createElement('a');
                item.href  = '#';
                item.className = 'list-group-item list-group-item-action py-1 px-2 small';
                item.innerHTML = `<span class="badge badge-secondary mr-1">${p.codigo}</span>${p.nombre} <span class="text-muted">(${p.um})</span>`;
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    selectProducto(p, row);
                    dropdown.style.display = 'none';
                });
                dropdown.appendChild(item);
            });
            dropdown.style.display = 'block';
        })
        .catch(() => { dropdown.style.display = 'none'; });
}

function selectProducto(p, row) {
    row.querySelector('.prod-id').value      = p.id;
    row.querySelector('.prod-search').value  = `[${p.codigo}] ${p.nombre}`;
    row.querySelector('.um-label').textContent = p.um;
    if (!row.querySelector('.price-input').value || row.querySelector('.price-input').value == '0') {
        row.querySelector('.price-input').value  = p.costo.toFixed(4);
    }
    // Sugerir almacén del producto
    if (p.almacen_id) {
        const sel = row.querySelector('.almacen-sel');
        if (sel.querySelector(`option[value="${p.almacen_id}"]`)) {
            sel.value = p.almacen_id;
        }
    }
    recalcSubtotal(row);
}

function recalcSubtotal(row) {
    const qty    = parseFloat(row.querySelector('.qty-input').value)   || 0;
    const price  = parseFloat(row.querySelector('.price-input').value) || 0;
    const sub    = qty * price;
    row.querySelector('.subtotal-cell').textContent = 'S/ ' + sub.toFixed(2);
    recalcTotal();
}

function recalcTotal() {
    let total = 0;
    document.querySelectorAll('.subtotal-cell').forEach(cell => {
        total += parseFloat(cell.textContent.replace('S/ ', '')) || 0;
    });
    document.getElementById('totalDisplay').textContent = 'S/ ' + total.toFixed(2);
}

function renumberRows() {
    document.querySelectorAll('.item-row').forEach((row, i) => {
        row.querySelector('.row-num').textContent = i + 1;
    });
}

function updateCounter() {
    const n = document.querySelectorAll('.item-row').length;
    document.getElementById('contadorItems').textContent = n;
}

document.getElementById('btnAgregarFila').addEventListener('click', () => addRow());

// Forma de pago — mostrar/ocultar días de crédito
document.getElementById('forma_pago').addEventListener('change', function () {
    document.getElementById('dias_credito_wrap').style.display = this.value === 'CREDITO' ? '' : 'none';
});
if (document.getElementById('forma_pago').value === 'CREDITO') {
    document.getElementById('dias_credito_wrap').style.display = '';
}

/* ─────────────────────────────────────────────
   Cargar desde OC (si viene ?oc_id)
───────────────────────────────────────────── */
@if($ordenCompra)
@php
$_ocItems = $ordenCompra->items->map(fn($i) => [
    'producto_id' => $i->producto_id,
    'prod_label'  => '['.($i->producto->codigo ?? '').'] '.($i->producto->nombre ?? ''),
    'um'          => $i->producto->unidadMedida->abreviatura ?? '—',
    'cantidad'    => $i->cantidad,
    'costo'       => $i->precio_unitario,
    'almacen_id'  => $i->producto->almacen_id,
]);
@endphp
(function() {
    const ocItems = @json($_ocItems);
    ocItems.forEach(item => addRow(item));
})();
@else
addRow();
@endif

/* ─────────────────────────────────────────────
   Validación antes de enviar
───────────────────────────────────────────── */
document.getElementById('formIngreso').addEventListener('submit', function (e) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length === 0) {
        e.preventDefault();
        alert('Debe agregar al menos un ítem.');
        return;
    }
    let ok = true;
    rows.forEach(row => {
        if (!row.querySelector('.prod-id').value) {
            ok = false;
            row.querySelector('.prod-search').classList.add('is-invalid');
        }
    });
    if (!ok) {
        e.preventDefault();
        alert('Seleccione un producto válido en cada ítem (usando el buscador).');
    }
});

/* ─────────────────────────────────────────────
   IMPORTAR EXCEL — lógica
───────────────────────────────────────────── */
let excelRows = [];

function handleDrop(e) {
    e.preventDefault();
    document.getElementById('dropZone').style.borderColor = '#ced4da';
    const file = e.dataTransfer.files[0];
    if (file) leerExcel(file);
}

function leerExcel(file) {
    if (!file) return;
    document.getElementById('nombreArchivo').textContent = '📄 ' + file.name;

    const reader = new FileReader();
    reader.onload = function (ev) {
        try {
            const wb   = XLSX.read(ev.target.result, { type: 'binary', cellDates: true });
            const ws   = wb.Sheets[wb.SheetNames[0]];
            const data = XLSX.utils.sheet_to_json(ws, { defval: '' });
            procesarFilasExcel(data);
        } catch(err) {
            alert('Error al leer el archivo: ' + err.message);
        }
    };
    reader.readAsBinaryString(file);
}

@php
    $almacenPrincipalId = $almacenes->firstWhere('tipo','principal')?->id ?? $almacenes->first()?->id;
    $almacenMpId        = $almacenes->firstWhere('tipo','mp')?->id        ?? $almacenPrincipalId;
    $almacenInsumosId   = $almacenes->firstWhere('tipo','insumos')?->id   ?? $almacenPrincipalId;
    $almacenEnvasesId   = $almacenes->firstWhere('tipo','envases')?->id   ?? $almacenPrincipalId;
    $almacenPtId        = $almacenes->firstWhere('tipo','pt')?->id        ?? $almacenPrincipalId;
    $almacenSubprodId   = $almacenes->firstWhere('tipo','subproductos')?->id ?? $almacenPrincipalId;
@endphp

const ALMACEN_FALLBACK = {{ $almacenPrincipalId ?? 'null' }};

// Mapa: texto destino → { almacen_id, seccion }
const DESTINO_MAP = [
    { keys: ['materia prima','mp','fruta'],                          almacen: {{ $almacenMpId      ?? 'null' }}, seccion: null },
    { keys: ['insumo','quimico','ácido','acido','cloro','pectina'],  almacen: {{ $almacenInsumosId ?? 'null' }}, seccion: 'insumos' },
    { keys: ['envase','empaqu','bolsa','frasco','tapa','caja'],      almacen: {{ $almacenEnvasesId ?? 'null' }}, seccion: 'envases' },
    { keys: ['terminado','pt','pulpa envasada','despacho'],           almacen: {{ $almacenPtId      ?? 'null' }}, seccion: 'pt' },
    { keys: ['subproduct','cáscara','cascara','pepa'],                almacen: {{ $almacenSubprodId ?? 'null' }}, seccion: 'subproductos' },
    { keys: ['principal','general','almacen principal'],              almacen: {{ $almacenPrincipalId ?? 'null' }}, seccion: 'general' },
];

function resolverDestino(destino) {
    const key = (destino || '').toLowerCase().trim();
    if (!key) return { almacen: ALMACEN_FALLBACK, seccion: 'general' };
    for (const entry of DESTINO_MAP) {
        if (entry.keys.some(k => key.includes(k))) {
            return { almacen: entry.almacen ?? ALMACEN_FALLBACK, seccion: entry.seccion };
        }
    }
    return { almacen: ALMACEN_FALLBACK, seccion: 'general' };
}

function parseFecha(val) {
    if (!val) return '';
    if (val instanceof Date) {
        return val.toISOString().slice(0, 10);
    }
    if (typeof val === 'string') {
        // DD/MM/AAAA → YYYY-MM-DD
        const m = val.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
        if (m) return `${m[3]}-${m[2].padStart(2,'0')}-${m[1].padStart(2,'0')}`;
        return val;
    }
    if (typeof val === 'number') {
        // Excel serial date
        const d = new Date(Math.round((val - 25569) * 86400 * 1000));
        return d.toISOString().slice(0,10);
    }
    return String(val);
}

function procesarFilasExcel(data) {
    excelRows = [];
    const tbody = document.getElementById('previewBody');
    tbody.innerHTML = '';
    let errCount = 0;

    data.forEach((row, i) => {
        const fecha         = parseFecha(row['FECHA'] || row['fecha'] || '');
        const tipodoc       = String(row['TIPO_DOC'] || row['tipo_doc'] || '01');
        const serie         = String(row['SERIE'] || row['serie'] || '');
        const corr          = String(row['CORRELATIVO'] || row['correlativo'] || '');
        const ruc           = String(row['RUC_PROVEEDOR'] || row['ruc_proveedor'] || row['RUC'] || row['ruc'] || '');
        const provNombre    = String(row['PROVEEDOR'] || row['proveedor'] || row['RAZON_SOCIAL'] || row['razon_social'] || '');
        const tipoProvRaw   = String(row['TIPO_PROVEEDOR'] || row['tipo_proveedor'] || '').toLowerCase().trim();
        const tipoProv      = (tipoProvRaw === 'materia_prima' || tipoProvRaw === 'materia prima')
                            ? 'materia_prima'
                            : (tipoProvRaw === 'otros_gastos' || tipoProvRaw === 'otros gastos')
                            ? 'otros_gastos'
                            : 'materiales';
        const tipoProvLabel = tipoProv === 'materia_prima' ? 'Materia Prima' : (tipoProv === 'otros_gastos' ? 'Otros Gastos' : 'Materiales');
        const destino       = String(row['DESTINO'] || row['destino'] || '');
        const prodNom       = String(row['PRODUCTO'] || row['producto'] || '').trim();
        const cantidad      = parseFloat(row['CANTIDAD'] || row['cantidad'] || 0);
        const precio        = parseFloat(row['PRECIO_UNIT'] || row['precio_unit'] || 0);
        const moneda        = String(row['MONEDA'] || row['moneda'] || 'PEN');
        const formaPago     = String(row['FORMA_PAGO'] || row['forma_pago'] || 'CONTADO');
        const unidad        = (String(row['UNIDAD'] || row['unidad'] || 'UND').toUpperCase().trim()) || 'UND';
        const categoria     = String(row['CATEGORIA'] || row['categoria'] || '').trim();
        const obs           = String(row['OBSERVACIONES'] || row['observaciones'] || '');
        const dest          = resolverDestino(destino);
        const almacenId     = dest.almacen;
        const seccion       = dest.seccion;

        const errors = [];
        if (!fecha)        errors.push('Sin fecha');
        if (!prodNom)      errors.push('Sin producto');
        if (cantidad <= 0) errors.push('Cantidad inválida');
        if (precio < 0)    errors.push('Precio inválido');
        if (!almacenId)    errors.push('Almacén no reconocido');

        if (errors.length > 0) errCount++;

        const almNombre = ALMACENES[almacenId] ? ALMACENES[almacenId].nombre : (destino || '—');
        const tr = document.createElement('tr');
        tr.className = errors.length ? 'table-danger' : 'table-success';
        tr.innerHTML = `
            <td>${i+2}</td>
            <td>${fecha}</td>
            <td>${ruc || '—'}</td>
            <td>${provNombre.substring(0,22) || '—'}</td>
            <td><span class="badge badge-${tipoProv==='materia_prima'?'success':(tipoProv==='otros_gastos'?'secondary':'primary')}">${tipoProvLabel}</span></td>
            <td>${almNombre.substring(0,18)}</td>
            <td>${categoria || '—'}</td>
            <td><strong>${prodNom}</strong></td>
            <td>${unidad}</td>
            <td class="text-center">${cantidad}</td>
            <td class="text-right">${precio.toFixed(4)}</td>
            <td>${errors.length ? '<span class="badge badge-danger">'+errors.join(', ')+'</span>' : '<span class="badge badge-success">OK</span>'}</td>
        `;
        tbody.appendChild(tr);

        if (!errors.length) {
            excelRows.push({
                fecha_ingreso:    fecha,
                tipo_doc:         tipodoc,
                serie:            serie,
                correlativo:      corr,
                proveedor_ruc:    ruc,
                proveedor_nombre: provNombre,
                tipo_proveedor:   tipoProv,
                categoria:        categoria,
                producto_nombre:  prodNom,
                cantidad:         cantidad,
                costo_unitario:   precio,
                almacen_id:       almacenId,
                seccion:          seccion,
                unidad:           unidad,
                moneda:           moneda.toUpperCase(),
                forma_pago:       formaPago.toUpperCase(),
                observacion:      obs,
            });
        }
    });

    document.getElementById('totalFilas').textContent   = data.length;
    document.getElementById('previewSection').style.display = '';
    document.getElementById('resultadoImport').style.display = 'none';

    if (errCount > 0) {
        const alerta = document.getElementById('alertaErrores');
        alerta.textContent = `${errCount} fila(s) con errores (se importarán ${excelRows.length} válidas)`;
        alerta.style.display = '';
    } else {
        document.getElementById('alertaErrores').style.display = 'none';
    }

    const btn = document.getElementById('btnProcesarExcel');
    if (excelRows.length > 0) {
        document.getElementById('btnImportCount').textContent = `(${excelRows.length} filas)`;
        btn.style.display = '';
    } else {
        btn.style.display = 'none';
    }
}

document.getElementById('btnProcesarExcel').addEventListener('click', function () {
    if (!excelRows.length) return;
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Importando...';

    const autoCrear = document.getElementById('chkAutoCrear').checked;

    fetch(IMPORTAR_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify({ rows: excelRows, auto_crear: autoCrear }),
    })
    .then(async r => {
        const d = await r.json();
        const div = document.getElementById('resultadoImport');
        div.style.display = '';

        if (d.ok) {
            let msg = `${d.importados} ingreso(s) registrado(s)`;
            const extras = [];
            if (d.creados && d.creados > 0)
                extras.push(`<span class="text-warning">${d.creados} producto(s) creado(s)</span>`);
            if (d.creados_proveedores && d.creados_proveedores > 0)
                extras.push(`<span class="text-info">${d.creados_proveedores} proveedor(es) creado(s)</span>`);
            if (extras.length) msg += ' &mdash; ' + extras.join(', ');
            let html = `<div class="alert alert-success mb-2"><i class="fas fa-check-circle mr-1"></i>${msg}.</div>`;
            if (d.errores && d.errores.length) {
                html += `<div class="alert alert-warning small mb-0"><strong>Advertencias:</strong><br>${d.errores.join('<br>')}</div>`;
            }
            div.innerHTML = html;
            if (d.redirect) {
                setTimeout(() => { window.location.href = d.redirect; }, 1800);
            }
        } else {
            div.innerHTML = `<div class="alert alert-danger mb-0"><i class="fas fa-exclamation-triangle mr-1"></i>${d.mensaje || 'Error al importar.'}</div>`;
            this.disabled = false;
            this.innerHTML = '<i class="fas fa-cloud-upload-alt mr-1"></i>Importar';
        }
    })
    .catch(() => {
        document.getElementById('resultadoImport').innerHTML =
            '<div class="alert alert-danger">Error de conexión al servidor.</div>';
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-cloud-upload-alt mr-1"></i>Importar';
    });
});

/* ─────────────────────────────────────────────
   DESCARGAR PLANTILLA (XLSX.js)
───────────────────────────────────────────── */
function generarPlantilla(conEjemplos) {
    const wb = XLSX.utils.book_new();

    // Hoja 1: Ingresos
    const headers = ['FECHA','RUC_PROVEEDOR','PROVEEDOR','TIPO_PROVEEDOR','DESTINO','CATEGORIA','PRODUCTO','CANTIDAD','UNIDAD','PRECIO_UNIT','TIPO_DOC','SERIE','CORRELATIVO','MONEDA','FORMA_PAGO','OBSERVACIONES'];

    let data = [headers];

    if (conEjemplos) {
        data = data.concat([
            ['15/05/2026','20100070970','AGRO MANGO PERU S.A.C.','materia_prima','Almacen 01 — Materia Prima','Frutas','PULPA DE MANGO','1000','KG','2.50','01','F001','000123','PEN','CONTADO','Guía 001-0045'],
            ['15/05/2026','20100070970','AGRO MANGO PERU S.A.C.','materia_prima','Almacen 01 — Materia Prima','Frutas','MANGO KENT','500','KG','1.80','01','F001','000124','PEN','CONTADO',''],
            ['15/05/2026','20512345678','QUIMICA INDUSTRIAL S.A.','materiales','Almacen 02 — Insumos','Insumos Químicos','ACIDO CITRICO','50','KG','8.00','01','F001','000125','PEN','CREDITO',''],
            ['15/05/2026','20512345678','QUIMICA INDUSTRIAL S.A.','materiales','Almacen 03 — Envases','Envases','BALDE 5KG CON TAPA','200','UND','3.20','03','B001','003456','PEN','CONTADO',''],
        ]);
    }

    const ws1 = XLSX.utils.aoa_to_sheet(data);
    ws1['!cols'] = [12,14,30,14,28,18,28,10,8,11,9,8,12,8,12,25].map(w => ({ wch: w }));

    // Hoja 2: Instrucciones
    const instrucciones = [
        ['CAMPO','DESCRIPCIÓN','VALORES VÁLIDOS','OBLIGATORIO'],
        ['FECHA','Fecha de ingreso','DD/MM/AAAA — Ej: 15/05/2026','SÍ'],
        ['RUC_PROVEEDOR','RUC o DNI del proveedor','11 dígitos (RUC) u 8 dígitos (DNI)','No'],
        ['PROVEEDOR','Razón social o nombre del proveedor','Texto libre. Si activa "Crear automáticamente", se creará si no existe','No'],
        ['TIPO_PROVEEDOR','Categoría del proveedor','materiales  /  materia_prima  /  otros_gastos','No (default: materiales)'],
        ['DESTINO','Área o almacén de destino','Ver hoja "Áreas Válidas"','SÍ'],
        ['CATEGORIA','Categoría del producto','Ej: Frutas, Insumos Químicos, Envases. Se crea si no existe.','No (default: Importado)'],
        ['PRODUCTO','Nombre del producto','Si activa "Crear automáticamente", se creará si no existe','SÍ'],
        ['CANTIDAD','Cantidad ingresada','Número positivo','SÍ'],
        ['UNIDAD','Unidad de medida','KG, LT, UND, etc.','No (default: UND)'],
        ['PRECIO_UNIT','Precio unitario sin IGV','Número decimal. Ej: 2.5000','SÍ'],
        ['TIPO_DOC','Tipo de comprobante','01=Factura, 03=Boleta, 09=Guía, 12=Ticket, NE=Nota Entrada','No'],
        ['SERIE','Serie del comprobante','Ej: F001, B001','No'],
        ['CORRELATIVO','Número correlativo','Ej: 000123','No'],
        ['MONEDA','Moneda del precio','PEN (Soles) / USD (Dólares)','No (default: PEN)'],
        ['FORMA_PAGO','Condición de pago','CONTADO / CREDITO','No (default: CONTADO)'],
        ['OBSERVACIONES','Notas adicionales','Texto libre','No'],
    ];
    const ws2 = XLSX.utils.aoa_to_sheet(instrucciones);
    ws2['!cols'] = [{ wch: 16 }, { wch: 40 }, { wch: 40 }, { wch: 12 }];

    // Hoja 3: Áreas Válidas
    const areas = [
        ['NOMBRE ÁREA / ALMACÉN','TIPO'],
        @foreach($almacenes as $alm)
        ['{{ addslashes($alm->nombre) }}','{{ $alm->tipo }}'],
        @endforeach
    ];
    const ws3 = XLSX.utils.aoa_to_sheet(areas);
    ws3['!cols'] = [{ wch: 35 }, { wch: 20 }];

    XLSX.utils.book_append_sheet(wb, ws1, 'Ingresos');
    XLSX.utils.book_append_sheet(wb, ws2, 'Instrucciones');
    XLSX.utils.book_append_sheet(wb, ws3, 'Áreas Válidas');

    const suffix = conEjemplos ? 'con_Ejemplos' : 'Vacia';
    XLSX.writeFile(wb, `Plantilla_Ingresos_${suffix}_SBR_Maybell.xlsx`);
}

document.getElementById('btnPlantillaVacia').addEventListener('click', () => generarPlantilla(false));
document.getElementById('btnPlantillaEjemplos').addEventListener('click', () => generarPlantilla(true));
</script>
@endpush

@endsection