<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Perfil - ContratandoGT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <link rel="<?= base_url('stylesheet" href="css/style.css') ?>">
</head>

<body class="bg-light">

<nav class="navbar navbar-expand-lg bg-white shadow-sm">
  <div class="container">
    
    <a class="navbar-brand logo" href="<?= base_url('/') ?>">
      <img src="<?= base_url('img/logo_1.png') ?>" alt="Logo">
    </a>

    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link" href="<?= base_url('/') ?>">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="<?= base_url('#') ?>">Empleos</a></li>
        <li class="nav-item"><a class="nav-link" href="<?= base_url('#') ?>">Empresas</a></li>
        <li class="nav-item"><a class="nav-link" href="<?= base_url('#') ?>">Recursos</a></li>
      </ul>

      <div class="d-flex align-items-center gap-3">
        <a href="perfil.html" class="text-decoration-none text-dark fw-medium">
          <i class="bi bi-person-circle me-1 text-primary"></i> <span id="nav-usuario">primer</span>
        </a>
        <a href="#" class="btn btn-outline-danger btn-sm">Cerrar sesión</a>
      </div>
    </div>
  </div>
</nav>

<section class="hero hero-recursos text-center">
  <div class="container">
    <h1 class="fw-bold">Mi Perfil Profesional</h1>
    <p class="text-muted">Gestiona tus datos personales y tu currículum vitae</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="row g-4">
      
      <div class="col-lg-4">
        <div class="card p-4 shadow-sm border-0 text-center bg-white">
          <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold fs-2 mx-auto mb-3" style="width: 80px; height: 80px;">
            P
          </div>
          <h5 class="fw-bold mb-1" id="lbl-perfil-nombre">Candidato</h5>
          <p class="text-muted small mb-3"><i class="bi bi-geo-alt me-1 text-danger"></i> Quetzaltenango, GT</p>
          <hr>
          <div class="list-group list-group-flush text-start">
            <a href="#datos" class="list-group-item list-group-item-action active border-0 rounded mb-1 p-3"><i class="bi bi-person-vcard me-2"></i> Datos Personales</a>
            <a href="#cv" class="list-group-item list-group-item-action border-0 rounded mb-1 p-3"><i class="bi bi-file-earmark-pdf me-2"></i> Mi Currículum (PDF)</a>
            <a href="#postulaciones" class="list-group-item list-group-item-action border-0 rounded p-3"><i class="bi bi-send-check me-2"></i> Mis Postulaciones</a>
          </div>
        </div>
      </div>

      <div class="col-lg-8">
        
        <div class="card p-4 shadow-sm border-0 bg-white mb-4" id="datos">
          <h5 class="fw-bold text-primary mb-4"><i class="bi bi-person-gear me-2"></i> Información de la Cuenta</h5>
          <form id="form-actualizar-perfil">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label fw-medium text-muted small">Nombre Completo</label>
                <input type="text" class="form-control" id="txt-nombre" required>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-medium text-muted small">Correo electrónico</label>
                <input type="email" class="form-control" id="txt-email" disabled>
              </div>
              <div class="col-md-6">
                <label class="form-label fw-medium text-muted small">Teléfono de Contacto</label>
                <input type="tel" class="form-control" id="txt-telefono" placeholder="Ej: 7761-0000">
              </div>
              <div class="col-md-6">
                <label class="form-label fw-medium text-muted small">Ubicación</label>
                <select class="form-select" id="cmb-ubicacion">
                  <option value="Quetzaltenango">Quetzaltenango</option>
                  <option value="Guatemala">Guatemala</option>
                  <option value="San Marcos">San Marcos</option>
                  <option value="Huehuetenango">Huehuetenango</option>
                </select>
              </div>
            </div>
            <div class="text-end mt-4">
              <button type="submit" class="btn btn-primary px-4 fw-bold">Actualizar Datos</button>
            </div>
          </form>
        </div>

        <div class="card p-4 shadow-sm border-0 bg-white" id="cv">
          <h5 class="fw-bold text-primary mb-3"><i class="bi bi-file-earmark-arrow-up me-2"></i> Documento Profesional</h5>
          <p class="text-muted small">Adjunta tu CV actualizado en formato PDF para que las empresas de ContratandoGT puedan contactarte.</p>
          
          <div class="p-4 border border-2 border-dashed rounded text-center bg-light">
            <i class="bi bi-filetype-pdf fs-1 text-muted d-block mb-2"></i>
            <input type="file" class="form-control d-none" id="file-cv" accept=".pdf">
            <button type="button" class="btn btn-outline-secondary btn-sm fw-bold" onclick="document.getElementById('file-cv').click()">
              Seleccionar archivo PDF
            </button>
            <p class="text-muted small mt-2 mb-0" id="lbl-file-name">Ningún archivo cargado actualmente</p>
          </div>
        </div>

      </div>

    </div>
  </div>
</section>

<?= view('partials/footer') ?>

<script src="<?= base_url('js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= base_url('js/perfil.js') ?>"></script>
</body>
</html>