Files

565 lines
20 KiB
PHP

<?php
include __DIR__ . '/../partials/sidebar_importador.php';
// Verificar que el importador tenga información configurada
if (!$importador) {
echo '<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i>
<strong>Configuración requerida:</strong>
Debe configurar su información general antes de crear pedimentos.
<a href="/IMPORTADORES/configuracion" class="btn btn-sm btn-primary ms-2">Ir a Configuración</a>
</div>';
return;
}
// Verificar que tenga claves de pedimentos configuradas
if (empty($claves_pedimentos)) {
echo '<div class="alert alert-info">
<i class="fas fa-info-circle"></i>
<strong>Claves de pedimentos:</strong>
No tiene claves de pedimentos de importación configuradas.
<a href="/IMPORTADORES/claves_pedimentos" class="btn btn-sm btn-success ms-2">Configurar Claves</a>
</div>';
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Nuevo Pedimento de Importación</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #64748b;
--success: #059669;
--warning: #d97706;
--danger: #dc2626;
--info: #0891b2;
--light: #f8fafc;
--dark: #0f172a;
--border-color: #e2e8f0;
--text-muted: #64748b;
--bg-body: #f8fafc;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--bg-body);
color: var(--dark);
line-height: 1.6;
}
.main-content {
margin-left: 280px;
padding: 2rem;
min-height: 100vh;
transition: margin-left 0.3s ease;
}
@media (max-width: 768px) {
.main-content {
margin-left: 0;
padding: 1rem;
}
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.page-title {
color: var(--dark);
font-weight: 600;
font-size: 1.75rem;
margin: 0;
}
.btn-modern {
background: var(--primary);
color: white;
border: none;
padding: 0.625rem 1.25rem;
border-radius: 6px;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-modern:hover {
background: var(--primary-dark);
color: white;
transform: translateY(-1px);
text-decoration: none;
}
.btn-modern.success {
background: var(--success);
}
.btn-modern.success:hover {
background: #047857;
}
.btn-modern.secondary {
background: var(--secondary);
}
.btn-modern.secondary:hover {
background: #475569;
}
.form-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-section-title {
color: var(--dark);
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-section-icon {
width: 24px;
height: 24px;
background: var(--primary);
color: white;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.form-label {
color: var(--dark);
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.form-control, .form-select {
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}
.alert-modern {
border: none;
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.alert-modern.warning {
background: rgba(217, 119, 6, 0.1);
color: #92400e;
border-left: 4px solid var(--warning);
}
.alert-modern.info {
background: rgba(8, 145, 178, 0.1);
color: #0e7490;
border-left: 4px solid var(--info);
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.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%; }
</style>
</head>
<body>
<div class="main-content">
<!-- Page Header -->
<div class="page-header">
<h1 class="page-title">Nuevo Pedimento de Importación</h1>
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-modern secondary">
<i class="fas fa-arrow-left"></i>
Regresar a Lista
</a>
</div>
<!-- Form Container -->
<form action="/IMPORTADORES/catalogo_pedimentos/guardar" method="POST" id="formPedimento" class="fade-in">
<div class="row">
<!-- Información del Pedimento -->
<div class="col-lg-6">
<div class="form-card">
<h3 class="form-section-title">
<div class="form-section-icon">
<i class="fas fa-info-circle"></i>
</div>
Información del Pedimento
</h3>
<div class="mb-3">
<label for="pedimento" class="form-label">Número de Pedimento <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="pedimento" name="pedimento" required
placeholder="Ej: 23 47 3807 8001234"
pattern="[0-9\s]+" title="Solo números y espacios">
<div class="form-text">Formato estándar: AA AA AAAA AAAAAAA (año aduana sección número)</div>
</div>
<div class="mb-3">
<label for="clave_ped" class="form-label">Clave de Pedimento <span class="text-danger">*</span></label>
<select class="form-select" id="clave_ped" name="clave_ped" required>
<option value="">Seleccionar clave...</option>
<?php foreach ($claves_pedimentos as $clave): ?>
<option value="<?= htmlspecialchars($clave['codigo']) ?>">
<?= htmlspecialchars($clave['codigo']) ?> - <?= htmlspecialchars($clave['descripcion']) ?>
</option>
<?php endforeach; ?>
</select>
<?php if (empty($claves_pedimentos)): ?>
<div class="form-text text-warning">
<i class="fas fa-exclamation-triangle"></i>
No tiene claves configuradas.
<a href="/IMPORTADORES/claves_pedimentos/inicializar_claves_usuario">Inicializar claves por defecto</a>
</div>
<?php else: ?>
<div class="form-text">
Seleccione la clave que corresponda al tipo de importación
</div>
<?php endif; ?>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="tipo_operacion" class="form-label">Tipo de Operación</label>
<select class="form-select" id="tipo_operacion" name="tipo_operacion">
<option value="1" selected>Importación Definitiva</option>
<option value="3">Importación Temporal</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="tipo_pedimento" class="form-label">Tipo de Pedimento</label>
<select class="form-select" id="tipo_pedimento" name="tipo_pedimento">
<option value="1" selected>Normal</option>
<option value="2">Consolidado</option>
<option value="3">Rectificación</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="regimen" class="form-label">Régimen</label>
<input type="text" class="form-control" id="regimen" name="regimen"
placeholder="Ej: IMD" maxlength="10">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="destino" class="form-label">Destino</label>
<input type="text" class="form-control" id="destino" name="destino"
placeholder="Código de destino" maxlength="10">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Información del Importador (Automática) -->
<div class="col-md-6">
<div class="card mb-3 bg-light">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-building"></i> Información del Importador</h5>
</div>
<div class="card-body">
<?php if ($importador): ?>
<div class="mb-2">
<strong>RFC:</strong>
<span class="badge bg-primary"><?= htmlspecialchars($importador['rfc']) ?></span>
</div>
<div class="mb-2">
<strong>Nombre/Razón Social:</strong><br>
<span class="text-muted"><?= htmlspecialchars($importador['nombre']) ?></span>
</div>
<?php if (!empty($importador['correo'])): ?>
<div class="mb-2">
<strong>Correo:</strong><br>
<span class="text-muted"><?= htmlspecialchars($importador['correo']) ?></span>
</div>
<?php endif; ?>
<hr>
<div class="alert alert-success alert-sm">
<i class="fas fa-check-circle"></i>
Esta información se incluirá automáticamente en el pedimento
</div>
<?php else: ?>
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle"></i>
Configure su información general primero
</div>
<?php endif; ?>
</div>
</div>
<!-- Fechas -->
<div class="card mb-3">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-calendar"></i> Fechas</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="fecha_pedimento" class="form-label">Fecha del Pedimento</label>
<input type="date" class="form-control" id="fecha_pedimento" name="fecha_pedimento"
value="<?= date('Y-m-d') ?>">
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="fecha_inicio" class="form-label">Fecha de Inicio</label>
<input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="fecha_final" class="form-label">Fecha Final</label>
<input type="date" class="form-control" id="fecha_final" name="fecha_final">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Información Adicional -->
<div class="row">
<div class="col-md-12">
<div class="card mb-3">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-cogs"></i> Información Adicional</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="archivo_final_previo" class="form-label">Archivo Final Previo</label>
<input type="text" class="form-control" id="archivo_final_previo" name="archivo_final_previo"
placeholder="Nombre del archivo" maxlength="100">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="acuse_cons" class="form-label">Acuse de Recibo</label>
<input type="text" class="form-control" id="acuse_cons" name="acuse_cons"
placeholder="Número de acuse" maxlength="20">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="tipo" class="form-label">Tipo Adicional</label>
<input type="text" class="form-control" id="tipo" name="tipo"
placeholder="Información adicional" maxlength="10">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="status" class="form-label">Estado</label>
<select class="form-select" id="status" name="status">
<option value="1" selected>Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Botones -->
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-end gap-2">
<a href="/IMPORTADORES/catalogo_pedimentos/lista" class="btn-modern secondary">
<i class="fas fa-times"></i>
Cancelar
</a>
<button type="submit" class="btn-modern success" <?= empty($claves_pedimentos) ? 'disabled' : '' ?>>
<i class="fas fa-save"></i>
Guardar Pedimento
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
// Validación del formulario
$('#formPedimento').on('submit', function(e) {
var pedimento = $('#pedimento').val().trim();
var clavePed = $('#clave_ped').val();
if (!pedimento) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Campo obligatorio',
text: 'El número de pedimento es obligatorio',
confirmButtonColor: '#ffc107'
});
$('#pedimento').focus();
return false;
}
if (!clavePed) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Campo obligatorio',
text: 'Debe seleccionar una clave de pedimento',
confirmButtonColor: '#ffc107'
});
$('#clave_ped').focus();
return false;
}
// Validación básica del formato de pedimento
var pedimentoLimpio = pedimento.replace(/\s+/g, '');
if (pedimentoLimpio.length < 13) {
e.preventDefault();
Swal.fire({
icon: 'error',
title: 'Formato inválido',
text: 'El número de pedimento debe tener al menos 13 dígitos',
confirmButtonColor: '#dc3545'
});
$('#pedimento').focus();
return false;
}
});
// Formateo automático del número de pedimento
$('#pedimento').on('input', function() {
var value = this.value.replace(/[^\d]/g, ''); // Solo números
var formatted = '';
if (value.length >= 2) {
formatted += value.substr(0, 2) + ' ';
if (value.length >= 4) {
formatted += value.substr(2, 2) + ' ';
if (value.length >= 8) {
formatted += value.substr(4, 4) + ' ';
if (value.length > 8) {
formatted += value.substr(8);
}
} else if (value.length > 4) {
formatted += value.substr(4);
}
} else if (value.length > 2) {
formatted += value.substr(2);
}
} else {
formatted = value;
}
this.value = formatted;
});
// Validación de fechas
$('#fecha_inicio, #fecha_final').on('change', function() {
var fechaInicio = $('#fecha_inicio').val();
var fechaFinal = $('#fecha_final').val();
if (fechaInicio && fechaFinal && fechaInicio > fechaFinal) {
Swal.fire({
icon: 'warning',
title: 'Fechas incorrectas',
text: 'La fecha de inicio no puede ser mayor que la fecha final',
confirmButtonColor: '#ffc107'
});
$(this).val('');
}
});
// Información adicional sobre la clave seleccionada
$('#clave_ped').on('change', function() {
var selectedText = $(this).find('option:selected').text();
if (selectedText && selectedText !== 'Seleccionar clave...') {
var descripcion = selectedText.split(' - ')[1];
if (descripcion) {
$(this).next('.form-text').html('<i class="fas fa-info-circle text-primary"></i> ' + descripcion);
}
} else {
$(this).next('.form-text').html('Seleccione la clave que corresponda al tipo de importación');
}
});
});
</script>
</body>
</html>