@extends('adminlte::page')
@section('title', config('app.name') . ' - Dashboard')
@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')

    {{-- Filtro de Mes --}}
    <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('dashboard') }}">
                        <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>

    @if(session('caja_abierta') && auth()->user()->can('admin.cajas.index'))
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-{{ session('caja_abierta')['type'] }}">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-cash-register mr-2"></i>
                            Estado de Caja
                        </h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 class="mb-3">
                                    <i class="fas fa-info-circle text-{{ session('caja_abierta')['type'] }} mr-2"></i>
                                    {{ session('caja_abierta')['message'] }}
                                </h5>
                                <a href="{{ route('cajas.show', session('caja_abierta')['caja_id']) }}"
                                   class="btn btn-{{ session('caja_abierta')['type'] }}">
                                    <i class="fas fa-eye mr-1"></i> Ver Detalles de la Caja
                                </a>
                            </div>
                            <div class="col-md-4 text-right">
                                <div class="info-box bg-{{ session('caja_abierta')['type'] }}">
                                    <span class="info-box-icon">
                                        <i class="fas fa-cash-register"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Caja Activa</span>
                                        <span class="info-box-number">ID: {{ session('caja_abierta')['caja_id'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Cards del Mes Filtrado -->
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $countOIngresoMes }}</h3>
                    <p>INGRESOS DEL MES</p>
                    <small class="text-white">Órdenes de ingreso registradas</small>
                </div>
                <div class="icon">
                    <i class="fas fa-truck-loading"></i>
                </div>

            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ $countODespachoMes }}</h3>
                    <p>DESPACHOS DEL MES</p>
                    <small class="text-white">Órdenes de despacho completadas</small>
                </div>
                <div class="icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>

            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ number_format($totalPollosMes) }}</h3>
                    <p>POLLOS DESPACHADOS</p>
                    <small class="text-white">Total de unidades</small>
                </div>
                <div class="icon">
                    <i class="fas fa-drumstick-bite"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ number_format($pesoTotalMes, 2) }}</h3>
                    <p>KILOGRAMOS</p>
                    <small class="text-white">Peso total despachado</small>
                </div>
                <div class="icon">
                    <i class="fas fa-weight"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row">
        <!-- Gráfico Ingreso vs Despacho (8 columnas) -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-bar"></i> Ingresos vs Despachos del Mes
                    </h3>
                </div>
                <div class="card-body">
                    <canvas id="ingresoVsDespachoChart" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Pie Chart Top 5 Clientes (4 columnas) -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-pie"></i> Top 5 Clientes
                    </h3>
                </div>
                <div class="card-body">
                    <canvas id="topClientesChart" style="height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Actividad Reciente -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-truck mr-1"></i>
                        Últimas Órdenes de Despacho
                    </h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table m-0">
                            <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>ID Orden</th>
                                    <th>Cliente</th>
                                    <th>Tipo</th>
                                    <th>Cantidad de Pollos</th>
                                    <th>Peso Total Neto</th>
                                    <th>Fecha Despacho</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $contador = 1;
                                @endphp
                                @forelse($ultimasOrdenesDespacho as $orden)
                                    <tr>
                                        <td>{{ $contador++ }}</td>
                                        <td>
                                            <a href="{{ route('ordenes-de-despacho.show', $orden->id) }}">
                                                {{ $orden->serie_orden }}
                                            </a>
                                        </td>
                                        <td>{{ $orden->cliente->razon_social }}</td>
                                        <td>Despacho</td>
                                        <td>{{ $orden->cantidad_pollos }}</td>
                                        <td>{{ $orden->peso_total_neto }}</td>
                                        <td>{{ $orden->fecha_despacho ? \Carbon\Carbon::parse($orden->fecha_despacho)->format('d/m/Y') : 'Sin fecha' }}</td>
                                        <td>
                                            @if($orden->estado == 1)
                                                <span class="badge badge-success">Completado</span>
                                            @else
                                                <span class="badge badge-danger">Anulado</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">No hay órdenes de despacho recientes</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>



@stop

@section('css')
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        // Gráfico Ingreso vs Despacho
        const datosIngresoVsDespacho = @json($datosIngresoVsDespacho);
        const ctxIngresoVsDespacho = document.getElementById('ingresoVsDespachoChart').getContext('2d');

        new Chart(ctxIngresoVsDespacho, {
            type: 'bar',
            data: {
                labels: datosIngresoVsDespacho.map(d => 'Día ' + d.dia),
                datasets: [
                    {
                        label: 'Ingresos',
                        data: datosIngresoVsDespacho.map(d => d.ingresos),
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Despachos',
                        data: datosIngresoVsDespacho.map(d => d.despachos),
                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    title: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });

        // Pie Chart Top 5 Clientes
        const topClientes = @json($topClientes);
        const ctxTopClientes = document.getElementById('topClientesChart').getContext('2d');

        new Chart(ctxTopClientes, {
            type: 'pie',
            data: {
                labels: topClientes.map(c => c.cliente ? c.cliente.razon_social : 'Cliente'),
                datasets: [{
                    data: topClientes.map(c => c.total_pollos),
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(54, 162, 235, 0.8)',
                        'rgba(255, 205, 86, 0.8)',
                        'rgba(75, 192, 192, 0.8)',
                        'rgba(153, 102, 255, 0.8)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 205, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += context.parsed.toLocaleString() + ' pollos';
                                return label;
                            }
                        }
                    }
                }
            }
        });
    </script>
@stop