494 lines
24 KiB
PHP
494 lines
24 KiB
PHP
<?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>
|