<?php session_start(); ?>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TSGJ | Registro de Vehículos</title>
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  <!-- CSS personalizado -->
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_ForFlota.css" />
</head>

<body>

  <?php
  require_once '../../Controlador/Utilidades/Conexion_BD.php';
  $connMySQL = new Conexion_BD();

  $dataTipoVehiculosSelect = $connMySQL->executeQuery("SELECT * FROM tipovehiculo ORDER BY id");
  $dataTipoCombustibleSelect = $connMySQL->executeQuery("SELECT * FROM tipocombustible ORDER BY id");
  ?>

  <div class="container my-5">
    <a href="Adm_Gestion_Vehicular.php" class="btn btn-outline-primary mb-3">
      <i class="bi bi-arrow-left"></i> Volver a gestión de vehículos
    </a>

    <div class="card shadow">
      <div class="card-header bg-primary text-white text-center">
        <h4>Registrar Nuevo Vehículo</h4>
      </div>

      <div class="card-body">
        <form action="../../Controlador/Ctrl_Administrador/MySQL_Registro_Flota.php" method="post"
          id="Registrar_Vehiculo" novalidate>
          <div class="row g-3">

            <div class="col-md-6">
              <label for="placa" class="form-label">Placa</label>
              <input type="text" class="form-control" id="placa" name="placa" maxlength="6"
                onkeyup="convertirAMayusculas(this)">
            </div>

            <div class="col-md-6">
              <label for="ano" class="form-label">Año de fabricación</label>
              <input type="text" class="form-control" id="ano" name="ano_fabricacion" maxlength="4">
            </div>

            <div class="col-md-6">
              <label for="marca" class="form-label">Marca</label>
              <input type="text" class="form-control" id="marca" name="marca" onkeyup="convertirAMayusculas(this)">
            </div>

            <div class="col-md-6">
              <label for="modelo" class="form-label">Modelo</label>
              <input type="text" class="form-control" id="modelo" name="modelo" onkeyup="convertirAMayusculas(this)">
            </div>

            <div class="col-md-6">
              <label for="tipo_vehiculo_id" class="form-label">Tipo de vehículo</label>
              <select name="tipo_vehiculo_id" id="tipo_vehiculo_id" class="form-select">
                <option value="">Seleccionar</option>
                <?php while ($dataSelect = mysqli_fetch_array($dataTipoVehiculosSelect)): ?>
                  <option value="<?= $dataSelect["id"] ?>"><?= utf8_encode($dataSelect["vehiculotipo"]) ?></option>
                <?php endwhile; ?>
              </select>
            </div>

            <div class="col-md-6">
              <label for="tipo_combustible_id" class="form-label">Tipo de combustible</label>
              <select name="tipo_combustible_id" id="tipo_combustible_id" class="form-select">
                <option value="">Seleccionar</option>
                <?php while ($dataSelect = mysqli_fetch_array($dataTipoCombustibleSelect)): ?>
                  <option value="<?= $dataSelect["id"] ?>"><?= utf8_encode($dataSelect["combustibletipo"]) ?></option>
                <?php endwhile; ?>
              </select>
            </div>

            <div class="col-md-6">
              <label for="capacidad_combustible" class="form-label">Capacidad de Combustible (GL)</label>
              <input type="number" step="0.01" min="0" class="form-control" id="capacidad_combustible" name="capacidad_combustible" required>

            </div>

            <div class="col-md-6">
              <label for="kilometraje_inicial" class="form-label">Kilometraje Inicial</label>
              <input type="number" class="form-control" id="kilometraje_inicial" name="kilometraje_inicial" min="0"
                placeholder="Ej. 154000">
            </div>

            <div class="col-12 text-center mt-4">
              <div class="d-flex justify-content-center gap-3 flex-wrap">
                <button type="submit" class="btn btn-success px-4">Agregar Vehículo</button>
                <button type="button" class="btn btn-outline-danger px-4" id="btn-reset">Borrar Datos</button>
              </div>
            </div>

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

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="../../Modelo/Archivos_JS/Validacion_Escribir.js"></script>
  <script src="../../Modelo/Archivos_JS/Validacion_Agregar_Vehiculo.js"></script>
  <script>
  document.getElementById("Registrar_Vehiculo").addEventListener("submit", function (e) {
    const capacidad = document.getElementById("capacidad_combustible").value;
    console.log("Capacidad enviada:", capacidad);
  });
</script>


  <?php if (isset($_SESSION['error_placa'])): ?>
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Registro fallido',
        text: '<?= $_SESSION['error_placa'] ?>',
        confirmButtonText: 'Aceptar'
      });
    </script>
    <?php unset($_SESSION['error_placa']); ?>
  <?php endif; ?>

</body>

</html>
