@extends('layouts.goberdata')

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

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<!-- Sidebar -->
<main class="ml-64 p-6">
        <!-- Header -->
        <div class="gd-header text-white rounded-xl shadow-lg p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold mb-2">📊 Encuestas Calle Global</h1>
                    <p class="text-lg opacity-90">Análisis completo de encuestas en la calle de todas las campañas</p>
                </div>
                <div class="text-6xl opacity-50">
                    <i class="fas fa-poll"></i>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm font-medium">Total Encuestas</p>
                        <p id="totalSurveys" class="text-3xl font-bold text-gray-900">0</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <i class="fas fa-poll text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm font-medium">Total Respuestas</p>
                        <p id="totalResponses" class="text-3xl font-bold text-gray-900">0</p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <i class="fas fa-comments text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm font-medium">Campañas Activas</p>
                        <p id="activeCampaigns" class="text-3xl font-bold text-gray-900">0</p>
                    </div>
                    <div class="bg-purple-100 p-3 rounded-full">
                        <i class="fas fa-users text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm font-medium">Tasa Respuesta</p>
                        <p id="responseRate" class="text-3xl font-bold text-gray-900">0%</p>
                    </div>
                    <div class="bg-orange-100 p-3 rounded-full">
                        <i class="fas fa-percentage text-orange-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- Encuestas por Campaña -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-900 mb-4">Encuestas por Campaña</h3>
                <canvas id="campaignChart" width="400" height="200"></canvas>
            </div>
            <!-- Distribución por Ciudad -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-900 mb-4">Distribución por Ciudad</h3>
                <canvas id="cityChart" width="400" height="200"></canvas>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Actividad Reciente</h3>
            <div id="recentActivity" class="space-y-3">
                <!-- Se llenará dinámicamente -->
            </div>
        </div>
    </main>
@endsection

@push('scripts')
<script>
        document.addEventListener('DOMContentLoaded', function() {
            loadGlobalData();
        });

        async function loadGlobalData() {
            try {
                // Cargar datos reales desde la API
                const response = await fetch('/api/test/street-surveys');
                const result = await response.json();

                if (result.success) {
                    const data = result.data;
                    console.log('Street surveys data loaded from API:', data);

                    // Update stats cards
                    document.getElementById('totalSurveys').textContent = data.stats.total_surveys.toLocaleString();
                    document.getElementById('totalResponses').textContent = data.stats.total_responses.toLocaleString();
                    document.getElementById('activeCampaigns').textContent = data.stats.active_campaigns.toLocaleString();
                    document.getElementById('responseRate').textContent = data.stats.response_rate + '%';

                    // Render charts
                    renderCampaignChart(data.campaigns);
                    renderCityChart(data.cities);

                    // Load recent activity
                    loadRecentActivity(data.recent_activity);

                } else {
                    console.error('Error loading street surveys data:', result.message);
                    showErrorMessage('Error al cargar los datos de Street Surveys');
                }

            } catch (error) {
                console.error('Error loading global street surveys data:', error);
                showErrorMessage('Error al cargar los datos de Street Surveys');
            }
        }

        function renderCampaignChart(campaigns) {
            const ctx = document.getElementById('campaignChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: campaigns.map(c => c.name),
                    datasets: [{
                        label: 'Respuestas',
                        data: campaigns.map(c => c.responses),
                        backgroundColor: 'rgba(99, 102, 241, 0.8)',
                        borderColor: 'rgba(99, 102, 241, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderCityChart(cities) {
            const ctx = document.getElementById('cityChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: cities.map(c => c.name),
                    datasets: [{
                        data: cities.map(c => c.responses),
                        backgroundColor: [
                            'rgba(99, 102, 241, 0.8)',
                            'rgba(34, 197, 94, 0.8)',
                            'rgba(251, 191, 36, 0.8)',
                            'rgba(239, 68, 68, 0.8)',
                            'rgba(168, 85, 247, 0.8)'
                        ]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        }

        function loadRecentActivity(activities) {
            const container = document.getElementById('recentActivity');
            container.innerHTML = activities.map(activity => `
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div class="flex items-center space-x-3">
                        <div class="bg-blue-100 p-2 rounded-full">
                            <i class="fas fa-poll text-blue-600"></i>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">${activity.campaign}</p>
                            <p class="text-sm text-gray-600">${activity.action} - ${activity.location}</p>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">${activity.time}</div>
                </div>
            `).join('');
        }

        function showErrorMessage(message) {
            const errorMessage = document.createElement('div');
            errorMessage.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
            errorMessage.innerHTML = `<strong>Error:</strong> ${message}`;

            const mainContent = document.querySelector('main');
            if (mainContent) {
                mainContent.insertBefore(errorMessage, mainContent.firstChild);
            }
        }
    </script>
@endpush