<?php include __DIR__ . '/../partials/sidebar_agente.php'; ?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Dashboard | Importador</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>
  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <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; }
    .navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
    .btn-indigo { background-color: #6610f2; color: white;}
    .btn-indigo:hover { background-color: #520dc2; color: white;}
    .text-indigo { color: orangeRed;}
    .btn-orange { background-color: orangeRed; color: white;}
    .btn-orange:hover { background-color: #ff3600; color: white;}
    .text-orange { color: orangeRed;}
    /* 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; }
    /* Estilos mejorados para las pestañas */
    .nav-tabs { border-bottom: 1px solid #dee2e6; margin-bottom: 0; }
    .nav-tabs .nav-item { margin-bottom: -1px; }
    .nav-tabs .nav-link { border: 1px solid transparent; border-radius: 0.375rem 0.375rem 0 0; padding: 12px 20px; color: #495057; background-color: #f8f9fa;
      font-weight: 500; white-space: nowrap; min-width: 150px; text-align: center; transition: all 0.3s ease; }
    .nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #dee2e6; background-color: #e9ecef; color: #212529; }
    .nav-tabs .nav-link.active { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; border-bottom: 2px solid #fff; }
    /* Asegurar que las pestañas sean completamente visibles */
    .nav-tabs .nav-item:first-child .nav-link { margin-left: 0; }
    .nav-tabs .nav-item:last-child .nav-link { margin-right: 0; }
    .tab-content { padding: 10px; }
  </style>
</head>
<body>

  <div class="content">
    <h4>CONFIGURACIÓN ADUANA / PATENTE</h4>
    <div class="card p-4 shadow-sm bg-white">
      <!-- Se agrega enctype para subir archivos -->
      <form action="/IMPORTADORES/patente/actualizar" method="POST" id="formEdicionPatente">
        <!-- Campo oculto para el ID -->
        <input type="hidden" name="id_agente" value="<?= htmlspecialchars($agente['id_agente'] ?? '') ?>">
        <!-- Pestañas de navegación -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" 
              type="button" role="tab" aria-controls="general" aria-selected="true">
              General
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="validacion-tab" data-bs-toggle="tab" data-bs-target="#validacion" 
              type="button" role="tab" aria-controls="validacion" aria-selected="false">
              Números de Validación y Folios
            </button>
          </li>
        </ul>

        <!-- Contenido de las pestañas -->
        <div class="tab-content" id="myTabContent">
          <!-- Pestaña General -->
          <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
            <p style="font-weight: bold;">Datos de la Patente / Aduana</p>
            <div class="row mb-3">
              <label for="aduana" class="col-md-2 col-form-label">Aduana</label>
              <div class="col-md-3">
                <input name="aduana" id="aduana" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars($agente['aduana'] ?? '') ?>" required>
              </div>
              <label for="aduana" class="col-md-2 col-form-label">[Sin Sección]</label>
            </div>

            <div class="row mb-3">
              <label for="patente" class="col-md-2 col-form-label">Patente</label>
              <div class="col-md-3">
                <input name="patente" id="patente" type="text" maxlength="4" class="form-control"
                value="<?= htmlspecialchars($agente['patente'] ?? '') ?>" required>
              </div>
            </div>

            <div class="row mb-3">
              <label for="agente_aduanal" class="col-md-2 col-form-label">Agente Aduanal</label>
              <div class="col-md-10">
              <input name="agente_aduanal" id="agente_aduanal" type="text" class="form-control"
              value="<?= htmlspecialchars($agente['agente_aduanal'] ?? '') ?>" required>
              </div>
            </div>

            <div class="row mb-3">
              <label for="rfc" class="col-md-2 col-form-label">RFC</label>
              <div class="col-md-6">
                <input name="rfc" id="rfc" type="text" maxlength="13" class="form-control"
                value="<?= htmlspecialchars($agente['rfc'] ?? '') ?>" required>
              </div>
            </div>

            <div class="row mb-3">
              <label for="curp" class="col-md-2 col-form-label">CURP</label>
              <div class="col-md-6">
                <input name="curp" id="curp" type="text" maxlength="18" class="form-control"
                value="<?= htmlspecialchars($agente['curp'] ?? '') ?>" required>
              </div>
            </div>

            <div class="row mb-3">
              <label for="razon_social" class="col-md-2 col-form-label">Razón Social</label>
              <div class="col-md-10">
                <input name="razon_social" id="razon_social" type="text" class="form-control"
                value="<?= htmlspecialchars($agente['razon_social'] ?? '') ?>" required>
              </div>
            </div><hr>

            <div class="col mb-3">
              <P>Capturar para el llenado de la Manifestación de Valor</P>
              <p style="font-weight: bold;">Datos del Agente Aduanal:</p>
              <div class="row mb-3">
                <label for="mf_nombre" class="col-md-2 col-form-label">Nombre(s)</label>
                <div class="col-md-9">
                    <input name="mf_nombre" id="mf_nombre" type="text" class="form-control"
                    value="<?= htmlspecialchars($agente['mf_nombre'] ?? '') ?>">
                </div>
              </div>
              <div class="row mb-3">
                <label for="mf_paterno" class="col-md-2 col-form-label">Apellido Paterno</label>
                <div class="col-md-9">
                    <input name="mf_paterno" id="mf_paterno" type="text" class="form-control"
                    value="<?= htmlspecialchars($agente['mf_paterno'] ?? '') ?>">
                </div>
              </div>
              <div class="row mb-3">
                <label for="mf_materno" class="col-md-2 col-form-label">Apellido Materno</label>
                <div class="col-md-9">
                    <input name="mf_materno" id="mf_materno" type="text" class="form-control"
                    value="<?= htmlspecialchars($agente['mf_materno'] ?? '') ?>">
                </div>
              </div>
            </div>
          </div>

          <!-- Pestaña Números de Validación y Folios -->
          <div class="tab-pane fade" id="validacion" role="tabpanel" aria-labelledby="validacion-tab">
            <p style="font-weight: bold;">Números de Validación y Folios</p>
            <!-- Pedimentos -->
            <p>Números de Validación para Pedimentos</p>
            <div class="row mb-3">
              <div class="col-md-1"></div>
              <label for="vp_inicio" class="col-md-1 col-form-label">Inicio:</label>
              <div class="col-md-1">
                <input name="vp_inicio" id="vp_inicio" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vp_inicio'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vp_final" class="col-md-1 col-form-label">Final:</label>
              <div class="col-md-1">
                <input name="vp_final" id="vp_final" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vp_final'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vp_siguiente" class="col-md-1 col-form-label">Siguiente:</label>
              <div class="col-md-1">
                <input name="vp_siguiente" id="vp_siguiente" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vp_siguiente'] ?? '')) ?>">
              </div>
            </div><hr>

            <!-- Pago Electrónico -->
            <p>Números de Validación para Pago Electrónico</p>
            <div class="row mb-3">
              <div class="col-md-1"></div>
              <label for="vpe_inicio" class="col-md-1 col-form-label">Inicio:</label>
              <div class="col-md-1">
                <input name="vpe_inicio" id="vpe_inicio" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vpe_inicio'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vpe_final" class="col-md-1 col-form-label">Final:</label>
              <div class="col-md-1">
                <input name="vpe_final" id="vpe_final" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vpe_final'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vpe_siguiente" class="col-md-1 col-form-label">Siguiente:</label>
              <div class="col-md-1">
                <input name="vpe_siguiente" id="vpe_siguiente" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vpe_siguiente'] ?? '')) ?>">
              </div>
            </div><hr>

            <!-- Avisos Traslado / Plantas-Bodegas -->
            <p>Números de Validación para Avisos Traslado / Plantas-Bodegas</p>
            <div class="row mb-3">
              <div class="col-md-1"></div>
              <label for="vat_pb_inicio" class="col-md-1 col-form-label">Inicio:</label>
              <div class="col-md-1">
                <input name="vat_pb_inicio" id="vat_pb_inicio" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vat_pb_inicio'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vat_pb_final" class="col-md-1 col-form-label">Final:</label>
              <div class="col-md-1">
                <input name="vat_pb_final" id="vat_pb_final" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vat_pb_final'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vat_pb_siguiente" class="col-md-1 col-form-label">Siguiente:</label>
              <div class="col-md-1">
                <input name="vat_pb_siguiente" id="vat_pb_siguiente" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vat_pb_siguiente'] ?? '')) ?>">
              </div>
            </div><hr>

            <!-- Validación y Folio de Cartas Cupo -->
            <p>Números de Validación para Cartas Cupo</p>
            <div class="row mb-3">
              <div class="col-md-1"></div>
              <label for="vcc_inicio" class="col-md-1 col-form-label">Inicio:</label>
              <div class="col-md-1">
                <input name="vcc_inicio" id="vcc_inicio" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vcc_inicio'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vcc_final" class="col-md-1 col-form-label">Final:</label>
              <div class="col-md-1">
                <input name="vcc_final" id="vcc_final" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vcc_final'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vcc_siguiente" class="col-md-1 col-form-label">Siguiente:</label>
              <div class="col-md-1">
                <input name="vcc_siguiente" id="vcc_siguiente" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vcc_siguiente'] ?? '')) ?>">
              </div>
            </div><hr>

            <!-- Avisos Electrónicos -->
            <p>Números de Validación para Avisos Electrónicos</p>
            <div class="row mb-3">
              <div class="col-md-1"></div>
              <label for="vae_inicio" class="col-md-1 col-form-label">Inicio:</label>
              <div class="col-md-1">
                <input name="vae_inicio" id="vae_inicio" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vae_inicio'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vae_final" class="col-md-1 col-form-label">Final:</label>
              <div class="col-md-1">
                <input name="vae_final" id="vae_final" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vae_final'] ?? '')) ?>">
              </div>
              <div class="col-md-1"></div>
              <label for="vae_siguiente" class="col-md-1 col-form-label">Siguiente:</label>
              <div class="col-md-1">
                <input name="vae_siguiente" id="vae_siguiente" type="text" maxlength="3" class="form-control"
                value="<?= htmlspecialchars(sprintf('%03d', $agente['vae_siguiente'] ?? '')) ?>">
              </div>
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: right;">
          <button type="submit" class="btn btn-success">💾 Guardar</button>
          <a href="/IMPORTADORES/patente/lista" class="btn btn-secondary ms-2">Cancelar</a>
        </div>
      </form>
    </div>
  </div>

  <script>
    document.getElementById('formEdicionPatente').addEventListener('submit', function(e) {
      e.preventDefault(); // Prevenir envío por defecto

      // Obtener todos los campos correctamente
      const aduana = document.getElementById('aduana').value;
      const patente = document.getElementById('patente').value;
      const agente_aduanal = document.getElementById('agente_aduanal').value.trim();
      const rfc = document.getElementById('rfc').value.trim();
      const curp = document.getElementById('curp').value.trim();
      const razon_social = document.getElementById('razon_social').value.trim();

      // Expresiones regulares
      const rfcRegex = /^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$/;
      const curpRegex = /^[A-Z]{4}[0-9]{6}[HM](AS|BC|BS|CC|CL|CM|CS|CH|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS)[A-Z]{3}[A-Z0-9]{2}$/;
      const soloNumerosRegex = /^[0-9]+$/;

      if (!aduana) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'La aduana es obligatoria.', confirmButtonColor: '#dc3545' });
        document.getElementById('aduana').focus();
        return;
      }
      if (!soloNumerosRegex.test(aduana)) {
        Swal.fire({ icon: 'error', title: 'Aduana inválida', text: 'La aduana solo puede contener números.', confirmButtonColor: '#dc3545' });
        document.getElementById('aduana').focus();
        return;
      }
      if (!patente) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'La patente es obligatoria.', confirmButtonColor: '#dc3545' });
        document.getElementById('patente').focus();
        return;
      }
      if (!soloNumerosRegex.test(patente)) {
        Swal.fire({ icon: 'error', title: 'Patente inválida', text: 'La patente solo puede contener números.', confirmButtonColor: '#dc3545' });
        document.getElementById('patente').focus();
        return;
      }
      if (!agente_aduanal) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'El agente aduanal es obligatorio.', confirmButtonColor: '#dc3545' });
        document.getElementById('agente_aduanal').focus();
        return;
      }
      if (!rfc) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'El RFC es obligatorio.', confirmButtonColor: '#dc3545' });
        document.getElementById('rfc').focus();
        return;
      }
      if (!rfcRegex.test(rfc)) {
        Swal.fire({ icon: 'error', title: 'RFC inválido', text: 'El RFC debe tener 12 o 13 caracteres con el formato correcto (ej. ABC123456XYZ).', confirmButtonColor: '#dc3545' });
        document.getElementById('rfc').focus();
        return;
      }
      if (!curp) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'El CURP es obligatorio.', confirmButtonColor: '#dc3545' });
        document.getElementById('curp').focus();
        return;
      }
      if (curp && !curpRegex.test(curp)) {
        Swal.fire({ icon: 'error', title: 'CURP inválido', text: 'El CURP debe tener 18 caracteres con el formato correcto.', confirmButtonColor: '#dc3545'
        });
        document.getElementById('curp').focus();
        return;
      }
      if (!razon_social) {
        Swal.fire({ icon: 'error', title: 'Campo requerido', text: 'La razón social es obligatoria.', confirmButtonColor: '#dc3545' });
        document.getElementById('razon_social').focus();
        return;
      }

      // Obtener campos de folios (ahora VARCHAR)
      const folios = [
        { id: 'vp_inicio', nombre: 'VP Inicio' },
        { id: 'vp_final', nombre: 'VP Final' },
        { id: 'vp_siguiente', nombre: 'VP Siguiente' },
        { id: 'vpe_inicio', nombre: 'VPE Inicio' },
        { id: 'vpe_final', nombre: 'VPE Final' },
        { id: 'vpe_siguiente', nombre: 'VPE Siguiente' },
        { id: 'vat_pb_inicio', nombre: 'VAT PB Inicio' },
        { id: 'vat_pb_final', nombre: 'VAT PB Final' },
        { id: 'vat_pb_siguiente', nombre: 'VAT PB Siguiente' },
        { id: 'vcc_inicio', nombre: 'VCC Inicio' },
        { id: 'vcc_final', nombre: 'VCC Final' },
        { id: 'vcc_siguiente', nombre: 'VCC Siguiente' },
        { id: 'vae_inicio', nombre: 'VAE Inicio' },
        { id: 'vae_final', nombre: 'VAE Final' },
        { id: 'vae_siguiente', nombre: 'VAE Siguiente' }
      ];

      // Validar campos de folios
      for (let folio of folios) {
        const valor = document.getElementById(folio.id).value.trim();
        
        if (valor !== '') {
          // Validar longitud máxima
          if (valor.length > 10) {
            Swal.fire({ icon: 'error', title: 'Campo demasiado largo', text: `${folio.nombre} no puede exceder 10 caracteres.`, confirmButtonColor: '#dc3545' });
            document.getElementById(folio.id).focus();
            return;
          }
          
          // Opcional: Si quieres mantener solo números, descomenta estas líneas
          /*
          if (!soloNumerosRegex.test(valor)) {
            Swal.fire({ 
              icon: 'error', 
              title: 'Campo inválido', 
              text: `${folio.nombre} solo puede contener números.`, 
              confirmButtonColor: '#dc3545' 
            });
            document.getElementById(folio.id).focus();
            return;
          }
          */
        }
      }

      // Si todas las validaciones pasan, mostrar carga y enviar
      Swal.fire({ title: 'Guardando...',  text: 'Por favor espere',  allowOutsideClick: false,  showConfirmButton: false, willOpen: () => { Swal.showLoading(); } });

      // SI TODAS LAS VALIDACIONES PASAN, ENVIAR EL FORMULARIO
      this.submit();
    });
  </script>

</body>
</html>