@extends('layouts.app')
@section('title', 'Stats - API Version')
@push('styles')
    <link href="{{ asset('css/stats.css') }}" rel="stylesheet">
    <link href="{{ asset('css/status-charts.css') }}" rel="stylesheet">
@endpush
@push('scripts')
    <script src="{{ asset('admin-assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('js/vs-yesterday.js') }}?v=202508061835"></script>
    <script src="{{ asset('js/historical-payments-simple.js') }}?v=202508132016"></script>
@endpush
@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12">
                        <div class="d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">Estadísticas en Tiempo Real</h4>
                            <div class="page-title-right">
                                <div class="d-flex cnt-filter">
                                    <!-- Filtro de gateway -->
                                    <select class="form-select select-gateway me-2 d-none" style="width: 180px;">
                                        <option value="all">Todos los Gateways</option>
                                        <option value="stripe">Stripe</option>
                                        <option value="paypal">PayPal</option>
                                        <option value="tailoredpay">TailoredPay</option>
                                    </select>
                                    <button id="refresh-stats" class="btn btn-primary">
                                        <i class="fas fa-sync-alt"></i> Actualizar
                                    </button>
                                    <button id="clear-cache-btn" class="btn btn-secondary btn-sm ms-2" title="Limpiar cache y recargar">
                                        <i class="fas fa-trash"></i> Cache
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row page-title-box">
                    <div class="col-12">
                        <!-- Filtros de fecha -->
                        <div class="gap-3">
                            <div class="btn-group me-3" role="group" aria-label="Filtros de fecha">
                                <input type="radio" class="btn-check" name="date-filter" id="filter-today" value="today" checked>
                                <label class="btn btn-outline-primary btn-sm" for="filter-today">Today</label>
                                <input type="radio" class="btn-check" name="date-filter" id="filter-yesterday" value="yesterday">
                                <label class="btn btn-outline-primary btn-sm" for="filter-yesterday">Yesterday</label>
                                <input type="radio" class="btn-check" name="date-filter" id="filter-7days" value="last7days">
                                <label class="btn btn-outline-primary btn-sm" for="filter-7days">Last Week</label>
                                <input type="radio" class="btn-check" name="date-filter" id="filter-custom" value="custom">
                                <label class="btn btn-outline-primary btn-sm" for="filter-custom">Range</label>
                            </div>
                            <!-- Selector de rango personalizado -->
                            <div class="custom-date-range d-none" id="custom-date-container">
                                <div class="d-flex align-items-center gap-2">
                                    <label class="form-label mb-0 text-muted small">Desde:</label>
                                    <input type="date" class="form-control form-control-sm" id="date-from" style="width: 140px;">
                                    <label class="form-label mb-0 text-muted small">Hasta:</label>
                                    <input type="date" class="form-control form-control-sm" id="date-to" style="width: 140px;">
                                    <button type="button" class="btn btn-primary btn-sm" id="apply-custom-dates">
                                        <i class="fas fa-check"></i> Aplicar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="global-stats">
                    <div class="col-xl-4 col-md-6">
                        <div class="card loading-card">
                            <div class="loading-overlay">
                                <div class="spinner-border text-primary" role="status"></div>
                            </div>
                            <div class="card-body">
                                <h4 class="card-title mb-4">Global - Money</h4>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-grow-1">
                                        <span id="global-money" class="h1 mb-0">$0</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-grow-1">
                                        <span id="global-paid" class="h3 mb-0 text-success">0</span>
                                        <small class="text-muted">PAID Orders</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <span id="global-documents" class="h3 mb-0 text-info">0</span>
                                        <small class="text-muted">Total Documents</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <span id="global-refunds" class="h3 mb-0 text-danger">0</span>
                                        <small class="text-muted">Refunds</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <span id="global-refund-money" class="h3 mb-0 text-danger">$0.00</span>
                                        <small class="text-muted">Refund Amount</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="card loading-card">
                            <div class="loading-overlay">
                                <div class="spinner-border text-warning" role="status"></div>
                            </div>
                            <div class="card-body">
                                <h4 class="card-title mb-4">Pagos por Gateway</h4>
                                <div class="gateway-stats">
                                    <!-- Las filas de gateways se generarán dinámicamente desde JavaScript -->
                                    <div class="text-center text-muted py-3">
                                        <i class="fas fa-spinner fa-spin"></i> Cargando gateways...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Estadísticas por país -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title">Estadísticas por País</h4>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="vs-yesterday" value="" style="transform: scale(1.2);">
                                        <label class="form-check-label" for="vs-yesterday" style="font-size: 1.05em;">
                                            VS Yesterday
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" style="background-color:#191a1c">
                                <div class="row" id="countries-stats">
                                    <div class="col-12 text-center py-5">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="sr-only">...</span>
                                        </div>
                                        <p class="mt-2">Cargando estadísticas por país...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Sección de Análisis Detallado: Distribución de Status y Conversion Rate -->
                <div class="row" id="detailed-analysis-section">
                    <!-- Pagos Históricos -->
                    <div class="col-lg-12 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title mb-0">Total Historico</h4>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" id="historical-payments-dropdown">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="javascript:void(0)" onclick="refreshHistoricalPayments(event)">
                                                <i class="fas fa-sync-alt"></i> Actualizar Datos
                                            </a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0)" onclick="testHistoricalPayments(event)">
                                                <i class="fas fa-bug"></i> Test con Datos Simulados
                                            </a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0)" onclick="loadRealHistoricalPayments(event)">
                                                <i class="fas fa-database"></i> Cargar Datos Reales
                                            </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Botón para cargar datos históricos -->
                                <div id="historical-load-section" class="text-center py-4">
                                    <p class="text-muted mb-3">
                                        <i class="fas fa-chart-line"></i><br>
                                        Pagos Históricos - Últimos 7 Días<br>
                                        <small>Haz clic para ver la gráfica de evolución de pagos</small>
                                    </p>
                                    <button id="load-historical-payments" class="btn btn-primary btn-sm" onclick="loadHistoricalPayments()">
                                        <i class="fas fa-chart-line"></i> Cargar Gráfica 7 Días
                                    </button>
                                </div>
                                
                                <!-- Loader para gráfico histórico (cuando se carga automáticamente) -->
                                <div id="historical-chart-loader" class="text-center py-5 d-none">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Cargando...</span>
                                    </div>
                                    <p class="text-muted mt-3">
                                        <i class="fas fa-chart-line me-2"></i>
                                        Cargando datos históricos...
                                    </p>
                                </div>
                                
                                <!-- Contenido de datos históricos (oculto inicialmente) -->
                                <div id="historical-payments-content" class="d-none">
                                    <!-- Tarjetas de resumen -->
                                    <div class="row mb-3">
                                        <div class="col-4">
                                            <div class="text-center">
                                                <h6 class="text-info">Total Período</h6>
                                                <span id="total-period" class="h6">$0</span>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="text-center">
                                                <h6 class="text-success">Promedio/Día</h6>
                                                <span id="average-per-day" class="h6">$0</span>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="text-center">
                                                <h6 class="text-primary">Días</h6>
                                                <span id="days-count" class="h6">10</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Gráfica de pagos históricos -->
                                    <div id="historical-payments-chart" style="min-height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Distribución de Status -->
                    <div class="col-lg-12 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title mb-0">
                                        Distribución de Status
                                        <small class="text-muted" id="status-auto-indicator">
                                            <i class="fas fa-magic text-primary"></i> Carga automática
                                        </small>
                                    </h4>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" id="status-charts-dropdown">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="javascript:void(0)" onclick="refreshStatusCharts(event)">
                                                <i class="fas fa-sync-alt"></i> Actualizar Gráfica
                                            </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Botón para cargar gráficas -->
                                <div id="status-load-section" class="text-center py-4" style="display: none;">
                                    <p class="text-muted mb-3">
                                        <i class="fas fa-chart-pie"></i><br>
                                        Gráficas de status disponibles<br>
                                        <small>Se carga automáticamente. Usa este botón si hay problemas.</small>
                                    </p>
                                    <button id="load-status-charts" class="btn btn-outline-primary btn-sm" onclick="loadStatusCharts()">
                                        <i class="fas fa-play"></i> Cargar Gráficas Manualmente
                                    </button>
                                </div>
                                <!-- Contenido de gráficas (inicialmente muestra loading) -->
                                <div id="status-charts-content" class="">
                                    <!-- Estado de carga inicial automática -->
                                    <div id="status-charts-loading" class="text-center py-4">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="sr-only">Cargando...</span>
                                        </div>
                                        <p class="mt-2 text-muted">Cargando gráficas en paralelo...</p>
                                    </div>
                                    <!-- Tarjetas de resumen (ocultas hasta que carguen) -->
                                    <div class="d-none" id="status-summary-cards">
                                        <div class="row mb-3">
                                            <div class="col-6">
                                                <div class="text-center">
                                                    <h6 class="text-success">Paid</h6>
                                                    <span id="paid-count" class="h6">-</span>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-center">
                                                    <h6 class="text-warning">Pending</h6>
                                                    <span id="pending-count" class="h6">-</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-6">
                                                <div class="text-center">
                                                    <h6 class="text-muted">Draft</h6>
                                                    <span id="draft-count" class="h6">-</span>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-center">
                                                    <h6 class="text-info">Total</h6>
                                                    <span id="total-documents" class="h6">-</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Gráfica circular de status (oculta hasta que cargue) -->
                                    <div id="status-pie-chart" class="d-none" style="min-height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Conversion Rate Solo Números -->
                    <div class="col-lg-12 col-md-12 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title">
                                        <i class="fas fa-calculator text-success"></i> Conversion Rate por País
                                        <small class="text-muted" id="conversion-numbers-indicator">
                                            <i class="fas fa-circle text-secondary"></i> Inactivo
                                        </small>
                                    </h4>
                                    <span class="badge bg-success">
                                        <i class="fas fa-percentage"></i> Promedio: <span id="avg-conversion-numbers">-</span>
                                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- Loading para números -->
                                <div id="conversion-numbers-loading" class="text-center py-4">
                                    <div class="spinner-border text-success" role="status">
                                        <span class="sr-only">Cargando...</span>
                                    </div>
                                    <p class="mt-2 text-muted">Obteniendo datos numéricos...</p>
                                </div>
                                <!-- Contenedor para solo números -->
                                <div id="conversion-numbers-container" class="d-none"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.partials.footer')
    </div>
</div>
@endsection
@push('scripts')
    <script src="{{ asset('js/stats-combined.js') }}?v=9.9295"></script>
    <script src="{{ asset('js/status-charts-debug.js') }}?v=9.9295"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

        });
        // Función simplificada para testing
        async function loadStatusCharts() {
            
            // Obtener filtros actuales del panel
            const gateway = document.querySelector('.select-gateway')?.value || 'all';
            const dateFilter = document.querySelector('input[name="date-filter"]:checked')?.value || 'today';
            let customDates = null;
            
            if (dateFilter === 'custom') {
                const dateFrom = document.getElementById('date-from')?.value;
                const dateTo = document.getElementById('date-to')?.value;
                if (dateFrom && dateTo) {
                    customDates = { from: dateFrom, to: dateTo };
                }
            }
            const loadButton = document.getElementById('load-status-charts');
            if (loadButton) {
                loadButton.disabled = true;
                loadButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Cargando...';
            }
            try {
                if (!window.statusCharts) {
                    throw new Error('Status charts module no disponible');
                }
                const result = await window.statusCharts.init(gateway, dateFilter, customDates);
                if (result) {
                } else {
                    throw new Error('Init() retornó false');
                }
            } catch (error) {
                alert('Error al cargar las gráficas: ' + error.message);
                if (loadButton) {
                    loadButton.disabled = false;
                    loadButton.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error - Reintentar';
                }
            }
        }
        // Función para actualizar las gráficas de status
        async function refreshStatusCharts(event) {
            // Prevenir comportamiento por defecto del enlace
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            // Obtener filtros actuales del panel
            const gateway = document.querySelector('.select-gateway')?.value || 'all';
            const dateFilter = document.querySelector('input[name="date-filter"]:checked')?.value || 'today';
            let customDates = null;
            
            if (dateFilter === 'custom') {
                const dateFrom = document.getElementById('date-from')?.value;
                const dateTo = document.getElementById('date-to')?.value;
                if (dateFrom && dateTo) {
                    customDates = { from: dateFrom, to: dateTo };
                }
            }
            // Cambiar ícono del dropdown a loading
            const dropdownButton = document.getElementById('status-charts-dropdown');
            const originalIcon = dropdownButton?.querySelector('i');
            if (originalIcon) {
                originalIcon.className = 'fas fa-spinner fa-spin';
            }
            try {
                if (!window.statusCharts) {
                    throw new Error('Status charts module no disponible');
                }
                if (!window.statusCharts.isLoaded) {
                    await window.statusCharts.init(gateway, dateFilter, customDates);
                    return;
                }
                // Mostrar indicador de carga en la gráfica
                const chartElement = document.getElementById('status-pie-chart');
                if (chartElement) {
                    chartElement.innerHTML = `
                        <div class="text-center py-4">
                            <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                            <p class="mt-2 text-muted">Actualizando gráfica...</p>
                        </div>
                    `;
                }
                // Recargar los datos con filtros
                await window.statusCharts.reload(gateway, dateFilter, customDates);
            } catch (error) {
                alert('Error al actualizar las gráficas: ' + error.message);
                // En caso de error, restaurar el botón de carga
                const chartElement = document.getElementById('status-pie-chart');
                if (chartElement && !window.statusCharts?.isLoaded) {
                    chartElement.innerHTML = `
                        <div class="text-center py-4">
                            <p class="text-danger mb-3">
                                <i class="fas fa-exclamation-triangle"></i><br>
                                Error al cargar la gráfica
                            </p>
                            <button class="btn btn-primary btn-sm" onclick="refreshStatusCharts()">
                                <i class="fas fa-redo"></i> Reintentar
                            </button>
                        </div>
                    `;
                }
            } finally {
                // Restaurar ícono original del dropdown
                if (originalIcon) {
                    originalIcon.className = 'fas fa-cog';
                }
            }
        }

        // Función de prueba para VS Yesterday (puedes ejecutarla en la consola)
        window.testVsYesterday = async function() {
            try {
                // Verificar que el sistema está cargado
                if (window.vsYesterday) {
                    window.vsYesterday.debug();
                } else {
                }
                // Simular click en checkbox
                const checkbox = document.getElementById('vs-yesterday');
                if (checkbox) {
                    checkbox.checked = !checkbox.checked;
                    checkbox.dispatchEvent(new Event('change'));
                } else {
                }
                // Esperar un poco para que procese
                await new Promise(resolve => setTimeout(resolve, 3000));
                // Verificar si hay comparaciones
                const comparisons = document.querySelectorAll('.vs-yesterday-comparison');

                const response = await fetch('/api/stats/yesterday-comparison');
                if (response.ok) {
                    const data = await response.json();

                    Object.keys(data).forEach(country => {
                        const stats = data[country];
                    });
                } else {
                }
            } catch (error) {
            }
        };
        // Función específica para debugging Thailand VS Yesterday
        window.debugThailandVsYesterday = async function() {
            try {
                // Probar API directamente
                const response = await fetch('/api/stats/yesterday-comparison');
                if (response.ok) {
                    const data = await response.json();
                    // Mostrar datos específicos de Thailand
                    ['TH', 'TH3'].forEach(code => {
                        if (data[code]) {
                        } else {
                        }
                    });
                    // Verificar datos actuales de Thailand en la interfaz
                    const thailandCard = document.querySelector('[data-country-code="TH"]');
                    if (thailandCard) {
                        // Buscar valores actuales
                        const moneyElement = thailandCard.querySelector('.h2');
                        const paidElement = thailandCard.querySelector('.h6');
                        if (moneyElement && paidElement) {
                            const currentMoney = moneyElement.textContent.replace(/[$,]/g, '');
                            const currentPaid = paidElement.textContent.replace(/[,]/g, '');

                        }
                        // Verificar si ya hay comparación
                        const comparison = thailandCard.querySelector('.vs-yesterday-comparison');
                        if (comparison) {
                        } else {
                        }
                    }
                } else {
                }
            } catch (error) {
            }
        };
        // Función para forzar VS Yesterday manualmente
        window.forceVsYesterday = function() {
            if (window.vsYesterday) {
                const checkbox = document.getElementById('vs-yesterday');
                if (checkbox) {
                    checkbox.checked = true;
                    window.vsYesterday.handleCheckboxChange(true);
                }
            }
        };
        // Inicializar VS Yesterday con un pequeño retraso para asegurar que StatsInterface esté disponible
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                if (typeof VsYesterday !== 'undefined') {
                    window.vsYesterday = new VsYesterday();
                } else {
                }
            }, 1000); // 1 segundo de retraso
        });

        // Script de debugging para Historical Payments
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {

                if (window.historicalPayments && typeof window.historicalPayments.showHistoricalChart === 'function') {
                } else {
                }
            }, 1500); // 1.5 segundos de retraso
        });
    </script>
@endpush