@extends('layouts.app')

@section('title', 'Visado Express')

@push('styles')
    <link href="{{ asset('css/stats.css') }}" rel="stylesheet">
    <style>
        .table-custom-header {
            background-color: #233c53 !important;
            color: white !important;
        }
        .table-custom-header th {
            border-color: #233c53 !important;
        }
        .table-custom tbody tr:nth-child(odd) {
            background-color: #f8f9fa !important;
        }
        .table-custom tbody tr:nth-child(even) {
            background-color: #ffffff !important;
        }
        .table-custom tbody tr:hover {
            background-color: #e9ecef !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="{{ asset('admin-assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('js/stats4/index.js') }}?v={{ time() }}"></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">
                
                <!-- Encabezado de la página -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">{{ $title }}</h4>
                            <div class="page-title-right">
                                <div class="d-flex">
                                    <button id="refresh-stats" class="btn btn-primary" onclick="refreshAllStats()">
                                        <i class="fas fa-sync-alt"></i>
                                        Refresh
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filtros de fecha -->
                <div class="row page-title-box mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body py-3">
                                <div class="d-flex flex-wrap align-items-center gap-3">
                                    <!-- Filtros principales -->
                                    <div class="btn-group" 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-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>
                                    
                                    <!-- Indicador de filtro activo -->
                                    <div class="filter-indicator">
                                        <small class="text-muted">
                                            <i class="fas fa-calendar-day me-1"></i>
                                            <span id="current-filter-text">Mostrando datos de hoy</span>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Global Stats Section -->
                <div class="row mb-4" id="global-stats">
                    <div class="col-xl-4 col-md-6">
                        <div class="card card-loaded">
                            <div class="loading-overlay" id="global-stats-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                <div class="text-center text-white">
                                    <div class="spinner-border text-primary mb-2" role="status"></div>
                                    <div>Cargando estadísticas globales...</div>
                                </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.00</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 mb-3">
                                    <div class="flex-grow-1">
                                        <span id="global-unpaid" class="h3 mb-0 text-warning">0</span>
                                        <small class="text-muted">Complete Unpaid</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-grow-1">
                                        <span id="global-visitas" class="h3 mb-0 text-primary">0</span>
                                        <small class="text-muted">Visitas</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 - 0.0%</span>
                                        <small class="text-muted">Refund Amount</small>
                                    </div>
                                </div>
                                <!-- VS Yesterday Comparison for Global Money -->
                                <div id="global-money-yesterday-comparison" class="mt-3 pt-3 border-top" style="display: none;">
                                    <!-- Se llenará dinámicamente con JavaScript -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="card card-loaded">
                            <div class="loading-overlay" id="gateway-stats-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                <div class="text-center text-white">
                                    <div class="spinner-border text-warning mb-2" role="status"></div>
                                    <div>Cargando gateway stats...</div>
                                </div>
                            </div>
                            <div class="card-body">
                                <h4 class="card-title mb-4">Pagos por Gateway</h4>
                                <div class="gateway-stats">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-credit-card me-2"></i>
                                            <span>Tailoredpay</span>
                                        </div>
                                        <span class="fw-bold" id="tailoredpay-count">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Estadísticas por País (Individual) -->
                <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" style="display: block;">
                                        <input class="form-check-input" type="checkbox" id="vs-yesterday" value="" style="transform: scale(1.2);" onclick="toggleVSYesterday(this.checked)">
                                        <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">
                                    <!-- Thailand 3 -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="thailand-3">
                                        <div class="card border-info" id="thailand-3-country-card">
                                            <div class="loading-overlay" id="thailand-3-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                                <div class="text-info">
                                                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                    <div class="mt-2">Cargando...</div>
                                                </div>
                                            </div>
                                            <img src="/flags/thailand.png" alt="Thailand" class="ws-60 country-flag-clickable thailand-3-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="TH" data-country-name="Thailand" onclick="openModal('TH', 'Thailand')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-info">Thailand 3</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-info" id="thailand-3-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-info" id="thailand-3-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="thailand-3-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="thailand-3-unpaid">0</span> complete unpaid</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="thailand-3-visitas">0</span> visitas</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Dominios -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-globe"></i> Por Dominio:
                                                    </h6>
                                                    <div id="thailand-3-domains" class="domains-container">
                                                        <div class="text-center text-muted">
                                                            <small>Cargando dominios...</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Conversión -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-chart-line"></i> Conversión:
                                                        <span class="badge bg-primary float-end" id="thailand-3-conversion-rate">0%</span>
                                                    </h6>
                                                    <!-- Datos base para el cálculo -->
                                                    <div class="small text-muted mb-3 pb-2 border-bottom">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                            <strong id="thailand-3-conv-visits">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                            <strong class="text-danger" id="thailand-3-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="thailand-3-early-rate">0%</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                            <strong id="thailand-3-conv-abandoned">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                            <strong id="thailand-3-conv-paid">0</strong>
                                                        </div>
                                                    </div>
                                                    <div class="small">
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Forms completados</span>
                                                                <span id="thailand-3-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="thailand-3-form-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                                <span id="thailand-3-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="thailand-3-success-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Aruba 2 -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="aruba-3">
                                        <div class="card border-primary" id="aruba-3-country-card">
                                            <div class="loading-overlay" id="aruba-3-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                                <div class="text-primary">
                                                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                    <div class="mt-2">Cargando...</div>
                                                </div>
                                            </div>
                                            <img src="/flags/aruba.png" alt="Aruba" class="ws-60 country-flag-clickable aruba-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="AW" data-country-name="Aruba" onclick="openModal('AW', 'Aruba')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-primary">Aruba 2</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-primary" id="aruba-3-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-primary" id="aruba-3-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="aruba-3-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="aruba-3-unpaid">0</span> complete unpaid</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="aruba-3-visitas">0</span> visitas</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Dominios -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-globe"></i> Por Dominio:
                                                    </h6>
                                                    <div id="aruba-3-domains" class="domains-container">
                                                        <div class="text-center text-muted">
                                                            <small>Cargando dominios...</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Conversión -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-chart-line"></i> Conversión:
                                                        <span class="badge bg-primary float-end" id="aruba-3-conversion-rate">0%</span>
                                                    </h6>
                                                    <!-- Datos base para el cálculo -->
                                                    <div class="small text-muted mb-3 pb-2 border-bottom">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                            <strong id="aruba-3-conv-visits">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                            <strong class="text-danger" id="aruba-3-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="aruba-3-early-rate">0%</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                            <strong id="aruba-3-conv-abandoned">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                            <strong id="aruba-3-conv-paid">0</strong>
                                                        </div>
                                                    </div>
                                                    <div class="small">
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Forms completados</span>
                                                                <span id="aruba-3-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="aruba-3-form-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                                <span id="aruba-3-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="aruba-3-success-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Curaçao 2 -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="curacao2">
                                        <div class="card border-warning" id="curacao2-country-card">
                                            <div class="loading-overlay" id="curacao2-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                                <div class="text-warning">
                                                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                    <div class="mt-2">Cargando...</div>
                                                </div>
                                            </div>
                                            <img src="/flags/curacao.png" alt="Curaçao" class="ws-60 country-flag-clickable" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="CW" data-country-name="Curaçao" onclick="openModal('CW', 'Curaçao 2')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-warning">Curaçao 2</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-warning" id="curacao2-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-warning" id="curacao2-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="curacao2-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="curacao2-unpaid">0</span> complete unpaid</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="curacao2-visitas">0</span> visitas</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Dominios -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-globe"></i> Por Dominio:
                                                    </h6>
                                                    <div id="curacao2-domains" class="domains-container">
                                                        <div class="text-center text-muted">
                                                            <small>Cargando dominios...</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Conversión -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-chart-line"></i> Conversión:
                                                        <span class="badge bg-primary float-end" id="curacao2-conversion-rate">0%</span>
                                                    </h6>
                                                    <!-- Datos base para el cálculo -->
                                                    <div class="small text-muted mb-3 pb-2 border-bottom">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                            <strong id="curacao2-conv-visits">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                            <strong class="text-danger" id="curacao2-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="curacao2-early-rate">0%</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                            <strong id="curacao2-conv-abandoned">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                            <strong id="curacao2-conv-paid">0</strong>
                                                        </div>
                                                    </div>
                                                    <div class="small">
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Forms completados</span>
                                                                <span id="curacao2-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="curacao2-form-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                                <span id="curacao2-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="curacao2-success-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Malasia 2 -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="malaysia2">
                                        <div class="card border-success" id="malaysia2-country-card">
                                            <div class="loading-overlay" id="malaysia2-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                                <div class="text-success">
                                                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                    <div class="mt-2">Cargando...</div>
                                                </div>
                                            </div>
                                            <img src="/flags/malaysia.png" alt="Malasia" class="ws-60 country-flag-clickable malaysia-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="MY" data-country-name="Malasia" onclick="openModal('MY', 'Malasia')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-success">Malasia 2</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-success" id="malaysia2-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-success" id="malaysia2-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="malaysia2-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="malaysia2-unpaid">0</span> complete unpaid</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="malaysia2-visitas">0</span> visitas</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Dominios -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-globe"></i> Por Dominio:
                                                    </h6>
                                                    <div id="malaysia2-domains" class="domains-container">
                                                        <div class="text-center text-muted">
                                                            <small>Cargando dominios...</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Conversión -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-chart-line"></i> Conversión:
                                                        <span class="badge bg-primary float-end" id="malaysia2-conversion-rate">0%</span>
                                                    </h6>
                                                    <!-- Datos base para el cálculo -->
                                                    <div class="small text-muted mb-3 pb-2 border-bottom">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                            <strong id="malaysia2-conv-visits">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                            <strong class="text-danger" id="malaysia2-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="malaysia2-early-rate">0%</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                            <strong id="malaysia2-conv-abandoned">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                            <strong id="malaysia2-conv-paid">0</strong>
                                                        </div>
                                                    </div>
                                                    <div class="small">
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Forms completados</span>
                                                                <span id="malaysia2-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="malaysia2-form-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                                <span id="malaysia2-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="malaysia2-success-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                <!-- Vietnam -->
                                <div class="col-xl-4 col-md-6 mb-4" data-connection="vietnam">
                                    <div class="card border-danger" id="vietnam-country-card">
                                        <div class="loading-overlay" id="vietnam-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                            <div class="text-danger">
                                                <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                <div class="mt-2">Cargando...</div>
                                            </div>
                                        </div>
                                        <img src="/flags/vietnam.png" alt="Vietnam" class="ws-60 country-flag-clickable vietnam-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="VN" data-country-name="Vietnam" onclick="openModal('VN', 'Vietnam')">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <h5 class="card-title mb-0 text-danger">Vietnam</h5>
                                            </div>
                                            <div class="row gap-2">
                                                <div class="col-12">
                                                    <div class="h2 mb-0 text-danger" id="vietnam-amount">$0.00</div>
                                                </div>
                                                <div class="col-12 flex gap-2">
                                                    <span class="h6 mb-0 font-bold text-danger" id="vietnam-payments">0</span> Payments
                                                    <span class="text-muted ms-3" id="vietnam-documents">0 documents</span>
                                                </div>
                                                <div class="col-12">
                                                    <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="vietnam-unpaid">0</span> complete unpaid</span>
                                                </div>
                                                <div class="col-12">
                                                    <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="vietnam-visitas">0</span> visitas</span>
                                                </div>
                                                <div class="col-12">
                                                    <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                </div>
                                            </div>
                                            
                                            <!-- Sección de Dominios -->
                                            <hr>
                                            <div class="mt-3">
                                                <h6 class="text-muted mb-2">
                                                    <i class="fas fa-globe"></i> Por Dominio:
                                                </h6>
                                                <div id="vietnam-domains" class="domains-container">
                                                    <div class="text-center text-muted">
                                                        <small>Cargando dominios...</small>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Sección de Conversión -->
                                            <hr>
                                            <div class="mt-3">
                                                <h6 class="text-muted mb-2">
                                                    <i class="fas fa-chart-line"></i> Conversión:
                                                    <span class="badge bg-primary float-end" id="vietnam-conversion-rate">0%</span>
                                                </h6>
                                                <!-- Datos base para el cálculo -->
                                                <div class="small text-muted mb-3 pb-2 border-bottom">
                                                    <div class="d-flex justify-content-between mb-1">
                                                        <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                        <strong id="vietnam-conv-visits">0</strong>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-1">
                                                        <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                        <strong class="text-danger" id="vietnam-conv-started">0</strong>
                                                        <span class="badge bg-danger ms-2" id="vietnam-early-rate">0%</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-1">
                                                        <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                        <strong id="vietnam-conv-abandoned">0</strong>
                                                    </div>
                                                    <div class="d-flex justify-content-between">
                                                        <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                        <strong id="vietnam-conv-paid">0</strong>
                                                    </div>
                                                </div>
                                                <div class="small">
                                                    <div class="mb-2">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span>Forms completados</span>
                                                            <span id="vietnam-form-rate">0%</span>
                                                        </div>
                                                        <div class="progress" style="height: 5px;">
                                                            <div class="progress-bar bg-warning" id="vietnam-form-bar" style="width: 0%"></div>
                                                        </div>
                                                    </div>
                                                    <div class="mb-2">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                            <span id="vietnam-success-rate">0%</span>
                                                        </div>
                                                        <div class="progress" style="height: 5px;">
                                                            <div class="progress-bar bg-success" id="vietnam-success-bar" style="width: 0%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Colombia 2 -->
                                <div class="col-xl-4 col-md-6 mb-4" data-connection="colombia-2">
                                        <div class="card border-info" id="colombia-2-country-card">
                                            <div class="loading-overlay" id="colombia-2-loader" style="display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; align-items: center; justify-content: center; border-radius: 0.25rem;">
                                                <div class="text-info">
                                                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                                                    <div class="mt-2">Cargando...</div>
                                                </div>
                                            </div>
                                            <img src="/flags/colombia.png" alt="Colombia" class="ws-60 country-flag-clickable colombia-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="CO" data-country-name="Colombia" onclick="openModal('CO', 'Colombia 2')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-info">Colombia 2</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-info" id="colombia-2-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-info" id="colombia-2-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="colombia-2-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="colombia-2-unpaid">0</span> complete unpaid</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-primary ms-0"><i class="fas fa-eye"></i> <span id="colombia-2-visitas">0</span> visitas</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-danger ms-0">0 refunds - $0.00 - 0.0%</span>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Dominios -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-globe"></i> Por Dominio:
                                                    </h6>
                                                    <div id="colombia-2-domains" class="domains-container">
                                                        <div class="text-center text-muted">
                                                            <small>Cargando dominios...</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Sección de Conversión -->
                                                <hr>
                                                <div class="mt-3">
                                                    <h6 class="text-muted mb-2">
                                                        <i class="fas fa-chart-line"></i> Conversión:
                                                        <span class="badge bg-primary float-end" id="colombia-2-conversion-rate">0%</span>
                                                    </h6>
                                                    <!-- Datos base para el cálculo -->
                                                    <div class="small text-muted mb-3 pb-2 border-bottom">
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-eye"></i> Visitas únicas:</span>
                                                            <strong id="colombia-2-conv-visits">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-user-slash"></i> Forms iniciados sin terminar:</span>
                                                            <strong class="text-danger" id="colombia-2-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="colombia-2-early-rate">0%</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-1">
                                                            <span><i class="fas fa-clock"></i> Abandonos:</span>
                                                            <strong id="colombia-2-conv-abandoned">0</strong>
                                                        </div>
                                                        <div class="d-flex justify-content-between">
                                                            <span><i class="fas fa-check-circle"></i> Pagos totales:</span>
                                                            <strong id="colombia-2-conv-paid">0</strong>
                                                        </div>
                                                    </div>
                                                    <div class="small">
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Forms completados</span>
                                                                <span id="colombia-2-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="colombia-2-form-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>Tasa de pago <small class="text-muted">(de forms completados)</small></span>
                                                                <span id="colombia-2-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="colombia-2-success-bar" style="width: 0%"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    
    @include('layouts.partials.footer')
</div>

<!-- Modal de Distribución por País -->
<div class="modal fade" id="countryDistributionModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Distribución de Países</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center py-5">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">Base de Datos</h6>
                        <p class="mb-0" id="modalDatabase">-</p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-1">Período</h6>
                        <p class="mb-0">Hoy</p>
                    </div>
                </div>
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h3 class="text-primary mb-0" id="modalTotalPayments">0</h3>
                                <small class="text-muted">Total Pagos</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h3 class="text-success mb-0" id="modalTotalAmount">$0.00</h3>
                                <small class="text-muted">Total Monto</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h3 class="text-info mb-0" id="modalUniqueCountries">0</h3>
                                <small class="text-muted">Países Únicos</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <h6 class="text-dark mb-3">
                    <i class="fas fa-flag"></i> Distribución por País
                </h6>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>País</th>
                                <th class="text-end">Pagos</th>
                                <th class="text-end">Monto</th>
                                <th class="text-end">Refunds</th>
                            </tr>
                        </thead>
                        <tbody id="modalCountriesTable">
                            <tr>
                                <td colspan="5" class="text-center text-muted">
                                    <i class="fas fa-spinner fa-spin"></i> Cargando datos...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script para datos globales -->
<script>
    // Variable global con datos de Thailand (se cargará via AJAX)
    window.ThailandStatsData = {};
    window.StatsApiEndpoint = '{{ url("api/stats4/data") }}';
    
    // Flag para indicar que la página está lista para cargar datos
    window.PageReady = true;
    
    // Función global para abrir modal - DEFINIDA INMEDIATAMENTE
    window.openModal = function(iso, countryName) {
        console.log('MODAL FUNCTION CALLED:', iso, countryName);
        
        // Si el manager aún no está listo, mostrar modal básico
        if (!window.statsManager || !window.statsManager.globalStatsData) {
            console.log('Manager no listo, mostrando modal básico');
            const modalElement = document.getElementById('countryDistributionModal');
            if (modalElement) {
                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            }
            return;
        }
        
        // Mapeo directo a connection (mejorado para Curaçao)
        let connection = null;
        switch(iso) {
            case 'TH': 
                // Para Thailand, usar thailand-3
                connection = 'thailand-3'; 
                break;
            // case 'SG': eliminado - no se usa Thailand Singapur
            case 'AW': connection = 'aruba-3'; break;
            case 'CW': 
                // Para Curaçao, solo usar curacao2
                connection = 'curacao2';
                break;
            case 'MY': connection = 'malaysia2'; break;
            // case 'EG': eliminado - no se usa Egipto
            case 'VN': connection = 'vietnam'; break;
            case 'CO': connection = 'colombia-2'; break;
        }
        
        console.log('Connection mapeada:', connection);
        
        if (connection && window.statsManager.globalStatsData[connection]) {
            console.log('DATOS ENCONTRADOS, MOSTRANDO MODAL...');
            window.statsManager.showCountryDistributionModal(connection, countryName);
        } else {
            console.log('NO HAY DATOS PARA:', connection);
            // Mostrar modal básico sin datos
            const modalElement = document.getElementById('countryDistributionModal');
            if (modalElement) {
                const title = document.getElementById('modalTitle');
                if (title) title.textContent = `Distribución - ${countryName}`;
                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            }
        }
    };
    
    // Función global para refresh - DEFINIDA INMEDIATAMENTE
    window.refreshAllStats = function() {
        console.log('REFRESH FUNCTION CALLED!');
        
        // Cambiar ícono del botón a loading
        const refreshBtn = document.getElementById('refresh-stats');
        if (refreshBtn) {
            const icon = refreshBtn.querySelector('i');
            if (icon) {
                icon.className = 'fas fa-spinner fa-spin';
            }
            refreshBtn.disabled = true;
        }
        
        // Si el manager está listo, usar su función
        if (window.statsManager && window.statsManager.refreshAllData) {
            console.log('Usando refresh del manager...');
            window.statsManager.refreshAllData().finally(() => {
                // Restaurar botón
                if (refreshBtn) {
                    const icon = refreshBtn.querySelector('i');
                    if (icon) {
                        icon.className = 'fas fa-sync-alt';
                    }
                    refreshBtn.disabled = false;
                }
            });
        } else {
            console.log('Manager no listo, recargando página...');
            // Si no está listo, recargar la página
            setTimeout(() => {
                location.reload();
            }, 1000);
        }
    };

    // Función global para VS Yesterday - DEFINIDA INMEDIATAMENTE
    window.toggleVSYesterday = function(checked) {
        console.log('📅 VS Yesterday function called:', checked);
        
        const checkbox = document.getElementById('vs-yesterday');
        const label = checkbox ? checkbox.closest('.form-check').querySelector('label') : null;
        
        // Si el manager está listo, usar su función
        if (window.statsManager && window.statsManager.toggleYesterdayComparison) {
            console.log('Usando toggleYesterdayComparison del manager...');
            
            // Mostrar estado de loading en el label si está habilitando
            if (checked && label) {
                const originalText = label.textContent;
                label.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Cargando comparación...';
                checkbox.disabled = true;
                
                // Ejecutar la función y restaurar label cuando termine
                window.statsManager.toggleYesterdayComparison(checked).then(() => {
                    label.textContent = originalText;
                    checkbox.disabled = false;
                }).catch(() => {
                    label.textContent = originalText;
                    checkbox.disabled = false;
                });
            } else {
                // Si está deshabilitando, no mostrar loading
                window.statsManager.toggleYesterdayComparison(checked);
            }
        } else {
            console.log('⚠️ Manager no listo para VS Yesterday');
        }
    };

    // Agregar función showCountryDistributionModal al manager existente
    document.addEventListener('DOMContentLoaded', function() {
        // Esperar un poco para que el manager se inicialice
        setTimeout(() => {
            if (window.statsManager && !window.statsManager.showCountryDistributionModal) {
                window.statsManager.showCountryDistributionModal = function(connection, countryName) {
                    console.log('🌍 Mostrando modal para:', connection, countryName);
                    
                    const modalElement = document.getElementById('countryDistributionModal');
                    if (!modalElement) {
                        console.error('❌ Modal no encontrado');
                        return;
                    }

                    // Establecer título
                    const title = document.getElementById('modalTitle');
                    if (title) {
                        title.textContent = `Distribución por País - ${countryName}`;
                    }

                    // Establecer información de la base de datos
                    const modalDatabase = document.getElementById('modalDatabase');
                    if (modalDatabase) {
                        modalDatabase.textContent = countryName;
                    }

                    // Obtener datos del país para esta conexión
                    const connectionData = this.globalStatsData[connection];
                    if (!connectionData || !connectionData.data || !connectionData.data.country_stats) {
                        console.log('❌ No hay datos de países para:', connection);
                        // Mostrar modal sin datos
                        const tableBody = document.getElementById('modalCountriesTable');
                        if (tableBody) {
                            tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay datos de países disponibles</td></tr>';
                        }
                        const modal = new bootstrap.Modal(modalElement);
                        modal.show();
                        return;
                    }

                    const data = connectionData.data;
                    
                    // Renderizar tabla con datos de países
                    const tableBody = document.getElementById('modalCountriesTable');
                    if (tableBody) {
                        let tableHTML = '';
                        const countryStats = data.country_stats || {};
                        const countryAmounts = data.country_amounts || {};
                        
                        // Convertir a array y ordenar por número de documentos
                        const countriesArray = Object.entries(countryStats).map(([country, total]) => ({
                            country: country,
                            total: total,
                            amount: countryAmounts[country] || 0
                        })).sort((a, b) => b.total - a.total);

                        let index = 1;
                        countriesArray.forEach(country => {
                            tableHTML += `
                                <tr>
                                    <td>${index}</td>
                                    <td>${country.country || 'N/A'}</td>
                                    <td class="text-end">${country.total || 0}</td>
                                    <td class="text-end">$${(country.amount || 0).toFixed(2)}</td>
                                    <td class="text-end">0</td>
                                </tr>
                            `;
                            index++;
                        });

                        if (tableHTML === '') {
                            tableHTML = '<tr><td colspan="5" class="text-center text-muted">No hay datos de países</td></tr>';
                        }

                        tableBody.innerHTML = tableHTML;
                    }

                    // Actualizar totales en el modal
                    const modalTotalPayments = document.getElementById('modalTotalPayments');
                    const modalTotalAmount = document.getElementById('modalTotalAmount');
                    const modalUniqueCountries = document.getElementById('modalUniqueCountries');
                    
                    if (modalTotalPayments) {
                        modalTotalPayments.textContent = data.document_count || 0;
                    }
                    if (modalTotalAmount) {
                        modalTotalAmount.textContent = `$${(data.total_amount || 0).toFixed(2)}`;
                    }
                    if (modalUniqueCountries) {
                        modalUniqueCountries.textContent = Object.keys(data.country_stats || {}).length;
                    }

                    // Mostrar modal
                    const modal = new bootstrap.Modal(modalElement);
                    modal.show();
                };
                console.log('✅ Función showCountryDistributionModal agregada al manager existente');
            }
        }, 1000);
    });

</script>
@endsection