<?php $title = 'Publicar Empleo'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Publicar Empleo - 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="stylesheet" href="<?= base_url('css/style.css') ?>">
</head>
<body>

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

<section class="hero text-center" style="background:#f0faf4;padding:60px 0;">
  <div class="container">
    <h1 class="fw-bold">Publicar Nueva Oferta</h1>
    <p class="text-muted">Completa los datos del empleo</p>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7">
        <div class="card p-4 shadow-sm border-0">
          <form action="<?= base_url('empleos/guardar') ?>" method="POST">
            <?= csrf_field() ?>

            <div class="mb-3">
              <label class="form-label fw-medium">Título del puesto</label>
              <input type="text" name="titulo" class="form-control" placeholder="Ej: Desarrollador Frontend" required>
            </div>

            <div class="mb-3">
              <label class="form-label fw-medium">Descripción</label>
              <textarea name="descripcion" class="form-control" rows="4" placeholder="Describe el puesto..."></textarea>
            </div>

            <div class="mb-3">
              <label class="form-label fw-medium">Modalidad</label>
              <select name="modalidad" class="form-select">
                <option value="presencial">Presencial</option>
                <option value="remoto">Remoto</option>
                <option value="híbrido">Híbrido</option>
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label fw-medium">Ubicación</label>
              <select name="ubicacion" class="form-select">
                <?php
                $deptos = ['Alta Verapaz','Baja Verapaz','Chimaltenango','Chiquimula','El Progreso','Escuintla','Guatemala','Huehuetenango','Izabal','Jalapa','Jutiapa','Petén','Quetzaltenango','Quiché','Retalhuleu','Sacatepéquez','San Marcos','Santa Rosa','Sololá','Suchitepéquez','Totonicapán','Zacapa'];
                foreach ($deptos as $d): ?>
                  <option><?= $d ?></option>
                <?php endforeach; ?>
              </select>
            </div>

            <div class="row g-3 mb-3">
              <div class="col-md-6">
                <label class="form-label fw-medium">Salario mínimo (Q)</label>
                <input type="number" name="salario_min" class="form-control" placeholder="Ej: 3000">
              </div>
              <div class="col-md-6">
                <label class="form-label fw-medium">Salario máximo (Q)</label>
                <input type="number" name="salario_max" class="form-control" placeholder="Ej: 5000">
              </div>
            </div>

            <div class="mb-3">
              <div class="form-check">
                <input type="checkbox" name="salario_visible" class="form-check-input" id="salario_visible" checked>
                <label class="form-check-label" for="salario_visible">Mostrar salario públicamente</label>
              </div>
            </div>

            <div class="mb-4">
              <label class="form-label fw-medium">Fecha de cierre</label>
              <input type="date" name="fecha_cierre" class="form-control">
            </div>

            <div class="d-flex justify-content-between">
              <a href="<?= base_url('perfil') ?>" class="btn btn-outline-secondary">Cancelar</a>
              <button type="submit" class="btn btn-success px-4 fw-bold">Publicar Empleo</button>
            </div>

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

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