@extends('layouts.app')

@section('title', 'Dashboard - TPLink Bolivia')
@section('page-title', 'Dashboard')

@section('content')
<div class="container-fluid">
    <!-- Estadísticas Generales -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
                    <h3 class="card-title">{{ $estadisticas['total_clientes'] }}</h3>
                    <p class="card-text">Clientes Activos</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-boxes fa-3x text-success mb-3"></i>
                    <h3 class="card-title">{{ $estadisticas['total_productos'] }}</h3>
                    <p class="card-text">Productos</p>
                    @if($estadisticas['alertas_stock'] > 0)
                        <span class="badge bg-warning">{{ $estadisticas['alertas_stock'] }} alertas</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-headset fa-3x text-info mb-3"></i>
                    <h3 class="card-title">{{ $estadisticas['tickets_pendientes'] }}</h3>
                    <p class="card-text">Tickets Pendientes</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-dollar-sign fa-3x text-success mb-3"></i>
                    <h3 class="card-title">Bs. {{ number_format($estadisticas['ingresos_mes'], 2) }}</h3>
                    <p class="card-text">Ingresos del Mes</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Gráficos -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Tickets por Estado</h5>
                </div>
                <div class="card-body">
                    <canvas id="ticketsChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Ventas Mensuales</h5>
                </div>
                <div class="card-body">
                    <canvas id="ventasChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tablas de Información -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Productos con Stock Bajo</h5>
                </div>
                <div class="card-body">
                    @if($productosStockBajo->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Stock Actual</th>
                                        <th>Stock Mínimo</th>
                                        <th>Proveedor</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($productosStockBajo as $producto)
                                    <tr>
                                        <td>{{ $producto->nombre }}</td>
                                        <td>
                                            <span class="badge bg-danger">{{ $producto->stock_actual }}</span>
                                        </td>
                                        <td>{{ $producto->stock_minimo }}</td>
                                        <td>{{ $producto->proveedor->nombre }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">
                            <a href="{{ route('inventario.alertas') }}" class="btn btn-warning">
                                Ver Todas las Alertas
                            </a>
                        </div>
                    @else
                        <p class="text-muted">No hay productos con stock bajo</p>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Tickets Recientes</h5>
                </div>
                <div class="card-body">
                    @if($ticketsRecientes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Cliente</th>
                                        <th>Título</th>
                                        <th>Prioridad</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($ticketsRecientes as $ticket)
                                    <tr>
                                        <td>{{ $ticket->cliente->nombre }} {{ $ticket->cliente->apellido }}</td>
                                        <td>{{ Str::limit($ticket->titulo, 30) }}</td>
                                        <td>
                                            <span class="badge bg-{{ $ticket->prioridad == 'critica' ? 'danger' : ($ticket->prioridad == 'alta' ? 'warning' : 'info') }}">
                                                {{ ucfirst($ticket->prioridad) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $ticket->estado == 'resuelto' ? 'success' : ($ticket->estado == 'en_proceso' ? 'info' : 'secondary') }}">
                                                {{ ucfirst(str_replace('_', ' ', $ticket->estado)) }}
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">
                            <a href="{{ route('soporte.index') }}" class="btn btn-info">
                                Ver Todos los Tickets
                            </a>
                        </div>
                    @else
                        <p class="text-muted">No hay tickets recientes</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    
    <!-- Facturas Vencidas -->
    @if($facturasVencidas->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Facturas Vencidas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Número</th>
                                    <th>Cliente</th>
                                    <th>Fecha Vencimiento</th>
                                    <th>Monto</th>
                                    <th>Días Vencidos</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($facturasVencidas as $factura)
                                <tr>
                                    <td>{{ $factura->numero_factura }}</td>
                                    <td>{{ $factura->cliente->nombre }} {{ $factura->cliente->apellido }}</td>
                                    <td>{{ $factura->fecha_vencimiento->format('d/m/Y') }}</td>
                                    <td>Bs. {{ number_format($factura->total, 2) }}</td>
                                    <td>
                                        <span class="badge bg-danger">
                                            {{ $factura->fecha_vencimiento->diffInDays(now()) }} días
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center">
                        <a href="{{ route('facturacion.vencidas') }}" class="btn btn-danger">
                            Ver Todas las Facturas Vencidas
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
    // Gráfico de Tickets por Estado
    const ticketsCtx = document.getElementById('ticketsChart').getContext('2d');
    const ticketsChart = new Chart(ticketsCtx, {
        type: 'doughnut',
        data: {
            labels: ['Pendientes', 'Asignados', 'En Proceso', 'Resueltos', 'Cerrados'],
            datasets: [{
                data: [
                    {{ $ticketsPorEstado['pendiente'] ?? 0 }},
                    {{ $ticketsPorEstado['asignado'] ?? 0 }},
                    {{ $ticketsPorEstado['en_proceso'] ?? 0 }},
                    {{ $ticketsPorEstado['resuelto'] ?? 0 }},
                    {{ $ticketsPorEstado['cerrado'] ?? 0 }}
                ],
                backgroundColor: [
                    '#dc3545',
                    '#ffc107',
                    '#17a2b8',
                    '#28a745',
                    '#6c757d'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Gráfico de Ventas Mensuales
    const ventasCtx = document.getElementById('ventasChart').getContext('2d');
    const ventasChart = new Chart(ventasCtx, {
        type: 'line',
        data: {
            labels: [
                @foreach($ventasMensuales as $venta)
                    '{{ $venta->mes }}/{{ $venta->año }}',
                @endforeach
            ],
            datasets: [{
                label: 'Ventas (Bs.)',
                data: [
                    @foreach($ventasMensuales as $venta)
                        {{ $venta->total }},
                    @endforeach
                ],
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endsection