<?php include 'header.php'; ?>

  <div class="contenedor-formulario">
    <h2>Formulario de Solicitud de Mantenimiento Correctivo</h2>

    <form action="insertar_datos.php" method="post" class="form-grid">
      <div class="form-group">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" placeholder="Ingrese su(s) nombre(s)" name="nombre" class="capitalize" required>
      </div>

      <div class="form-group">
        <label for="apellidos">Apellidos:</label>
        <input type="text" id="apellidos" placeholder="Ingrese sus apellidos" name="apellidos" class="capitalize" required>
      </div>

      <div class="form-group">
        <label for="area">Área:</label>
        <select id="area" name="area" required>
          <option value="">Seleccione una opción</option>
          <option value="Abogado general">Abogado general</option>
          <option value="Coordinación de la carrera de enfermería">Coordinación de la carrera de enfermería</option>
          <option value="Coordinación de la carrera de lengua inglesa">Coordinación de la carrera de lengua inglesa</option>
          <option value="Coordinación de la carrera de Médico Veterinario y Zootecnia">Coordinación de la carrera de Médico Veterinario y Zootecnia</option>
          <option value="Departamento de actividades culturales y deportivas">Departamento de actividades culturales y deportivas</option>
          <option value="Departamento de contabilidad">Departamento de contabilidad</option>
          <option value="Departamento de información y estadística">Departamento de información y estadística</option>
          <option value="Departamento de investigación, desarrollo y proyectos especiales">Departamento de investigación, desarrollo y proyectos especiales</option>
          <option value="Departamento de mantenimiento e instalaciones">Departamento de mantenimiento e instalaciones</option>
          <option value="Departamento de personal">Departamento de personal</option>
          <option value="Departamento de prácticas y estadías">Departamento de prácticas y estadías</option>
          <option value="Departamento de prensa y difusión">Departamento de prensa y difusión</option>
          <option value="Departamento de programación y presupuesto">Departamento de programación y presupuesto</option>
          <option value="Departamento de servicios escolares">Departamento de servicios escolares</option>
          <option value="Departamento de servicios médicos">Departamento de servicios médicos</option>
          <option value="Departamento de Sistemas">Departamento de sistemas</option>
          <option value="Dirección de administración y finanzas">Dirección de administración y finanzas</option>
          <option value="Dirección de la carrera de administración">Dirección de la carrera de administración</option>
          <option value="Dirección de la carrera de alimentos">Dirección de la carrera de alimentos</option>
          <option value="Dirección de la carrera de contaduría">Dirección de la carrera de contaduría</option>
          <option value="Dirección de la carrera de mecatrónica">Dirección de la carrera de mecatrónica</option>
          <option value="Dirección de la Carrera de TICS">Dirección de la carrera de TICS</option>
          <option value="Dirección de Vinculación">Dirección de vinculación</option>
          <option value="Órgano de control interno">Órgano de control interno</option>
          <option value="Rectoría">Rectoría</option>
          <option value="Secretaría Académica">Secretaría académica</option>
          <option value="Subdirección de Planeación y Evaluación">Subdirección de planeación y evaluación</option>
        </select>
      </div>

      <div class="form-group">
        <label for="ubicacion">Ubicación:</label>
        <select id="ubicacion" name="ubicacion" required>
          <option value="">Seleccione una opción</option>
          <option value="Casco de la ex hacienda">Casco de la ex hacienda</option>
          <option value="Caseta de vigilancia">Caseta de vigilancia</option>
          <option value="Edificio de biblioteca">Edificio de biblioteca</option>
          <option value="Edificio de docencia I">Edificio de docencia I</option>
          <option value="Edificio de docencia II">Edificio de docencia II</option>
          <option value="Edificio de docencia III">Edificio de docencia III</option>
          <option value="Edificio de vinculación">Edificio de vinculación</option>
          <option value="Taller de alimentos">Taller de alimentos</option>
          <option value="Taller de mecatrónica">Taller de mecatrónica</option>
        </select>
      </div>

      <div class="form-group">
        <label for="clasificacion">
          Clasificación:
          <span class="tooltip">&#x3F;
            <span class="tooltiptext">
              <strong>Hardware:</strong> Equipos físicos<br>
              <strong>Software:</strong> Programas o sistemas instalados
            </span>
          </span>
        </label>
        <select id="clasificacion" name="clasificacion" required>
          <option value="">Seleccione una opción</option>
          <option value="Hardware">Hardware</option>
          <option value="Software">Software</option>
        </select>
      </div>

      <div class="form-group">
        <label for="nodeserie">Número de Serie:</label>
        <input type="text" id="nodeserie" name="nodeserie" placeholder="Escribe el numero de serie del equipo" class="uppercase" oninput="this.value = this.value.toUpperCase()" required>
      </div>

      <div class="form-group full-width">
        <label for="descripcion">Descripción:</label>
        <textarea id="descripcion" name="descripcion" placeholder="Escribe el nombre y modelo del equipo." required></textarea>
      </div>

      <div class="form-group full-width">
        <label for="necesidad">Necesidad o falla:</label>
        <textarea id="necesidad" name="necesidad" placeholder="Describe brevemente la falla o necesidad que presenta el equipo." required></textarea>
      </div>

      <div class="submit-button">
        <!-- Reutilizamos la clase global btn-pildora -->
        <input type="submit" value="Enviar" class="btn-pildora">
      </div>
    </form>
  </div>

  <script>
    function capitalizeFirstLetter(textarea) {
      let value = textarea.value;
      if (value.length > 0) {
        textarea.value = value.charAt(0).toUpperCase() + value.slice(1);
      }
    }

    document.addEventListener("DOMContentLoaded", function () {
      const descripcion = document.getElementById("descripcion");
      const necesidad = document.getElementById("necesidad");

      descripcion.addEventListener("input", function () {
        capitalizeFirstLetter(descripcion);
      });

      necesidad.addEventListener("input", function () {
        capitalizeFirstLetter(necesidad);
      });
    });
  </script>

<?php include 'footer.php'; ?>