<ul class="list-group">
	<li class="list-group-item">
		<h4>Quiebres de productos</h4>

		<ul class="nav nav-pills alt-pills float-right mini-labels">
			<form method="get">

				<li class="nav-item float-left mr-3">
					<label>Periodo</label>
					<?php $periodo = $filtros['periodo'] ?? ''; ?>
					<select name ="periodo" id="periodo" class="form-control">
						<option value="">Periodo</option>

						<option value="week" <?= $periodo === 'week' ? 'selected' : '' ?>>Esta semana</option>
						<option value="month" <?= $periodo === 'month' ? 'selected' : '' ?>>Este mes</option>

						<option disabled>──────────</option>
						<?php
							foreach ($meses_ventas as $k => $v) {
								$selected = ($periodo == $v) ? ' selected="selected"' : '';
								echo '<option value="' . $v . '"' . $selected . '>' . mtt($v) . '</option>';
							}
						?>
					</select>

				</li>

				<li class="nav-item float-left mr-3">
					<label>Desde</label>
					<input type="date" name="fecha_desde" id="fecha_desde" class="form-control" value="<?= $filtros['fecha_desde'] ?? '' ?>">
				</li>

				<li class="nav-item float-left mr-3">
					<label>Hasta</label>
					<input type="date" name="fecha_hasta" id="fecha_hasta" class="form-control" value="<?= $filtros['fecha_hasta'] ?? '' ?>">
				</li>

				<li class="nav-item float-left mr-3">
					<label>Almacén</label>
					<select name="id_almacen" class="form-control select-almacen">
						<?php
							$almacen_options = [-1 => 'Todos', 0 => 'Interno'] + $tiendas;
							$c = isset($filtros['id_almacen']) ? (int)$filtros['id_almacen'] : -1;

							foreach ($almacen_options as $k => $v) {
								$selected = ($c === (int)$k) ? ' selected="selected"' : '';
								echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
							}
						?>
					</select>
				</li>

				<li class="nav-item float-left mr-3">
					<label>Proveedor</label>
					<select name ="id_proveedor" class="form-control select-id-proveedor">
						<option value="">Todos</option>
						<?php
							$p = $filtros['id_proveedor'] ?? null;
							foreach($distribuidores as $k => $v) {
								$selected = ($p == $k) ? ' selected="selected"' : '';
								echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
							}
						?>
					</select>
				</li>

				<li class="nav-item float-left mr-3">
					<label>Reposición</label>
					<select name ="reposicion" class="form-control select-reposicion">
						<?php
							$reposiciones = [
								'-1' => 'Todos',
								'1' => 'Requiere',
								'0' => 'No Requiere',
							];
							$p = $filtros['reposicion'];
							foreach($reposiciones as $k => $v) {
								$selected = ($p == $k) ? ' selected="selected"' : '';
								echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
							}
						?>
					</select>
				</li>

				<li class="nav-item float-left mr-3">
					<label>Estado</label>
					<select name="estado" class="form-control select-estado">
						<?php
						$estados = [
							'-1' => 'Todos',
							'0' => 'Sin Resolver',
							'1' => 'Resuelto',
						];
						$p = $filtros['estado'] ?? 0;

						foreach ($estados as $k => $v) {
							$selected = ($p == $k) ? ' selected="selected"' : '';
							echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
						}
						?>
					</select>
				</li>

				<li class="nav-item float-left mr-3">
					<label></label>
					<button type="submit" class="btn btn-primary d-block">
						<i class="fa fa-search"></i>
					</button>
				</li>

			</form>
		</ul>
	</li>

	<li class="list-group-item">

		<h5>Quiebres Activos</h5>

		<div class="table-responsive">
			<table class="table table-striped">
				<thead>
					<tr>
						<th class="text-center">PS</td>
						<th>Producto</th>
						<th class="text-center">Fecha</th>
						<th class="text-center">Almacén</th>
						<th class="text-center">Reponer</th>
						<th class="text-center">Estado</th>
						<th class="text-center">Bodega</th>
						<th class="text-center">Fecha Resolución</th>
						<th class="text-center">Resolución</th>
						<th class="text-center">Acciones</th>
						<th class="text-center">Resolver</th>
					</tr>
				</thead>
				<tbody>

					<?php $ranking = 1; ?>
					<?php foreach ($quiebres as $p): ?>
						<tr>
							<td class="text-center">
								<?php 
									if ($p['ps_id'] > 0) {
										?>
										<span class="badge badge-pill badge-primary ps-id-product ver-ps" data-ps-id="<?php echo $p['ps_id']; ?>">
											<?php echo $p['ps_id']; ?>
										</span>
										<?php
									}
								?>
							</td>
							<td>
								<?php
								if (!empty($ps_imagenes[$p['ps_id']])) {
									echo ps_image($ps_imagenes[$p['ps_id']]);
								} 
								?>
								<a target="_blank" href="/productos/detalle/<?php echo $p['id_producto']; ?>">
									<span class="nombre"><?php echo $p['nombre']; ?></span>
								</a>
							</td>

							<td class="text-center">
								<?= fechaHora($p['fecha_quiebre']); ?>
							</td>

							<td class="text-center">
								<?php
								 echo $almacenes[$p['id_almacen']] ?? 'Interno';
								 ?>
							</td>

							<td class="text-center">
								<?= $p['requiere_reposicion'] == 0 ? 'No' : 'Si'; ?>
							</td>
							<td class="text-center">
								<?= $p['resuelto'] == 0 ? 'Activo' : 'Resuelto'; ?>
							</td>
							<td class="text-center">
								<?php 
								$titleStock = '';
								foreach($almacenes_activos as $k => $v) {
									$titleStock .= $v . ': ' . $p['stocks'][$k]['disponibles'] . '<br>';
								}
								?>
								<span class="stocks-almacenes badge badge-pill badge-success tt" title="<?= $titleStock; ?>"><?= $p['stocks'][1]['disponibles']; ?></span>
							</td>

							<td class="text-center fecha-resolucion">
								<?php echo ($p['fecha_resolucion'] != '0000-00-00 00:00:00' ? fechaHora($p['fecha_resolucion']) : ''); ?>
							</td>
							<td class="text-center tipo-resolucion">
								<?php 
									if ($p['id_tipo_resolucion'] > 0) {
										echo $resoluciones_quiebres[$p['id_tipo_resolucion']] ?? '';

										if (in_array($_SESSION['usuario']['perfil'], [1, 2, 3])) {
										?>
											<button type="button"
												class="btn btn-warning btn-xs btn-reabrir"
												data-id="<?php echo $p['id']; ?>"
												title="Reabrir quiebre">
											<i class="fas fa-undo"></i>
										</button>
										<?php
										}
									}
								?>
							</td>
							<td class="text-center">
								<button type="button" class="btn btn-primary btn-xs d-lg-inline tt" data-toggle="modal" data-target="#modalProducto" data-id="<?php echo $p['id_producto']; ?>" title="Editar Producto">
									<i class="fas fa-pencil-alt"></i>
								</button>
								<button type="button" class="btn btn-primary btn-xs d-lg-inline tt" data-toggle="modal" data-target="#modalStockAlmacenes" data-id="<?php echo $p['id_producto']; ?>" title="Editar Stocks">
									<i class="fas fa-list"></i>
								</button>
							</td>
							<td class="text-center" style="padding: .5rem .75rem">
								<div style="display: flex; gap: 6px; align-items: center;">
									<select name="resolucion" class="form-control select-id-resolucion" style="width: 160px; padding: 4px; font-size: 13px">
										<option value="">Seleccionar...</option>
										<?php
											foreach($resoluciones_quiebres_opciones as $k => $v) {
												echo '<option value="' . $k . '"' . $selected . '>' . $v . '</option>';
											}
										?>
									</select>

									<button type="button"
										class="btn btn-primary btn-xs btn-resolver tt"
										data-id="<?php echo $p['id']; ?>"
										title="Guardar resolución"
										disabled>
										<i class="fas fa-save"></i>
									</button>
								</div>
							</td>
						</tr>
					<?php endforeach; ?>
				</tbody>
			</table>
		</div>
	</li>

</ul>


<?php $this->load->view('productos/modal'); ?>
<?php $this->load->view('productos/modal_stock'); ?>

<script src="<?php echo js('productos.js'); ?>"></script>


<script>
$(function () {

	function formatDate(date) {
		let d = new Date(date);
		let month = '' + (d.getMonth() + 1);
		let day = '' + d.getDate();
		let year = d.getFullYear();

		if (month.length < 2) month = '0' + month;
		if (day.length < 2) day = '0' + day;

		return [year, month, day].join('-');
	}

	function firstDayOfMonth(year, month) {
		return formatDate(new Date(year, month - 1, 1));
	}

	function lastDayOfMonth(year, month) {
		return formatDate(new Date(year, month, 0));
	}

	// =========================
	// Cambio de PERÍODO
	// =========================
	$('#periodo').on('change', function () {
		let value = $(this).val();
		let today = new Date();

		if (!value) return;

		// Esta semana
		if (value === 'week') {
			let day = today.getDay();
			let diff = today.getDate() - day + (day === 0 ? -6 : 1); // lunes
			let monday = new Date(today.setDate(diff));
			let sunday = new Date(monday);
			sunday.setDate(monday.getDate() + 6);

			$('#fecha_desde').val(formatDate(monday));
			$('#fecha_hasta').val(formatDate(sunday));
			return;
		}

		// Este mes
		if (value === 'month') {
			let year = today.getFullYear();
			let month = today.getMonth() + 1;

			$('#fecha_desde').val(firstDayOfMonth(year, month));
			$('#fecha_hasta').val(lastDayOfMonth(year, month));
			return;
		}

		// Mes específico (formato: YYYYMM)
		if (/^\d{6}$/.test(value)) {
			const year  = parseInt(value.substring(0, 4), 10);
			const month = parseInt(value.substring(4, 6), 10);

			const desde = new Date(year, month - 1, 1);
			const hasta = new Date(year, month, 0);

			$('#fecha_desde').val(desde.toISOString().slice(0, 10));
			$('#fecha_hasta').val(hasta.toISOString().slice(0, 10));
		}

	});

	// =========================
	// Cambio manual DESDE
	// =========================
	$('#fecha_desde').on('change', function () {
		let desde = $(this).val();
		let hasta = $('#fecha_hasta').val();

		if (hasta && desde > hasta) {
			$('#fecha_hasta').val(desde);
		}

		$('#periodo').val('');
	});

	// =========================
	// Cambio manual HASTA
	// =========================
	$('#fecha_hasta').on('change', function () {
		let hasta = $(this).val();
		let desde = $('#fecha_desde').val();

		if (desde && hasta < desde) {
			$('#fecha_desde').val(hasta);
		}

		$('#periodo').val('');
	});

	$(document).on('change', '.select-id-resolucion', function() {
		let $select = $(this);
		let $boton = $select.siblings('.btn-resolver');

		let id_resolucion = $select.val();

		if(id_resolucion && id_resolucion !== 'Seleccionar...'){
			$boton.prop('disabled', false);
		} else {
			$boton.prop('disabled', true);
		}
	});


	$(document).on('click', '.btn-resolver', function() {
		let id_quiebre = $(this).data('id');
		let id_resolucion = $(this).siblings('.select-id-resolucion').val();
		let texto_resolucion = $(this).siblings('.select-id-resolucion').find('option:selected').text();
		let $fila = $(this).closest('tr');

		$.ajax({
			url: '/productos/resolver_quiebre',
			type: 'POST',
			data: {
				id_quiebre: id_quiebre,
				id_resolucion: id_resolucion
			},
			success: function(response) {
				if(response.ok){
					// actualizar tipo
					$fila.find('.tipo-resolucion').text(texto_resolucion);

					// actualizar fecha (usa backend o fallback local)
					let fecha_resolucion = fechaHora(response.fecha ?? new Date().toLocaleString());
					$fila.find('.fecha-resolucion').text(fecha_resolucion);
				} else {
					alert('No se pudo guardar');
				}
			},
			error: function() {
				alert('Error al guardar');
			}
		});
	});


	$(document).on('click', '.btn-reabrir', function() {

		if(!confirm('¿Reabrir este quiebre?')){
			return;
		}

		let $boton = $(this);
		let $fila = $boton.closest('tr');
		let id_quiebre = $boton.data('id');

		$.ajax({
			url: '/productos/reabrir_quiebre',
			type: 'POST',
			dataType: 'json',
			data: {
				id_quiebre: id_quiebre
			},
			success: function(response) {

				if(response.ok){

					// limpiar columnas
					$fila.find('.fecha-resolucion').text('');
					$fila.find('.tipo-resolucion').text('');

					// resetear select
					let $select = $fila.find('.select-id-resolucion');
					$select.val('');
					
					// deshabilitar botón guardar
					$fila.find('.btn-resolver').prop('disabled', true);

				} else {
					alert('No se pudo reabrir');
				}

			},
			error: function() {
				alert('Error al reabrir');
			}
		});
	});
});
</script>