Files
MVE/views/vinculaciones/nueva.php
2025-07-18 12:21:26 -06:00

149 lines
7.1 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title> Nueva Vinculación</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css para animaciones adicionales -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
.sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
.sidebar .nav-link { font-weight: normal; color: white; transition: all 0.3s ease; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #495057; color: #fff; }
.content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
.navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
/* A partir de dispositivos medianos (>=768px), deja espacio lateral */
@media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
/* En móviles, sin margen lateral */
@media (max-width: 767.98px) {
.content { margin-left: 0; }
.sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
}
.card { border-radius: 12px; }
/* Animaciones personalizadas */
.card-hover { transition: all 0.3s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
.btn-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive animations */
@media (max-width: 768px) { .card-hover:hover { transform: translateY(-4px) scale(1.01); } }
/* Efecto de glow para elementos activos */
.btn.active { box-shadow: 0 0 20px rgba(var(--bs-primary-rgb), 0.5); }
/* Animación para el título */
.title-glow { text-shadow: 0 0 10px rgba(0, 123, 255, 0.3); }
/* Efecto para botones */
.btn-animated { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-animated:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
.table thead th { background: #343a40; color: #fff; }
</style>
</head>
<body>
<!-- 📄 CONTENIDO -->
<div class="content">
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow"> Nueva Vinculación</h4>
<!-- TABLA DE AGENCIAS -->
<div class="card p-3 shadow-sm card-hover position-relative h-auto fade-in-up">
<h5 class="mb-3">🔗 Solicitar Vinculación con Agencias Aduanales</h5>
<div class="table-responsive">
<table class="table table-striped table-hover align-middle" id="tabla-solicitar-vinculaciones">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>RFC</th>
<th>Correo</th>
<th>Teléfono</th>
<th>Dirección</th>
<th>Fecha de Registro</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php if (!empty($agencias)): ?>
<?php foreach ($agencias as $ag): ?>
<tr>
<td><?= $ag['id_agencia'] ?></td>
<td><?= htmlspecialchars(decrypt($ag['nombre_agencia'])) ?></td>
<td><?= htmlspecialchars($ag['rfc_agencia']) ?></td>
<td><?= htmlspecialchars(decrypt($ag['email'])) ?></td>
<td><?= htmlspecialchars($ag['telefono']) ?></td>
<td><?= htmlspecialchars($ag['direccion']) ?></td>
<td><?= $ag['creado_en'] ? $ag['creado_en']->format('Y-m-d H:i') : '' ?></td>
<td>
<?php if (!empty($ag['estado_solicitud']) && $ag['estado_solicitud'] === 'PENDIENTE'): ?>
<a href="/IMPORTADORES/importadores/cancelarVinculacion?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-danger mt-auto w-auto btn-animated">Cancelar solicitud</a>
<?php else: ?>
<a href="/IMPORTADORES/importadores/vincular?id=<?= $ag['id_agencia'] ?>" class="btn btn-sm btn-success mt-auto w-auto btn-animated">Vincular</a>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#tabla-solicitar-vinculaciones').DataTable({
order: [],
language: {
url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json'
}
});
});
</script>
<?php if (isset($_GET['success'])): ?>
<script>
<?php if ($_GET['success'] === 'sended_request'): ?>
Swal.fire({ icon: 'success', title: 'Solicitud enviada',
text: 'La solicitud de vinculación fue enviada correctamente.',
confirmButtonColor: '#198754' });
<?php elseif ($_GET['success'] === 'cancelled'): ?>
Swal.fire({ icon: 'success', title: 'Solicitud cancelada', text: 'La solicitud fue cancelada correctamente.', confirmButtonColor: '#198754' });
<?php endif; ?>
</script>
<?php endif; ?>
<?php if (isset($_GET['error'])): ?>
<script>
<?php if ($_GET['error'] === 'failed_request'): ?>
Swal.fire({ icon: 'error', title: 'Solicitud fallida', text: 'No se pudo enviar la solicitud.', confirmButtonColor: '#dc3545' });
<?php elseif ($_GET['error'] === 'pending_request'): ?>
Swal.fire({ icon: 'error', title: 'Solicitud pendiente', text: 'Ya tienes una solicitud pendiente.', confirmButtonColor: '#dc3545' });
<?php endif; ?>
</script>
<?php endif; ?>
</body>
</html>