Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <title>Registro Público de Ausentismo - Avicampo</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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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>

.navbar-custom {
      background: linear-gradient(90deg, #2d7a2e, #1f5c20, #28a745);
      height: 70px;
      color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

.navbar-custom img {
      height: 45px;
      margin-right: 10px;
    }

.navbar-custom span {
      font-size: 1.5rem;
      font-weight: 600;
    }

.container-form {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      margin-top: 25px;
      padding: 25px;
      max-width: 900px;
    }

.section-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: #2d7a2e;
      margin-top: 15px;
      margin-bottom: 10px;
      border-bottom: 2px solid #28a745;
    }

label {
      color: #2d7a2e;
      font-weight: 600;
    }

input:disabled,
    select:disabled {
      background-color: #e9ecef;
    }

.btn-success {
      background: linear-gradient(90deg, #2d7a2e, #28a745);
      border: none;
    }

.btn-success:hover {
      background: #1f5c20;
    }

.alert {
      font-weight: 500;
    }
  </style>
</head>

<body>

<nav class="navbar navbar-custom d-flex align-items-center px-3">
    <img src="../public/imagen/avicampo.png" alt="Logo Avicampo">
    <span>Registro de Ausentismo</span>
  </nav>

<div class="container container-form">
    <form method="post" enctype="multipart/form-data" action="index.php?url=casosMedicos/guardar">
      
      <div class="section-title"><i class="bi bi-person-circle"></i> Información del Empleado</div>
      <div class="row mb-3">
        <div class="col-md-6">
          <label>Cédula:</label>
          <input type="text" name="cedula" id="cedula" class="form-control" placeholder="Ingrese cédula" required>
        </div>
        <div class="col-md-6">
          <label>Nombre:</label>
          <input type="text" id="nombre" name="nombre" class="form-control" readonly>
        </div>
      </div>

<div class="row mb-3">
        <div class="col-md-6">
          <label>Centro de Costo:</label>
          <input type="text" id="ccosto" name="ccosto" class="form-control" readonly>
        </div>
        <div class="col-md-6">
          <label>Cargo:</label>
          <input type="text" id="cargo" name="cargo" class="form-control" readonly>
        </div>
      </div>

<div class="row mb-3">
        <div class="col-md-6">
          <label>Teléfono:</label>
          <input type="text" name="telefono" id="telefono" class="form-control" placeholder="Ingrese teléfono" required>
        </div>
        <div class="col-md-6">
          <label>Correo electrónico:</label>
          <input type="email" name="correo" id="correo" class="form-control" placeholder="Ingrese correo" required>
        </div>
      </div>

<div id="noEncontrado" class="alert alert-warning" style="display:none;">
        ⚠️ No se encontró ningún empleado con esa cédula.
      </div>

<div class="section-title"><i class="bi bi-file-earmark-medical"></i> Detalle del Ausentismo</div>
      <div class="mb-3">
        <label>Tipo de Incapacidad:</label>
        <select id="tipo_incapacidad" name="tipo_incapacidad" class="form-select" required>
          <option value="">Seleccione...</option>
          <option value="Enfermedad General">Enfermedad General</option>
          <option value="Accidente de Tránsito">Accidente de Tránsito</option>
          <option value="Licencia de Maternidad">Licencia de Maternidad</option>
          <option value="Licencia de Paternidad">Licencia de Paternidad</option>
        </select>
      </div>

<div class="mb-3">
        <label>EPS:</label>
        <select id="eps" name="eps" class="form-select" required>
          <option value="">Seleccione...</option>
          <option value="SOS">SOS</option>
          <option value="SANITAS">SANITAS</option>
          <option value="SURA">SURA</option>
          <option value="NUEVA EPS">NUEVA EPS</option>
        </select>
      </div>

<div class="text-center mt-4">
        <button type="submit" class="btn btn-success px-4"><i class="bi bi-save"></i> Guardar Registro</button>
      </div>

</form>
  </div>
  <?php if (isset($_GET['ok'])): ?>
    <div class="toast-container position-fixed top-0 end-0 p-3">
      <div id="toastMensaje" class="toast text-white border-0 show 
        <?= $_GET['ok'] == 1 ? 'bg-success' : 'bg-danger' ?>" role="alert">
        <div class="d-flex">
          <div class="toast-body">
            <?= $_GET['ok'] == 1 ? '✔️ Ausentismo guardado correctamente.' : '❌ Error al guardar el ausentismo.' ?>
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      </div>
    </div>
  <?php endif; ?>

// 🔍 Buscar empleado por cédula
      $('#cedula').on('keyup change', function() {
        let cedula = $(this).val().trim();
        if (cedula.length >= 4) {
          $.post('/ausentismo/buscarEmpleado', {
            cedula: cedula
          }, function(resp) {
            if (resp.encontrado) {
              $('#nombre').val(resp.nombre);
              $('#ccosto').val(resp.ccosto);
              $('#cargo').val(resp.cargo);
              $('#noEncontrado').hide();
            } else {
              $('#nombre,#ccosto,#cargo').val('');
              $('#noEncontrado').show();
            }
          }, 'json');
        } else {
          $('#nombre,#ccosto,#cargo').val('');
          $('#noEncontrado').hide();
        }
      });

// ⚙️ Campos dinámicos según tipo de incapacidad
      $('#tipo_incapacidad').change(function() {
        const tipo = $(this).val();
        let html = '';
        if (tipo !== '') {
          html += `
      <div class="row mb-3">
        <div class="col-md-6">
          <label>Fecha Inicio:</label>
          <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" required>
        </div>
        <div class="col-md-6">
          <label>Fecha Fin:</label>
          <input type="date" name="fecha_fin" id="fecha_fin" class="form-control" required>
        </div>
      </div>
      <div class="mb-3">
        <label>Días:</label>
        <input type="number" name="dias" id="dias" class="form-control" readonly>
      </div>
      <div class="mb-3">
        <label>Certificado (PDF/Imagen):</label>
        <input type="file" name="certificado" class="form-control" accept=".pdf,image/*" required>
      </div>
      <div class="mb-3">
        <label>Epicrisis (PDF/Imagen):</label>
        <input type="file" name="epicrisis" class="form-control" accept=".pdf,image/*" required>
      </div>`;

if (tipo === 'Accidente de Tránsito') {
            html += `
        <div class="mb-3">
          <label>FURIPS (PDF/Imagen):</label>
          <input type="file" name="furips" class="form-control" accept=".pdf,image/*" required>
        </div>`;
          }

if (tipo === 'Licencia de Maternidad' || tipo === 'Licencia de Paternidad') {
            html += `
        <div class="mb-3">
          <label>Registro Civil (PDF/Imagen):</label>
          <input type="file" name="registro_civil" class="form-control" accept=".pdf,image/*" required>
        </div>`;
          }
        }
        $('#camposDinamicos').html(html);
      });

// 📅 Calcular días automáticamente
      $(document).on('change', '#fecha_inicio,#fecha_fin', function() {
        const inicio = new Date($('#fecha_inicio').val());
        const fin = new Date($('#fecha_fin').val());
        if (!isNaN(inicio) && !isNaN(fin)) {
          const diff = Math.round((fin - inicio) / (1000 * 60 * 60 * 24)) + 1;
          $('#dias').val(diff > 0 ? diff : 0);
        }
      });

// 💾 Envío AJAX del formulario
      $('#formAusentismo').submit(function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        $.ajax({
          url: '/ausentismo/guardar', // ✅ Nuevo endpoint del controlador
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          dataType: 'json',
          success: function(resp) {
            if (resp.ok) {
              alert("✅ Registro guardado correctamente");
              $('#formAusentismo')[0].reset();
              $('#camposDinamicos').html('');
            } else {
              alert("⚠️ " + resp.msg);
            }
          },
          error: function(xhr) {
            console.error(xhr.responseText);
            alert("❌ Error al conectar con el servidor. Revisa consola.");
          }
        });
      });

});

document.addEventListener("DOMContentLoaded", function() {
      var toastEl = document.getElementById('toastMensaje');
      if (toastEl) {
        var toast = new bootstrap.Toast(toastEl);
        toast.show();
      }
    });
  </script>

</body>

</html>