This commit is contained in:
2025-10-21 11:41:30 -06:00
parent ed2ef4e01b
commit b1b9e4a77c
49 changed files with 14632 additions and 1736 deletions

View File

@@ -0,0 +1,494 @@
<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>✏️ Editar Template Rápido</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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.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: bold; 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; }
@media (min-width: 768px) { .content { margin-left: 250px; } }
@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; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.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); }
.form-control:focus, .form-select:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.emoji-picker {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 5px;
padding: 10px;
max-height: 200px;
overflow-y: auto;
border: 1px solid #dee2e6;
border-radius: 5px;
background: white;
}
.emoji-item {
padding: 8px;
text-align: center;
cursor: pointer;
border-radius: 3px;
transition: background-color 0.2s;
}
.emoji-item:hover {
background-color: #f8f9fa;
}
.preview-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
padding: 15px;
margin-top: 10px;
}
.template-preview-item {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
margin: 2px;
display: inline-block;
}
.choices.required .choices__inner { border: 1px solid #ced4da; }
.choices.is-invalid .choices__inner { border: 1px solid #dc3545; background-color: #fff5f5; }
.choices.is-valid .choices__inner { border: 1px solid #28a745; background-color: #f5fff5; }
.section-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 15px;
margin: -15px -15px 15px -15px;
border-radius: 8px 8px 0 0;
border-bottom: 1px solid #dee2e6;
}
</style>
</head>
<body>
<div class="content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="mb-0">✏️ Editar Template: <?= htmlspecialchars($template['icono']) ?> <?= htmlspecialchars($template['nombre']) ?></h4>
<div>
<a href="/IMPORTADORES/templates_rapidos/lista" class="btn btn-secondary btn-animated me-2">
<i class="fas fa-list me-1"></i>Volver a Lista
</a>
<a href="/IMPORTADORES/templates_rapidos/crear" class="btn btn-success btn-animated">
<i class="fas fa-plus me-1"></i>Nuevo Template
</a>
</div>
</div>
<!-- Info del template -->
<div class="row mb-3">
<div class="col-md-12">
<div class="card bg-info text-white">
<div class="card-body py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h6 class="mb-1"><i class="fas fa-info-circle me-2"></i>Información del Template</h6>
<p class="mb-0 small">
Creado el: <?= $template['fecha_creacion'] ? $template['fecha_creacion']->format('d/m/Y H:i') : 'N/A' ?> |
Usado: <?= $template['veces_usado'] ?> veces |
Última modificación: <?= $template['fecha_modificacion'] ? $template['fecha_modificacion']->format('d/m/Y H:i') : 'N/A' ?>
</p>
</div>
<div class="col-md-4 text-end">
<span class="h4"><?= htmlspecialchars($template['icono']) ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Formulario Principal -->
<div class="col-lg-8">
<div class="card">
<div class="card-body p-4">
<form id="templateForm" action="/IMPORTADORES/templates_rapidos/actualizar" method="POST">
<input type="hidden" name="id" value="<?= htmlspecialchars($template['id']) ?>">
<!-- Información Básica -->
<div class="section-header">
<h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Información Básica</h6>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label for="nombre" class="form-label">Nombre del Template *</label>
<input id="nombre" name="nombre" type="text" class="form-control" required
placeholder="ej. Importación China" maxlength="100"
value="<?= htmlspecialchars($template['nombre']) ?>">
</div>
<div class="col-md-6">
<label for="icono" class="form-label">Icono</label>
<div class="input-group">
<input id="icono" name="icono" type="text" class="form-control" readonly
value="<?= htmlspecialchars($template['icono']) ?>">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="dropdown">
<i class="fas fa-smile"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end p-0" style="width: 300px;">
<li>
<div class="emoji-picker">
<div class="emoji-item" onclick="selectEmoji('🇨🇳')">🇨🇳</div>
<div class="emoji-item" onclick="selectEmoji('🇺🇸')">🇺🇸</div>
<div class="emoji-item" onclick="selectEmoji('🇪🇺')">🇪🇺</div>
<div class="emoji-item" onclick="selectEmoji('🇩🇪')">🇩🇪</div>
<div class="emoji-item" onclick="selectEmoji('🇯🇵')">🇯🇵</div>
<div class="emoji-item" onclick="selectEmoji('🇰🇷')">🇰🇷</div>
<div class="emoji-item" onclick="selectEmoji('🇮🇹')">🇮🇹</div>
<div class="emoji-item" onclick="selectEmoji('🇫🇷')">🇫🇷</div>
<div class="emoji-item" onclick="selectEmoji('🏢')">🏢</div>
<div class="emoji-item" onclick="selectEmoji('🏭')">🏭</div>
<div class="emoji-item" onclick="selectEmoji('🚢')">🚢</div>
<div class="emoji-item" onclick="selectEmoji('✈️')">✈️</div>
<div class="emoji-item" onclick="selectEmoji('🚛')">🚛</div>
<div class="emoji-item" onclick="selectEmoji('📦')">📦</div>
<div class="emoji-item" onclick="selectEmoji('💼')">💼</div>
<div class="emoji-item" onclick="selectEmoji('⚡')">⚡</div>
<div class="emoji-item" onclick="selectEmoji('🔥')">🔥</div>
<div class="emoji-item" onclick="selectEmoji('⭐')">⭐</div>
<div class="emoji-item" onclick="selectEmoji('🎯')">🎯</div>
<div class="emoji-item" onclick="selectEmoji('🚀')">🚀</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-12">
<label for="descripcion" class="form-label">Descripción</label>
<textarea id="descripcion" name="descripcion" class="form-control" rows="2"
placeholder="Descripción breve del template (opcional)" maxlength="255"><?= htmlspecialchars($template['descripcion']) ?></textarea>
</div>
</div>
<!-- Configuración Principal -->
<div class="section-header">
<h6 class="mb-0"><i class="fas fa-cog me-2"></i>Configuración Principal</h6>
</div>
<?php $config = $template['config']; ?>
<div class="row mb-3">
<div class="col-md-3">
<label for="tipo_moneda" class="form-label">Moneda</label>
<select id="tipo_moneda" name="tipo_moneda" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<option value="MXN" <?= ($config['tipo_moneda'] ?? '') === 'MXN' ? 'selected' : '' ?>>Peso Mexicano (MXN)</option>
<option value="USD" <?= ($config['tipo_moneda'] ?? '') === 'USD' ? 'selected' : '' ?>>Dólar USD (USD)</option>
<option value="EUR" <?= ($config['tipo_moneda'] ?? '') === 'EUR' ? 'selected' : '' ?>>Euro (EUR)</option>
<option value="CNY" <?= ($config['tipo_moneda'] ?? '') === 'CNY' ? 'selected' : '' ?>>Yuan (CNY)</option>
<option value="GBP" <?= ($config['tipo_moneda'] ?? '') === 'GBP' ? 'selected' : '' ?>>Libra GBP (GBP)</option>
<option value="JPY" <?= ($config['tipo_moneda'] ?? '') === 'JPY' ? 'selected' : '' ?>>Yen (JPY)</option>
</select>
</div>
<div class="col-md-3">
<label for="incoterm" class="form-label">INCOTERM</label>
<select id="incoterm" name="incoterm" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($incoterms as $inc): ?>
<option value="<?= htmlspecialchars($inc['INCOTERM']) ?>"
<?= ($config['incoterm'] ?? '') === $inc['INCOTERM'] ? 'selected' : '' ?>>
<?= htmlspecialchars($inc['INCOTERM'].' - '.$inc['DESCESPANOL']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-3">
<label for="vinculacion" class="form-label">Vinculación</label>
<select id="vinculacion" name="vinculacion" class="form-select">
<option value="">-- Sin especificar --</option>
<option value="0" <?= ($config['vinculacion'] ?? '') === '0' ? 'selected' : '' ?>>No existe</option>
<option value="1" <?= ($config['vinculacion'] ?? '') === '1' ? 'selected' : '' ?>>Existe, no afecta</option>
<option value="2" <?= ($config['vinculacion'] ?? '') === '2' ? 'selected' : '' ?>>Existe y afecta</option>
</select>
</div>
<div class="col-md-3">
<label for="tasa_preferencial" class="form-label">Tasa Preferencial</label>
<select id="tasa_preferencial" name="tasa_preferencial" class="form-select">
<option value="">-- Sin especificar --</option>
<option value="General" <?= ($config['tasa_preferencial'] ?? '') === 'General' ? 'selected' : '' ?>>General</option>
<option value="TLC" <?= ($config['tasa_preferencial'] ?? '') === 'TLC' ? 'selected' : '' ?>>TLC</option>
<option value="PROSEC" <?= ($config['tasa_preferencial'] ?? '') === 'PROSEC' ? 'selected' : '' ?>>PROSEC</option>
<option value="ALADI" <?= ($config['tasa_preferencial'] ?? '') === 'ALADI' ? 'selected' : '' ?>>ALADI</option>
<option value="COMERCIALIZADORA" <?= ($config['tasa_preferencial'] ?? '') === 'COMERCIALIZADORA' ? 'selected' : '' ?>>COMERCIALIZADORA</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="pais_proveedor" class="form-label">País Proveedor</label>
<select id="pais_proveedor" name="pais_proveedor" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($paises as $p): ?>
<option value="<?= htmlspecialchars($p['id_pais']) ?>"
<?= ($config['pais_proveedor'] ?? '') === $p['id_pais'] ? 'selected' : '' ?>>
<?= htmlspecialchars($p['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
<input type="hidden" id="pais_proveedor_texto" name="pais_proveedor_texto"
value="<?= htmlspecialchars($config['pais_proveedor_texto'] ?? '') ?>">
</div>
<div class="col-md-6">
<label for="unidad_comercial_id" class="form-label">Unidad de Medida</label>
<select id="unidad_comercial_id" name="unidad_comercial_id" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($unidades_medida as $um): ?>
<option value="<?= htmlspecialchars($um['id']) ?>"
<?= ($config['unidad_comercial_id'] ?? '') === $um['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($um['descripcion']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<!-- Configuración Avanzada -->
<div class="section-header">
<h6 class="mb-0"><i class="fas fa-tools me-2"></i>Configuración Avanzada</h6>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="anexo22_apendice" class="form-label">Aduana</label>
<select id="anexo22_apendice" name="anexo22_apendice" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($aduanas as $a): ?>
<option value="<?= htmlspecialchars($a['aduana_seccion']) ?>"
<?= ($config['anexo22_apendice'] ?? '') === $a['aduana_seccion'] ? 'selected' : '' ?>>
<?= htmlspecialchars($a['aduana_seccion'].' '.$a['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-6">
<label for="patente" class="form-label">Patente Aduanal</label>
<select id="patente" name="patente" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($patentes as $pt): ?>
<option value="<?= htmlspecialchars($pt['id_agente']) ?>"
<?= ($config['patente'] ?? '') === $pt['id_agente'] ? 'selected' : '' ?>>
<?= htmlspecialchars($pt['patente'].' - '.$pt['agente_aduanal']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label for="transportista_id" class="form-label">Transportista</label>
<select id="transportista_id" name="transportista_id" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($transportistas as $t): ?>
<option value="<?= htmlspecialchars($t['id_transportista']) ?>"
<?= ($config['transportista_id'] ?? '') === $t['id_transportista'] ? 'selected' : '' ?>>
<?= htmlspecialchars($t['clave_identificador'] . ' - ' . $t['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-md-6">
<label for="chofer_id" class="form-label">Chofer</label>
<select id="chofer_id" name="chofer_id" class="form-select searchable">
<option value="">-- Sin especificar --</option>
<?php foreach($choferes as $c): ?>
<option value="<?= htmlspecialchars($c['id_chofer']) ?>"
<?= ($config['chofer_id'] ?? '') === $c['id_chofer'] ? 'selected' : '' ?>>
<?= htmlspecialchars($c['nombre']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
<!-- Botones -->
<div class="text-end">
<button type="submit" class="btn btn-primary btn-animated me-2">
<i class="fas fa-save me-1"></i>Actualizar Template
</button>
<a href="/IMPORTADORES/templates_rapidos/lista" class="btn btn-secondary btn-animated">
<i class="fas fa-times me-1"></i>Cancelar
</a>
</div>
</form>
</div>
</div>
</div>
<!-- Vista Previa -->
<div class="col-lg-4">
<div class="card sticky-top" style="top: 20px;">
<div class="card-header bg-warning text-dark">
<h6 class="mb-0"><i class="fas fa-eye me-2"></i>Vista Previa</h6>
</div>
<div class="card-body">
<div id="template-preview">
<div class="preview-card">
<div class="d-flex align-items-center mb-2">
<span id="preview-icono" class="fs-4 me-2"><?= htmlspecialchars($template['icono']) ?></span>
<span id="preview-nombre" class="fw-bold"><?= htmlspecialchars($template['nombre']) ?></span>
</div>
<div id="preview-descripcion" class="small mb-3 opacity-75">
<?= htmlspecialchars($template['descripcion']) ?>
</div>
<div id="preview-config" class="d-flex flex-wrap">
<!-- Configuración se mostrará aquí dinámicamente -->
</div>
</div>
</div>
<div class="mt-3">
<h6 class="small text-muted mb-2">📊 Estadísticas de Uso:</h6>
<div class="small text-muted">
<div><i class="fas fa-mouse-pointer text-primary me-1"></i>Usado: <?= $template['veces_usado'] ?> veces</div>
<div><i class="fas fa-clock text-info me-1"></i>Última vez: <?= $template['ultima_vez_usado'] ? $template['ultima_vez_usado']->format('d/m/Y H:i') : 'Nunca' ?></div>
</div>
</div>
<div class="mt-3">
<h6 class="small text-muted mb-2">💡 Consejos:</h6>
<ul class="list-unstyled small text-muted">
<li><i class="fas fa-check text-success me-1"></i> Usa nombres descriptivos</li>
<li><i class="fas fa-check text-success me-1"></i> Elige iconos representativos</li>
<li><i class="fas fa-check text-success me-1"></i> Solo llena campos comunes</li>
<li><i class="fas fa-check text-success me-1"></i> Deja vacío lo que varía</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Inicializar Choices.js
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.searchable').forEach(element => {
new Choices(element, {
searchEnabled: true,
itemSelectText: '',
shouldSort: false
});
});
// Inicializar vista previa
updatePreview();
// Eventos para actualizar vista previa
document.querySelectorAll('#templateForm input, #templateForm select, #templateForm textarea').forEach(element => {
element.addEventListener('input', updatePreview);
element.addEventListener('change', updatePreview);
});
});
// Función para seleccionar emoji
function selectEmoji(emoji) {
document.getElementById('icono').value = emoji;
updatePreview();
}
// Función para actualizar vista previa
function updatePreview() {
const nombre = document.getElementById('nombre').value || 'Template sin nombre';
const descripcion = document.getElementById('descripcion').value || 'Sin descripción';
const icono = document.getElementById('icono').value;
document.getElementById('preview-nombre').textContent = nombre;
document.getElementById('preview-descripcion').textContent = descripcion;
document.getElementById('preview-icono').textContent = icono;
// Actualizar configuración
const config = [];
const fields = [
{ id: 'tipo_moneda', label: 'Moneda' },
{ id: 'incoterm', label: 'INCOTERM' },
{ id: 'vinculacion', label: 'Vinculación', map: {'0':'Sin Vinc.', '1':'No Afecta', '2':'Afecta'} },
{ id: 'tasa_preferencial', label: 'Tasa' }
];
fields.forEach(field => {
const value = document.getElementById(field.id).value;
if (value) {
const displayValue = field.map && field.map[value] ? field.map[value] : value;
config.push(`<span class="template-preview-item">${field.label}: ${displayValue}</span>`);
}
});
document.getElementById('preview-config').innerHTML = config.join('');
}
// Actualizar texto del país cuando cambie
document.getElementById('pais_proveedor').addEventListener('change', function() {
const selectedOption = this.options[this.selectedIndex];
document.getElementById('pais_proveedor_texto').value = selectedOption ? selectedOption.text : '';
updatePreview();
});
// Validación del formulario
document.getElementById('templateForm').addEventListener('submit', function(e) {
const nombre = document.getElementById('nombre').value.trim();
if (!nombre) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Campo requerido',
text: 'El nombre del template es obligatorio',
confirmButtonColor: '#3085d6'
});
document.getElementById('nombre').focus();
return false;
}
if (nombre.length > 100) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Nombre muy largo',
text: 'El nombre no puede exceder 100 caracteres',
confirmButtonColor: '#3085d6'
});
document.getElementById('nombre').focus();
return false;
}
// Mostrar loading
Swal.fire({
title: 'Actualizando template...',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
});
</script>
</body>
</html>