<?php
include("../connection.php");
$con = connection();
// Procesar el formulario del modal si se envió
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['id_vehiculo'])) {
$id_vehiculo = $_POST['id_vehiculo'];
$observacion_salida = $_POST['observacion_salida'];
// Generar fecha y hora actual
$fechasalida = date('Y-m-d H:i:s');
// Actualizar el vehículo
$sql_update = "UPDATE vehiculos SET
OBSERVACION_SALIDA = '$observacion_salida',
FECHASALIDA = '$fechasalida',
ESTADO = 'salida'
WHERE REG = '$id_vehiculo'";
if (mysqli_query($con, $sql_update)) {
$mensaje_exito = "Vehículo cerrado exitosamente.";
} else {
$mensaje_error = "Error al cerrar el vehículo: " . mysqli_error($con);
}
}
// Consulta para vehículos con estado 'creado' y grupo 'Congelado'
$estado = 'creado';
$grupo = 'Congelado';
$sql = "SELECT * FROM vehiculos WHERE ESTADO='$estado' AND GRUPO='$grupo' ORDER BY REG DESC";
$query = mysqli_query($con, $sql);
$count = mysqli_num_rows($query);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Vehículos pendientes por dar salida">
<meta name="keywords" content="html, css, bases de datos, php">
<meta name="author" content="Sebastian Obando">
<meta name="copyright" content="Sebastian Obando">
<meta name="google" content="notranslate">
<title>Cierre De Vehículos No Programados</title>
<link rel="icon" type="image/png" href="../img/icono.png">
<!-- DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-image: linear-gradient(to right, #e2e2e2, #ffe5c9);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.main-container {
max-width: 1400px;
margin: 0 auto;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background-color: #ff7b00;
padding: 15px 20px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
font-size: 24px;
}
.header-info {
display: flex;
align-items: center;
gap: 15px;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #dc3545;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(0.95); }
50% { transform: scale(1.1); }
100% { transform: scale(0.95); }
}
.status-text {
font-weight: bold;
color: white;
}
.button-container {
padding: 15px 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.btn-menu {
background-color: #ff7b00;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.btn-menu:hover {
background-color: #e66a00;
}
.refresh-btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.refresh-btn:hover {
background-color: #0069d9;
}
.content-wrapper {
padding: 20px;
}
/* Alertas */
.alert {
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Tabla */
.table-container {
width: 100%;
overflow-x: auto;
border: 1px solid #dee2e6;
border-radius: 5px;
margin-top: 20px;
}
table.dataTable {
width: 100% !important;
border-collapse: collapse;
margin: 0 !important;
}
table.dataTable th {
background-color: #ff7b00;
color: white;
font-weight: bold;
padding: 12px 8px;
white-space: nowrap;
}
table.dataTable td {
padding: 10px 8px;
border: 1px solid #ddd;
}
table.dataTable tr:nth-child(even) {
background-color: #f9f9f9;
}
table.dataTable tr:hover {
background-color: #f1f1f1;
}
.btn-salida {
background-color: #28a745;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s;
text-decoration: none;
display: inline-block;
}
.btn-salida:hover {
background-color: #218838;
}
.no-records {
padding: 40px;
background-color: #d1ecf1;
color: #0c5460;
border-radius: 5px;
text-align: center;
margin-top: 20px;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fff;
margin: 10% auto;
padding: 30px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: modalFadeIn 0.3s;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.modal-title {
margin: 0;
color: #333;
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #000;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
textarea.form-control {
height: 100px;
resize: vertical;
}
.btn-submit {
width: 100%;
padding: 12px;
background-color: #ff7b00;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-submit:hover {
background-color: #e66a00;
}
.footer {
text-align: center;
margin-top: 30px;
padding: 20px;
border-top: 1px solid #dee2e6;
}
.copyright {
display: inline-block;
padding: 10px 25px;
background-color: white;
border: 1px solid #000;
border-radius: 8px;
font-size: 14px;
font-family: 'Gardenia', sans-serif;
font-weight: 900;
font-style: italic;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
@font-face {
font-family: 'Gardenia';
src: local('Gardenia Black Italic'), local('Gardenia-Black-Italic'),
url('Gardenia-BlackItalic.woff2') format('woff2'),
url('Gardenia-BlackItalic.woff') format('woff'),
url('Gardenia-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* Responsive */
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 10px;
text-align: center;
}
.header-info {
justify-content: center;
}
.table-container {
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="header">
<div class="header-info">
<h1>Cierre De Vehículos No Programados</h1>
<span class="status-indicator"></span>
<span class="status-text">
<?= $count ?> <?= ($count == 1 ? 'registro pendiente' : 'registros pendientes') ?>
</span>
</div>
<button class="refresh-btn" onclick="location.reload()">Actualizar</button>
</div>
<div class="button-container">
<button class="btn-menu" onclick="window.location.href='crearVehiculo.php';">Regresar</button>
</div>
<div class="content-wrapper">
<!-- Mensajes de éxito/error -->
<?php if (isset($mensaje_exito)): ?>
<div class="alert alert-success">
<?php echo $mensaje_exito; ?>
</div>
<?php endif; ?>
<?php if (isset($mensaje_error)): ?>
<div class="alert alert-error">
<?php echo $mensaje_error; ?>
</div>
<?php endif; ?>
<?php if($count > 0): ?>
<div class="table-container">
<table id="tablaVehiculos" class="display">
<thead>
<tr>
<th>ID</th>
<th>Fecha Ingreso</th>
<th>Hora</th>
<th>Conductor</th>
<th>Placa</th>
<th>Grupo</th>
<th>Observaciones</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_array($query)): ?>
<tr>
<td><?= $row['REG'] ?></td>
<td><?= $row['FECHA'] ?></td>
<td><?= $row['HORAL'] ?></td>
<td><?= $row['CONDUCTOR'] ?></td>
<td><?= $row['PLACA'] ?></td>
<td><?= $row['GRUPO'] ?></td>
<td><?= $row['OBSERVACIONES'] ?></td>
<td>
<button class="btn-salida" onclick="abrirModalSalida(<?= $row['REG'] ?>)">
Cerrar Planilla
</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<?php else: ?>
<div class="no-records">
<h3>¡No hay vehículos pendientes por salida!</h3>
<p>Todos los vehículos han registrado su salida correctamente.</p>
</div>
<?php endif; ?>
</div>
<div class="footer">
<div class="copyright">
© <?= date('Y') ?> Avicampo
</div>
</div>
</div>
<!-- Modal para cerrar planilla -->
<div id="modalSalida" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Cerrar Planilla de Vehículo</h3>
<span class="close" onclick="cerrarModal()">×</span>
</div>
<form method="POST" action="">
<input type="hidden" name="id_vehiculo" id="id_vehiculo">
<div class="form-group">
<label for="observacion_salida">Observación de Salida:</label>
<textarea class="form-control" name="observacion_salida" id="observacion_salida"
placeholder="Ingrese la observación de salida del vehículo" required></textarea>
</div>
<button type="submit" class="btn-submit">Guardar y Cerrar Planilla</button>
</form>
</div>
</div>
<script>
// Inicializar DataTables
$(document).ready(function () {
$('#tablaVehiculos').DataTable({
"paging": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
"searching": true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Spanish.json"
},
"order": [[0, 'desc']],
"autoWidth": false,
"responsive": true
});
});
// Funciones para el modal
function abrirModalSalida(id) {
document.getElementById('id_vehiculo').value = id;
document.getElementById('modalSalida').style.display = 'block';
}
function cerrarModal() {
document.getElementById('modalSalida').style.display = 'none';
}
// Cerrar modal si se hace clic fuera de él
window.onclick = function(event) {
const modal = document.getElementById('modalSalida');
if (event.target == modal) {
cerrarModal();
}
}
// Auto-focus en el textarea cuando se abre el modal
document.getElementById('modalSalida').addEventListener('show', function() {
document.getElementById('observacion_salida').focus();
});
</script>
</body>
</html>