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

@section('content')

    @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

    <!-- Contador de usuarios, ingresos, despachos y movimientos totales por mes-->
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $countUser }}</h3>
                    <p>USUARIOS REGISTRADOS</p>
                    <small class="text-white">Total de usuarios activos en el sistema</small>
                </div>
                <div class="icon">
                    <i class="fas fa-users"></i>
                </div>
                <a href="{{ route('usuarios.index') }}" class="small-box-footer">
                    Gestionar Usuarios <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $countOIngreso }}</h3>
                    <p>ÓRDENES DE INGRESO</p>
                    <small class="text-white">Registro de ingresos de mercadería</small>
                </div>
                <div class="icon">
                    <i class="fas fa-truck-loading"></i>
                </div>
                <a href="{{ route('ordenes-ingreso.index') }}" class="small-box-footer">
                    Ver Detalle de Ingresos <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ $countODespacho }}</h3>
                    <p>ÓRDENES DE DESPACHO</p>
                    <small class="text-white">Control de salidas y entregas</small>
                </div>
                <div class="icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>
                <a href="{{ route('ordenes-de-despacho.index') }}" class="small-box-footer">
                    Gestionar Despachos <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ number_format($countOIngreso + $countODespacho) }}</h3>
                    <p>MOVIMIENTOS TOTALES</p>
                    <small class="text-white">Total de operaciones realizadas</small>
                </div>
                <div class="icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <a href="#" class="small-box-footer">
                    Ver Estadísticas <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Estadísticas Generales -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-line mr-1"></i>
                        Estadísticas Generales
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Gráfico de Órdenes -->
                        <div class="col-md-8">
                            <canvas id="ordenesChart"
                                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                        <!-- Resumen de Actividad -->
                        <div class="col-md-4">
                            <div class="info-box mb-3 bg-warning">
                                <span class="info-box-icon"><i class="fas fa-tag"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Inventario</span>
                                    <span
                                        class="info-box-number">{{ number_format($countOIngresoMes + $countODespachoMes) }}</span>
                                </div>
                            </div>
                            <div class="info-box mb-3 bg-info">
                                <span class="info-box-icon"><i class="fas fa-truck-loading"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Ingresos del Mes</span>
                                    <span class="info-box-number">{{ $countOIngresoMes }}</span>
                                </div>
                            </div>
                            <div class="info-box mb-3 bg-success">
                                <span class="info-box-icon"><i class="fas fa-truck"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Despachos del Mes</span>
                                    <span class="info-box-number">{{ $countODespachoMes }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </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-history mr-1"></i>
                        Actividad Reciente
                    </h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table m-0">
                            <thead>
                                <tr>
                                    <th>ID Orden</th>
                                    <th>Tipo</th>
                                    <th>Fecha</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Aquí puedes iterar sobre las últimas órdenes -->
                                <tr>
                                    <td><a href="#">OR9842</a></td>
                                    <td>Ingreso</td>
                                    <td>{{ now()->format('d/m/Y') }}</td>
                                    <td><span class="badge badge-success">Completado</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            // Configuración del gráfico
            const ctx = document.getElementById('ordenesChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'],
                    datasets: [{
                        label: 'Órdenes de Ingreso',
                        data: [12, 19, 3, 5, 2, 3],
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }, {
                        label: 'Órdenes de Despacho',
                        data: [7, 11, 5, 8, 3, 7],
                        borderColor: 'rgb(255, 99, 132)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Tendencia de Órdenes'
                        }
                    }
                }
            });
        </script>
    @endpush

@stop

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

@section('js')

@stop