<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Despacho de Productos</title>

<style>

body{
font-family: Arial;
font-size:16px;
margin:0;
padding:0;
background:#fff;
}

#wrapper{
width:100%;
max-width:750px;
margin:0 auto;
}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.table{
width:100%;
border-collapse:collapse;
}

.table th{
border-bottom:1px solid #000;
padding:4px;
}

.table td{
padding:4px;
}

.despachar{
width:60px;
text-align:center;
}

#buttons{
margin-top:10px;
}

.quitar-item{
cursor:pointer;
color:red;
font-weight:bold;
}

.barra{
background:#eee;
width:100%;
height:10px;
}

.progreso{
background:#28a745;
height:10px;
}

</style>

</head>

<body>

<div id="wrapper">

<form id="form_despacho" method="POST" action="<?= admin_url('fel/procesar_despacho'); ?>">

<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">

<input type="hidden" name="sale_id" value="<?= $sale->id ?>">
<input type="hidden" name="ticket_id" value="<?= $sale->reference_no ?>">
<input type="hidden" name="items" id="datos_despacho">

<br>



<div class="center">

<strong>

DESPACHO DE PRODUCTOS<br>

</strong>

</div>


<hr>

<strong>

Fecha Venta: <?= date('d/m/Y H:i', strtotime($sale->date)) ?><br>
Vendedor: <?= $user->username ?><br>
Referencia: <?= $sale->reference_no ?>

</strong>

<hr>

<button type="button" id="despacharTodo">
Despachar todo lo pendiente
</button>

<table class="table" id="despachoTable">

<thead>

<tr>
<th>#</th>
<th>Producto</th>
<th>Vendido</th>
<th>Despachado</th>
<th>Pendiente</th>
<th>Despachar</th>
<th>%</th>
<th>X</th>
</tr>

</thead>

<tbody>

<?php $r=1; foreach ($items as $item):

$porcentaje = ($item->despachado / $item->quantity) * 100;

?>

<tr
data-id="<?= $item->product_id ?>"
data-precio="<?= $item->unit_price ?>"
data-pendiente="<?= $item->pendiente ?>"
>

<td class="center"><?= $r ?></td>

<td class="left"><?= $item->product_name ?></td>

<td class="center"><?= $item->quantity ?></td>

<td class="center"><?= $item->despachado ?></td>

<td class="center"><?= $item->pendiente ?></td>

<td class="center">

<input 
type="number"
class="despachar"
min="0"
max="<?= $item->pendiente ?>"
value="0"
<?= $item->pendiente <= 0 ? 'disabled' : '' ?>
>

</td>

<td class="center">

<div class="barra">
<div class="progreso" style="width:<?= $porcentaje ?>%"></div>
</div>

</td>

<td class="center">
<span class="quitar-item">X</span>
</td>

</tr>

<?php $r++; endforeach; ?>

</tbody>

</table>

<hr>

<div id="buttons" class="center">

<button type="submit">Registrar Despacho</button>

</div>

</form>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

/* LIMITAR CANTIDAD EN VIVO */

$(document).on('input','.despachar',function(){

let max = parseFloat($(this).attr('max'));
let valor = parseFloat($(this).val());

if(valor > max){
$(this).val(max);
}

if(valor < 0){
$(this).val(0);
}

});

/* DESPACHAR TODO */

$('#despacharTodo').click(function(){

$('#despachoTable tbody tr').each(function(){

let pendiente=$(this).data('pendiente');

if(pendiente > 0){

$(this).find('.despachar').val(pendiente);

}

});

});

/* QUITAR FILA */

$(document).on('click','.quitar-item',function(){

$(this).closest('tr').remove();

});

/* VALIDAR AL ENVIAR */

$('#form_despacho').submit(function(){

let items=[];
let error=false;

$('#despachoTable tbody tr').each(function(){

let row=$(this);

let cantidad=parseFloat(row.find('.despachar').val()) || 0;
let pendiente=parseFloat(row.data('pendiente')) || 0;

if(cantidad>pendiente){

alert("No puede despachar más de lo pendiente");
error=true;
return false;

}

if(cantidad>0){

items.push({

id:row.data('id'),
descripcion:row.find('td:eq(1)').text().trim(),
cantidad:cantidad,
precio:row.data('precio')

});

}

});

if(error) return false;

$('#datos_despacho').val(JSON.stringify(items));

});

</script>

</body>
</html>