@extends('layouts.admin')

@section('title', 'Estadísticas de Tarjetas')

@section('content')
<div class="container">
    <h2 class="mb-4">Estadísticas de Puntuación</h2>

    <form method="GET" class="row g-2 mb-4">
        <div class="col-md-3">
            <select name="categoria" class="form-control">
                <option value="">-- Todas las categorías --</option>
                @foreach ($categorias as $cat)
                    <option value="{{ $cat }}" {{ request('categoria') == $cat ? 'selected' : '' }}>
                        {{ ucfirst($cat) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <input type="date" name="desde" class="form-control" value="{{ request('desde') }}">
        </div>
        <div class="col-md-3">
            <input type="date" name="hasta" class="form-control" value="{{ request('hasta') }}">
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-primary w-100">Filtrar</button>
        </div>
    </form>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm text-center">
                <div class="card-body">
                    <h5>Total de Puntos</h5>
                    <p class="display-6">{{ $totalPuntos }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm text-center">
                <div class="card-body">
                    <h5>Promedio</h5>
                    <p class="display-6">{{ number_format($promedio, 1) }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm text-center">
                <div class="card-body">
                    <h5>Mayor Puntuación</h5>
                    <p class="mb-1"><strong>{{ $mayor->nombre_comercio }}</strong></p>
                    <p class="display-6">{{ $mayor->puntos }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm text-center">
                <div class="card-body">
                    <h5>Menor Puntuación</h5>
                    <p class="mb-1"><strong>{{ $menor->nombre_comercio }}</strong></p>
                    <p class="display-6">{{ $menor->puntos }}</p>
                </div>
            </div>
        </div>
    </div>

    <h4 class="mt-5">Puntos por Comercio</h4>
    <canvas id="graficoPuntos"></canvas>
</div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('graficoPuntos').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($porComercio->keys()) !!},
            datasets: [{
                label: 'Puntos acumulados',
                data: {!! json_encode($porComercio->values()) !!},
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    precision: 0
                }
            }
        }
    });
</script>
@endpush