@extends('layouts.goberdata')

@section('title', 'Email Marketing Global')
@section('page_title', 'Email Marketing 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 -->
<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-red-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fas fa-envelope mr-2"></i> Email Marketing 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 principales -->
        <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">Total Campañas</p>
                        <p class="text-3xl font-bold text-red-600" id="totalCampaigns">0</p>
                    </div>
                    <div class="bg-red-100 p-3 rounded-full">
                        <i class="fas fa-envelope text-red-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">Emails Enviados</p>
                        <p class="text-3xl font-bold text-green-600" id="totalSent">0</p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <i class="fas fa-paper-plane 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">Tasa de Apertura</p>
                        <p class="text-3xl font-bold text-blue-600" id="openRate">0%</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <i class="fas fa-eye 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">Tasa de Clicks</p>
                        <p class="text-3xl font-bold text-purple-600" id="clickRate">0%</p>
                    </div>
                    <div class="bg-purple-100 p-3 rounded-full">
                        <i class="fas fa-mouse-pointer text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Métricas adicionales -->
        <div class="grid grid-cols-1 md:grid-cols-3 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">Suscriptores Activos</p>
                        <p class="text-2xl font-bold text-emerald-600" id="activeSubscribers">0</p>
                    </div>
                    <div class="bg-emerald-100 p-3 rounded-full">
                        <i class="fas fa-users text-emerald-600 text-lg"></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">Rebotes</p>
                        <p class="text-2xl font-bold text-orange-600" id="bounces">0</p>
                    </div>
                    <div class="bg-orange-100 p-3 rounded-full">
                        <i class="fas fa-exclamation-triangle text-orange-600 text-lg"></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">Desuscripciones</p>
                        <p class="text-2xl font-bold text-red-600" id="unsubscribes">0</p>
                    </div>
                    <div class="bg-red-100 p-3 rounded-full">
                        <i class="fas fa-user-times text-red-600 text-lg"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Campañas por Mes -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Campañas por Mes</h3>
                <div style="height: 300px;">
                    <canvas id="campaignsByMonthChart"></canvas>
                </div>
            </div>

            <!-- Rendimiento por Tipo -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Rendimiento por Tipo</h3>
                <div style="height: 300px;">
                    <canvas id="performanceByTypeChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Métricas de Rendimiento -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Métricas de Rendimiento</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="bg-blue-100 p-4 rounded-lg">
                        <i class="fas fa-chart-line text-blue-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-blue-600" id="avgOpenRate">0%</p>
                        <p class="text-sm text-gray-600">Apertura Promedio</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-green-100 p-4 rounded-lg">
                        <i class="fas fa-mouse-pointer text-green-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-green-600" id="avgClickRate">0%</p>
                        <p class="text-sm text-gray-600">Click Promedio</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-purple-100 p-4 rounded-lg">
                        <i class="fas fa-clock text-purple-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-purple-600" id="avgDeliveryTime">0h</p>
                        <p class="text-sm text-gray-600">Tiempo Entrega</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-yellow-100 p-4 rounded-lg">
                        <i class="fas fa-star text-yellow-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-yellow-600" id="engagementScore">0</p>
                        <p class="text-sm text-gray-600">Score Engagement</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Campañas por Campaña Política -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Campañas por Campaña Política</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">Campaña</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Emails</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Apertura</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rebotes</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                        </tr>
                    </thead>
                    <tbody id="campaignsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Campañas Recientes -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Campañas Recientes</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">Asunto</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Enviados</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Apertura</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicks</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                        </tr>
                    </thead>
                    <tbody id="recentCampaignsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Análisis de Horarios -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Análisis de Horarios de Envío</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-lg font-semibold text-gray-700 mb-3">Mejores Horarios para Envío</h4>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center p-2 bg-green-50 rounded">
                            <span class="text-sm">9:00 - 11:00 AM</span>
                            <span class="text-sm font-semibold text-green-600">85% apertura</span>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-blue-50 rounded">
                            <span class="text-sm">2:00 - 4:00 PM</span>
                            <span class="text-sm font-semibold text-blue-600">78% apertura</span>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-yellow-50 rounded">
                            <span class="text-sm">7:00 - 9:00 PM</span>
                            <span class="text-sm font-semibold text-yellow-600">72% apertura</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-semibold text-gray-700 mb-3">Días de la Semana</h4>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center p-2 bg-green-50 rounded">
                            <span class="text-sm">Martes</span>
                            <span class="text-sm font-semibold text-green-600">82% apertura</span>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-blue-50 rounded">
                            <span class="text-sm">Miércoles</span>
                            <span class="text-sm font-semibold text-blue-600">79% apertura</span>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-yellow-50 rounded">
                            <span class="text-sm">Jueves</span>
                            <span class="text-sm font-semibold text-yellow-600">76% apertura</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
            </div>
        </main>
@endsection

@push('scripts')
<script>
        let campaignsByMonthChart = null;
        let performanceByTypeChart = null;

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

        async function loadEmailMarketingData() {
            try {
                console.log('Loading Email Marketing data...');
                const response = await fetch('/api/test/email-marketing');
                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('Email Marketing data loaded from API:', data);

                    // Actualizar estadísticas
                    updateStats(data.stats);

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateCampaignsTable(data.campaigns_by_political_campaign);
                    updateRecentCampaignsTable(data.recent_campaigns);

                    // Actualizar métricas de rendimiento
                    updatePerformanceMetrics(data.performance_metrics);
                } else {
                    console.error('Error loading Email Marketing data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading Email Marketing data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalCampaigns = document.getElementById('totalCampaigns');
            const totalSent = document.getElementById('totalSent');
            const openRate = document.getElementById('openRate');
            const clickRate = document.getElementById('clickRate');
            const activeSubscribers = document.getElementById('activeSubscribers');
            const bounces = document.getElementById('bounces');
            const unsubscribes = document.getElementById('unsubscribes');

            if (totalCampaigns) totalCampaigns.textContent = stats.total_campaigns.toLocaleString();
            if (totalSent) totalSent.textContent = stats.total_sent.toLocaleString();
            if (openRate) openRate.textContent = Math.round(stats.avg_open_rate) + '%';
            if (clickRate) clickRate.textContent = Math.round(stats.avg_click_rate) + '%';
            if (activeSubscribers) activeSubscribers.textContent = stats.active_subscribers.toLocaleString();
            if (bounces) bounces.textContent = stats.total_bounces.toLocaleString();
            if (unsubscribes) unsubscribes.textContent = stats.total_unsubscribes.toLocaleString();
        }

        function renderCharts(data) {
            // Gráfico de campañas por mes
            const monthCtx = document.getElementById('campaignsByMonthChart');

            if (monthCtx && data.campaigns_by_month) {
                if (campaignsByMonthChart) {
                    campaignsByMonthChart.destroy();
                }

                campaignsByMonthChart = new Chart(monthCtx, {
                    type: 'bar',
                    data: {
                        labels: data.campaigns_by_month.map(item => item.month),
                        datasets: [{
                            label: 'Campañas',
                            data: data.campaigns_by_month.map(item => item.count),
                            backgroundColor: '#ef4444',
                            borderColor: '#dc2626',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // Gráfico de rendimiento por tipo
            const typeCtx = document.getElementById('performanceByTypeChart');

            if (typeCtx && data.performance_by_type) {
                if (performanceByTypeChart) {
                    performanceByTypeChart.destroy();
                }

                performanceByTypeChart = new Chart(typeCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.performance_by_type.map(item => item.type),
                        datasets: [{
                            data: data.performance_by_type.map(item => Math.max(item.open_rate, 1)), // Mínimo 1 para que sea visible
                            backgroundColor: ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        }

        function updateCampaignsTable(campaigns) {
            const tbody = document.getElementById('campaignsTable');
            if (tbody && campaigns) {
                tbody.innerHTML = campaigns.map(campaign => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_sent.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(campaign.avg_open_rate)}%</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(campaign.avg_click_rate)}%</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_bounces.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${campaign.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
                                ${campaign.status === 'active' ? 'Activa' : 'Inactiva'}
                            </span>
                        </td>
                    </tr>
                `).join('');
            }
        }

        function updateRecentCampaignsTable(campaigns) {
            const tbody = document.getElementById('recentCampaignsTable');
            if (tbody && campaigns) {
                tbody.innerHTML = campaigns.map(campaign => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${campaign.subject}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.sent_count.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(campaign.open_rate)}%</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(campaign.click_rate)}%</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(campaign.sent_at).toLocaleDateString()}</td>
                    </tr>
                `).join('');
            }
        }

        function updatePerformanceMetrics(metrics) {
            const avgOpenRate = document.getElementById('avgOpenRate');
            const avgClickRate = document.getElementById('avgClickRate');
            const avgDeliveryTime = document.getElementById('avgDeliveryTime');
            const engagementScore = document.getElementById('engagementScore');

            if (avgOpenRate) avgOpenRate.textContent = Math.round(metrics.avg_open_rate) + '%';
            if (avgClickRate) avgClickRate.textContent = Math.round(metrics.avg_click_rate) + '%';
            if (avgDeliveryTime) avgDeliveryTime.textContent = Math.round(metrics.avg_delivery_time_hours) + 'h';
            if (engagementScore) engagementScore.textContent = Math.round(metrics.engagement_score);
        }

        function loadFallbackData() {
            // Datos de respaldo básicos
            const mockData = {
                stats: {
                    total_campaigns: 25,
                    total_sent: 12500,
                    avg_open_rate: 24.5,
                    avg_click_rate: 3.2,
                    active_subscribers: 8500,
                    total_bounces: 125,
                    total_unsubscribes: 45
                },
                campaigns_by_month: [
                    { month: 'Ene', count: 5 },
                    { month: 'Feb', count: 8 },
                    { month: 'Mar', count: 12 },
                    { month: 'Abr', count: 15 },
                    { month: 'May', count: 18 },
                    { month: 'Jun', count: 20 }
                ],
                performance_by_type: [
                    { type: 'Newsletter', open_rate: 25 },
                    { type: 'Promocional', open_rate: 18 },
                    { type: 'Informativo', open_rate: 32 },
                    { type: 'Urgente', open_rate: 45 }
                ],
                campaigns_by_political_campaign: [
                    {
                        campaign_name: 'Campaña Demo',
                        total_sent: 12500,
                        avg_open_rate: 24.5,
                        avg_click_rate: 3.2,
                        total_bounces: 125,
                        status: 'active'
                    }
                ],
                recent_campaigns: [
                    {
                        subject: 'Actualización de Campaña',
                        campaign_name: 'Campaña Demo',
                        sent_count: 2500,
                        open_rate: 28.5,
                        click_rate: 4.2,
                        sent_at: new Date().toISOString()
                    }
                ],
                performance_metrics: {
                    avg_open_rate: 24.5,
                    avg_click_rate: 3.2,
                    avg_delivery_time_hours: 2.5,
                    engagement_score: 78
                }
            };

            updateStats(mockData.stats);
            renderCharts(mockData);
            updateCampaignsTable(mockData.campaigns_by_political_campaign);
            updateRecentCampaignsTable(mockData.recent_campaigns);
            updatePerformanceMetrics(mockData.performance_metrics);
        }
    </script>
@endpush