@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')


<meta name="csrf-token" content="{{ csrf_token() }}">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">
<!-- ApexCharts CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.css">

<style>
    :root {
        --primary-color: #696cff;
        --success-color: #71dd37;
        --danger-color: #ff3e1d;
        --warning-color: #ffab00;
        --info-color: #03c3ec;
    }

    body {
        background-color: #f5f5f9;
        font-family: 'Inter', sans-serif;
    }

    .card {
        border: none;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }

    
    .bg-label-primary {
        background-color: rgba(105, 108, 255, 0.16) !important;
        color: var(--primary-color) !important;
    }

    .bg-label-success {
        background-color: rgba(113, 221, 55, 0.16) !important;
        color: var(--success-color) !important;
    }

    .bg-label-danger {
        background-color: rgba(255, 62, 29, 0.16) !important;
        color: var(--danger-color) !important;
    }

    .bg-label-warning {
        background-color: rgba(255, 171, 0, 0.16) !important;
        color: var(--warning-color) !important;
    }

    .bg-label-info {
        background-color: rgba(3, 195, 236, 0.16) !important;
        color: var(--info-color) !important;
    }

    .bg-label-secondary {
        background-color: rgba(133, 146, 163, 0.16) !important;
        color: #8592a3 !important;
    }

    .icon-24px {
        font-size: 1.5rem;
    }

    .text-primary {
        color: var(--primary-color) !important;
    }

    .text-success {
        color: var(--success-color) !important;
    }

    .text-danger {
        color: var(--danger-color) !important;
    }

    .badge {
        padding: 0.4rem 0.8rem;
        font-weight: 500;
        font-size: 0.8125rem;
    }

    .stat-value {
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        color: #697a8d;
        font-size: 0.9375rem;
    }

    .navbar {
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        padding: 1rem 0;
        margin-bottom: 2rem;
    }
</style>


<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-xxl">
        <a class="navbar-brand" href="#">
            <span class="fw-bold text-primary">Dashboard</span>
        </a>
        <div class="ms-auto">
            <span class="text-muted">Última actualización: <span id="last-update"></span></span>
        </div>
    </div>
</nav>

<!-- Main Content -->
<div class="container-xxl">
    <!-- Primera fila: Métricas principales -->
    <div class="row g-3 mb-4">
        <!-- Clientes Nuevos Hoy -->
        <div class="col-xl-3 col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="avatar">
                            <div class="avatar-initial bg-label-primary rounded-3">
                                <i class="ri-user-add-line icon-24px"></i>
                            </div>
                        </div>
                        <div class="d-flex align-items-center" id="trend-clientes-hoy">
                            <p class="mb-0 text-success me-1">+0%</p>
                            <i class="ri-arrow-up-s-line text-success"></i>
                        </div>
                    </div>
                    <div class="card-info">
                        <h3 class="stat-value mb-1" id="clientes-hoy">0</h3>
                        <p class="stat-label mb-0">Prospectos Nuevos Hoy</p>
                        <small class="text-muted">vs. ayer: <span id="clientes-ayer">0</span></small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Clientes Activos -->
        <div class="col-xl-3 col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="avatar">
                            <div class="avatar-initial bg-label-success rounded-3">
                                <i class="ri-group-line icon-24px"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-info">
                        <h3 class="stat-value mb-1" id="total-clientes">0</h3>
                        <p class="stat-label mb-0">Total Clientes Activos</p>
                        <!-- <small class="text-muted">Excluyendo eliminados</small> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Ingresos Mes Actual -->
        <div class="col-xl-3 col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="avatar">
                            <div class="avatar-initial bg-label-warning rounded-3">
                                <i class="ri-money-dollar-circle-line icon-24px"></i>
                            </div>
                        </div>
                        <div class="d-flex align-items-center" id="trend-ingresos">
                            <p class="mb-0 text-success me-1">+0%</p>
                            <i class="ri-arrow-up-s-line text-success"></i>
                        </div>
                    </div>
                    <div class="card-info">
                        <h3 class="stat-value mb-1" id="ingresos-mes">0</h3>
                        <p class="stat-label mb-0">M.SAT creados Hoy</p>
                        <small class="text-muted">vs ayer: <span id="ingresos-mes-anterior">$0</span></small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Acciones Pendientes -->
        <div class="col-xl-3 col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="avatar">
                            <div class="avatar-initial bg-label-info rounded-3">
                                <i class="ri-task-line icon-24px"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-info">
                        <h3 class="stat-value mb-1" id="acciones-pendientes">0</h3>
                        <p class="stat-label mb-0">Descargas Pendientes</p>
                        <!-- <small class="text-muted">Requieren atención</small> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Segunda fila: Gráficas -->
    <div class="row g-3 mb-4">
        <!-- Gráfica: Clientes Últimos 7 Días -->
        <div class="col-xl-8 col-lg-7">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Nuevos Prospectos - Últimos 7 Días</h5>
                    <span class="badge bg-label-primary">Tendencia Semanal</span>
                </div>
                <div class="card-body">
                    <div id="chart-clientes-7dias"></div>
                </div>
            </div>
        </div>

        <!-- Alertas y Resumen -->
        <div class="col-xl-4 col-lg-5">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Resumen Rápido</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <div class="d-flex align-items-center mb-2">
                            <i class="ri-alert-line text-danger me-2"></i>
                            <strong>Clientes sin Clave SAT</strong>
                        </div>
                        <h4 class="text-danger mb-0" id="sin-clave-sat">0</h4>
                        <small class="text-muted">Requieren completar datos</small>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <h6 class="mb-2">Distribución por Status</h6>
                        <div id="status-list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tercera fila: Gráficas de Ingresos y Top Asesores -->
    <div class="row g-3 mb-4">
        <!-- Gráfica: Ingresos 6 Meses -->
        <div class="col-xl-7">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">M.SAT creados - Últimos 6 Meses</h5>
                    <span class="badge bg-label-success">Totales</span>
                </div>
                <div class="card-body">
                    <div id="chart-ingresos-6meses"></div>
                </div>
            </div>
        </div>

        <!-- Top 5 Asesores -->
        <div class="col-xl-5">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Top 5 Asesores</h5>
                </div>
                <div class="card-body">
                    <div id="top-asesores-list"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Cuarta fila: Distribución por Status (Gráfica de Dona) -->
    <!-- <div class="row g-3 mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Distribución de Clientes por Status</h5>
                </div>
                <div class="card-body">
                    <div id="chart-status-donut"></div>
                </div>
            </div>
        </div>
    </div> -->
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    // URL de la API
    const API_URL = '{{ route("dashboard.metricas") }}';

    // Variables globales para los gráficos
    let chartClientes7Dias;
    let chartIngresos6Meses;
    let chartStatusDonut;

    // CSRF Token para Laravel
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Formatear números como moneda
    function formatCurrency(value) {
        return new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN',
            minimumFractionDigits: 0
        }).format(value);
    }

    // Formatear números
    function formatNumber(value) {
        return new Intl.NumberFormat('es-MX').format(value);
    }

    // Actualizar indicador de tendencia
    function updateTrend(elementId, percentage) {
        const element = document.getElementById(elementId);
        const isPositive = percentage >= 0;
        const icon = isPositive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line';
        const colorClass = isPositive ? 'text-success' : 'text-danger';

        element.innerHTML = `
                <p class="mb-0 ${colorClass} me-1">${isPositive ? '+' : ''}${percentage.toFixed(1)}%</p>
                <i class="${icon} ${colorClass}"></i>
            `;
    }

    // Actualizar métricas principales
    function updateMainMetrics(data) {
        // Clientes hoy
        document.getElementById('clientes-hoy').textContent = formatNumber(data.clientes_hoy);
        document.getElementById('clientes-ayer').textContent = formatNumber(data.clientes_ayer);
        updateTrend('trend-clientes-hoy', data.porcentaje_cambio);

        // Total clientes
        document.getElementById('total-clientes').textContent = formatNumber(data.total_clientes);

        // Ingresos
        document.getElementById('ingresos-mes').textContent = (data.ingresos_mes);
        document.getElementById('ingresos-mes-anterior').textContent = (data.ingresos_mes_anterior);

        const porcentajeIngresos = data.ingresos_mes_anterior > 0 ?
            ((data.ingresos_mes - data.ingresos_mes_anterior) / data.ingresos_mes_anterior) * 100 :
            0;
        updateTrend('trend-ingresos', porcentajeIngresos);

        // Acciones pendientes
        document.getElementById('acciones-pendientes').textContent = formatNumber(data.acciones_pendientes);

        // Clientes sin clave SAT
        document.getElementById('sin-clave-sat').textContent = formatNumber(data.sin_clave_sat);
    }

    // Crear lista de status
    function updateStatusList(statusData) {
        const container = document.getElementById('status-list');
        let html = '';

        statusData.forEach(item => {
            const colors = {
                'Sin Contraseña': 'badge-sin-contrasena',
                'Posible pago': 'badge-posible-pago',
                'Iniciar contabilidad': 'badge-iniciar-contabilidad',
                'Pre cierre': 'badge-pre-cierre',
                'Pendiente': 'badge-pendiente',
                'Autoriza cierre': 'badge-autoriza-cierre',
                'Referenciado': 'badge-referenciado',
                'Conta terminada': 'badge-conta-terminada',
                'Deudores': 'badge-deudores',
                'Anuales': 'badge-anuales',
                'Sin Atender': 'badge-sin-atender'
            };

            const color = colors[item.status_nombre] || 'secondary';

            html += `
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge  ${color} btn-sm waves-effect waves-light">${item.status_nombre}</span>
                        <strong>${formatNumber(item.total)}</strong>
                    </div>
                `;
        });

        container.innerHTML = html;
    }

    // Crear lista de top asesores
    function updateTopAsesores(asesores) {
        const container = document.getElementById('top-asesores-list');
        let html = '';

        asesores.forEach((asesor, index) => {
            const iconColors = ['primary', 'success', 'warning', 'info', 'secondary'];
            const color = iconColors[index % iconColors.length];

            html += `
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar me-3">
                            <div class="avatar-initial bg-label-${color} rounded-circle">
                                <span class="fw-bold">${index + 1}</span>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-0">${asesor.name}</h6>
                            <small class="text-muted">${formatNumber(asesor.total_clientes)} clientes</small>
                        </div>
                    </div>
                `;
        });

        if (html === '') {
            html = '<p class="text-muted text-center">No hay datos disponibles</p>';
        }

        container.innerHTML = html;
    }

    // Crear gráfica de clientes 7 días
    function createChartClientes7Dias(data) {
        const options = {
            series: [{
                name: 'Nuevos Clientes',
                data: data.map(item => item.total)
            }],
            chart: {
                type: 'area',
                height: 300,
                toolbar: {
                    show: false
                }
            },
            colors: ['#696cff'],
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    type: 'vertical',
                    opacityFrom: 0.7,
                    opacityTo: 0.1,
                }
            },
            xaxis: {
                categories: data.map(item => item.fecha),
                axisBorder: {
                    show: false
                }
            },
            yaxis: {
                min: 0,
                labels: {
                    formatter: function(value) {
                        return Math.floor(value);
                    }
                }
            },
            grid: {
                borderColor: '#f1f1f1',
                strokeDashArray: 4
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return value + ' clientes';
                    }
                }
            }
        };

        if (chartClientes7Dias) {
            chartClientes7Dias.destroy();
        }

        chartClientes7Dias = new ApexCharts(document.querySelector("#chart-clientes-7dias"), options);
        chartClientes7Dias.render();
    }

    // Crear gráfica de ingresos 6 meses
    function createChartIngresos6Meses(data) {
        const options = {
            series: [{
                name: 'M.SAT Creados',
                data: data.map(item => item.total)
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            colors: ['#71dd37'],
            plotOptions: {
                bar: {
                    borderRadius: 8,
                    columnWidth: '50%',
                    dataLabels: {
                        position: 'top'
                    }
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(value) {
                    return  (value).toFixed(0);
                },
                offsetY: -20,
                style: {
                    fontSize: '11px',
                    colors: ['#697a8d']
                }
            },
            xaxis: {
                categories: data.map(item => item.periodo),
                axisBorder: {
                    show: false
                }
            },
            yaxis: {
                labels: {
                    formatter: function(value) {
                        return (value);
                    }
                }
            },
            grid: {
                borderColor: '#f1f1f1',
                strokeDashArray: 4
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return (value);
                    }
                }
            }
        };

        if (chartIngresos6Meses) {
            chartIngresos6Meses.destroy();
        }

        chartIngresos6Meses = new ApexCharts(document.querySelector("#chart-ingresos-6meses"), options);
        chartIngresos6Meses.render();
    }

    // Crear gráfica de dona de status
    function createChartStatusDonut(data) {
        const options = {
            series: data.map(item => parseInt(item.total)),
            chart: {
                type: 'donut',
                height: 400
            },
            labels: data.map(item => item.status_nombre),
            colors: ['#ffab00', '#696cff', '#03c3ec', '#8592a3', '#71dd37', '#71dd37', '#696cff', '#ff3e1d', '#03c3ec', '#ffab00'],
            legend: {
                show: true,
                position: 'bottom',
                fontSize: '14px',
                fontFamily: 'Inter, sans-serif',
                markers: {
                    width: 10,
                    height: 10,
                    radius: 12
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '65%',
                        labels: {
                            show: true,
                            value: {
                                fontSize: '24px',
                                fontWeight: 600,
                                color: '#697a8d',
                                formatter: function(val) {
                                    return formatNumber(val);
                                }
                            },
                            total: {
                                show: true,
                                label: 'Total Clientes',
                                fontSize: '14px',
                                color: '#697a8d',
                                formatter: function(w) {
                                    return formatNumber(w.globals.seriesTotals.reduce((a, b) => a + b, 0));
                                }
                            }
                        }
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            tooltip: {
                y: {
                    formatter: function(value) {
                        return formatNumber(value) + ' clientes';
                    }
                }
            }
        };

        if (chartStatusDonut) {
            chartStatusDonut.destroy();
        }

        chartStatusDonut = new ApexCharts(document.querySelector("#chart-status-donut"), options);
        chartStatusDonut.render();
    }

    // Cargar todos los datos
    function loadDashboardData() {
        $.ajax({
            url: API_URL,
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                console.log('Datos recibidos:', data);

                // Actualizar métricas principales
                updateMainMetrics(data);

                // Actualizar listas
                updateStatusList(data.por_status);
                updateTopAsesores(data.top_asesores);

                // Crear gráficas
                createChartClientes7Dias(data.clientes_7dias);
                createChartIngresos6Meses(data.ingresos_6meses);
               // createChartStatusDonut(data.por_status);

                // Actualizar timestamp
                document.getElementById('last-update').textContent = new Date().toLocaleString('es-MX');
            },
            error: function(xhr, status, error) {
                console.error('Error al cargar los datos:', error);
                alert('Error al cargar los datos del dashboard. Por favor, recarga la página.');
            }
        });
    }

    // Cargar datos al iniciar
    $(document).ready(function() {
        loadDashboardData();

        // Recargar datos cada 5 minutos
        setInterval(loadDashboardData, 300000);
    });
</script>

@endsection