@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Analíticas Despacho Pérdidas')

@section('content_header')
    <h1><i class="fas fa-exclamation-triangle"></i> Analíticas - Despacho Pérdidas</h1>
@stop

@section('content')
    @include('admin.estadisticas.partials.filtros', ['route' => 'analiticas.despacho-perdidas', 'mes' => $mes, 'anio' => $anio])

    <div class="row">
        <div class="col-lg-4 col-6">
            <div class="small-box bg-secondary">
                <div class="inner">
                    <h3>{{ number_format($totalRegistros) }}</h3>
                    <p>REGISTROS DE PÉRDIDA</p>
                    <small>
                        @if($cambioRegistros > 0)<i class="fas fa-arrow-up"></i> +{{ number_format($cambioRegistros, 1) }}%
                        @elseif($cambioRegistros < 0)<i class="fas fa-arrow-down"></i> {{ number_format($cambioRegistros, 1) }}%
                        @else<i class="fas fa-minus"></i> 0% @endif vs mes anterior
                    </small>
                </div>
                <div class="icon"><i class="fas fa-clipboard-list"></i></div>
            </div>
        </div>
        <div class="col-lg-4 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ number_format($totalPollos) }}</h3>
                    <p>POLLOS PERDIDOS</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-danger">
                <div class="inner">
                    <h3>{{ number_format($pesoTotal, 2) }}</h3>
                    <p>PESO TOTAL (kg)</p>
                </div>
                <div class="icon"><i class="fas fa-weight-hanging"></i></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-chart-line text-warning"></i> Tendencia (Últimos 12 meses)</h3></div>
                <div class="card-body"><canvas id="tendenciaChart" style="height: 300px;"></canvas></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-list text-secondary"></i> Por tipo de pérdida</h3></div>
                <div class="card-body p-0">
                    <table class="table table-striped">
                        <thead><tr><th>Tipo</th><th>Registros</th><th>Pollos</th><th>Peso (kg)</th></tr></thead>
                        <tbody>
                            @forelse($porTipo as $row)
                                <tr>
                                    <td><strong>{{ ucfirst($row->tipo_perdida ?? 'N/A') }}</strong></td>
                                    <td>{{ $row->total }}</td>
                                    <td>{{ number_format($row->pollos ?? 0) }}</td>
                                    <td>{{ number_format($row->peso ?? 0, 2) }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted">Sin datos</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        const data = @json($datosTendencia);
        new Chart(document.getElementById('tendenciaChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: data.map(d => d.mes),
                datasets: [
                    { label: 'Registros', data: data.map(d => d.cantidad), borderColor: 'rgb(108, 117, 125)', tension: 0.4, fill: true },
                    { label: 'Pollos', data: data.map(d => d.pollos), borderColor: 'rgb(255, 193, 7)', tension: 0.4, fill: false, yAxisID: 'y1' },
                    { label: 'Peso (kg)', data: data.map(d => d.peso), borderColor: 'rgb(220, 53, 69)', tension: 0.4, fill: false, yAxisID: 'y1' }
                ]
            },
            options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true }, y1: { beginAtZero: true, position: 'right' } } }
        });
    </script>
@stop