<?php 
session_start();
require_once '../../Controlador/Utilidades/Conexion_BD.php';
require_once '../../Controlador/Utilidades/Permisos.php';
require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Rutas.php';

$conn = new Conexion_BD();
$MostrarRutas = new MostrarRutas($conn);
$rutas = $MostrarRutas->ObtenerTodasLasRutas(); // carga inicial para la vista tarjetas
$conn->closeConnection();

$tienePermisoAgregar  = tienePermiso('rutas', 'puede_agregar');
$tienePermisoEditar   = tienePermiso('rutas', 'puede_editar');
$tienePermisoEliminar = tienePermiso('rutas', 'puede_eliminar');
$tienePermisoReportes = tienePermiso('rutas', 'puede_reportes');
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TSGJ - Gestión de Rutas</title>
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

  <!-- CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" />
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_table_Gestion.css" />
</head>
<body>

  <div class="container my-4">
    <h2 class="text-center">Tabla Gestión de Rutas</h2>
    <div class="button-borders">
      <?php if ($tienePermisoAgregar): ?>
        <button class="button-name" onclick="location.href='Adm_Formulario_Ruta.php'">
          Agregar Nueva Ruta +
        </button>
      <?php endif; ?>
      <!-- Importante: no recargamos la página, solo recargamos los datos -->
      <button class="button-name" id="btnActualizarRutas" type="button">Actualizar</button>

    </div>
  </div>

  <!-- Toggle para móvil -->
  <div class="d-md-none text-center mb-3">
    <button class="btn btn-primary" id="toggleViewBtn">Ver como tarjetas</button>
  </div>

  <!-- ===================== VISTA TABLA (≥768px) ===================== -->
  <div class="table-responsive d-none d-md-block" id="tablaResponsive">
    <table id="tablaRutas" class="table table-striped table-bordered nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Kilometraje</th>
          <th>Descripción</th>
          <th>Enlace Google Maps</th>
          <th>Opciones</th>
        </tr>
      </thead>
      <tbody>
        <!-- El cuerpo lo rellena DataTables por AJAX o queda como HTML inicial si quieres -->
      </tbody>
    </table>
  </div>

  <!-- ===================== VISTA TARJETAS (<768px) ===================== -->
  <!-- Queda oculta por defecto, y no ocupa espacio si está vacía -->
  <div id="tarjetasResponsive" class="d-none px-2">
    <?php foreach ($rutas as $r): ?>
      <div class="card mb-3 shadow-sm">
        <div class="card-body">
          <h5 class="card-title text-primary"><?= htmlspecialchars($r["nombre_ruta"]) ?></h5>
          <p class="card-text"><strong>Kilometraje:</strong> <?= htmlspecialchars($r["km_estimado"]) ?> km</p>
          <p class="card-text"><strong>Descripción:</strong> <?= htmlspecialchars($r["descripcion"]) ?></p>
          <p class="card-text">
            <strong>Mapa:</strong><br>
            <?php if (!empty($r["enlace_mapa"])): ?>
              <a href="<?= htmlspecialchars($r["enlace_mapa"]) ?>"
                 class="btn btn-sm btn-outline-info w-100"
                 target="_blank">
                <i class="bx bx-map"></i> Ver en Mapa
              </a>
            <?php else: ?>
              <span class="text-muted">No disponible</span>
            <?php endif; ?>
          </p>
          <div class="d-flex justify-content-between">
            <?php if ($tienePermisoEditar): ?>
              <a href="Adm_Editar_Ruta.php?IDR=<?= $r["id"] ?>"
                 class="btn btn-sm btn-outline-primary">
                <i class="bx bx-edit"></i> Editar
              </a>
            <?php endif; ?>
            <?php if ($tienePermisoEliminar): ?>
              <a href="../../Controlador/Ctrl_Administrador/MySQL_Borrar_Ruta.php?IDR=<?= $r["id"] ?>"
                 class="btn btn-sm btn-outline-danger">
                <i class="bx bx-trash"></i> Eliminar
              </a>
            <?php endif; ?>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>

  <!-- Variables JS globales -->
  <script>
    window.puedeEditar   = <?= $tienePermisoEditar   ? 'true':'false'?>;
    window.puedeEliminar = <?= $tienePermisoEliminar ? 'true':'false'?>;
    window.puedeReportes   = <?= $tienePermisoReportes   ? 'true':'false'?>; 
    window.empresaInfo   = {
      nombre: 'TRANSPORTES Y SERVICIOS GENERALES JULIA EIRL',
      ruc:    '20526269510',
      usuario:<?= json_encode($_SESSION['usuario'] ?? '')?>,
      cargo:   <?= json_encode($_SESSION['rol']    ?? '')?>
    };
  </script>

  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <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="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

  <!-- Inicialización DataTable y lógica -->
  <script src="../../Modelo/Archivos_JS/DataTable_Rutas.js"></script>
  <script src="../../Modelo/Archivos_JS/Gestion_Rutas.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Agregar_Ruta.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Editar_Ruta.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Eliminar_Ruta.js"></script>

  <?php if (isset($_SESSION['error_eliminar_ruta'])): ?>
    <script>
      Swal.fire({
        icon: 'warning',
        title: 'Acción no permitida',
        text: '<?= $_SESSION['error_eliminar_ruta'] ?>'
      });
    </script>
  <?php unset($_SESSION['error_eliminar_ruta']); endif; ?>
</body>
</html>
