@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="h3 mb-3">Estadísticas</h1>

    <form action="{{ route('reportes.estadisticas.filtrar') }}" method="POST" class="row g-2 mb-3 align-items-end">
        @csrf
        <div class="col-auto">
            <label class="form-label">Año</label>
            <input type="number" name="anio" class="form-control" value="{{ $anio }}">
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary">Consultar</button>
        </div>
    </form>

    <div class="card mb-4">
        <div class="card-header">Facturación mensual ({{ $anio }})</div>
        <div class="card-body">
            <canvas id="graficoFacturacion" height="100"></canvas>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6 mb-3 mb-md-0">
            <div class="card h-100">
                <div class="card-header">Productos más vendidos ({{ $anio }})</div>
                <div class="card-body">
                    <canvas id="graficoMasVendidos" height="220"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">Productos menos vendidos ({{ $anio }})</div>
                <div class="card-body">
                    <canvas id="graficoMenosVendidos" height="220"></canvas>
                    <p class="text-muted small mt-2 mb-0">Incluye productos activos sin ninguna venta en el año (cantidad 0).</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-5 mb-3 mb-md-0">
            <div class="card h-100">
                <div class="card-header">Impuestos recaudados ({{ $anio }})</div>
                <div class="card-body">
                    @if ($impuestos->isEmpty())
                        <p class="text-muted mb-0">Sin datos para este año.</p>
                    @else
                        <canvas id="graficoImpuestos" height="220"></canvas>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="card h-100">
                <div class="card-header">Balance de facturación ({{ $anio }})</div>
                <div class="card-body">
                    <p class="text-muted small">Resumen de lo facturado en el año. No incluye costos ni gastos: este sistema no lleva un libro contable de compras/gastos, solo facturación.</p>
                    <dl class="row mb-0">
                        <dt class="col-7">Subtotal bruto (antes de descuentos)</dt>
                        <dd class="col-5 text-end">{{ number_format($balance['subtotal_bruto'], 2) }}</dd>

                        <dt class="col-7">Descuentos otorgados</dt>
                        <dd class="col-5 text-end text-danger">-{{ number_format($balance['descuentos'], 2) }}</dd>

                        <dt class="col-7">Impuestos recaudados</dt>
                        <dd class="col-5 text-end">{{ number_format($balance['impuestos'], 2) }}</dd>

                        <dt class="col-7 fw-bold">Total facturado</dt>
                        <dd class="col-5 text-end fw-bold">{{ number_format($balance['total_facturado'], 2) }}</dd>

                        <dt class="col-7">Notas de crédito pendientes</dt>
                        <dd class="col-5 text-end">{{ $balance['notas_credito_cantidad'] }} ({{ number_format($balance['notas_credito_monto'], 2) }})</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
    new Chart(document.getElementById('graficoFacturacion'), {
        type: 'bar',
        data: {
            labels: @json($etiquetas),
            datasets: [
                {
                    label: 'Total facturado ({{ $anio }})',
                    data: @json($totalesPorMes),
                    backgroundColor: 'rgba(13, 110, 253, 0.6)',
                    yAxisID: 'y',
                },
                {
                    label: 'Cantidad de facturas',
                    data: @json($cantidadPorMes),
                    type: 'line',
                    borderColor: 'rgba(220, 53, 69, 1)',
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            scales: {
                y: { type: 'linear', position: 'left', beginAtZero: true },
                y1: { type: 'linear', position: 'right', beginAtZero: true, grid: { drawOnChartArea: false } },
            }
        }
    });

    new Chart(document.getElementById('graficoMasVendidos'), {
        type: 'bar',
        data: {
            labels: @json($masVendidos->pluck('nombre')),
            datasets: [{
                label: 'Unidades vendidas',
                data: @json($masVendidos->pluck('cantidad')),
                backgroundColor: 'rgba(25, 135, 84, 0.6)',
            }]
        },
        options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } }
    });

    new Chart(document.getElementById('graficoMenosVendidos'), {
        type: 'bar',
        data: {
            labels: @json($menosVendidos->pluck('nombre')),
            datasets: [{
                label: 'Unidades vendidas',
                data: @json($menosVendidos->pluck('cantidad')),
                backgroundColor: 'rgba(255, 193, 7, 0.7)',
            }]
        },
        options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } }
    });

    @if ($impuestos->isNotEmpty())
        new Chart(document.getElementById('graficoImpuestos'), {
            type: 'doughnut',
            data: {
                labels: @json($impuestos->pluck('nombre')),
                datasets: [{
                    data: @json($impuestos->pluck('total')),
                    backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#6f42c1', '#20c997'],
                }]
            }
        });
    @endif
</script>
@endsection