<?php
// Simulación de datos de FAQs
$faqs = [
[
'id' => 1,
'question' => "¿Cómo puedo realizar un pedido?",
'answer' => "Para realizar un pedido, sigue estos pasos: 1) Selecciona los productos que deseas, 2) Ve a tu carrito de compras, 3) Completa tus datos de envío, 4) Elige método de pago, 5) Confirma tu compra.",
'category' => "Pedidos",
'isVisible' => true,
'helpfulCount' => 24,
'notHelpfulCount' => 3,
'createdAt' => "2023-05-15"
],
// Agrega más FAQs aquí...
];
// Variables para filtros y paginación
$searchQuery = $_GET['search'] ?? '';
$categoryFilter = $_GET['category'] ?? '';
$sortField = $_GET['sort'] ?? 'createdAt';
$sortOrder = $_GET['order'] ?? 'desc';
$currentPage = max(1, intval($_GET['page'] ?? 1));
$itemsPerPage = intval($_GET['per_page'] ?? 5);
// Filtrar FAQs
$filteredFaqs = array_filter($faqs, function($faq) use ($searchQuery, $categoryFilter) {
$matchesSearch = empty($searchQuery) || stripos($faq['question'], $searchQuery) !== false || stripos($faq['answer'], $searchQuery) !== false;
$matchesCategory = empty($categoryFilter) || $faq['category'] === $categoryFilter;
return $matchesSearch && $matchesCategory;
});
// Ordenar FAQs
usort($filteredFaqs, function($a, $b) use ($sortField, $sortOrder) {
$modifier = $sortOrder === 'asc' ? 1 : -1;
return $modifier * strcmp($a[$sortField], $b[$sortField]);
});
// Paginación
$totalFaqs = count($filteredFaqs);
$totalPages = ceil($totalFaqs / $itemsPerPage);
$offset = ($currentPage - 1) * $itemsPerPage;
$paginatedFaqs = array_slice($filteredFaqs, $offset, $itemsPerPage);
// Categorías únicas
$allCategories = array_unique(array_column($faqs, 'category'));
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administración de FAQs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* Incluye aquí los estilos CSS del componente Vue */
.admin-faq-container { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ffffff; }
.admin-title { text-align: center; color: #1f2937; margin-bottom: 2rem; font-size: 2rem; }
.add-button { background-color: #3b82f6; color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-weight: bold; }
.faq-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.faq-table th, .faq-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
.faq-table th { background-color: #f3f4f6; font-weight: bold; }
.pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.pagination-button { padding: 0.5rem 1rem; border: 1px solid #e5e7eb; background-color: #ffffff; cursor: pointer; border-radius: 4px; }
</style>
</head>
<body>
<div class="admin-faq-container">
<h1 class="admin-title">Administración de Preguntas Frecuentes</h1>
<!-- Filtros -->
<form method="GET" class="search-filter">
<input type="text" name="search" value="<?= htmlspecialchars($searchQuery) ?>" placeholder="Buscar FAQs..." class="search-input">
<select name="category" class="category-select">
<option value="">Todas las categorías</option>
<?php foreach ($allCategories as $category): ?>
<option value="<?= htmlspecialchars($category) ?>" <?= $category === $categoryFilter ? 'selected' : '' ?>>
<?= htmlspecialchars($category) ?>
</option>
<?php endforeach; ?>
</select>
<button type="submit" class="add-button">Filtrar</button>
</form>
<!-- Tabla de FAQs -->
<table class="faq-table">
<thead>
<tr>
<th><a href="?sort=question&order=<?= $sortOrder === 'asc' ? 'desc' : 'asc' ?>">Pregunta</a></th>
<th><a href="?sort=category&order=<?= $sortOrder === 'asc' ? 'desc' : 'asc' ?>">Categoría</a></th>
<th>Respuesta</th>
<th>Útil</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php foreach ($paginatedFaqs as $faq): ?>
<tr>
<td><?= htmlspecialchars($faq['question']) ?></td>
<td><?= htmlspecialchars($faq['category']) ?></td>
<td><?= htmlspecialchars($faq['answer']) ?></td>
<td><?= $faq['helpfulCount'] ?> 👍 / <?= $faq['notHelpfulCount'] ?> 👎</td>
<td>
<button class="edit-button">Editar</button>
<button class="delete-button">Eliminar</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<!-- Paginación -->
<div class="pagination-controls">
<a href="?page=<?= max(1, $currentPage - 1) ?>" class="pagination-button" <?= $currentPage === 1 ? 'disabled' : '' ?>>Anterior</a>
<span>Página <?= $currentPage ?> de <?= $totalPages ?></span>
<a href="?page=<?= min($totalPages, $currentPage + 1) ?>" class="pagination-button" <?= $currentPage === $totalPages ? 'disabled' : '' ?>>Siguiente</a>
</div>
</div>
</body>
</html>