@extends('layouts.goberdata')

@section('title', 'Votantes')
@section('page_title', 'Votantes')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<!-- Header -->
            <header class="flex justify-between items-center p-6 bg-white border-b border-gray-200 shadow-sm">
                <h1 class="text-2xl font-semibold text-gray-800">Base de Datos de Votantes</h1>
                <div class="flex items-center space-x-4">
                    <button onclick="exportVoters()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                        <i class="fas fa-download mr-2"></i>Exportar
                    </button>
                    <button onclick="addVoter()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                        <i class="fas fa-plus mr-2"></i>Agregar Votante
                    </button>
                </div>
            </header>

            <!-- Main Content -->
            <main class="flex-1 bg-gray-100 p-3">
                <div class="w-full">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Total Votantes</p>
                                <i class="fas fa-users text-3xl opacity-50"></i>
                            </div>
                            <p id="totalVoters" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">En base de datos</p>
                        </div>
                        <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Contactados</p>
                                <i class="fas fa-phone text-3xl opacity-50"></i>
                            </div>
                            <p id="contactedVoters" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Últimos 30 días</p>
                        </div>
                        <div class="bg-gradient-to-br from-yellow-500 to-yellow-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Sin Contactar</p>
                                <i class="fas fa-exclamation-triangle text-3xl opacity-50"></i>
                            </div>
                            <p id="uncontactedVoters" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Requieren seguimiento</p>
                        </div>
                        <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Tasa de Contacto</p>
                                <i class="fas fa-percentage text-3xl opacity-50"></i>
                            </div>
                            <p id="contactRate" class="text-4xl font-bold">0%</p>
                            <p class="text-xs opacity-75 mt-1">Efectividad</p>
                        </div>
                    </div>

                    <!-- Charts Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Votantes por Intención</h3>
                            <div class="chart-container">
                                <canvas id="intentionChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Votantes por Edad</h3>
                            <div class="chart-container">
                                <canvas id="ageChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Filtros</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Intención de Voto</label>
                                <select id="intentionFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todas</option>
                                    <option value="high">Alta</option>
                                    <option value="medium">Media</option>
                                    <option value="low">Baja</option>
                                    <option value="unknown">Desconocida</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Nivel de Apoyo</label>
                                <select id="supportFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="strong">Fuerte</option>
                                    <option value="moderate">Moderado</option>
                                    <option value="weak">Débil</option>
                                    <option value="none">Ninguno</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Ciudad</label>
                                <select id="cityFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todas</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Estado de Contacto</label>
                                <select id="contactFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="contacted">Contactados</option>
                                    <option value="uncontacted">Sin contactar</option>
                                    <option value="recent">Recientes</option>
                                </select>
                            </div>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <button onclick="clearFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                                <i class="fas fa-times mr-2"></i>Limpiar Filtros
                            </button>
                            <button onclick="applyFilters()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                                <i class="fas fa-search mr-2"></i>Aplicar Filtros
                            </button>
                        </div>
                    </div>

                    <!-- Voters Table -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Lista de Votantes</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('name')">
                                            Nombre <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('email')">
                                            Email <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('city')">
                                            Ciudad <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('voting_likelihood')">
                                            Intención <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('support_level')">
                                            Apoyo <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('last_contact_at')">
                                            Último Contacto <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="votersTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination" class="mt-4 flex justify-between items-center">
                            <!-- Pagination will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        let currentPage = 1;
        let currentFilters = {};
        let currentSort = { field: 'name', order: 'asc' };

        document.addEventListener('DOMContentLoaded', function() {
            loadDashboardData();
            loadVoters();
        });

        async function loadDashboardData() {
            try {
                const response = await fetch('/api/voters/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Voters Dashboard Data:', data);

                // Update stats cards
                document.getElementById('totalVoters').textContent = data.stats.total_voters.toLocaleString();
                document.getElementById('contactedVoters').textContent = data.stats.contacted_voters.toLocaleString();
                document.getElementById('uncontactedVoters').textContent = data.stats.uncontacted_voters.toLocaleString();
                document.getElementById('contactRate').textContent = data.stats.contact_rate + '%';

                // Render charts
                renderIntentionChart(data.voters_by_intention);
                renderAgeChart(data.voters_by_age);

                // Populate city filter
                populateCityFilter(data.voters_by_city);

            } catch (error) {
                console.error('Error loading voters dashboard data:', error);
                alert('Error al cargar los datos de votantes. Por favor, intente de nuevo.');
            }
        }

        async function loadVoters() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    per_page: 25,
                    sort_by: currentSort.field,
                    sort_order: currentSort.order,
                    ...currentFilters
                });

                const response = await fetch(`/api/voters?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Voters Data:', data);

                // Populate table
                const tbody = document.getElementById('votersTableBody');
                tbody.innerHTML = '';
                
                data.data.forEach(voter => {
                    const row = `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${voter.name}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${voter.email || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${voter.city || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full ${getVotingLikelihoodBadge(voter.voting_likelihood)}">
                                    ${voter.voting_likelihood || 'unknown'}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full ${getSupportLevelBadge(voter.support_level)}">
                                    ${voter.support_level || 'unknown'}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${voter.last_contact_at ? new Date(voter.last_contact_at).toLocaleDateString() : 'Nunca'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="viewVoter(${voter.id})" class="text-blue-600 hover:text-blue-900 mr-2">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="editVoter(${voter.id})" class="text-green-600 hover:text-green-900 mr-2">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="contactVoter(${voter.id})" class="text-purple-600 hover:text-purple-900">
                                    <i class="fas fa-phone"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });

                // Update pagination
                updatePagination(data);

            } catch (error) {
                console.error('Error loading voters:', error);
                alert('Error al cargar la lista de votantes. Por favor, intente de nuevo.');
            }
        }

        function renderIntentionChart(data) {
            const ctx = document.getElementById('intentionChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.map(item => item.voting_likelihood),
                    datasets: [{
                        data: data.map(item => item.count),
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function renderAgeChart(data) {
            const ctx = document.getElementById('ageChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(item => item.age_group),
                    datasets: [{
                        label: 'Votantes',
                        data: data.map(item => item.count),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function populateCityFilter(cities) {
            const select = document.getElementById('cityFilter');
            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city.name;
                option.textContent = city.name;
                select.appendChild(option);
            });
        }

        function getVotingLikelihoodBadge(likelihood) {
            const badges = {
                'high': 'bg-green-100 text-green-800',
                'medium': 'bg-yellow-100 text-yellow-800',
                'low': 'bg-red-100 text-red-800',
                'unknown': 'bg-gray-100 text-gray-800'
            };
            return badges[likelihood] || 'bg-gray-100 text-gray-800';
        }

        function getSupportLevelBadge(level) {
            const badges = {
                'strong': 'bg-green-100 text-green-800',
                'moderate': 'bg-blue-100 text-blue-800',
                'weak': 'bg-yellow-100 text-yellow-800',
                'none': 'bg-red-100 text-red-800',
                'unknown': 'bg-gray-100 text-gray-800'
            };
            return badges[level] || 'bg-gray-100 text-gray-800';
        }

        function applyFilters() {
            currentFilters = {
                voting_likelihood: document.getElementById('intentionFilter').value,
                support_level: document.getElementById('supportFilter').value,
                city: document.getElementById('cityFilter').value,
                contact_status: document.getElementById('contactFilter').value
            };
            
            // Remove empty filters
            Object.keys(currentFilters).forEach(key => {
                if (!currentFilters[key]) {
                    delete currentFilters[key];
                }
            });
            
            currentPage = 1;
            loadVoters();
        }

        function clearFilters() {
            document.getElementById('intentionFilter').value = '';
            document.getElementById('supportFilter').value = '';
            document.getElementById('cityFilter').value = '';
            document.getElementById('contactFilter').value = '';
            currentFilters = {};
            currentPage = 1;
            loadVoters();
        }

        function sortTable(field) {
            if (currentSort.field === field) {
                currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.field = field;
                currentSort.order = 'asc';
            }
            loadVoters();
        }

        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            const totalPages = data.last_page;
            
            let paginationHTML = `
                <div class="text-sm text-gray-700">
                    Mostrando ${data.from || 0} a ${data.to || 0} de ${data.total} resultados
                </div>
                <div class="flex space-x-2">
            `;
            
            if (data.prev_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page - 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Anterior</button>`;
            }
            
            for (let i = 1; i <= Math.min(totalPages, 5); i++) {
                const activeClass = i === data.current_page ? 'bg-blue-500 text-white' : 'border border-gray-300 hover:bg-gray-50';
                paginationHTML += `<button onclick="changePage(${i})" class="px-3 py-1 rounded ${activeClass}">${i}</button>`;
            }
            
            if (data.next_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page + 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Siguiente</button>`;
            }
            
            paginationHTML += '</div>';
            pagination.innerHTML = paginationHTML;
        }

        function changePage(page) {
            currentPage = page;
            loadVoters();
        }

        function viewVoter(id) {
            alert(`Ver votante ${id} - Funcionalidad pendiente`);
        }

        function editVoter(id) {
            alert(`Editar votante ${id} - Funcionalidad pendiente`);
        }

        function contactVoter(id) {
            alert(`Contactar votante ${id} - Funcionalidad pendiente`);
        }

        function addVoter() {
            alert('Agregar votante - Funcionalidad pendiente');
        }

        function exportVoters() {
            alert('Exportar votantes - Funcionalidad pendiente');
        }
    </script>
@endpush