277 lines
12 KiB
PHP
277 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="p-3 p-md-4 p-lg-5">
|
|
<div>
|
|
<table id="tablaVuelos" class="table table-bordered" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nombre</th>
|
|
<th>Precio Público</th>
|
|
<th>Precio Especial</th>
|
|
<th>Hora</th>
|
|
<th>Código</th>
|
|
<th>Incluye</th>
|
|
<th>Categoría</th>
|
|
<th>Unidad</th>
|
|
<th>Rating</th>
|
|
<th>Estado</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Datos vía AJAX -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Modal de Detalles -->
|
|
<div class="modal fade" id="detalleVueloModal" tabindex="-1" aria-labelledby="detalleVueloModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="detalleVueloModalLabel">Detalles del Vuelo</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="detalleVueloContent"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
<button type="button" class="btn btn-primary" id="editarVueloBtn">Editar Vuelo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('js')
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<!-- Bootstrap JS (necesario para el modal) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- DataTables -->
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
|
|
<!-- Toastr -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
|
|
|
|
<script>
|
|
let dataTable;
|
|
let vuelosData = [];
|
|
|
|
$(document).ready(function() {
|
|
dataTable = $('#tablaVuelos').DataTable({
|
|
ajax: {
|
|
url: "{{ url('/api/todos-los-vuelos') }}",
|
|
type: 'GET',
|
|
dataSrc: function(json) {
|
|
vuelosData = json;
|
|
return json;
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('Error en AJAX:', error);
|
|
toastr.error('Error al cargar los datos. Verifica la conexión con la API.');
|
|
}
|
|
},
|
|
columns: [{
|
|
data: 'id_vuelo'
|
|
},
|
|
{
|
|
data: 'nombre_vuelo'
|
|
},
|
|
{
|
|
data: 'precio_publico',
|
|
render: data => (!data || parseFloat(data) === 0) ? '—' : '$' + parseFloat(data)
|
|
.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2
|
|
})
|
|
},
|
|
{
|
|
data: 'precio_especial',
|
|
render: data => (!data || parseFloat(data) === 0) ? '—' : '$' + parseFloat(data)
|
|
.toLocaleString('en-US', {
|
|
minimumFractionDigits: 2
|
|
})
|
|
},
|
|
{
|
|
data: 'hora_actividad',
|
|
render: data => data || '—'
|
|
},
|
|
{
|
|
data: 'codigo',
|
|
render: data => data || '—'
|
|
},
|
|
{
|
|
data: 'json_incluye',
|
|
render: function(data) {
|
|
if (!data) return '—';
|
|
let items = [];
|
|
if (typeof data === 'string') {
|
|
try {
|
|
items = JSON.parse(data);
|
|
} catch (e) {
|
|
return 'Error';
|
|
}
|
|
} else if (Array.isArray(data)) {
|
|
items = data;
|
|
}
|
|
if (!items.length) return '—';
|
|
return items.map(item => item.titulo || '').filter(t => t).join(', ');
|
|
}
|
|
},
|
|
{
|
|
data: 'id_categoria',
|
|
render: function(data) {
|
|
const categorias = {
|
|
1: 'Regular',
|
|
2: 'Premium',
|
|
3: 'VIP'
|
|
};
|
|
return categorias[data] || data || '—';
|
|
}
|
|
},
|
|
{
|
|
data: 'id_unidad',
|
|
render: function(data) {
|
|
// Mapeo opcional de unidades según tus datos
|
|
const unidades = {
|
|
1: 'Individual',
|
|
2: 'Pareja',
|
|
3: 'Grupo pequeño',
|
|
22: 'Cumpleaños',
|
|
26: 'Grupal',
|
|
27: 'Privado grupal',
|
|
29: 'Familiar'
|
|
};
|
|
return unidades[data] || data || '—';
|
|
}
|
|
},
|
|
{
|
|
data: 'raiting_global_number',
|
|
render: data => (data && data != '0.00') ? data : '—'
|
|
},
|
|
{
|
|
data: 'id_estatus',
|
|
render: data => data == 1 ? 'Activo' : 'Inactivo'
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data) {
|
|
return `<div>
|
|
<button class="btn btn-sm btn-outline-primary ver-detalle" data-id="${data.id_vuelo}">Ver</button>
|
|
<button class="btn btn-sm btn-outline-secondary editar-vuelo" data-id="${data.id_vuelo}">Editar</button>
|
|
<button class="btn btn-sm btn-outline-danger eliminar-vuelo" data-id="${data.id_vuelo}">Eliminar</button>
|
|
</div>`;
|
|
},
|
|
orderable: false
|
|
}
|
|
],
|
|
pageLength: 15,
|
|
responsive: true,
|
|
order: [
|
|
[0, 'desc']
|
|
],
|
|
language: {
|
|
url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-MX.json'
|
|
},
|
|
processing: true,
|
|
deferRender: true
|
|
});
|
|
|
|
// Mostrar detalles al hacer clic en la fila (excepto botones)
|
|
$('#tablaVuelos tbody').on('click', 'tr', function(e) {
|
|
if ($(e.target).closest('.btn').length) return;
|
|
const data = dataTable.row(this).data();
|
|
if (data) mostrarDetalles(data);
|
|
});
|
|
});
|
|
|
|
function mostrarDetalles(vuelo) {
|
|
const contenido = `
|
|
<p><strong>Código:</strong> ${vuelo.codigo || '—'}</p>
|
|
<p><strong>Hora:</strong> ${vuelo.hora_actividad || '—'}</p>
|
|
<p><strong>Categoría:</strong> ${getCategoriaNombre(vuelo.id_categoria)}</p>
|
|
<p><strong>Unidad:</strong> ${vuelo.id_unidad || '—'}</p>
|
|
<p><strong>Ubicación:</strong> ${vuelo.id_ubicacion || '—'}</p>
|
|
<p><strong>Precio Público:</strong> ${formatPrice(vuelo.precio_publico)}</p>
|
|
<p><strong>Precio Especial:</strong> ${formatPrice(vuelo.precio_especial)}</p>
|
|
<p><strong>Descripción:</strong> ${vuelo.descripcion_corta || 'Sin descripción'}</p>
|
|
<p><strong>Incluye:</strong> ${formatIncluye(vuelo.json_incluye)}</p>
|
|
<p><strong>Rating:</strong> ${vuelo.raiting_global_number || '—'}</p>
|
|
<p><strong>Visibilidad Web:</strong> ${vuelo.visibilidad_pagina_web == 1 ? 'Visible' : 'Oculta'}</p>
|
|
<p><strong>Fecha Alta:</strong> ${formatFecha(vuelo.fecha_alta)}</p>
|
|
<p><strong>Última Modificación:</strong> ${formatFecha(vuelo.fecha_mod)}</p>
|
|
`;
|
|
$('#detalleVueloContent').html(contenido);
|
|
$('#editarVueloBtn').off('click').on('click', function() {
|
|
window.location.href = `{{ url('/vuelos/editar') }}/${vuelo.id_vuelo}`;
|
|
});
|
|
new bootstrap.Modal(document.getElementById('detalleVueloModal')).show();
|
|
}
|
|
|
|
function getCategoriaNombre(id) {
|
|
const categorias = {
|
|
1: 'Regular',
|
|
2: 'Premium',
|
|
3: 'VIP'
|
|
};
|
|
return categorias[id] || id || '—';
|
|
}
|
|
|
|
function formatPrice(price) {
|
|
if (!price || parseFloat(price) === 0) return '—';
|
|
return '$' + parseFloat(price).toLocaleString('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
}
|
|
|
|
function formatIncluye(data) {
|
|
if (!data) return '—';
|
|
let items = [];
|
|
if (typeof data === 'string') {
|
|
try {
|
|
items = JSON.parse(data);
|
|
} catch (e) {
|
|
return 'Error';
|
|
}
|
|
} else if (Array.isArray(data)) {
|
|
items = data;
|
|
}
|
|
if (!items.length) return '—';
|
|
return items.map(item => item.titulo || '').filter(t => t).join(', ');
|
|
}
|
|
|
|
function formatFecha(fecha) {
|
|
if (!fecha) return '—';
|
|
return new Date(fecha).toLocaleString('es-MX');
|
|
}
|
|
|
|
$(document).on('click', '.ver-detalle', function(e) {
|
|
e.stopPropagation();
|
|
const id = $(this).data('id');
|
|
const vuelo = vuelosData.find(v => v.id_vuelo == id);
|
|
if (vuelo) mostrarDetalles(vuelo);
|
|
});
|
|
|
|
$(document).on('click', '.editar-vuelo', function(e) {
|
|
e.stopPropagation();
|
|
const id = $(this).data('id');
|
|
window.location.href = `{{ url('/vuelos/editar') }}/${id}`;
|
|
});
|
|
|
|
$(document).on('click', '.eliminar-vuelo', function(e) {
|
|
e.stopPropagation();
|
|
const id = $(this).data('id');
|
|
if (confirm('¿Estás seguro de eliminar este vuelo?')) {
|
|
toastr.warning('Función de eliminación en desarrollo');
|
|
// Aquí puedes agregar la llamada AJAX para eliminar
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|