@extends('layouts.dashboardnew')

@section('content')
<link href="{{ asset('assets/plugins/country/svg-map.min.css') }}" rel="stylesheet">


<div class="row g-3 mb-4">

    {{-- Total Usuarios --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-info-subtle text-info-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-users fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $datos['total_hoy'] >= 1 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }} fw-semibold">
                        <i class="fa-solid {{ $datos['total_hoy'] >= 1 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $datos['total_hoy'] }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Total usuarios</p>
                <h3 class="fw-bold mb-0">{{ number_format($datos['total_usuarios']) }}</h3>
            </div>
        </div>
    </div>

    {{-- Total Activos --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-success-subtle text-success-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-user-check fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $datos['promedio_activos'] > 0 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }} fw-semibold">
                        <i class="fa-solid {{ $datos['promedio_activos'] > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $datos['promedio_activos'] }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Total activos</p>
                <h3 class="fw-bold mb-0">{{ number_format($datos['total_activos']) }}</h3>
            </div>
        </div>
    </div>

    {{-- Total Inactivos --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-warning-subtle text-warning-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-user-slash fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-danger-subtle text-danger-emphasis fw-semibold">
                        <i class="fa-solid fa-arrow-trend-down me-1"></i>
                        {{ $datos['promedio_inactivos'] }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Total inactivos</p>
                <h3 class="fw-bold mb-0">{{ number_format($datos['total_inactivo']) }}</h3>
            </div>
        </div>
    </div>

    {{-- Registrados Hoy --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-user-plus fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $datos['total_hoy'] > 0 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }} fw-semibold">
                        <i class="fa-solid {{ $datos['total_hoy'] > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $datos['total_hoy'] }}%
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Registrados hoy</p>
                <h3 class="fw-bold mb-0">{{ number_format($datos['total_hoy']) }}</h3>
            </div>
        </div>
    </div>

</div>


<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 mb-3">
            <div>
                <h5 class="fw-bold mb-1">Usuarios registrados por mes</h5>
                <p class="text-muted small mb-0">Evolución mensual de nuevos registros</p>
            </div>
        </div>
        <div id="chartdiv" data-url="{{ route('chart.panel.usuario') }}" style="width:100%;height:420px;"></div>
    </div>
</div>


<div class="row g-4 mb-4">

  
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-crown text-warning me-1"></i> Top Líderes
                        </h5>
                        <p class="text-muted small mb-0">Los más destacados del periodo</p>
                    </div>
                </div>

                @if(count($datos['top_lideres']) > 0)

                    {{-- Podio: 2° - 1° - 3° --}}
                    @php
                        $lideres = $datos['top_lideres'];
                        $primero = $lideres[0] ?? null;
                        $segundo = $lideres[1] ?? null;
                        $tercero = $lideres[2] ?? null;
                    @endphp

                    <div class="row g-2 align-items-end mb-4 text-center">
                        {{-- 2° --}}
                        <div class="col-4">
                            @if($segundo)
                                <div class="position-relative d-inline-block mb-2">
                                    @if($segundo->avatar)
                                        <img src="{{ $segundo->avatar }}" class="rounded-circle border border-2" style="width:64px;height:64px;object-fit:cover;border-color:#9ca3af !important;">
                                    @else
                                        <div class="rounded-circle bg-secondary-subtle d-flex align-items-center justify-content-center" style="width:64px;height:64px;">
                                            <i class="fa-solid fa-user text-secondary fs-4"></i>
                                        </div>
                                    @endif
                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center" style="width:26px;height:26px;">2</span>
                                </div>
                                <p class="mb-0 fw-semibold small text-truncate">{{ $segundo->display_name }}</p>
                                <small class="text-muted">{{ $segundo->directos }} directos</small>
                                <div class="bg-secondary-subtle rounded-3 mt-2 mx-auto" style="height:60px;width:100%;"></div>
                            @endif
                        </div>

                        {{-- 1° --}}
                        <div class="col-4">
                            @if($primero)
                                <div class="position-relative d-inline-block mb-2">
                                    <i class="fa-solid fa-crown text-warning position-absolute top-0 start-50 translate-middle-x" style="font-size:1.5rem;margin-top:-15px;"></i>
                                    @if($primero->avatar)
                                        <img src="{{ $primero->avatar }}" class="rounded-circle border border-3" style="width:80px;height:80px;object-fit:cover;border-color:#fbbf24 !important;">
                                    @else
                                        <div class="rounded-circle bg-warning-subtle d-flex align-items-center justify-content-center border border-3 border-warning" style="width:80px;height:80px;">
                                            <i class="fa-solid fa-user text-warning fs-3"></i>
                                        </div>
                                    @endif
                                    <span class="position-absolute top-100 start-50 translate-middle badge rounded-circle bg-warning text-white d-inline-flex align-items-center justify-content-center fw-bold" style="width:30px;height:30px;">1</span>
                                </div>
                                <p class="mb-0 fw-bold small text-truncate mt-2">{{ $primero->display_name }}</p>
                                <small class="text-muted">{{ $primero->directos }} directos</small>
                                <div class="bg-warning-subtle rounded-3 mt-2 mx-auto" style="height:90px;width:100%;"></div>
                            @endif
                        </div>

                        {{-- 3° --}}
                        <div class="col-4">
                            @if($tercero)
                                <div class="position-relative d-inline-block mb-2">
                                    @if($tercero->avatar)
                                        <img src="{{ $tercero->avatar }}" class="rounded-circle border border-2" style="width:64px;height:64px;object-fit:cover;border-color:#fb923c !important;">
                                    @else
                                        <div class="rounded-circle bg-warning-subtle d-flex align-items-center justify-content-center" style="width:64px;height:64px;">
                                            <i class="fa-solid fa-user text-warning fs-4"></i>
                                        </div>
                                    @endif
                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle text-white d-inline-flex align-items-center justify-content-center" style="width:26px;height:26px;background:#fb923c;">3</span>
                                </div>
                                <p class="mb-0 fw-semibold small text-truncate">{{ $tercero->display_name }}</p>
                                <small class="text-muted">{{ $tercero->directos }} directos</small>
                                <div class="rounded-3 mt-2 mx-auto" style="height:45px;width:100%;background:#fed7aa;"></div>
                            @endif
                        </div>
                    </div>

                    {{-- Lista del resto + detalle del top 1 --}}
                    @if($primero)
                    <div class="bg-light rounded-3 p-3 mb-3">
                        <p class="small fw-semibold text-uppercase text-muted mb-2">
                            <i class="fa-solid fa-medal text-warning me-1"></i> Líder destacado
                        </p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 fw-bold">{{ $primero->display_name }}</p>
                                <small class="text-muted">{{ $primero->rol->name ?? 'Sin Rango' }}</small>
                            </div>
                            <div class="text-end">
                                <p class="mb-0 fw-bold text-info">
                                    @if ($datos['moneda']->mostrar_a_d)
                                       {{ $datos['moneda']->simbolo }} {{ number_format($primero->total_ganado, 2) }}
                                    @else
                                       {{ number_format($primero->total_ganado, 2) }} {{ $datos['moneda']->simbolo }}
                                    @endif
                                </p>
                                <small class="text-muted">Ganancias</small>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Resto (4° en adelante) --}}
                    @if(count($lideres) > 3)
                    <div class="border-top pt-3">
                        <p class="small fw-semibold text-uppercase text-muted mb-2">Otros líderes</p>
                        @foreach($lideres->slice(3) as $i => $lider)
                            <div class="d-flex align-items-center gap-3 py-2 {{ !$loop->last ? 'border-bottom' : '' }}">
                                <span class="badge rounded-circle bg-light text-secondary d-inline-flex align-items-center justify-content-center fw-bold" style="width:28px;height:28px;">{{ $i + 4 }}</span>
                                @if($lider->avatar)
                                    <img src="{{ $lider->avatar }}" class="rounded-circle" style="width:36px;height:36px;object-fit:cover;">
                                @else
                                    <div class="rounded-circle bg-info-subtle d-flex align-items-center justify-content-center" style="width:36px;height:36px;">
                                        <i class="fa-solid fa-user text-info-emphasis small"></i>
                                    </div>
                                @endif
                                <div class="flex-grow-1 min-w-0">
                                    <p class="mb-0 fw-semibold small text-truncate">{{ $lider->display_name }}</p>
                                    <small class="text-muted">{{ $lider->directos }} directos</small>
                                </div>
                                <small class="fw-bold text-info">
                                    @if ($datos['moneda']->mostrar_a_d)
                                        {{ $datos['moneda']->simbolo }} {{ number_format($lider->total_ganado, 0) }}
                                    @else
                                        {{ number_format($lider->total_ganado, 0) }} {{ $datos['moneda']->simbolo }}
                                    @endif
                                </small>
                            </div>
                        @endforeach
                    </div>
                    @endif

                @else
                    <div class="text-center py-5">
                        <i class="fa-solid fa-trophy text-muted fs-1 mb-3"></i>
                        <p class="text-muted mb-0">No hay líderes para mostrar</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-bag-shopping text-info me-1"></i> Top Compradores
                        </h5>
                        <p class="text-muted small mb-0">Usuarios con mayor volumen de compras</p>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="text-muted small text-uppercase" style="letter-spacing:.5px;">
                                <th class="ps-3 border-0" style="width:50px;">#</th>
                                <th class="border-0">Usuario</th>
                                <th class="text-center border-0">Total</th>
                                <th class="text-center border-0">Compras</th>
                                <th class="border-0" style="min-width:160px;">Progreso</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $maxTotal = $datos['top_comisiones']->max('totales'); @endphp

                            @forelse($datos['top_comisiones'] as $idx => $item)
                                @php $pct = $maxTotal > 0 ? round(($item->totales / $maxTotal) * 100) : 0; @endphp
                                <tr>
                                    <td class="ps-3">
                                        @if($idx == 0)
                                            <span class="badge rounded-circle bg-warning text-white d-inline-flex align-items-center justify-content-center fw-bold" style="width:30px;height:30px;">
                                                <i class="fa-solid fa-crown small"></i>
                                            </span>
                                        @elseif($idx == 1)
                                            <span class="badge rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center fw-bold" style="width:30px;height:30px;">2</span>
                                        @elseif($idx == 2)
                                            <span class="badge rounded-circle text-white d-inline-flex align-items-center justify-content-center fw-bold" style="width:30px;height:30px;background:#fb923c;">3</span>
                                        @else
                                            <span class="badge rounded-circle bg-light text-secondary d-inline-flex align-items-center justify-content-center fw-bold" style="width:30px;height:30px;">{{ $idx + 1 }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="{{ $item->user->avatar }}" class="rounded-circle border" width="42" height="42" style="object-fit:cover;">
                                            <div>
                                                <p class="mb-0 fw-semibold">{{ $item->user->display_name }}</p>
                                                <small class="text-muted">ID {{ $item->iduser }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center fw-bold text-info-emphasis">
                                        @if ($datos['moneda']->mostrar_a_d)
                                            {{ $datos['moneda']->simbolo }} {{ number_format($item->totales, 0) }}
                                        @else
                                            {{ number_format($item->totales, 0) }} {{ $datos['moneda']->simbolo }}
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info-subtle text-info-emphasis rounded-pill fw-semibold">{{ $item->contador }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="progress flex-grow-1" style="height:6px;background:#e6f4fb;">
                                                <div class="progress-bar" role="progressbar"
                                                     style="width:{{ $pct }}%;background:linear-gradient(90deg,#3EC6FF,#1A8FE0);"
                                                     aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <small class="text-muted fw-semibold" style="min-width:36px;">{{ $pct }}%</small>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5">
                                        <i class="fa-solid fa-chart-simple text-muted fs-1 mb-2"></i>
                                        <p class="text-muted mb-0">Aún no hay compradores</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-3">
            <div>
                <h5 class="fw-bold mb-1">Análisis demográfico</h5>
                <p class="text-muted small mb-0">Distribución de usuarios por diferentes criterios</p>
            </div>
        </div>

        <ul class="nav nav-pills mb-4 gap-2" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="#edad" data-bs-toggle="tab" class="nav-link active px-3 py-2 fw-semibold" role="tab">
                    <i class="fa-solid fa-cake-candles me-1"></i> Edad
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#genero" data-bs-toggle="tab" class="nav-link px-3 py-2 fw-semibold" role="tab">
                    <i class="fa-solid fa-venus-mars me-1"></i> Género
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#pais" data-bs-toggle="tab" class="nav-link px-3 py-2 fw-semibold" role="tab">
                    <i class="fa-solid fa-globe me-1"></i> País
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="edad" role="tabpanel">
                <div id="chart_edad" data-url="{{ route('chart.panel.edad') }}" style="min-height:400px;"></div>
            </div>
            <div class="tab-pane fade" id="genero" role="tabpanel">
                <div id="pieChart" data-url="{{ route('chart.panel.genero') }}" style="width:100%;height:500px;"></div>
            </div>
            <div class="tab-pane fade" id="pais" role="tabpanel">
                <div id="map" style="width:100%;"></div>
            </div>
        </div>

    </div>
</div>


<div class="row g-4 mb-4">

    {{-- Últimos usuarios --}}
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-user-plus text-info me-1"></i> Últimos registros
                        </h5>
                        <p class="text-muted small mb-0">Nuevos usuarios en la plataforma</p>
                    </div>
                </div>

                <div class="row g-3">
                    @forelse($datos['ultimos_registros'] as $direct)
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-3 p-3 rounded-3 border h-100" style="transition:background .15s ease;" onmouseover="this.style.background='#f8fbfd'" onmouseout="this.style.background='transparent'">
                            <img src="{{ asset('fondo/'.$direct->avatar) }}"
                                 alt="{{ $direct->display_name }}"
                                 class="rounded-circle flex-shrink-0"
                                 style="width:46px;height:46px;object-fit:cover;">
                            <div class="flex-grow-1 min-w-0">
                                <p class="mb-0 fw-semibold text-truncate">{{ $direct->display_name }}</p>
                                <small class="text-muted">
                                    <i class="fa-regular fa-clock me-1"></i>
                                    {{ \Carbon\Carbon::parse($direct->created_at)->diffForHumans() }}
                                </small>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5">
                        <i class="fa-solid fa-user-slash text-muted fs-1 mb-2"></i>
                        <p class="text-muted mb-0">No hay registros recientes</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Gráfica 7 días --}}
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-chart-line text-info me-1"></i> Tendencia semanal
                        </h5>
                        <p class="text-muted small mb-0">Registros de los últimos 7 días</p>
                    </div>
                    <span class="badge bg-info-subtle text-info-emphasis rounded-pill px-3 py-2">
                        <i class="fa-solid fa-circle-dot me-1"></i> En vivo
                    </span>
                </div>
                <div id="ultimos_usuarios" data-url="{{ route('chart.panel.ultimos-user') }}" style="min-height:300px;"></div>
            </div>
        </div>
    </div>

</div>
 
@endsection

@push('script')

{{-- amcharts --}}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src ="{{ asset('assets/plugins/amcharts/grafica_panel_usuario.js') }}"></script>

{{-- mapa --}}
<script src="{{ asset('assets/plugins/country/svg-map.umd.min.js') }}"></script>


<script>
let mapaInicializado = false;

document.querySelector('a[href="#pais"]').addEventListener('shown.bs.tab', function () {
    if (!mapaInicializado) {
        new svgMap({
            targetElementID: 'map',
            colorMin: '#bae6fd',
            colorMax: '#0EA5E9',
            flagType: 'image',
            colorNoData: '#e5e7eb',
            noDataText: 'No hay usuarios',
            data: {
                data: {
                    visitors: {
                        name: 'Usuarios',
                        thousandSeparator: ',',
                        thresholdMax: 500000,
                        thresholdMin: 0
                    }
                },
                applyData: 'visitors',
                values: {
                    @foreach($datos['paises'] as $pais)
                      '{{ $pais->paisdatos->abbreviation }}': {visitors: '{{ $pais->totales }}'},
                    @endforeach
                }
            }
        });
        mapaInicializado = true;
    }
});
</script>

@endpush