<?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 Rutas</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_table_Gestion.css" />
</head>

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

    <div class="card shadow">
      <div class="card-header bg-primary text-white text-center">
        <h4>Registrar Nueva Ruta</h4>
      </div>

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

            <div class="col-md-6">
              <label for="nombre_ruta" class="form-label">Nombre de la Ruta</label>
              <input type="text" class="form-control" id="nombre_ruta" name="nombre_ruta"
                     oninput="this.value = this.value.toUpperCase();" required />
              <div class="invalid-feedback"></div>
            </div>

            <div class="col-md-6">
              <label for="km_estimado" class="form-label">Kilometraje Estimado (km)</label>
              <input type="number" class="form-control" id="km_estimado" name="km_estimado"
                     min="0" step="0.01" required />
              <div class="invalid-feedback"></div>
            </div>

            <div class="col-md-12">
              <label for="descripcion" class="form-label">Descripción de Ruta</label>
              <textarea class="form-control" id="descripcion" name="descripcion" rows="3"
                        oninput="this.value = this.value.toUpperCase();"></textarea>
              <div class="invalid-feedback"></div>
            </div>

            <div class="col-md-12">
              <label for="enlace_mapa" class="form-label">Enlace de Ruta (Google Maps)</label>
              <input type="url" class="form-control" id="enlace_mapa" name="enlace_mapa"
                     placeholder="https://www.google.com/maps/..." />
              
              <div class="invalid-feedback"></div>
            </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">
                  <i class="bi bi-plus-circle"></i> Agregar Ruta
                </button>
                <button type="button" class="btn btn-outline-danger px-4" id="btn-reset">
                  <i class="bi bi-x-circle"></i> Borrar Datos
                </button>
              </div>
            </div>

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

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="../../Modelo/Archivos_JS/Validacion_Agregar_Ruta.js"></script>
  <script>
    // Borrar formulario
    document.getElementById("btn-reset").addEventListener("click", function () {
      document.getElementById("Registrar_Ruta").reset();
    });
  </script>

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