@extends('layouts.app')

@section('title', 'Reportes')
@section('page-title', 'Reportes y Estadísticas')

@section('content')
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card stats-card" style="border-left-color: #007bff;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Total Tickets</h6>
                        <h2 class="mb-0">{{ $totalTickets }}</h2>
                    </div>
                    <div class="fs-1 text-primary">
                        <i class="bi bi-collection"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card" style="border-left-color: #ffc107;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">En Progreso</h6>
                        <h2 class="mb-0">{{ $ticketsEnProgreso }}</h2>
                    </div>
                    <div class="fs-1 text-warning">
                        <i class="bi bi-hourglass-split"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card" style="border-left-color: #28a745;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Resueltos</h6>
                        <h2 class="mb-0">{{ $ticketsResueltos }}</h2>
                    </div>
                    <div class="fs-1 text-success">
                        <i class="bi bi-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card" style="border-left-color: #6c757d;">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">Cerrados</h6>
                        <h2 class="mb-0">{{ $ticketsCerrados }}</h2>
                    </div>
                    <div class="fs-1 text-secondary">
                        <i class="bi bi-archive"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Tickets por Prioridad -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>Tickets por Prioridad</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Prioridad</th>
                                <th class="text-end">Cantidad</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge bg-danger">Crítica</span></td>
                                <td class="text-end">{{ $ticketsPorPrioridad['critica'] ?? 0 }}</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning text-dark">Alta</span></td>
                                <td class="text-end">{{ $ticketsPorPrioridad['alta'] ?? 0 }}</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-info">Media</span></td>
                                <td class="text-end">{{ $ticketsPorPrioridad['media'] ?? 0 }}</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-secondary">Baja</span></td>
                                <td class="text-end">{{ $ticketsPorPrioridad['baja'] ?? 0 }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tiempo Promedio de Resolución -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Métricas de Rendimiento</h5>
            </div>
            <div class="card-body">
                <div class="text-center py-4">
                    <h1 class="display-3 text-primary">{{ $tiempoPromedioResolucion }}h</h1>
                    <p class="text-muted mb-0">Tiempo Promedio de Resolución</p>
                </div>
                <hr>
                <div class="row text-center">
                    <div class="col-4">
                        <h4 class="text-primary">{{ $ticketsAbiertos }}</h4>
                        <small class="text-muted">Abiertos</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-success">{{ $ticketsResueltos + $ticketsCerrados }}</h4>
                        <small class="text-muted">Completados</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-warning">{{ $ticketsEnProgreso }}</h4>
                        <small class="text-muted">En Proceso</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Top 10 Proyectos -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-folder me-2"></i>Top 10 Proyectos con Más Tickets</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Proyecto</th>
                                <th class="text-end">Tickets</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($ticketsPorProyecto as $proyecto)
                            <tr>
                                <td>{{ $proyecto->name }}</td>
                                <td class="text-end">
                                    <span class="badge bg-primary">{{ $proyecto->total }}</span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="2" class="text-center text-muted">No hay datos disponibles</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Técnicos Más Activos -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-people me-2"></i>Top 10 Técnicos Más Activos</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Técnico</th>
                                <th class="text-end">Tickets Asignados</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tecnicosMasActivos as $tecnico)
                            <tr>
                                <td>{{ $tecnico->name }}</td>
                                <td class="text-end">
                                    <span class="badge bg-success">{{ $tecnico->total }}</span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="2" class="text-center text-muted">No hay datos disponibles</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection