<?php
session_start();

require_once '../../Controlador/Utilidades/Conexion_BD.php';
require_once '../../Controlador/Utilidades/Permisos.php';
require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Galoneras.php';

$conn = new Conexion_BD();
$MostrarGaloneras = new MostrarGaloneras($conn);
$galoneras = $MostrarGaloneras->ObtenerTodasLasGaloneras(); // Debe incluir fecha_estado_desde en el SELECT si lo manejas
$conn->closeConnection();

$tienePermisoAgregar   = tienePermiso('galoneras', 'puede_agregar');
$tienePermisoEditar    = tienePermiso('galoneras', 'puede_editar');
$tienePermisoEliminar  = tienePermiso('galoneras', 'puede_eliminar');
$tienePermisoReportes  = tienePermiso('galoneras', 'puede_reportes');
$tienePermisoEstado    = tienePermiso('galoneras', 'puede_estado');

$estado_labels = [
  'activo'         => 'Activo',
  'no_operativo'   => 'No operativo',
  'mantenimiento'  => 'Mantenimiento',
  'desincorporado' => 'Desincorporado'
];

$estado_badges = [
  'activo'         => 'bg-success',
  'no_operativo'   => 'bg-warning',
  'mantenimiento'  => 'bg-primary',
  'desincorporado' => 'bg-danger'
];
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TSGJ - Gestión de Galoneras</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">
    <h2 class="my-4">Tabla Gestión de Galoneras</h2>
    <div class="button-borders">
      <?php if ($tienePermisoAgregar): ?>
        <button class="button-name btn-add" type="button" onclick="location.href='Adm_Formulario_Galonera.php'">
          Registrar Galonera +
        </button>
      <?php endif; ?>
      <!-- No recarga la página -->
      <button class="button-name" id="btnActualizarGaloneras" type="button">Actualizar</button>
    </div>
  </div>

  <div class="d-md-none text-center my-3">
    <button class="btn btn-primary" id="toggleViewBtn" type="button">Ver como tarjetas</button>
  </div>

  <!-- ===================== TABLA (≥768px) ===================== -->
  <div class="table-wrapper d-none d-md-block" id="tablaResponsive">
    <table id="tablaGaloneras" class="display nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>Código</th>
          <th>Capacidad (GNL)</th>
          <th>Tipo combustible</th>
          <th>Estado</th>
          <th>Opciones</th>
        </tr>
      </thead>
      <tbody>
        <!-- Vacío a propósito: lo llena DataTables por AJAX -->
      </tbody>
    </table>
  </div>

  <!-- ===================== TARJETAS (<768px) ===================== -->
  <div id="tarjetasResponsive" class="d-none">
    <?php foreach ($galoneras as $g): ?>
      <?php
        $estado = strtolower($g['estado'] ?? '');
        $label  = $estado_labels[$estado] ?? ucfirst($estado);
        $badge  = $estado_badges[$estado] ?? 'bg-secondary';
        $motivo = htmlspecialchars($g['motivo_estado'] ?? '');
        $fdesde = htmlspecialchars($g['fecha_estado_desde'] ?? '');
      ?>
      <div class="card mb-3 shadow-sm mx-2">
        <div class="card-body">
          <h5 class="card-title text-primary"><?= htmlspecialchars($g['codigo'] ?? '') ?></h5>
          <p class="card-text mb-1"><strong>Capacidad:</strong> <?= number_format((float)($g['capacidad_litros'] ?? 0), 2) ?> GLN</p>
          <?php
  // Nombre desde el JOIN; si no llegó, usa un fallback con el ID
  $tipoNombre = trim((string)($g['tipo_combustible_nombre'] ?? ''));
  if ($tipoNombre === '') {
    $map = [1 => 'DIESEL B5 (DB5)', 2 => 'G-REGULAR', 3 => 'G-PREMIUM'];
    $idTipo = isset($g['tipo_combustible_id']) ? (int)$g['tipo_combustible_id'] : null;
    $tipoNombre = $idTipo !== null ? ($map[$idTipo] ?? '—') : '—';
  }
?>
<p class="card-text mb-1">
  <strong>Tipo combustible:</strong> <?= htmlspecialchars($tipoNombre) ?>
</p>

          <p class="card-text mb-2">
            <strong>Estado:</strong>
            <span class="badge <?= $badge ?> <?= $tienePermisoEstado ? 'cambiar-estado-galonera' : '' ?>"
                  <?php if ($tienePermisoEstado): ?>
                    role="button"
                    data-id="<?= (int)$g['id'] ?>"
                    data-estado="<?= htmlspecialchars($estado) ?>"
                    data-motivo="<?= $motivo ?>"
                    data-fecha-desde="<?= $fdesde ?>"
                    data-modulo="galoneras"
                    title="<?= $fdesde ? 'Desde: '.$fdesde : '' ?>"
                  <?php endif; ?>>
              <?= $label ?>
            </span>
          </p>
          <?php if (!empty($motivo)): ?>
            <p class="card-text mb-1"><strong>Motivo:</strong> <?= $motivo ?></p>
          <?php endif; ?>
          <div class="d-flex justify-content-between">
            <?php if ($tienePermisoEditar): ?>
              <a href="Adm_Editar_Galonera.php?IDG=<?= (int)$g['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_Galonera.php?IDG=<?= (int)$g['id'] ?>"
                 class="btn btn-sm btn-outline-danger">
                <i class="bx bx-trash"></i> Eliminar
              </a>
            <?php endif; ?>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>

  <!-- ===================== MODAL CAMBIO ESTADO (con fechas) ===================== -->
  <?php if ($tienePermisoEstado): ?>
  <div class="modal fade" id="modalEstadoGalonera" tabindex="-1" aria-labelledby="modalEstadoGaloneraLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="modalEstadoGaloneraLabel">
            <i class='bx bx-refresh me-2'></i> Cambiar Estado de la Galonera
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="estado_id_galonera">

          <div class="mb-3">
            <label for="nuevo_estado_galonera" class="form-label">Nuevo estado</label>
            <select id="nuevo_estado_galonera" class="form-select">
              <option value="activo">Activo</option>
              <option value="no_operativo">No operativo</option>
              <option value="mantenimiento">Mantenimiento</option>
              <option value="desincorporado">Desincorporado</option>
            </select>
          </div>

          <div class="row g-2">
            <!-- Fecha cuando SALE de ACTIVO -->
            <div class="col-md-6" id="grp_fecha_cambio_galonera" style="display:none;">
              <label for="fecha_cambio_galonera" class="form-label">Fecha de cambio</label>
              <input type="date" id="fecha_cambio_galonera" class="form-control">
            </div>
            <!-- Fecha cuando VUELVE a ACTIVO -->
            <div class="col-md-6" id="grp_fecha_regreso_galonera" style="display:none;">
              <label for="fecha_regreso_galonera" class="form-label">Fecha de regreso a ACTIVO</label>
              <input type="date" id="fecha_regreso_galonera" class="form-control">
            </div>
          </div>

          <div class="mb-3 mt-2" id="motivo_container_galonera" style="display:none;">
            <label for="motivo_estado_galonera" class="form-label">Motivo</label>
            <input type="text" id="motivo_estado_galonera" class="form-control" maxlength="255" placeholder="Obligatorio">
          </div>

          <div class="text-end">
            <button id="btnGuardarEstadoGalonera" class="btn btn-primary" type="button">
              <i class="bx bx-save me-1"></i> Guardar
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- ===================== JS (al final) ===================== -->
  <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>

  <!-- Notificaciones -->
  <script src="../../Modelo/Archivos_JS/Notifi_Agregar_Galonera.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Editar_Galonera.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Eliminar_Galonera.js"></script>

  <!-- Variables globales -->
  <script>
    window.galonerasData        = <?= json_encode($galoneras, JSON_UNESCAPED_UNICODE) ?>; // para tarjetas
    window.tienePermisoReportes = <?= $tienePermisoReportes ? 'true' : 'false' ?>;
    window.puedeEditar          = <?= $tienePermisoEditar   ? 'true' : 'false' ?>;
    window.puedeEliminar        = <?= $tienePermisoEliminar ? 'true' : 'false' ?>;
    window.puedeEstadoGaloneras = <?= $tienePermisoEstado   ? 'true' : 'false' ?>;
    window.empresaInfo          = {
      nombre: 'TRANSPORTES Y SERVICIOS GENERALES JULIA EIRL',
      ruc:    '20526269510',
      usuario: <?= json_encode($_SESSION['usuario'] ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>,
      cargo:   <?= json_encode($_SESSION['rol']     ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>
    };
    window.ESTADO_BADGES_GALONERA = <?= json_encode($estado_badges, JSON_UNESCAPED_UNICODE) ?>;
  </script>

  <!-- Lógica DataTable + Gestión (en ese orden) -->
  <script src="../../Modelo/Archivos_JS/DataTable_Galoneras.js"></script>
  <script src="../../Modelo/Archivos_JS/Gestion_Galoneras.js"></script>

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

</body>
</html>
