@extends('layouts.app')
@section('title', 'Stats 3.0')
@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('js/stats3/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">
                <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>
                    </div>
                </div>
                <div class="row mb-4">
                    <div class="page-title-right">
                        <div class="d-flex align-items-start gap-3 flex-col" style="flex-direction: column;">
                            <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 class="btn btn-primary btn-sm" id="apply-custom-dates">Aplicar</button>
                                </div>
                            </div>
                            
                            <button id="refresh-stats3" class="btn btn-primary" onclick="refreshAllStats()">
                                <i class="fas fa-sync-alt"></i>
                                Refresh
                            </button>
                        </div>
                    </div>
                </div>
                <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: none; position: absolute; inset: 0px; 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>
                                <div id="global-money-yesterday-comparison" class="mt-3 pt-3 border-top" style="display: none;">
                                </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: none; position: absolute; inset: 0px; 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">523</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                                    <!-- Curacao -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="curacaonow">
                                        <div class="card border-info" id="curacaonow-country-card">
                                            <div class="loading-overlay" id="curacaonow-loader" style="display: none; position: absolute; inset: 0px; 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/curacao.png" alt="Curacao" class="ws-60 country-flag-clickable curacaonow-flag" style="width: 40px; height: auto; position:absolute; top:0; right:0; cursor: pointer;" data-iso="CW" data-country-name="Curacao" onclick="openModal('CW', 'Curacao')">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center mb-3">
                                                    <h5 class="card-title mb-0 text-info">Curacao</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-info" id="curacaonow-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-info" id="curacaonow-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="curacaonow-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="curacaonow-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="curacaonow-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="curacaonow-domains" class="domains-container">
                                                        <div class="text-muted text-center small">Cargando dominios...</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="curacaonow-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="curacaonow-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="curacaonow-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="curacaonow-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="curacaonow-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="curacaonow-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="curacaonow-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="curacaonow-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="curacaonow-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="curacaonow-success-bar" style="width: 0%;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Aruba -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="arubanow">
                                        <div class="card border-warning" id="arubanow-country-card">
                                            <div class="loading-overlay" id="arubanow-loader" style="display: none; position: absolute; inset: 0px; 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/aruba.png" alt="Aruba" class="ws-60 country-flag-clickable arubanow-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-warning">Aruba</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-warning" id="arubanow-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-warning" id="arubanow-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="arubanow-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="arubanow-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="arubanow-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="arubanow-domains" class="domains-container">
                                                        <div class="text-muted text-center small">Cargando dominios...</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="arubanow-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="arubanow-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="arubanow-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="arubanow-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="arubanow-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="arubanow-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="arubanow-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="arubanow-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="arubanow-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="arubanow-success-bar" style="width: 0%;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Thailand -->
                                    <div class="col-xl-4 col-md-6 mb-4" data-connection="thailandnow">
                                        <div class="card border-success" id="thailandnow-country-card">
                                            <div class="loading-overlay" id="thailandnow-loader" style="display: none; position: absolute; inset: 0px; 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/thailand.png" alt="Thailand" class="ws-60 country-flag-clickable thailandnow-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-success">Thailand</h5>
                                                </div>
                                                <div class="row gap-2">
                                                    <div class="col-12">
                                                        <div class="h2 mb-0 text-success" id="thailandnow-amount">$0.00</div>
                                                    </div>
                                                    <div class="col-12 flex gap-2">
                                                        <span class="h6 mb-0 font-bold text-success" id="thailandnow-payments">0</span> Payments
                                                        <span class="text-muted ms-3" id="thailandnow-documents">0 documents</span>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="text-warning ms-0"><i class="fas fa-clock"></i> <span id="thailandnow-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="thailandnow-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="thailandnow-domains" class="domains-container">
                                                        <div class="text-muted text-center small">Cargando dominios...</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="thailandnow-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="thailandnow-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="thailandnow-conv-started">0</strong>
                                                            <span class="badge bg-danger ms-2" id="thailandnow-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="thailandnow-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="thailandnow-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="thailandnow-form-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-warning" id="thailandnow-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="thailandnow-success-rate">0%</span>
                                                            </div>
                                                            <div class="progress" style="height: 5px;">
                                                                <div class="progress-bar bg-success" id="thailandnow-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>
@endsection