<?php session_start(); ?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>TSGJ | Registrar Abastecimiento</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png">

  <!-- Bootstrap / Select2 / Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_ForAbastecimiento.css" />

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container mt-2">
  <a href="Adm_Gestion_Abastecimientos.php" class="btn btn-outline-primary btn-sm mb-2">
    <i class="bi bi-arrow-left"></i> Volver a gestión
  </a>

  <div class="card shadow-sm">
    <div class="card-header bg-primary text-white text-center rounded">
      <h5 class="mb-0">Registrar Control de Abastecimiento</h5>
    </div>

    <div class="card-body">
      <form action="../../Controlador/Ctrl_Administrador/MySQL_Agregar_Abastecimiento.php" method="post" id="Registrar_Abastecimiento" autocomplete="off" novalidate>
        <div class="row g-1">

          <!-- FILA 1 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="placa" class="form-label">Placa del Vehículo</label>
            <input type="text" id="placa" name="placa" maxlength="8" class="form-control form-control-sm" oninput="this.value=this.value.toUpperCase()" required>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="marca_vehiculo" class="form-label">Marca</label>
            <input type="text" id="marca_vehiculo" class="form-control form-control-sm" disabled>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="modelo_vehiculo" class="form-label">Modelo</label>
            <input type="text" id="modelo_vehiculo" class="form-control form-control-sm" disabled>
          </div>

          <!-- FILA 2 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="tipo_vehiculo" class="form-label">Tipo Vehículo</label>
            <input type="text" id="tipo_vehiculo" class="form-control form-control-sm" disabled>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="tipo_combustible" class="form-label">Tipo Combustible</label>
            <input type="text" id="tipo_combustible" class="form-control form-control-sm" disabled>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="capacidad_combustible" class="form-label">Capacidad de Combustible (GLN)</label>
            <input type="text" id="capacidad_combustible" class="form-control form-control-sm" disabled>
          </div>

          <!-- SOLO MIXTOS -->
          <input type="hidden" name="tipo_combustible_id" id="tipo_combustible_id">
          <div class="col-12 mb-1" id="grupo-combustible-abastecido" style="display:none;">
            <label class="form-label d-block">Combustible abastecido</label>
            <div id="opciones-combustible" class="d-flex flex-wrap gap-3"><!-- radios via JS --></div>
            <div class="small-help text-muted">
              Requerido para GLP/G-REGULAR, GLP/G-PREMIUM, GNV/G-REGULAR o GNV/G-PREMIUM.
            </div>
          </div>

          <!-- FILA 3 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="dni" class="form-label">DNI del Conductor</label>
            <input type="text" id="dni" name="dni" maxlength="8" pattern="[0-9]{8}" inputmode="numeric" class="form-control form-control-sm" required>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="nombre_chofer" class="form-label">Nombre del Conductor</label>
            <input type="text" id="nombre_chofer" class="form-control form-control-sm" disabled>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="grifo_id" class="form-label">Grifo</label>
            <select class="form-select form-select-sm" id="grifo_id" name="grifo_id" required>
              <option value="">Seleccione un grifo</option>
              <?php
              require_once '../../Controlador/Utilidades/Conexion_BD.php';
              require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Grifos.php';
              $conn = new Conexion_BD();
              $grifos = (new MostrarGrifos($conn))->ObtenerGrifosActivos();
              $conn->closeConnection();
              foreach ($grifos as $g): ?>
                <option value="<?= htmlspecialchars($g['id']) ?>"><?= htmlspecialchars($g['nombre']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>

          <!-- FILA 4 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="cantidad_gln" class="form-label">Cantidad GLN</label>
            <!-- Acepta hasta 5 decimales (se guarda), se mostrará con 2 -->
            <input
              type="number"
              name="cantidad_gln"
              id="cantidad_gln"
              class="form-control form-control-sm"
              step="0.00001"
              min="0"
              inputmode="decimal"
              pattern="^\d+([.]\d{1,5})?$"
              placeholder="Ej.: 10.46415"
              required
            >
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="valor_unitario_gln" class="form-label">Valor Unitario GLN</label>
            <input
              type="number"
              name="valor_unitario_gln"
              id="valor_unitario_gln"
              class="form-control form-control-sm"
              step="0.01"
              min="0"
              inputmode="decimal"
              placeholder="Ej.: 15.98"
              required
            >
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="kilometraje_actual" class="form-label">Último Kilometraje Registrado</label>
            <input type="number" id="kilometraje_actual" class="form-control form-control-sm" disabled>
          </div>

          <!-- FILA 5 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="kilometraje" class="form-label">Kilometraje del Abastecimiento</label>
            <input type="number" name="kilometraje" id="kilometraje" class="form-control form-control-sm" required>
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="numero_vale" class="form-label">N° Vale</label>
            <input
              type="text"
              name="numero_vale"
              id="numero_vale"
              maxlength="20"
              class="form-control form-control-sm"
              oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9\-\/]/g, '')"
              required
            >
          </div>
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="fecha_abastecimiento" class="form-label">Fecha</label>
            <input type="date" name="fecha_abastecimiento" id="fecha_abastecimiento" class="form-control form-control-sm" required>
          </div>

          <!-- FILA 6 -->
          <div class="col-6 col-md-4 col-lg-3 mb-1">
            <label for="hora_abastecimiento" class="form-label">Hora</label>
            <input type="time" name="hora_abastecimiento" id="hora_abastecimiento" class="form-control form-control-sm" required>
          </div>

          <!-- OCULTOS -->
          <input type="hidden" name="vehiculo_id" id="vehiculo_id">
          <input type="hidden" name="chofer_id" id="chofer_id">
          <input type="hidden" name="marca_id" id="marca_id">
          <input type="hidden" name="modelo_id" id="modelo_id">

          <div class="col-12 text-center mt-2">
            <button type="submit" id="btn-registrar" class="btn btn-success btn-sm px-4">Registrar</button>
            <button type="button" class="btn btn-borrar btn-sm px-4 ms-2" id="btn-borrar">Borrar Datos</button>
          </div>

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

<!-- Libs -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="../../Modelo/Archivos_JS/Formulario_Abastecimiento.js"></script>

<?php if (isset($_SESSION['error_abastecimiento'])): ?>
<script>
  Swal.fire({ icon: 'error', title: 'Error', text: <?= json_encode($_SESSION['error_abastecimiento']); ?> });
</script>
<?php unset($_SESSION['error_abastecimiento']); endif; ?>

</body>
</html>
