<?php
session_start();

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

$conn = new Conexion_BD();
$MostrarVehiculos = new MostrarVehiculos($conn);
$vehiculos = $MostrarVehiculos->ObtenerTodosLosVehiculos(); // <-- incluir fecha_estado_desde en el SELECT
$conn->closeConnection();

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

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

$estado_badges = [
  'activo'         => 'bg-success',
  'no_operativo'   => 'bg-warning',
  'mantenimiento'  => 'bg-primary',
  'desincorporado' => 'bg-danger'
];

function escape($val) {
  return htmlspecialchars($val ?? '', ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TSGJ - Tabla de Vehículos</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 Vehículos</h2>
    <div class="button-borders">
      <?php if ($tienePermisoAgregar): ?>
        <button class="button-name btn-add" type="button" onclick="location.href='Adm_Formulario_Flota.php'">
          Agregar Nuevo Vehículo +
        </button>
      <?php endif; ?>
      <!-- No recarga la página -->
      <button class="button-name" id="btnActualizarVehiculos" 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="tablaVehiculos" class="display nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>Placa</th>
          <th>Año</th>
          <th>Marca</th>
          <th>Modelo</th>
          <th>Tipo Vehículo</th>
          <th>Combustible</th>
          <th>Capacidad (GLN)</th>
          <th>Kilometraje Inicial</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 ($vehiculos as $v): ?>
      <?php
        $estado = strtolower($v['estado']);
        $label  = $estado_labels[$estado] ?? ucfirst($estado);
        $badge  = $estado_badges[$estado] ?? 'bg-secondary';
        $motivo = escape($v['motivo_estado'] ?? '');
        $fdesde = escape($v['fecha_estado_desde'] ?? '');
      ?>
      <div class="card mb-3 shadow-sm mx-2">
        <div class="card-body">
          <h5 class="card-title text-primary">
            <?= escape($v['placa']) . ' - ' . escape($v['modelo']) ?>
          </h5>
          <p class="card-text mb-1"><strong>Año:</strong> <?= escape($v['ano_fabricacion']) ?></p>
          <p class="card-text mb-1"><strong>Tipo:</strong> <?= escape($v['tipo_vehiculo']) ?></p>
          <p class="card-text mb-1"><strong>Combustible:</strong> <?= escape($v['tipo_combustible']) ?></p>
          <p class="card-text mb-1"><strong>Capacidad:</strong> <?= escape($v['capacidad_combustible']) ?> GLN</p>
          <p class="card-text mb-1"><strong>Kilometraje Inicial:</strong> <?= escape($v['kilometraje_inicial']) ?> KM</p>
          <p class="card-text mb-2">
            <strong>Estado:</strong>
            <span class="badge <?= $badge ?> cambiar-estado-vehiculo"
                  role="button"
                  data-id="<?= (int)$v['id'] ?>"
                  data-estado="<?= escape($estado) ?>"
                  data-motivo="<?= $motivo ?>"
                  data-fecha-desde="<?= $fdesde ?>"
                  data-modulo="vehiculos"
                  title="<?= $fdesde ? 'Desde: '.$fdesde : '' ?>">
              <?= $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_Vehiculo.php?IV=<?= (int)$v['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_Vehiculo.php?IPV=<?= urlencode($v['placa']) ?>"
                 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) ===================== -->
  <div class="modal fade" id="modalEstadoVehiculo" tabindex="-1" aria-labelledby="modalEstadoVehiculoLabel" 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="modalEstadoVehiculoLabel">
            <i class='bx bx-refresh me-2'></i> Cambiar Estado de Vehículo
          </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_vehiculo">

          <div class="mb-3">
            <label for="nuevo_estado" class="form-label">Nuevo estado</label>
            <select id="nuevo_estado" class="form-select">
              <option value="activo">Operativo</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" style="display:none;">
              <label for="fecha_cambio" class="form-label">Fecha de cambio</label>
              <input type="date" id="fecha_cambio" class="form-control">
            </div>
            <!-- Fecha cuando VUELVE a ACTIVO -->
            <div class="col-md-6" id="grp_fecha_regreso" style="display:none;">
              <label for="fecha_regreso" class="form-label">Fecha de regreso a Operativo</label>
              <input type="date" id="fecha_regreso" class="form-control">
            </div>
          </div>

          <div class="mb-3 mt-2" id="motivo_container" style="display:none;">
            <label for="motivo_estado" class="form-label">Motivo</label>
            <input type="text" id="motivo_estado" class="form-control" maxlength="255" placeholder="Describa el motivo">
          </div>

          <div class="text-end">
            <button id="btnGuardarEstadoVehiculo" class="btn btn-primary" type="button">
              <i class="bx bx-save me-1"></i> Guardar
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ===================== 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_Vehiculo.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Editar_Vehiculo.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Eliminar_Vehiculo.js"></script>

  <!-- Variables globales -->
  <script>
    // Para tarjetas (vista móvil) usamos esta data inicial del servidor:
    window.vehiculosData         = <?= json_encode($vehiculos, JSON_UNESCAPED_UNICODE) ?>; // incluye fecha_estado_desde si tu SELECT la trae
    window.tienePermisoReportes  = <?= $tienePermisoReportes ? 'true' : 'false' ?>;
    window.puedeEditar           = <?= $tienePermisoEditar   ? 'true' : 'false' ?>;
    window.puedeEliminar         = <?= $tienePermisoEliminar ? 'true' : 'false' ?>;
    window.puedeEstadoVehiculos  = <?= $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) ?>
      // logoBase64: 'data:image/png;base64,....'
    };
  </script>

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

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

</body>
</html>
