<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consulta de Entregas por Filtros</title>
<link rel="icon" type="image/png" href="assets/img/icono.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<style>
body { background-image: linear-gradient(125deg, #d0101d, #752b2a); padding: 20px; min-height: 100vh; }
.card { border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,.1); }
.card-header { background-color: #8d8c8c; color: white; border-radius: 15px 15px 0 0 !important; }
.card-header.bg-primary { background: linear-gradient(225deg, #d0101d, #752b2a) !important; }
.card-header.bg-info { background-color: #8d8c8c !important; }
.table-container { overflow-x: auto; }
table.dataTable thead th {
background-color: #8d8c8c !important; color: white !important;
border: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
}
table.dataTable thead th:hover { background-color: #8d8c8c !important; }
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after { color: white !important; opacity: .8 !important; }
.btn-rojo { background: linear-gradient(225deg, #d0101d, #752b2a); color: white; border: none; }
.btn-rojo:hover { background: linear-gradient(225deg, #b00e1a, #632422); color: white; }
.filter-section { background-color: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
.filter-title { font-weight: bold; margin-bottom: 10px; color: #d0101d; }
.talla-col { min-width: 80px; max-width: 100px; font-size: .9em; }
.firma-img { max-width: 100px; cursor: pointer; transition: transform .3s; }
.firma-img:hover { transform: scale(1.5); z-index: 1000; }
</style>
</head>
<body>
<div class="container-fluid">
<!-- TARJETA FILTROS -->
<div class="card mb-4">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h4 class="mb-0"><i class="fas fa-filter me-2"></i>Consulta de Entregas por Filtros</h4>
<div class="d-flex gap-2">
<a href="index.php?controller=Consulta&action=historico" class="btn btn-warning btn-sm">
<i class="fas fa-history me-1"></i> Histórico
</a>
<a href="index.php?controller=Dashboard&action=index" class="btn btn-light btn-sm">
<i class="fas fa-home me-1"></i> Menú
</a>
</div>
</div>
</div>
<div class="card-body">
<form id="formConsulta" method="post"
action="index.php?controller=Consulta&action=index" class="row g-3">
<!-- Tipo de filtro -->
<div class="col-12">
<div class="filter-section">
<div class="filter-title">Seleccione el tipo de filtro:</div>
<?php
$tipos = ['cedula' => 'Cédula', 'item' => 'Item', 'area' => 'Área', 'ccosto' => 'Centro de Costo'];
foreach ($tipos as $val => $lbl):
$checked = (!$tipo_filtro && $val === 'cedula') || $tipo_filtro === $val ? 'checked' : '';
?>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="tipo_filtro"
id="filtro_<?= $val ?>" value="<?= $val ?>" <?= $checked ?>>
<label class="form-check-label" for="filtro_<?= $val ?>"><?= $lbl ?></label>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Campo cédula -->
<div class="col-md-4 filter-field" id="cedula-field"
style="<?= ($tipo_filtro && $tipo_filtro !== 'cedula') ? 'display:none' : '' ?>">
<label class="form-label">Cédula del Operario</label>
<input type="text" class="form-control" name="cedula"
value="<?= htmlspecialchars($_POST['cedula'] ?? '') ?>">
</div>
<!-- Campo item -->
<div class="col-md-4 filter-field" id="item-field"
style="<?= $tipo_filtro !== 'item' ? 'display:none' : '' ?>">
<label class="form-label">Código del Item</label>
<input type="text" class="form-control" name="item"
value="<?= htmlspecialchars($_POST['item'] ?? '') ?>">
</div>
<!-- Campo área -->
<div class="col-md-4 filter-field" id="area-field"
style="<?= $tipo_filtro !== 'area' ? 'display:none' : '' ?>">
<label class="form-label">Área</label>
<select class="form-select" name="area">
<option value="">Seleccione un área</option>
<?php foreach ($areas as $a): ?>
<option value="<?= htmlspecialchars($a['area']) ?>"
<?= ($_POST['area'] ?? '') === $a['area'] ? 'selected' : '' ?>>
<?= htmlspecialchars($a['area']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<!-- Campo centro de costo -->
<div class="col-md-4 filter-field" id="ccosto-field"
style="<?= $tipo_filtro !== 'ccosto' ? 'display:none' : '' ?>">
<label class="form-label">Centro de Costo</label>
<select class="form-select" name="ccosto">
<option value="">Seleccione un centro de costo</option>
<?php foreach ($ccostos as $cc): ?>
<option value="<?= htmlspecialchars($cc['ccosto']) ?>"
<?= ($_POST['ccosto'] ?? '') === $cc['ccosto'] ? 'selected' : '' ?>>
<?= htmlspecialchars($cc['ccosto']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<!-- Fechas -->
<div class="col-md-3">
<label class="form-label">Fecha Inicial</label>
<input type="date" class="form-control" name="fecha_inicio"
value="<?= htmlspecialchars($fecha_inicio) ?>" required>
</div>
<div class="col-md-3">
<label class="form-label">Fecha Final</label>
<input type="date" class="form-control" name="fecha_fin"
value="<?= htmlspecialchars($fecha_fin) ?>" required>
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="submit" class="btn btn-rojo w-100">
<i class="fas fa-search me-1"></i> Buscar
</button>
</div>
</form>
</div>
</div>
<?php if ($tipo_filtro !== null): ?>
<!-- Tarjeta datos operario (solo cuando filtra por cédula) -->
<?php if ($tipo_filtro === 'cedula' && $operario): ?>
<div class="card mb-4">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Datos del Operario</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3"><p><strong>Cédula:</strong> <?= htmlspecialchars($_POST['cedula'] ?? '') ?></p></div>
<div class="col-md-3"><p><strong>Nombre:</strong> <?= htmlspecialchars($operario['nombre'] ?? '') ?></p></div>
<div class="col-md-2"><p><strong>Centro Costo:</strong> <?= htmlspecialchars($operario['ccosto'] ?? '') ?></p></div>
<div class="col-md-2"><p><strong>Área:</strong> <?= htmlspecialchars($operario['area'] ?? '') ?></p></div>
<div class="col-md-2"><p><strong>Cargo:</strong> <?= htmlspecialchars($operario['cargo'] ?? '') ?></p></div>
</div>
</div>
</div>
<?php endif; ?>
<!-- Tabla de resultados -->
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Resultados de Entregas
<span class="badge bg-secondary ms-2"><?= count($resultados) ?> registros</span>
</h5>
<!-- Botón exportar Excel -->
<form method="post" action="index.php?controller=Consulta&action=exportarExcel">
<input type="hidden" name="tipo_filtro_export" value="<?= htmlspecialchars($tipo_filtro) ?>">
<input type="hidden" name="fecha_inicio_export" value="<?= htmlspecialchars($fecha_inicio) ?>">
<input type="hidden" name="fecha_fin_export" value="<?= htmlspecialchars($fecha_fin) ?>">
<?php if ($tipo_filtro === 'cedula'): ?>
<input type="hidden" name="cedula_export" value="<?= htmlspecialchars($_POST['cedula'] ?? '') ?>">
<?php elseif ($tipo_filtro === 'item'): ?>
<input type="hidden" name="item_export" value="<?= htmlspecialchars($_POST['item'] ?? '') ?>">
<?php elseif ($tipo_filtro === 'area'): ?>
<input type="hidden" name="area_export" value="<?= htmlspecialchars($_POST['area'] ?? '') ?>">
<?php elseif ($tipo_filtro === 'ccosto'): ?>
<input type="hidden" name="ccosto_export" value="<?= htmlspecialchars($_POST['ccosto'] ?? '') ?>">
<?php endif; ?>
<button type="submit" class="btn btn-success btn-sm">
<i class="fas fa-file-excel me-1"></i> Exportar Excel
</button>
</form>
</div>
<div class="card-body">
<div class="table-container">
<table id="tablaEntregas" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>#</th>
<?php if ($tipo_filtro !== 'cedula'): ?>
<th>Cédula</th><th>Nombre</th>
<?php endif; ?>
<th>Fecha</th>
<th>Código</th>
<th>Descripción</th>
<th>Cant.</th>
<th class="talla-col">T.Pant</th>
<th class="talla-col">T.Cam</th>
<th class="talla-col">T.Bot</th>
<th class="talla-col">T.Chaq</th>
<th class="talla-col">T.Imp</th>
<th>Estado</th>
<th>Tipo Entrega</th>
<th>Entregado Por</th>
<?php if ($tipo_filtro !== 'cedula'): ?>
<th>Área</th><th>Centro Costo</th>
<?php endif; ?>
</tr>
</thead>
<tbody>
<?php $c = 1; foreach ($resultados as $row): ?>
<tr>
<td><?= $c++ ?></td>
<?php if ($tipo_filtro !== 'cedula'): ?>
<td><?= htmlspecialchars($row['cedula']) ?></td>
<td><?= htmlspecialchars($row['nombre']) ?></td>
<?php endif; ?>
<td><?= date('d/m/Y', strtotime($row['fEntrega'])) ?></td>
<td><?= htmlspecialchars($row['codigo']) ?></td>
<td><?= htmlspecialchars($row['descripcion_epp'] ?: $row['epp']) ?></td>
<td><?= htmlspecialchars($row['cantidad']) ?></td>
<td class="talla-col"><?= htmlspecialchars($row['TALLAPANT'] ?: '-') ?></td>
<td class="talla-col"><?= htmlspecialchars($row['TALLACAMI'] ?: '-') ?></td>
<td class="talla-col"><?= htmlspecialchars($row['TALLABOT'] ?: '-') ?></td>
<td class="talla-col"><?= htmlspecialchars($row['tallachaq'] ?: '-') ?></td>
<td class="talla-col"><?= htmlspecialchars($row['tallaimp'] ?: '-') ?></td>
<td><?= htmlspecialchars($row['tpEstado']) ?></td>
<td><?= htmlspecialchars($row['tpEntrega']) ?></td>
<td><?= htmlspecialchars($row['userEntrega']) ?></td>
<?php if ($tipo_filtro !== 'cedula'): ?>
<td><?= htmlspecialchars($row['area']) ?></td>
<td><?= htmlspecialchars($row['ccosto']) ?></td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<?php endif; ?>
</div>
<!-- Modal firma -->
<div class="modal fade" id="modalFirma" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Firma del Operario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center"><img id="firmaGrande" src="" class="img-fluid"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script>
$(function() {
// Mostrar/ocultar campos según filtro
$('input[name="tipo_filtro"]').on('change', function() {
$('.filter-field').hide();
$('#' + $(this).val() + '-field').show();
});
// DataTable
<?php if ($tipo_filtro !== null && !empty($resultados)): ?>
$('#tablaEntregas').DataTable({
language: { url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/es-ES.json' },
dom: 'Bfrtip',
buttons: [{
extend: 'excel',
text: '<i class="fas fa-file-excel"></i> Exportar Excel',
className: 'btn btn-success btn-sm',
title: 'EntregasFiltradas'
}],
responsive: true,
pageLength: 25,
columnDefs: [{ targets: [6,7,8,9,10], width: '80px' }],
scrollX: true
});
<?php endif; ?>
function mostrarFirma(url) { $('#firmaGrande').attr('src', url); }
});
</script>
</body>
</html>