@extends('layouts.admin')

@section('title', 'Análise de Visitantes')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Análise de Visitantes</h1>
    <a href="{{ route('admin.marketing.index') }}" class="btn btn-sm btn-secondary shadow-sm">
        <i class="bi bi-arrow-left text-white-50"></i> Voltar
    </a>
</div>

<div class="row">
    <!-- Gráfico de Acessos (Últimos 7 dias) -->
    <div class="col-xl-12 col-lg-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Acessos nos Últimos 7 Dias</h6>
            </div>
            <div class="card-body">
                <div class="chart-area">
                    <canvas id="accessChart" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Ranking por País -->
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Top 10 Países</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>País</th>
                                <th class="text-center">Acessos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($countries as $country)
                            <tr>
                                <td><i class="bi bi-globe-americas text-muted me-2"></i> {{ $country->country }}</td>
                                <td class="text-center"><span class="badge badge-primary">{{ $country->total }}</span></td>
                            </tr>
                            @empty
                            <tr><td colspan="2" class="text-center">Nenhum dado capturado ainda.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Ranking por Cidade -->
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Top 10 Cidades</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Cidade / Região</th>
                                <th class="text-center">Acessos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($cities as $city)
                            <tr>
                                <td><i class="bi bi-geo-alt text-danger me-2"></i> {{ $city->city }} ({{ $city->region }})</td>
                                <td class="text-center"><span class="badge badge-success">{{ $city->total }}</span></td>
                            </tr>
                            @empty
                            <tr><td colspan="2" class="text-center">Nenhum dado capturado ainda.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info border-0 shadow-sm small">
    <i class="bi bi-info-circle me-2"></i> <strong>Nota:</strong> A localização é estimada com base no endereço IP do visitante. A precisão pode variar dependendo do provedor de internet. Os dados são capturados apenas em páginas públicas (não administrativas).
</div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('accessChart').getContext('2d');
    const accessChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: JSON.parse('<?php echo json_encode($last7Days->pluck("date")); ?>'),
            datasets: [{
                label: 'Visitas',
                data: JSON.parse('<?php echo json_encode($last7Days->pluck("total")); ?>'),
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                borderColor: 'rgba(78, 115, 223, 1)',
                pointRadius: 3,
                pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointBorderColor: 'rgba(78, 115, 223, 1)',
                pointHoverRadius: 3,
                pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                pointHitRadius: 10,
                pointBorderWidth: 2,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
</script>
@endpush