@extends('layouts.goberdata')

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

@push('styles')
<style>
        #map {
            height: 500px;
            border-radius: 12px;
            z-index: 1;
        }
        .zone-marker {
            background: #ef4444;
            border: 2px solid white;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        /* Asegurar que el mapa no se superponga al sidebar */
        .leaflet-container {
            z-index: 1 !important;
        }
        .leaflet-control-container {
            z-index: 2 !important;
        }
    </style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@endpush

@section('content')
<div id="app" class="min-h-screen">
        <!-- Sidebar -->
<div class="flex flex-col">
            <!-- Header -->
            <header class="flex justify-between items-center p-6 gd-header shadow-sm">
                <div class="flex items-center space-x-4">
                    <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-teal-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🗺️ Mapa Electoral Global
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Super Admin</span>
                    <i class="fas fa-user-circle text-white text-2xl"></i>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
                    <!-- Estadísticas Globales -->
                    <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-red-500 to-red-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 Zonas</p>
                                <i class="fas fa-map-marker-alt text-3xl opacity-50"></i>
                            </div>
                            <p id="statZones" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Electorales</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">Puestos</p>
                                <i class="fas fa-vote-yea text-3xl opacity-50"></i>
                            </div>
                            <p id="statPolling" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">De Votación</p>
                        </div>
                        <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">Población</p>
                                <i class="fas fa-users text-3xl opacity-50"></i>
                            </div>
                            <p id="statPopulation" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Total</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">Votantes</p>
                                <i class="fas fa-user-check text-3xl opacity-50"></i>
                            </div>
                            <p id="statVoters" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Registrados</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">Zonas por Campaña</h3>
                            <div class="chart-container">
                                <canvas id="chartByCampaign"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Zonas por Ciudad (Top 10)</h3>
                            <div class="chart-container">
                                <canvas id="chartByCity"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Mapa Interactivo -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Mapa Interactivo - Zonas Electorales</h3>
                        <div id="map" class="shadow-lg"></div>
                        <div class="mt-4 text-sm text-gray-600">
                            <strong>Fuente de datos:</strong> Base de datos electoral con zonas registradas por campañas.
                            <br><strong>Cómo leer el mapa:</strong> Los puntos rojos muestran las zonas electorales registradas. Click en cada punto para ver detalles.
                        </div>
                    </div>

                    <!-- Tabla de Ciudades -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Detalle por Ciudad</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">Ciudad</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zonas</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Población</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Votantes</th>
                                    </tr>
                                </thead>
                                <tbody id="citiesTable" class="bg-white divide-y divide-gray-200">
                                    <!-- Se llenará dinámicamente -->
                                </tbody>
                            </table>
        </div>
    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

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

        let map;

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

        async function loadData() {
            try {
                console.log('Loading electoral map data...');
                // Cargar datos reales desde la API
                const response = await fetch('/api/test/electoral-map');
                console.log('API Response status:', response.status);

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

                const result = await response.json();
                console.log('API Response data:', result);

                if (result.success && result.data) {
                    const data = result.data;
                    console.log('Electoral map data loaded from API:', data);

                    // Actualizar estadísticas
                    const statZones = document.getElementById('statZones');
                    const statPolling = document.getElementById('statPolling');
                    const statPopulation = document.getElementById('statPopulation');
                    const statVoters = document.getElementById('statVoters');

                    if (statZones) statZones.textContent = data.stats.total_zones.toLocaleString();
                    if (statPolling) statPolling.textContent = data.stats.total_polling_places.toLocaleString();
                    if (statPopulation) statPopulation.textContent = data.stats.total_population.toLocaleString();
                    if (statVoters) statVoters.textContent = data.stats.total_voters.toLocaleString();

                    // Gráfico por campaña
                    const chartByCampaign = document.getElementById('chartByCampaign');
                    if (chartByCampaign && data.zones_by_campaign) {
                        new Chart(chartByCampaign, {
                        type: 'bar',
                        data: {
                            labels: data.zones_by_campaign.map(c => c.name),
                            datasets: [{
                                label: 'Zonas Electorales',
                                data: data.zones_by_campaign.map(c => c.total),
                                backgroundColor: '#3B82F6',
                                borderColor: '#1D4ED8',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                    }

                    // Gráfico por ciudad
                    const chartByCity = document.getElementById('chartByCity');
                    if (chartByCity && data.zones_by_city) {
                        new Chart(chartByCity, {
                        type: 'doughnut',
                        data: {
                            labels: data.zones_by_city.map(c => c.name),
                            datasets: [{
                                data: data.zones_by_city.map(c => c.total),
                                backgroundColor: ['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#8B5CF6', '#F97316', '#06B6D4', '#84CC16'],
                                hoverOffset: 4
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'right',
                                }
                            }
                        }
                    });
                    }

                    // Tabla de ciudades
                    const tbody = document.getElementById('citiesTableBody');
                    if (tbody && data.zones_by_city) {
                        tbody.innerHTML = data.zones_by_city.map(city => `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${city.name}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.total}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.polling_places || 0}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.population || 0}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.voters || 0}</td>
                        </tr>
                    `).join('');
                    }

                    // Cargar mapa electoral
                    if (data.zones_for_map) {
                        loadElectoralMap(data.zones_for_map);
                    }
                } else {
                    console.error('Error loading electoral map data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading electoral map data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            try {
                // Datos de respaldo básicos
                const mockData = {
                    stats: {
                        total_zones: 150,
                        total_polling_places: 450,
                        total_population: 2500000,
                        total_voters: 1675000
                    },
                    zones_by_campaign: [
                        { name: 'Campaña Bogotá', total: 35 },
                        { name: 'Campaña Medellín', total: 30 },
                        { name: 'Campaña Cali', total: 25 },
                        { name: 'Campaña Barranquilla', total: 20 },
                        { name: 'Campaña Cartagena', total: 15 },
                        { name: 'Otras', total: 25 }
                    ],
                    zones_by_city: [
                        { name: 'Bogotá', total: 35, population: 8000000 },
                        { name: 'Medellín', total: 30, population: 2500000 },
                        { name: 'Cali', total: 25, population: 2200000 },
                        { name: 'Barranquilla', total: 20, population: 1200000 },
                        { name: 'Cartagena', total: 15, population: 1000000 },
                        { name: 'Bucaramanga', total: 10, population: 600000 },
                        { name: 'Pereira', total: 8, population: 500000 },
                        { name: 'Santa Marta', total: 7, population: 500000 }
                    ],
                    zones_for_map: [
                        { name: 'Zona Centro', location: 'Bogotá, Cundinamarca', campaign: 'Campaña Bogotá', lat: 4.6097, lng: -74.0817, population: 500000, voters: 335000 },
                        { name: 'Zona Norte', location: 'Bogotá, Cundinamarca', campaign: 'Campaña Bogotá', lat: 4.7097, lng: -74.0517, population: 400000, voters: 268000 },
                        { name: 'Zona Sur', location: 'Bogotá, Cundinamarca', campaign: 'Campaña Bogotá', lat: 4.5097, lng: -74.1117, population: 350000, voters: 234500 },
                        { name: 'Zona Centro', location: 'Medellín, Antioquia', campaign: 'Campaña Medellín', lat: 6.2442, lng: -75.5812, population: 300000, voters: 201000 },
                        { name: 'Zona Norte', location: 'Medellín, Antioquia', campaign: 'Campaña Medellín', lat: 6.3442, lng: -75.5512, population: 250000, voters: 167500 },
                        { name: 'Zona Centro', location: 'Cali, Valle del Cauca', campaign: 'Campaña Cali', lat: 3.4516, lng: -76.5320, population: 200000, voters: 134000 },
                        { name: 'Zona Norte', location: 'Cali, Valle del Cauca', campaign: 'Campaña Cali', lat: 3.5516, lng: -76.5020, population: 180000, voters: 120600 }
                    ]
                };

                document.getElementById('statZones').textContent = mockData.stats.total_zones.toLocaleString();
                document.getElementById('statPolling').textContent = mockData.stats.total_polling_places.toLocaleString();
                document.getElementById('statPopulation').textContent = mockData.stats.total_population.toLocaleString();
                document.getElementById('statVoters').textContent = mockData.stats.total_voters.toLocaleString();

                // Gráfico por campaña
                new Chart(document.getElementById('chartByCampaign'), {
                    type: 'bar',
                    data: {
                        labels: mockData.zones_by_campaign.map(c => c.name),
                        datasets: [{
                            label: 'Zonas',
                            data: mockData.zones_by_campaign.map(c => c.total),
                            backgroundColor: '#EF4444',
                            borderColor: '#DC2626',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });

                // Gráfico por ciudad
                new Chart(document.getElementById('chartByCity'), {
                    type: 'bar',
                    data: {
                        labels: mockData.zones_by_city.map(c => c.name),
                        datasets: [{
                            label: 'Zonas',
                            data: mockData.zones_by_city.map(c => c.total),
                            backgroundColor: '#10B981',
                            borderColor: '#059669',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        indexAxis: 'y',
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                        scales: {
                            x: {
                                beginAtZero: true
                            }
                        }
                    }
                });

                // Tabla de ciudades
                const tbody = document.getElementById('citiesTable');
                tbody.innerHTML = mockData.zones_by_city.map(city => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${city.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.total}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${city.population.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(city.population * 0.67).toLocaleString()}</td>
                    </tr>
                `).join('');

                // Cargar mapa con zonas electorales
                loadElectoralMap(mockData.zones_for_map);

            } catch (err) {
                console.error('Error:', err);
                alert('Error al cargar los datos del mapa electoral. Por favor, intente de nuevo.');
            }
        }

        function loadElectoralMap(zones) {
            try {
                // Inicializar mapa centrado en Colombia
                if (map) map.remove();
                map = L.map('map').setView([4.6097, -74.0817], 6); // Colombia

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(map);

                // Agregar marcadores para cada zona electoral
                if (zones && zones.length > 0) {
                    zones.forEach(zone => {
                        if (zone.lat && zone.lng) {
                            const marker = L.circleMarker([zone.lat, zone.lng], {
                                radius: 8,
                                fillColor: '#ef4444',
                                color: '#ffffff',
                                weight: 2,
                                opacity: 1,
                                fillOpacity: 0.8
                            }).addTo(map);

                            // Popup con información de la zona
                            marker.bindPopup(`
                                <div class="p-2">
                                    <h4 class="font-bold text-red-600">${zone.name}</h4>
                                    <p class="text-sm"><strong>Ciudad:</strong> ${zone.location}</p>
                                    <p class="text-sm"><strong>Campaña:</strong> ${zone.campaign}</p>
                                    <p class="text-sm"><strong>Población:</strong> ${zone.population.toLocaleString()}</p>
                                    <p class="text-sm"><strong>Votantes:</strong> ${zone.voters.toLocaleString()}</p>
                                </div>
                            `);
                        }
                    });

                    console.log(`🗺️ Mapa electoral cargado con ${zones.length} zonas`);
                } else {
                    console.log('🗺️ No hay zonas electorales con coordenadas para mostrar');
                }

            } catch (err) {
                console.error('Error loading electoral map:', err);
            }
        }
    </script>
@endpush