@extends('adminlte::page')

@section('title', 'Reporte Unificado por Técnico')

@section('content_header')
    <div class="row align-items-center">
        <div class="col-md-8">
            <h1 class="text-center">
                <i class="fas fa-layer-group mr-2"></i>
                Reporte Actividades del Personal
            </h1>
            <div class="text-center text-muted">
                <small>Vista gerencial - Todas las áreas combinadas</small>
            </div>
        </div>
        <div class="col-md-4 d-flex justify-content-end gap-2">
            <a href="{{ url('/admin3') }}" class="btn btn-success">
                <i class="fas fa-chart-line mr-2"></i>Gráfica
            </a>
            <a href="{{ route('admin.reportes.unificado') }}" class="btn btn-secondary">
                <i class="fas fa-file-alt mr-2"></i>Reporte del personal
            </a>
            <a href="{{ route('admin.solicituds.index') }}" class="btn btn-info text-white">
                <i class="fas fa-clipboard-list mr-2"></i>Actividades
            </a>
        </div>
    </div>
@stop

@section('content')
    <!-- Filtro de fechas -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card card-primary shadow-sm">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-filter mr-2"></i>
                    Filtros de Búsqueda
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.reportes.unificado') }}" method="GET" id="filtroForm">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="fecha_inicio">Fecha Inicio</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar"></i>
                                        </span>
                                    </div>
                                    <input type="date" 
                                           class="form-control" 
                                           id="fecha_inicio" 
                                           name="fecha_inicio"
                                           value="{{ request('fecha_inicio') }}"
                                           max="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="fecha_fin">Fecha Fin</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar"></i>
                                        </span>
                                    </div>
                                    <input type="date" 
                                           class="form-control" 
                                           id="fecha_fin" 
                                           name="fecha_fin"
                                           value="{{ request('fecha_fin') }}"
                                           max="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="d-block invisible">Acciones</label>
                                <div class="btn-group w-100 mt-1" role="group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search mr-1"></i> Filtrar
                                    </button>
                                    @if(request()->has('fecha_inicio') || request()->has('fecha_fin'))
                                        <a href="{{ route('admin.reportes.unificado') }}" class="btn btn-outline-secondary">
                                            <i class="fas fa-times mr-1"></i> Limpiar
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @if(request()->has('fecha_inicio') || request()->has('fecha_fin'))
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info alert-dismissible fade show py-2" role="alert">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    <strong>Filtro aplicado:</strong> 
                                    {{ request('fecha_inicio') ? 'Desde ' . request('fecha_inicio') : 'Todo el historial' }}
                                    {{ request('fecha_fin') ? ' hasta ' . request('fecha_fin') : '' }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</div>

    <!-- Tarjeta de Total General -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="info-box bg-gradient-indigo shadow-lg">
                <span class="info-box-icon">
                    <i class="fas fa-chart-bar fa-2x"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">TOTAL GENERAL</span>
                    <span class="info-box-number display-4">{{ $datosUnificados->count() }}</span>
                    <div class="progress">
                        <div class="progress-bar" style="width: 100%"></div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- Vista general - Fichas de técnicos -->
    <div class="row">
        @php
            $totalActividades = $datosUnificados->count();
        @endphp
        @forelse($tecnicos as $tecnico)
            @php
                $actividadesTecnico = $datosUnificados->where('atendido', $tecnico);
                $count = $actividadesTecnico->count();
                
                // Distribución por área
                $distribucion = $actividadesTecnico->groupBy('origen')->map->count();
                
                // Color basado en cantidad de actividades
                $color = 'secondary';
                if($count > 20) $color = 'success';
                elseif($count > 10) $color = 'primary';
                elseif($count > 5) $color = 'info';
                elseif($count > 0) $color = 'warning';
                
                // Calcular porcentaje del total
                $porcentaje = $totalActividades > 0 ? round(($count / $totalActividades) * 100, 1) : 0;
            @endphp
            
            <div class="col-md-4 mb-4">
                <a href="{{ route('admin.reportes.detalle', [
                    'tecnico' => urlencode($tecnico),
                    'fecha_inicio' => request('fecha_inicio'),
                    'fecha_fin' => request('fecha_fin')
                ]) }}" class="text-decoration-none">
                    <div class="card card-{{ $color }} shadow-lg" 
                         style="cursor: pointer; border-radius: 15px; transition: all 0.3s ease;">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <div class="display-4 font-weight-bold">{{ $count }}</div>
                                @if($porcentaje > 0)
                                    <div class="mt-2">
                                        <span class="badge badge-light">
                                            {{ $porcentaje }}% del total
                                        </span>
                                    </div>
                                @endif
                            </div>
                            <h4 class="card-title mb-1">{{ $tecnico }}</h4>
                            <p class="text-muted mb-0">Total actividades</p>
                            
                            <!-- Distribución por área -->
                            @if($count > 0)
                                <div class="mt-3">
                                    <div class="d-flex justify-content-center flex-wrap">
                                        @foreach($distribucion as $areaNombre => $cantidad)
                                            @php
                                                $badgeColor = match($areaNombre) {
                                                    'Clientes' => 'danger',
                                                    'Soporte' => 'warning',
                                                    'Organización' => 'info',
                                                    'Analista Gestión' => 'success',
                                                    'Solicitudes' => 'dark',
                                                    default => 'secondary'
                                                };
                                            @endphp
                                            <span class="badge badge-{{ $badgeColor }} mr-1 mb-1" 
                                                  data-toggle="tooltip" 
                                                  title="{{ $areaNombre }}: {{ $cantidad }}">
                                                {{ $cantidad }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
        @empty
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No se encontraron técnicos</h4>
                        <p class="text-muted">No hay registros en el período seleccionado</p>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Estadísticas del período -->
   
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        .card {
            transition: all 0.3s ease;
            border: none;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .display-4 {
            font-size: 3.5rem;
            font-weight: 800;
            color: inherit;
        }
        .small-box {
            border-radius: 10px;
            color: white !important;
        }
        a:hover .card {
            transform: translateY(-5px) scale(1.02);
        }
        .text-decoration-none {
            text-decoration: none !important;
        }
        .text-decoration-none:hover {
            text-decoration: none !important;
        }
        /* Tarjeta Total General */
        .bg-gradient-indigo {
            background: linear-gradient(135deg, #6610f2 0%, #6f42c1 100%) !important;
            color: white;
            border-radius: 15px;
        }
        .info-box .display-4 {
            font-size: 4rem;
            margin-bottom: 0.5rem;
        }
        .info-box .progress-description {
            font-size: 1rem;
            opacity: 0.9;
        }
        /* Estadísticas */
        .info-box-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            border-radius: 10px;
        }
        .info-box-content {
            margin-left: 80px;
        }
        .alert-light {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }
        /* Badge para Solicitudes */
        .badge-dark {
            background-color: #343a40;
            color: white;
        }
        /* Gap para los botones */
        .gap-2 {
            gap: 0.5rem;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Inicializar tooltips
            $('[data-toggle="tooltip"]').tooltip();
            
            // Validación de fechas
            $('#filtroForm').submit(function(e) {
                const fechaInicio = $('#fecha_inicio').val();
                const fechaFin = $('#fecha_fin').val();
                
                if (fechaInicio && fechaFin) {
                    const inicio = new Date(fechaInicio);
                    const fin = new Date(fechaFin);
                    
                    if (inicio > fin) {
                        e.preventDefault();
                        alert('La fecha de inicio no puede ser mayor a la fecha de fin');
                        return false;
                    }
                }
                
                return true;
            });
            
            // Establecer fecha fin por defecto como hoy
            if (!$('#fecha_fin').val()) {
                const today = new Date().toISOString().split('T')[0];
                $('#fecha_fin').val(today);
            }
            
            // Establecer fecha inicio por defecto como hace 30 días
            if (!$('#fecha_inicio').val()) {
                const date = new Date();
                date.setDate(date.getDate() - 30);
                const thirtyDaysAgo = date.toISOString().split('T')[0];
                $('#fecha_inicio').val(thirtyDaysAgo);
            }
        });
    </script>
@stop