@extends('layouts.app')

@section('title', 'Actividad del Usuario')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('usuarios.index') }}">Usuarios</a></li>
            <li class="breadcrumb-item"><a href="{{ route('usuarios.show', $usuario) }}">{{ $usuario->name }}</a></li>
            <li class="breadcrumb-item active">Actividad</li>
        </ol>
    </nav>

    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-history me-2"></i>Actividad de {{ $usuario->name }}
            </h1>
            <p class="text-muted mb-0">
                <i class="fas fa-info-circle me-1"></i>
                Historial completo de actividades. Las actividades mayores a 3 meses se eliminan automáticamente.
            </p>
        </div>
        <a href="{{ route('usuarios.show', $usuario) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    <!-- Estadísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <h3 class="text-primary mb-0">{{ $estadisticas['total'] }}</h3>
                    <small class="text-muted">Total de Actividades</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <h3 class="text-success mb-0">{{ $estadisticas['hoy'] }}</h3>
                    <small class="text-muted">Hoy</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body text-center">
                    <h3 class="text-info mb-0">{{ $estadisticas['esta_semana'] }}</h3>
                    <small class="text-muted">Esta Semana</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <h3 class="text-warning mb-0">{{ $estadisticas['este_mes'] }}</h3>
                    <small class="text-muted">Este Mes</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-filter me-2"></i>Filtros
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('usuarios.actividad', $usuario) }}" class="row g-3">
                <div class="col-md-3">
                    <label for="tipo_accion" class="form-label">Tipo de Acción</label>
                    <select class="form-select" id="tipo_accion" name="tipo_accion">
                        <option value="">Todos los tipos</option>
                        @foreach($tiposAccion as $tipo)
                            <option value="{{ $tipo->id }}" {{ request('tipo_accion') == $tipo->id ? 'selected' : '' }}>
                                {{ $tipo->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="fecha_desde" class="form-label">Fecha Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ request('fecha_desde') }}">
                </div>
                <div class="col-md-2">
                    <label for="fecha_hasta" class="form-label">Fecha Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ request('fecha_hasta') }}">
                </div>
                <div class="col-md-3">
                    <label for="buscar" class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="buscar" name="buscar" 
                           placeholder="Buscar en observaciones..." value="{{ request('buscar') }}">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-1"></i>Filtrar
                    </button>
                </div>
            </form>
            @if(request()->hasAny(['tipo_accion', 'fecha_desde', 'fecha_hasta', 'buscar']))
                <div class="mt-3">
                    <a href="{{ route('usuarios.actividad', $usuario) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Limpiar Filtros
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Listado de Actividades -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="fas fa-list me-2"></i>Listado de Actividades
            </h5>
            <span class="badge bg-primary">{{ $actividades->total() }} registros</span>
        </div>
        <div class="card-body p-0">
            @if($actividades->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover table-striped mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th width="50">#</th>
                                <th width="80">Icono</th>
                                <th>Tipo de Acción</th>
                                <th>Observaciones</th>
                                <th width="150">Tabla/Registro</th>
                                <th width="180">Fecha y Hora</th>
                                <th width="100">Hace</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($actividades as $index => $actividad)
                                <tr>
                                    <td>{{ $actividades->firstItem() + $index }}</td>
                                    <td>
                                        <div class="activity-icon-small">
                                            <i class="fas fa-{{ $actividad->tipoAccion->icono ?? 'circle' }}"></i>
                                        </div>
                                    </td>
                                    <td>
                                        <strong>{{ $actividad->tipoAccion->nombre ?? 'Acción' }}</strong>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 400px;" title="{{ $actividad->observaciones }}">
                                            {{ $actividad->observaciones ?? 'Sin observaciones' }}
                                        </div>
                                    </td>
                                    <td>
                                        @if($actividad->tabla)
                                            <span class="badge bg-info">{{ $actividad->tabla }}</span>
                                            @if($actividad->registro_id)
                                                <span class="badge bg-secondary">ID: {{ $actividad->registro_id }}</span>
                                            @endif
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $actividad->created_at->format('d/m/Y H:i:s') }}</small>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $actividad->created_at->diffForHumans() }}</small>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- Paginación -->
                <div class="card-footer">
                    {{ $actividades->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No se encontraron actividades con los filtros seleccionados</p>
                    @if(request()->hasAny(['tipo_accion', 'fecha_desde', 'fecha_hasta', 'buscar']))
                        <a href="{{ route('usuarios.actividad', $usuario) }}" class="btn btn-primary">
                            <i class="fas fa-times me-1"></i>Limpiar Filtros
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
<style>
.activity-icon-small {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 5px;
    font-size: 11px;
}

.table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    font-size: 13px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}
</style>
@endpush
@endsection