@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-history text-primary me-2"></i>Seguimiento de Usuarios
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Registro histórico de auditoría y movimientos del sistema.
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="content">
    {{-- ── Filtros Avanzados ── --}}
    <div class="block block-rounded block-bordered">
        <div class="block-content block-content-full bg-body-light">
            <form method="GET" action="{{ route('seguimiento.index') }}">
                <div class="row g-3 align-items-end">
                    {{-- Usuario --}}
                    <div class="col-md-4">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Usuario Operador</label>
                        <select name="usuario" class="form-select form-select-alt fs-sm">
                            <option value="0">--- Mostrar Todos ---</option>
                            @foreach($usuarios as $u)
                                <option value="{{ $u->id }}" {{ $usuario == $u->id ? 'selected' : '' }}>
                                    #{{ $u->id }} - {{ $u->login }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Rango de Fechas --}}
                    <div class="col-md-5">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Rango de Auditoría</label>
                        <div class="input-group">
                            <input type="text" class="form-control form-control-alt fs-sm" 
                                   name="fechaini" id="fechaini" value="{{ $fechaIni }}" 
                                   placeholder="Desde (dd/mm/aaaa)" maxlength="10">
                            <span class="input-group-text bg-transparent border-0"><i class="fa fa-chevron-right fs-xs"></i></span>
                            <input type="text" class="form-control form-control-alt fs-sm" 
                                   name="fechafin" id="fechafin" value="{{ $fechaFin }}" 
                                   placeholder="Hasta (dd/mm/aaaa)" maxlength="10">
                        </div>
                    </div>

                    {{-- Acciones --}}
                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fa fa-filter me-1"></i> Filtrar
                        </button>
                        <a href="{{ route('seguimiento.index') }}" class="btn btn-alt-secondary" title="Reiniciar">
                            <i class="fa fa-sync-alt"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ── Tabla de Auditoría ── --}}
    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Bitácora de Movimientos</h3>
            <div class="block-options">
                <span class="nav-main-link-badge badge bg-dark px-3 py-2">
                    {{ $registros->total() }} entradas
                </span>
            </div>
        </div>
        <div class="block-content p-0">
            <div class="table-responsive">
                <table class="table table-vcenter table-hover mb-0 fs-sm">
                    <thead class="bg-body-dark text-uppercase fs-xs">
                        <tr>
                            <th class="text-center" style="width: 50px;">N°</th>
                            <th>Usuario</th>
                            <th class="text-center">Movimiento</th>
                            <th>Descripción / Acción</th>
                            <th class="text-center">ID Obj.</th>
                            <th class="text-center">Módulo</th>
                            <th class="text-center" style="width: 180px;">Fecha y Hora</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($registros as $r)
                        @php
                            // Definición de estilos OneUI basados en tu lógica de negocio
                            $statusConfig = match($r->txt_tipomov) {
                                'Nuevo'     => ['bg' => 'bg-success-light text-success', 'icon' => 'fa-plus'],
                                'Modificar' => ['bg' => 'bg-warning-light text-warning', 'icon' => 'fa-pencil-alt'],
                                'Eliminar'  => ['bg' => 'bg-danger-light text-danger', 'icon' => 'fa-trash-alt'],
                                'Login'     => ['bg' => 'bg-info-light text-info', 'icon' => 'fa-sign-in-alt'],
                                default     => ['bg' => 'bg-body-dark text-muted', 'icon' => 'fa-dot-circle'],
                            };
                        @endphp
                        <tr>
                            <td class="text-center fw-medium text-muted">{{ $r->no }}</td>
                            <td class="fw-semibold">{{ $r->nom_usuario }}</td>
                            <td class="text-center">
                                <span class="nav-main-link-badge badge {{ $statusConfig['bg'] }} px-2 py-1">
                                    <i class="fa {{ $statusConfig['icon'] }} me-1 small"></i> {{ $r->txt_tipomov }}
                                </span>
                            </td>
                            <td class="fs-xs">{{ $r->txt_tipoid }}</td>
                            <td class="text-center fw-bold">#{{ $r->id }}</td>
                            <td class="text-center">
                                <span class="badge bg-body-dark text-dark border">{{ $r->txt_ubi }}</span>
                            </td>
                            <td class="text-center">
                                <span class="text-dark">{{ $r->fecha_local }}</span>
                                <span class="text-muted ms-1 fs-xs">{{ $r->hora }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <i class="fa fa-database fa-3x text-muted mb-3 opacity-25"></i>
                                <p class="text-muted mb-0">No se encontraron registros de auditoría para este rango.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($registros->hasPages())
        <div class="block-content block-content-full block-content-sm bg-body-light border-top">
            <div class="d-flex justify-content-between align-items-center">
                <div class="fs-sm text-muted">
                    Mostrando del <b>{{ $registros->firstItem() }}</b> al <b>{{ $registros->lastItem() }}</b>
                </div>
                {{ $registros->links() }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection