<div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800">Kardex de Cliente</h1>


<div class="card shadow-sm mb-4">
<div class="card-body">
<form id="form-kardex" class="row g-3 align-items-end">
<?= csrf_field() ?>
<div class="col-md-4">
<label for="id_cliente" class="form-label">Cliente</label>
<select class="form-control" id="id_cliente" name="id_cliente" required>
<option value="">Seleccione...</option>
<?php foreach ($clientes as $c): ?>
<option value="<?= esc($c['id_cliente']) ?>"><?= esc($c['nombre']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-4">
<label for="id_locacion" class="form-label">Obra / Locación</label>
<select class="form-control" id="id_locacion" name="id_locacion" required>
<option value="">Seleccione...</option>
<?php foreach ($locaciones as $l): ?>
<option value="<?= esc($l['id_locacion']) ?>"><?= esc($l['nombre']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-2">
<label for="fecha_desde" class="form-label">Desde</label>
<input type="date" class="form-control" id="fecha_desde" name="fecha_desde" required>
</div>
<div class="col-md-2">
<label for="fecha_hasta" class="form-label">Hasta</label>
<input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" required>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Consultar</button>
</div>
</form>
</div>
</div>


<div class="card shadow-sm">
<div class="card-body">
<div class="table-responsive" style="max-height:70vh; overflow:auto">
<table id="tabla-kardex" class="table table-bordered table-sm align-middle">
<thead id="thead-kardex"></thead>
<tbody id="tbody-kardex"></tbody>
</table>
</div>
</div>
</div>
</div>

<style>
    /***** Accesible + limpio *****/
    #tabla-kardex th, #tabla-kardex td { white-space: nowrap; }
    #tabla-kardex thead th { position: sticky; top: 0; background: #f8f9fc; z-index: 2; }
    #tabla-kardex thead tr:nth-child(1) th { text-align: center; font-weight: 700; }
    #tabla-kardex .saldo-negativo { background-color: #ffe5e5; }
    #tabla-kardex .saldo-cero { background-color: #fff9db; }
    #tabla-kardex .col-fixed { position: sticky; left: 0; z-index: 3; background: #fff; }
    #tabla-kardex .col-fixed-2 { position: sticky; left: 8rem; z-index: 3; background: #fff; }
    #tabla-kardex .col-fixed-3 { position: sticky; left: 16rem; z-index: 3; background: #fff; }
</style>

<script>
(function(){
const form = document.getElementById('form-kardex');
const thead = document.getElementById('thead-kardex');
const tbody = document.getElementById('tbody-kardex');


form.addEventListener('submit', async (e) => {
e.preventDefault();


const fd = new FormData(form);
const resp = await fetch('<?= site_url('kardexcliente/datos') ?>', {
method: 'POST',
body: fd,
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await resp.json();


renderTable(data);
});


function renderTable(data){
const productos = data.productos; // [{id, descripcion}]
const rows = data.rows;


// 1. Construir cabecera en 2 niveles
const tr1 = document.createElement('tr');
const tr2 = document.createElement('tr');


const thFecha = document.createElement('th'); thFecha.rowSpan = 2; thFecha.textContent='Fecha'; thFecha.classList.add('col-fixed'); thFecha.style.minWidth='8rem'; tr1.appendChild(thFecha);
const thRem = document.createElement('th'); thRem.rowSpan = 2; thRem.textContent='Remisión'; thRem.classList.add('col-fixed-2'); thRem.style.minWidth='8rem'; tr1.appendChild(thRem);
const thDev = document.createElement('th'); thDev.rowSpan = 2; thDev.textContent='Devolución'; thDev.classList.add('col-fixed-3'); thDev.style.minWidth='8rem'; tr1.appendChild(thDev);


productos.forEach(p => {
const th = document.createElement('th'); th.colSpan = 3; th.textContent = p.descripcion; tr1.appendChild(th);
['Entrada','Salida','Saldo'].forEach(lbl=>{
const th2 = document.createElement('th'); th2.textContent = lbl; tr2.appendChild(th2);
});
});


thead.innerHTML='';
thead.appendChild(tr1);
thead.appendChild(tr2);


// 2. Cuerpo
tbody.innerHTML='';
rows.forEach(r => {
const tr = document.createElement('tr');
tr.appendChild(tdFixed(r.fecha, 'col-fixed'));
tr.appendChild(tdFixed(r.remision ?? '', 'col-fixed-2'));
tr.appendChild(tdFixed(r.devolucion ?? '', 'col-fixed-3'));


productos.forEach(p => {
const it = r.items[p.id] || {entrada:null, salida:null, saldo:null};
tr.appendChild(tdNum(it.entrada));
tr.appendChild(tdNum(it.salida));
const tdS = tdNum(it.saldo);
if (typeof it.saldo === 'number') {
if (it.saldo < 0) tdS.classList.add('saldo-negativo');
if (it.saldo === 0) tdS.classList.add('saldo-cero');
}
tr.appendChild(tdS);
});


tbody.appendChild(tr);
});
}


function tdNum(v){
const td = document.createElement('td');
td.classList.add('text-end');
td.textContent = (v===null || v===undefined || v==='') ? '' : Number(v).toLocaleString();
return td;
}
function tdFixed(txt, cls){
const td = document.createElement('td');
td.textContent = txt;
td.classList.add(cls);
return td;
}
})();
</script>