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

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

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

  <!-- css -->
  <link rel="stylesheet" href="css/style.css">


</head>

<body>

<!--  NAVBAR -->
<?php $title = 'Empresas'; ?>
<?= view('partials/header') ?>


  <!-- HERO -->
  <section class="hero hero-empresas">
    <div class="container">
      <h2 class="fw-bold">Empresas que están contratando</h2>
      <p>Descubre organizaciones y sus oportunidades</p>
    </div>
  </section>

  <div class="container mt-5">

    <!-- BUSCADOR -->
    <div class="row mb-4">
      <div class="col-md-6 mx-auto">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Buscar empresa...">
          <button class="btn btn-primary">Buscar</button>
        </div>
      </div>
    </div>

    <!-- GRID DE EMPRESAS -->
    <div class="row g-4">

      <!-- EMPRESA 1 -->
      <div class="col-md-4">
        <div class="company-card">
          <img src="img/img_empresas/Empresa1.png" class="company-logo" alt="">
          <div class="company-name">Tech Solutions</div>
          <div class="company-location">Guatemala</div>
          <div class="mt-2 badge-jobs">12 empleos</div>
          <div class="mt-3">
            <button class="btn btn-outline-primary btn-sm">Ver empleos</button>
          </div>
        </div>
      </div>

      <!-- EMPRESA 2 -->
      <div class="col-md-4">
        <div class="company-card">
          <img src="img/img_empresas/Empresa2.png" class="company-logo" alt="">
          <div class="company-name">Creative Studio</div>
          <div class="company-location">Remoto</div>
          <div class="mt-2 badge-jobs">8 empleos</div>
          <div class="mt-3">
            <button class="btn btn-outline-primary btn-sm">Ver empleos</button>
          </div>
        </div>
      </div>

      <!-- EMPRESA 3 -->
      <div class="col-md-4">
        <div class="company-card">
          <img src="img/img_empresas/Empresa3.png" class="company-logo" alt="">
          <div class="company-name">Marketing Pro</div>
          <div class="company-location">Ciudad de Guatemala</div>
          <div class="mt-2 badge-jobs">5 empleos</div>
          <div class="mt-3">
            <button class="btn btn-outline-primary btn-sm">Ver empleos</button>
          </div>
        </div>
      </div>

    </div>

  </div>

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

  <script src="js/bootstrap.bundle.min.js"></script>

<!-- ========================================================== -->
<!-- MODAL: LOGIN                                                -->
<!-- ========================================================== -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <h3 class="fw-bold">Bienvenido de nuevo</h3>
          <p class="text-muted">Accede a las mejores ofertas</p>
        </div>

        <button class="btn btn-outline-dark w-100 mb-3 d-flex align-items-center justify-content-center py-2">
          <img src="<?= base_url('img/logo_google.png') ?>" style="width: 18px;" class="me-2">
          Continuar con Google
        </button>

        <div class="text-center my-3 text-muted small">o con tu correo</div>

        <form id="formLogin"  action="<?= base_url('login') ?>" method="POST">
          <?= csrf_field() ?>
          <div class="mb-3">
            <input type="email" name="email" class="form-control py-2" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" name="password" class="form-control py-2" placeholder="Contraseña">
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Entrar</button>
        </form>

        

        <div class="text-center">
          <p class="text-muted small mb-1">¿No tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#registroModal">Regístrate como postulante</a>
          </p>
          <p class="text-muted small mb-0">¿Necesitas contratar?
            <a href="#" class="text-success text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#empresaModal">Ingresa como empresa</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ========================================================== -->
<!-- MODAL: REGISTRO POSTULANTE                                  -->
<!-- ========================================================== -->
<div class="modal fade" id="registroModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <i class="bi bi-person-circle fs-1 text-primary"></i>
          <h3 class="fw-bold mt-2">Crear cuenta</h3>
          <p class="text-muted">Empieza a postular hoy mismo</p>
        </div>

        <form id="formRegistro" action="<?= base_url('registro') ?>" method="POST">
            <?= csrf_field() ?>
          <div class="mb-3">
            <input type="text" class="form-control py-2" name="nombre" placeholder="Nombre completo">
          </div>
          <div class="mb-3">
            <input type="text" class="form-control py-2" name="apellidos" placeholder="Apellidos completos">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control py-2" name="email" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" name="password" placeholder="Crear contraseña">
          </div>
          <div class="mb-3">
            <select class="form-select py-2" name="puesto_deseado">
              <option selected disabled value="">Puesto deseado</option>
              <optgroup label="Tecnología">
                <option value="Frontend Developer">Frontend Developer</option>
                <option value="Backend Developer">Backend Developer</option>
                <option value="Fullstack Developer">Fullstack Developer</option>
                <option value="Soporte Técnico / IT">Soporte Técnico / IT</option>
                <option value="Analista de Datos">Analista de Datos</option>
              </optgroup>
              <optgroup label="Administración y Ventas">
                <option value="Administrador de Empresas">Administrador de Empresas</option>
                <option value="Asistente Administrativo">Asistente Administrativo</option>
                <option value="Vendedor / Ejecutivo de Ventas">Vendedor / Ejecutivo de Ventas</option>
                <option value="Servicio al Cliente">Servicio al Cliente</option>
              </optgroup>
              <optgroup label="Salud y Otros">
                <option value="Enfermería">Enfermería</option>
                <option value="Farmacéutico">Farmacéutico</option>
                <option value="Perito Mecánico">Perito Mecánico</option>
                <option value="Diseñador Gráfico / UI">Diseñador Gráfico / UI</option>
              </optgroup>
            </select>
          </div>
          <div class="mb-3">
            <select class="form-select py-2" name="departamento">
              <option selected disabled value="">Selecciona tu departamento</option>
              <option>Alta Verapaz</option><option>Baja Verapaz</option>
              <option>Chimaltenango</option><option>Chiquimula</option>
              <option>El Progreso</option><option>Escuintla</option>
              <option>Guatemala</option><option>Huehuetenango</option>
              <option>Izabal</option><option>Jalapa</option>
              <option>Jutiapa</option><option>Petén</option>
              <option>Quetzaltenango</option><option>Quiché</option>
              <option>Retalhuleu</option><option>Sacatepéquez</option>
              <option>San Marcos</option><option>Santa Rosa</option>
              <option>Sololá</option><option>Suchitepéquez</option>
              <option>Totonicapán</option><option>Zacapa</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Crear Cuenta</button>
        </form>

        <hr class="my-4">
        <div class="text-center">
          <p class="text-muted small mb-1">¿Ya tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#loginModal">Inicia sesión</a>
          </p>
          <p class="text-muted small mb-0">¿Necesitas contratar?
            <a href="#" class="text-success text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#empresaModal">Regístrate como empresa</a>
          </p>
        </div>
        <p class="text-center text-muted small mt-3">
          Al registrarte, aceptas nuestros términos y condiciones.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- ========================================================== -->
<!-- MODAL: REGISTRO EMPRESA                                     -->
<!-- ========================================================== -->
<div class="modal fade" id="empresaModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <i class="bi bi-building fs-1 text-success"></i>
          <h3 class="fw-bold mt-2">Registrar empresa</h3>
          <p class="text-muted">Publica empleos y encuentra talento</p>
        </div>

        <form id="formEmpresa">
          <div class="mb-3">
            <input type="text" class="form-control py-2" id="emp_nombre_empresa" placeholder="Nombre de la empresa">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control py-2" id="emp_email" placeholder="Correo electrónico">
          </div>
          <div class="mb-3">
            <input type="password" class="form-control py-2" id="emp_password" placeholder="Crear contraseña">
          </div>
          <div class="mb-3">
            <input type="text" class="form-control py-2" id="emp_sitio_web" placeholder="Sitio web (opcional)">
          </div>
          <div class="mb-3">
            <select class="form-select py-2" id="emp_ubicacion">
              <option selected disabled value="">Departamento donde opera</option>
              <option>Alta Verapaz</option><option>Baja Verapaz</option>
              <option>Chimaltenango</option><option>Chiquimula</option>
              <option>El Progreso</option><option>Escuintla</option>
              <option>Guatemala</option><option>Huehuetenango</option>
              <option>Izabal</option><option>Jalapa</option>
              <option>Jutiapa</option><option>Petén</option>
              <option>Quetzaltenango</option><option>Quiché</option>
              <option>Retalhuleu</option><option>Sacatepéquez</option>
              <option>San Marcos</option><option>Santa Rosa</option>
              <option>Sololá</option><option>Suchitepéquez</option>
              <option>Totonicapán</option><option>Zacapa</option>
            </select>
          </div>
          <button type="submit" class="btn btn-success w-100 py-2 fw-bold shadow-sm">Crear cuenta empresa</button>
        </form>

        <hr class="my-4">
        <div class="text-center">
          <p class="text-muted small mb-1">¿Ya tienes cuenta?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#loginModal">Inicia sesión</a>
          </p>
          <p class="text-muted small mb-0">¿Buscas empleo?
            <a href="#" class="text-primary text-decoration-none fw-bold"
               data-bs-dismiss="modal"
               data-bs-toggle="modal" data-bs-target="#registroModal">Regístrate como postulante</a>
          </p>
        </div>
        <p class="text-center text-muted small mt-3">
          Al registrarte, aceptas nuestros términos y condiciones.
        </p>
      </div>
    </div>
  </div>
</div>


</body>
</html>