@extends('adminlte::page')

@section('title', 'Detalle de Actividades')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>
            <i class="fas fa-user-tie mr-2"></i>
            Detalle de Actividades: {{ $tecnico }}
        </h1>
        <a href="{{ route('admin.reportes.unificado', request()->only(['fecha_inicio', 'fecha_fin'])) }}" 
           class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Volver al reporte
        </a>
    </div>
@stop

@section('content')
    <!-- Tarjeta de resumen del técnico -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="info-box bg-gradient-primary shadow-lg">
                <span class="info-box-icon">
                    <i class="fas fa-user-circle fa-2x"></i>
                </span>
                <div class="info-box-content">
                    <span class="info-box-text">TÉCNICO</span>
                    <span class="info-box-number display-4">{{ $tecnico }}</span>
                    <div class="progress">
                        <div class="progress-bar" style="width: 100%"></div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <span class="progress-description">
                                <i class="fas fa-tasks mr-1"></i>
                                <strong>{{ $totalActividades }}</strong> actividades totales
                            </span>
                        </div>
                       
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros aplicados -->
    @if(request()->anyFilled(['fecha_inicio', 'fecha_fin']))
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-filter text-primary mr-2"></i>
                                <strong>Filtros aplicados:</strong>
                                <span class="ml-2">
                                    @if(request('fecha_inicio') && request('fecha_fin'))
                                        <span class="badge badge-light">
                                            {{ \Carbon\Carbon::parse(request('fecha_inicio'))->format('d/m/Y') }} - 
                                            {{ \Carbon\Carbon::parse(request('fecha_fin'))->format('d/m/Y') }}
                                        </span>
                                    @endif
                                </span>
                            </div>
                            <a href="{{ route('admin.reportes.detalle', ['tecnico' => urlencode($tecnico)]) }}" 
                               class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-times mr-1"></i> Limpiar filtros
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Tabla detallada de actividades -->
    <!-- Tabla detallada de actividades -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-list-alt mr-2"></i>
                    Listado Detallado de Actividades
                </h5>
                <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 p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th style="width: 3%">#</th>
                                <th style="width: 20%">Gerencia</th>
                                <th style="width: 12%">Tipo</th>
                                <th style="width: 30%">Descripción</th>
                                <th style="width: 10%">Fecha</th>
                                <th style="width: 25%">Observaciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($datosUnificados as $index => $item)
                                <tr>
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>
                                        <small>{{ $item['gerencia'] }}</small>
                                    </td>
                                    <td>
                                        <span class="badge badge-secondary badge-sm">
                                            {{ $item['tipo'] }}
                                        </span>
                                    </td>
                                    <td>
                                        <small>{{ $item['descripcion'] }}</small>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($item['fecha'])->format('d/m/Y') }}
                                            </small>
                                            <small class="text-muted">
                                                @if(isset($item['fecha_completa']) && $item['fecha_completa'])
                                                {{ \Carbon\Carbon::parse($item['fecha_completa'])->format('h:i A') }}
                                            @else
                                                {{ \Carbon\Carbon::parse($item['created_at'])->format('h:i A') }}
                                            @endif
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        @if($item['observacion'])
                                            <small class="observacion-completa">
                                                {{ $item['observacion'] }}
                                            </small>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">
                                        <i class="fas fa-info-circle fa-2x mb-3"></i>
                                        <h5>No se encontraron actividades</h5>
                                        <p>El técnico no tiene registros en el período seleccionado</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($datosUnificados->count() > 10)
                <div class="card-footer">
                    <div class="text-center">
                        <small class="text-muted">
                            Mostrando {{ $datosUnificados->count() }} registros
                        </small>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

    <!-- Estadísticas por área -->
   
@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>
        .info-box {
            border-radius: 10px;
            transition: transform 0.3s;
        }
        .info-box:hover {
            transform: translateY(-3px);
        }
        .display-4 {
            font-size: 3rem;
            font-weight: 700;
        }
        .table th {
            background-color: #f8f9fa;
            color: #495057;
            font-size: 0.9rem;
            padding: 0.75rem;
        }
        .table td {
            padding: 0.75rem;
            vertical-align: top;
        }
        .badge-sm {
            font-size: 0.75rem;
            padding: 0.25em 0.6em;
            font-weight: 500;
        }
        /* Estilos para las observaciones completas */
        .observacion-completa {
            font-size: 0.85rem;
            line-height: 1.4;
            white-space: normal;
            word-wrap: break-word;
            color: #495057;
            display: block;
            padding: 2px 0;
        }
        /* Ajustes para textos pequeños */
        small {
            font-size: 0.85rem;
        }
        /* Ajustar altura de filas para observaciones largas */
        .table tbody tr {
            min-height: 60px;
        }
        .table tbody td {
            border-bottom: 1px solid #dee2e6;
        }
        /* Badge para Solicitudes */
        .badge-dark {
            background-color: #343a40;
            color: white;
        }
        /* Icono para Solicitudes */
        .bg-dark .info-box-icon {
            background-color: rgba(0,0,0,0.2);
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Inicializar tooltips
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
@stop