@extends("intranet/layout2")
@section('title', 'Historial Encuesta')

@section("content2")
<div class="container my-5">
    <h1 class="text-center mb-4">Registro Histórico de Encuestas</h1>

    <!-- Filter Section -->
    <div class="filter-section mb-4">
        <form id="filterForm" class="row g-3">
            <div class="col-md-3">
                <label for="districtFilter" class="form-label">Distrito</label>
                <select id="districtFilter" class="form-select">
                    <option value="">Todos los distritos</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="dateFromFilter" class="form-label">Fecha Desde</label>
                <input type="date" id="dateFromFilter" class="form-control">
            </div>
            <div class="col-md-3">
                <label for="dateToFilter" class="form-label">Fecha Hasta</label>
                <input type="date" id="dateToFilter" class="form-control">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <div class="btn-group w-100">
                    <button type="button" class="btn btn-primary" onclick="applyFilters()">Filtrar</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearFilters()">Limpiar</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Loading Spinner -->
    <div id="loadingSpinner" class="text-center py-3" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Cargando...</span>
        </div>
    </div>

    <!-- Survey Table -->
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead class="table-dark">
                <tr>
                    <th>ID Encuesta</th>
                    <th>Sector</th>
                    <th>Fecha</th>
                    <th>Distrito</th>
                    <th>Encuestador</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody id="surveyTableBody">
                <!-- Data will be loaded here -->
            </tbody>
        </table>
    </div>

    <!-- Empty State -->
    <div id="emptyState" class="text-center py-4" style="display: none;">
        <i class="fas fa-search fa-3x text-muted mb-3"></i>
        <p class="text-muted">No se encontraron encuestas</p>
    </div>

    <!-- Pagination -->
    <nav aria-label="Paginación">
        <ul class="pagination justify-content-center" id="pagination">
            <!-- Pagination will be generated here -->
        </ul>
    </nav>
</div>

<!-- Include the enhanced JavaScript -->
@vite(['resources/js/intranet/apphistory.js', 'resources/css/styleshistory.css'])

@endsection