@extends('adminlte::page')

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

@section('content_header')
    <h1><i class="fas fa-chart-line"></i> Estadísticas de Despachos</h1>
@stop

@section('content')

    {{-- Filtros --}}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-filter"></i> Filtros</h3>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('estadisticas.index') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Mes</label>
                                    <select name="mes" class="form-control">
                                        @for($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}" {{ $mes == $i ? 'selected' : '' }}>
                                                {{ \Carbon\Carbon::create()->month($i)->translatedFormat('F') }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Año</label>
                                    <select name="anio" class="form-control">
                                        @for($year = now()->year; $year >= now()->year - 3; $year--)
                                            <option value="{{ $year }}" {{ $anio == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-search"></i> Buscar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Cards de Resumen con Tendencias --}}
    <div class="row">
        <div class="col-lg-4 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ number_format($totalDespachos) }}</h3>
                    <p>DESPACHOS REALIZADOS</p>
                    <small>
                        @if($cambioDespachos > 0)
                            <i class="fas fa-arrow-up"></i> +{{ number_format($cambioDespachos, 1) }}%
                        @elseif($cambioDespachos < 0)
                            <i class="fas fa-arrow-down"></i> {{ number_format($cambioDespachos, 1) }}%
                        @else
                            <i class="fas fa-minus"></i> 0%
                        @endif
                        vs mes anterior
                    </small>
                </div>
                <div class="icon">
                    <i class="fas fa-truck"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ number_format($totalPollos) }}</h3>
                    <p>POLLOS DESPACHADOS</p>
                    <small>
                        @if($cambioPollos > 0)
                            <i class="fas fa-arrow-up"></i> +{{ number_format($cambioPollos, 1) }}%
                        @elseif($cambioPollos < 0)
                            <i class="fas fa-arrow-down"></i> {{ number_format($cambioPollos, 1) }}%
                        @else
                            <i class="fas fa-minus"></i> 0%
                        @endif
                        vs mes anterior
                    </small>
                </div>
                <div class="icon">
                    <i class="fas fa-drumstick-bite"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ number_format($pesoTotal, 2) }}</h3>
                    <p>KILOGRAMOS TOTALES</p>
                    <small>Peso neto despachado</small>
                </div>
                <div class="icon">
                    <i class="fas fa-weight"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- Gráficos --}}
    <div class="row">
        {{-- Gráfico de Tendencia --}}
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-line text-success"></i> Tendencia de Despachos (Últimos 12 Meses)
                    </h3>
                </div>
                <div class="card-body">
                    <canvas id="tendenciaChart" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>

        {{-- Gráfico Circular --}}
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-pie text-info"></i> Distribución por Producto
                    </h3>
                </div>
                <div class="card-body">
                    <canvas id="distribucionChart" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabla Top Productos --}}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-trophy text-warning"></i> Top 5 Productos Más Despachados
                    </h3>
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th style="width: 10px">#</th>
                                <th>Producto</th>
                                <th>Unidades</th>
                                <th>Peso Total (kg)</th>
                                <th>% del Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topProductos as $index => $producto)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><strong>{{ $producto->descripcion }}</strong></td>
                                    <td>{{ number_format($producto->total_unidades) }}</td>
                                    <td>{{ number_format($producto->total_peso, 2) }}</td>
                                    <td>
                                        <strong>{{ $totalPollos > 0 ? number_format(($producto->total_unidades / $totalPollos) * 100, 1) : 0 }}%</strong>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">No hay datos disponibles</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        // Gráfico de Tendencia
        const tendenciaData = @json($datosTendencia);
        const ctxTendencia = document.getElementById('tendenciaChart').getContext('2d');
        new Chart(ctxTendencia, {
            type: 'line',
            data: {
                labels: tendenciaData.map(d => d.mes),
                datasets: [{
                    label: 'Cantidad de Pollos',
                    data: tendenciaData.map(d => d.cantidad),
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Gráfico Circular
        const distribucionData = @json($distribucionProductos);
        const ctxDistribucion = document.getElementById('distribucionChart').getContext('2d');
        new Chart(ctxDistribucion, {
            type: 'doughnut',
            data: {
                labels: distribucionData.map(d => d.nombre),
                datasets: [{
                    data: distribucionData.map(d => d.cantidad),
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)',
                        'rgb(153, 102, 255)'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom'
                    }
                }
            }
        });
    </script>
@stop