File "buscarActivo-20260419174453.php"
Full Path: C:/wamp64/www/sistemas/activosFijos/buscarActivo-20260419174453.php
File size: 22.33 KB
MIME-type: text/x-php
Charset: utf-8
<?php
include("../connection.php");
$con = connection();
// Verificar si se ha enviado el formulario de búsqueda
$filtro_numero_acta = isset($_GET['numero_acta']) ? $_GET['numero_acta'] : '';
$filtro_tipo = isset($_GET['tipo']) ? $_GET['tipo'] : '';
$filtro_equipo = isset($_GET['equipo']) ? $_GET['equipo'] : '';
$filtro_fecha_inicio = isset($_GET['fecha_inicio']) ? $_GET['fecha_inicio'] : '';
$filtro_fecha_fin = isset($_GET['fecha_fin']) ? $_GET['fecha_fin'] : '';
// Construir la consulta SQL con los filtros
$sql = "SELECT * FROM bajaActivos WHERE 1=1";
if (!empty($filtro_numero_acta)) {
$sql .= " AND numero_acta LIKE '%$filtro_numero_acta%'";
}
if (!empty($filtro_tipo)) {
$sql .= " AND tipo LIKE '%$filtro_tipo%'";
}
if (!empty($filtro_equipo)) {
$sql .= " AND equipo LIKE '%$filtro_equipo%'";
}
if (!empty($filtro_fecha_inicio) && !empty($filtro_fecha_fin)) {
$sql .= " AND fecha BETWEEN '$filtro_fecha_inicio' AND '$filtro_fecha_fin'";
}
$query = mysqli_query($con, $sql);
// Verificar si la consulta tuvo éxito
if (!$query) {
die('Error en la consulta SQL: ' . mysqli_error($con));
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generar Reporte de Activos Fijos</title>
<link rel="icon" type="image/png" href="../img/icono1.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-image: linear-gradient(to right, #FF8626, #025159);
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.header {
background-color: #025159;
color: white;
padding: 20px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* Contenedor de filtros */
.filters-container {
background-color: #f8f9fa;
padding: 25px;
margin: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-left: 5px solid #FF8626;
}
.filters-container h3 {
margin-top: 0;
margin-bottom: 20px;
color: #025159;
font-size: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
align-items: end;
}
.filter-group {
margin-bottom: 0;
}
.filter-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #333;
}
.filter-group input[type="text"],
.filter-group input[type="date"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 14px;
background-color: white;
transition: border 0.3s;
}
.filter-group input[type="text"]:focus,
.filter-group input[type="date"]:focus {
border-color: #FF8626;
outline: none;
box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
}
.date-range {
grid-column: span 2;
}
.date-inputs {
display: flex;
align-items: center;
gap: 15px;
}
.date-inputs span {
font-size: 14px;
color: #666;
font-weight: 600;
}
.submit-btn {
display: flex;
align-items: flex-end;
}
.submit-btn input[type="submit"] {
background-color: #FF8626;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s;
width: 100%;
}
.submit-btn input[type="submit"]:hover {
background-color: #e5761e;
}
/* Botones */
.button-container {
margin: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.button-container input[type="button"],
.button-container button {
padding: 10px 20px;
cursor: pointer;
background-color: #FF8626;
color: white;
border: none;
border-radius: 6px;
transition: all 0.3s;
font-size: 14px;
font-weight: 600;
}
.button-container input[type="button"]:hover,
.button-container button:hover {
background-color: #e5761e;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #4179b9 !important;
}
.btn-secondary:hover {
background-color: #3568a0 !important;
}
.btn-success {
background-color: #138223 !important;
}
.btn-success:hover {
background-color: #0f6b1d !important;
}
.btn-danger {
background-color: #f94e40 !important;
}
.btn-danger:hover {
background-color: #e04437 !important;
}
.btn-pdf {
background-color: #d9534f !important;
}
.btn-pdf:hover {
background-color: #c9302c !important;
}
@media (max-width: 768px) {
.filter-row {
grid-template-columns: 1fr;
}
.date-range {
grid-column: span 1;
}
.date-inputs {
flex-direction: column;
gap: 10px;
}
.date-inputs span {
text-align: center;
}
}
/* Mensajes */
.no-results {
padding: 20px;
background-color: #f8d7da;
color: #721c24;
border-radius: 8px;
margin: 20px;
text-align: center;
border: 1px solid #f5c6cb;
}
.info-message {
padding: 20px;
background-color: #d1ecf1;
color: #0c5460;
border-radius: 8px;
margin: 20px;
text-align: center;
border: 1px solid #bee5eb;
}
/* Tabla */
.users-table {
margin: 20px;
overflow-x: auto;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
table.display {
width: 100%;
border-collapse: collapse;
background-color: white;
}
table.display th, table.display td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
}
table.display th {
background-color: #025159;
color: white;
font-weight: 600;
position: sticky;
top: 0;
}
table.display tr:hover {
background-color: #f5f5f5;
}
/* Imágenes */
table.display td img {
max-width: 100px;
max-height: 100px;
display: block;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 4px;
transition: transform 0.3s;
}
table.display td img:hover {
transform: scale(1.05);
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
backdrop-filter: blur(5px);
}
.modal-content {
display: block;
margin: auto;
max-width: 90%;
max-height: 90%;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
transition: color 0.3s;
}
.close:hover {
color: #FF8626;
}
/* Footer */
.copyright {
text-align: center;
margin-top: 30px;
color: #666;
font-size: 14px;
padding: 20px;
border-top: 1px solid #e0e0e0;
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border-radius: 6px;
z-index: 1000;
display: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-weight: 600;
}
.toast.error {
background-color: #f44336;
}
.toast.show {
display: block;
animation: fadeInOut 3s ease-in-out;
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(20px); }
20%, 80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
/* Responsive para tabla */
@media (max-width: 1200px) {
.users-table {
margin: 10px;
}
table.display {
font-size: 13px;
}
table.display th,
table.display td {
padding: 8px 10px;
}
}
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 10px;
}
.header h1 {
font-size: 24px;
flex-direction: column;
gap: 5px;
}
.filters-container {
margin: 10px;
padding: 15px;
}
.button-container {
margin: 10px;
flex-direction: column;
}
.button-container input[type="button"],
.button-container button {
width: 100%;
text-align: center;
}
table.display td img {
max-width: 80px;
max-height: 80px;
}
}
@media (max-width: 480px) {
.modal-content {
max-width: 95%;
max-height: 95%;
}
.close {
top: 10px;
right: 15px;
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-file-contract"></i> Reporte de Activos Fijos</h1>
</div>
<div class="button-container">
<input type="button" value="Volver" onclick="window.location.href='../disponibles/subMenu.php';" class="btn-secondary">
<input type="button" onclick="window.location.href='generarExcel.php';" value="Generar Excel" class="btn-success">
<input type="button" onclick="window.location.href='../index.php';" value="Menú Principal" class="btn-danger">
<!-- Botón para generar PDF -->
<form method="post" action="pdf.php" style="display: inline;">
<input type="hidden" name="numero_acta" value="<?= htmlspecialchars($filtro_numero_acta) ?>">
<input type="hidden" name="tipo" value="<?= htmlspecialchars($filtro_tipo) ?>">
<input type="hidden" name="equipo" value="<?= htmlspecialchars($filtro_equipo) ?>">
<input type="hidden" name="fecha_inicio" value="<?= htmlspecialchars($filtro_fecha_inicio) ?>">
<input type="hidden" name="fecha_fin" value="<?= htmlspecialchars($filtro_fecha_fin) ?>">
<button type="submit" name="generar_pdf" class="btn-pdf">
<i class="fas fa-file-pdf"></i> Generar PDF
</button>
</form>
</div>
<div class="filters-container">
<h3><i class="fas fa-filter"></i> Filtrar Reporte</h3>
<form method="GET" action="">
<div class="filter-row">
<div class="filter-group">
<label for="numero_acta"><i class="fas fa-hashtag"></i> Número de Acta:</label>
<input type="text" name="numero_acta" id="numero_acta" value="<?= htmlspecialchars($filtro_numero_acta) ?>" placeholder="Ingrese número de acta">
</div>
<div class="filter-group">
<label for="tipo"><i class="fas fa-laptop"></i> Tipo de Equipo:</label>
<input type="text" name="tipo" id="tipo" value="<?= htmlspecialchars($filtro_tipo) ?>" placeholder="Ingrese tipo de equipo">
</div>
<div class="filter-group">
<label for="equipo"><i class="fas fa-desktop"></i> Equipo:</label>
<input type="text" name="equipo" id="equipo" value="<?= htmlspecialchars($filtro_equipo) ?>" placeholder="Ingrese equipo">
</div>
<div class="filter-group date-range">
<label><i class="fas fa-calendar-alt"></i> Rango de Fechas:</label>
<div class="date-inputs">
<input type="date" name="fecha_inicio" value="<?= htmlspecialchars($filtro_fecha_inicio) ?>">
<span>a</span>
<input type="date" name="fecha_fin" value="<?= htmlspecialchars($filtro_fecha_fin) ?>">
</div>
</div>
<div class="filter-group submit-btn">
<input type="submit" value="Filtrar">
</div>
</div>
</form>
</div>
<?php if (isset($_GET['numero_acta']) || isset($_GET['tipo']) || isset($_GET['equipo']) || isset($_GET['fecha_inicio'])): ?>
<div class="users-table">
<?php if (mysqli_num_rows($query) > 0): ?>
<table class="display">
<thead>
<tr>
<th>Nombre</th>
<th>Cargo</th>
<th>Tipo Equipo</th>
<th>Motivo</th>
<th>Equipo</th>
<th>Referencia</th>
<th>Número Acta</th>
<th>Serial</th>
<th>Fecha Registro</th>
<th>Evidencia</th>
</tr>
</thead>
<tbody>
<?php
// Reiniciar el puntero del resultado para volver a recorrerlo
mysqli_data_seek($query, 0);
while ($row = mysqli_fetch_array($query)): ?>
<tr>
<td><strong><?= htmlspecialchars($row['nombre']) ?></strong></td>
<td><?= htmlspecialchars($row['cargo']) ?></td>
<td><?= htmlspecialchars($row['tipo']) ?></td>
<td><?= htmlspecialchars($row['motivo']) ?></td>
<td><strong><?= htmlspecialchars($row['equipo']) ?></strong></td>
<td><?= htmlspecialchars($row['referencia']) ?></td>
<td><strong><?= htmlspecialchars($row['numero_acta']) ?></strong></td>
<td><?= htmlspecialchars($row['serial']) ?></td>
<td><?= htmlspecialchars($row['fecha']) ?></td>
<td>
<?php if (!empty($row['evidencia'])): ?>
<img src="data:image/jpeg;base64,<?= base64_encode($row['evidencia']) ?>"
alt="Evidencia"
width="100"
height="100"
style="cursor: pointer;"
onclick="mostrarImagenGrande(this)"
title="Haga clic para ampliar">
<?php else: ?>
<span style="color: #6c757d; font-style: italic;">Sin evidencia</span>
<?php endif; ?>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php else: ?>
<div class="no-results">
<i class="fas fa-search"></i> No se encontraron resultados con los filtros aplicados.
</div>
<?php endif; ?>
</div>
<?php else: ?>
<div class="info-message">
<i class="fas fa-info-circle"></i> Utilice los filtros para generar un reporte específico.
</div>
<?php endif; ?>
<div class="copyright">
© Avicampo <?= date('Y') ?>
</div>
</div>
<!-- Toast notification -->
<div class="toast" id="toast"></div>
<!-- Modal para imágenes -->
<div id="imagenModal" class="modal">
<span class="close" onclick="cerrarModal()">×</span>
<img class="modal-content" id="imagenAmpliada">
</div>
<script>
function mostrarImagenGrande(elemento) {
var modal = document.getElementById('imagenModal');
var modalImg = document.getElementById("imagenAmpliada");
modal.style.display = "block";
modalImg.src = elemento.src;
document.body.style.overflow = 'hidden';
}
function cerrarModal() {
var modal = document.getElementById('imagenModal');
modal.style.display = "none";
document.body.style.overflow = 'auto';
}
// Cerrar modal al hacer clic fuera de la imagen
window.onclick = function(event) {
var modal = document.getElementById('imagenModal');
if (event.target == modal) {
cerrarModal();
}
}
// Cerrar modal con tecla Escape
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
cerrarModal();
}
});
// Función para copiar texto al portapapeles
function copiarAlPortapapeles(texto) {
navigator.clipboard.writeText(texto).then(function() {
mostrarToast('Copiado al portapapeles');
}, function() {
mostrarToast('Error al copiar');
});
}
// Función para mostrar notificación toast
function mostrarToast(mensaje, tipo = 'success') {
var toast = document.getElementById('toast');
toast.textContent = mensaje;
toast.className = 'toast ' + (tipo === 'error' ? 'error' : '') + ' show';
setTimeout(function() {
toast.className = 'toast';
}, 3000);
}
// Mejorar la experiencia en móviles
document.addEventListener('DOMContentLoaded', function() {
// Ajustar inputs en móviles
if (window.innerWidth < 768) {
const inputs = document.querySelectorAll('input[type="text"], input[type="date"]');
inputs.forEach(input => {
input.addEventListener('focus', function() {
setTimeout(() => {
this.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300);
});
});
}
});
</script>
</body>
</html>