@extends('layouts.goberdata')

@section('title', 'Email Marketing')
@section('page_title', 'Email Marketing')
@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')
<!-- Header -->
    <div class="gd-header text-white p-6 shadow-lg">
        <div class="container mx-auto max-w-7xl flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold">📧 Email Marketing</h1>
                <p class="text-sm opacity-90">Newsletters y campañas con A/B Testing</p>
            </div>
            <a href="javascript:void(0)" onclick="redirectHome()" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                ← Volver
            </a>
        </div>
    </div>

    <div class="container mx-auto max-w-7xl p-6">

        <!-- KPIs -->
        <div class="grid grid-cols-5 gap-4 mb-6">
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Enviados</p>
                <p class="text-3xl font-bold text-purple-600">1,250</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Entregados</p>
                <p class="text-3xl font-bold text-blue-600">1,180</p>
                <p class="text-xs text-green-600">94.4%</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Abiertos</p>
                <p class="text-3xl font-bold text-green-600">590</p>
                <p class="text-xs text-green-600">50.0%</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Clicks</p>
                <p class="text-3xl font-bold text-orange-600">125</p>
                <p class="text-xs text-green-600">21.2%</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow text-center">
                <p class="text-sm text-gray-600">Suscriptores</p>
                <p class="text-3xl font-bold text-pink-600">245</p>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Funnel de Conversión</h3>
                <div style="height: 300px;">
                    <canvas id="funnelChart"></canvas>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📈 Opens Últimos 30 Días</h3>
                <div style="height: 300px;">
                    <canvas id="opensChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Top Campañas -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">🏆 Top Campañas por Open Rate</h3>
            <div class="space-y-4">
                <div class="flex items-center space-x-4 p-4 gd-header rounded-lg">
                    <div class="text-3xl">🥇</div>
                    <div class="flex-1">
                        <p class="font-bold text-gray-800">Invitación Evento Seguridad</p>
                        <p class="text-sm text-gray-600">Enviada: Hace 2 días</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-bold text-green-600">60.0%</p>
                        <p class="text-xs text-gray-600">120 / 200 abiertos</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                    <div class="text-3xl">🥈</div>
                    <div class="flex-1">
                        <p class="font-bold text-gray-800">Newsletter Semanal</p>
                        <p class="text-sm text-gray-600">Enviada: Hace 5 días</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-bold text-blue-600">50.0%</p>
                        <p class="text-xs text-gray-600">250 / 500 abiertos</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                    <div class="text-3xl">🥉</div>
                    <div class="flex-1">
                        <p class="font-bold text-gray-800">Propuestas de Educación</p>
                        <p class="text-sm text-gray-600">Enviada: Hace 1 semana</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-bold text-purple-600">45.5%</p>
                        <p class="text-xs text-gray-600">91 / 200 abiertos</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- A/B Testing Results -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h3 class="text-xl font-bold text-gray-800 mb-4">🔬 Último A/B Test</h3>
            <div class="grid grid-cols-2 gap-6">
                <div class="border-2 border-blue-300 p-4 rounded-lg">
                    <p class="text-sm text-gray-600 mb-2">Variante A: "Únete al Cambio"</p>
                    <p class="text-4xl font-bold text-blue-600 mb-2">42.5%</p>
                    <p class="text-sm text-gray-600">213 / 500 abiertos</p>
                </div>
                <div class="border-2 border-green-500 p-4 rounded-lg bg-green-50">
                    <p class="text-sm text-gray-600 mb-2">Variante B: "Construyamos Juntos" ✅</p>
                    <p class="text-4xl font-bold text-green-600 mb-2">57.5%</p>
                    <p class="text-sm text-gray-600">288 / 500 abiertos</p>
                    <p class="text-xs text-green-600 font-semibold mt-2">🏆 GANADOR +15%</p>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
<script>
        function redirectHome() {
            try {
                const user = JSON.parse(localStorage.getItem('user') || '{}');
                const roles = user.roles || (user.role ? [user.role] : []);
                if (roles.includes('admin') || roles.includes('candidate')) {
                    window.location.href = '/admin/dashboard';
                } else if (roles.includes('coordinator')) {
                    window.location.href = '/dashboard';
                } else {
                    window.location.href = '/volunteer/dashboard';
                }
            } catch (_) {
                window.location.href = '/login';
            }
        }
        // Funnel Chart
        const funnelCtx = document.getElementById('funnelChart').getContext('2d');
        new Chart(funnelCtx, {
            type: 'bar',
            data: {
                labels: ['Enviados', 'Entregados', 'Abiertos', 'Clicks'],
                datasets: [{
                    data: [1250, 1180, 590, 125],
                    backgroundColor: ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'],
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    x: { beginAtZero: true }
                }
            }
        });

        // Opens Trend
        const opensCtx = document.getElementById('opensChart').getContext('2d');
        new Chart(opensCtx, {
            type: 'line',
            data: {
                labels: Array.from({length: 30}, (_, i) => i + 1),
                datasets: [{
                    label: 'Emails Abiertos',
                    data: [12,18,15,22,28,25,30,27,32,35,38,42,45,40,38,42,48,52,50,55,58,60,65,68,70,72],
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: true }
                },
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    </script>
@endpush