@extends('layouts.app')

@section('title','Usuarios')

@section('content')
<style>
    /* Contenedor con scroll vertical y horizontal */
    .table-scroll {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: auto;
    }

    /* Fuerza ancho mínimo para que exista scroll horizontal si no entra */
    .table-scroll table {
        min-width: 1200px;
    }

    /* Encabezado fijo (sticky) dentro del contenedor scroll */
    .table-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8f9fa; /* similar a table-light */
    }

    /* Evita que las palabras se vayan una debajo de otra */
    .nowrap {
        white-space: nowrap;
    }

    /* Para textos largos: una línea y "..." */
    .truncate {
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="d-flex align-items-center justify-content-between mt-3 mb-3">
    <div>
        <h3 class="mb-0 fw-bold"><i class="fas fa-users me-2"></i>Usuarios</h3>
        <small class="text-muted">Listado y mantenimiento de usuarios</small>
    </div>
    <a href="{{ route('admin.usuario.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>Nuevo
    </a>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <div class="fw-bold">Listado</div>
        <small class="text-muted">Total: {{ $users->total() }}</small>
    </div>

    {{-- ✅ Scroll horizontal + vertical --}}
    <div class="table-scroll">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="nowrap" style="width:80px;">#</th>
                    <th class="nowrap" style="width:90px;">Foto</th>
                    <th class="nowrap" style="min-width:180px;">SEDE</th>
                    <th class="nowrap" style="min-width:120px;">DNI</th>
                    <th class="nowrap" style="min-width:180px;">Nombres</th>
                    <th class="nowrap" style="min-width:220px;">Apellidos</th>
                    <th class="nowrap" style="min-width:200px;">Tipo Usuario</th>
                    <th class="nowrap" style="min-width:140px;">Usuario</th>
                    <th class="nowrap" style="width:120px;">Estado</th>
                    <th class="nowrap text-end" style="min-width:220px;">Acciones</th>
                </tr>
            </thead>

            <tbody>
            @forelse($users as $u)
                <tr>
                    <td class="fw-semibold nowrap" align="center">
                        {{ ($users->currentPage() - 1) * $users->perPage() + $loop->iteration }}
                    </td>

                    <td class="nowrap">
                        @if(!empty($u->foto))
                            <img src="{{ asset('usuarios/'.$u->foto) }}" alt="Foto" class="rounded"
                                 style="width:42px;height:42px;object-fit:cover;">
                        @else
                            <div class="rounded bg-light d-flex align-items-center justify-content-center"
                                 style="width:42px;height:42px;">
                                <i class="fas fa-user text-secondary"></i>
                            </div>
                        @endif
                    </td>

                    {{-- ✅ una sola línea --}}
                    <td class="nowrap">{{ $u->sede?->sede ?? '-' }}</td>

                    <td class="nowrap">{{ $u->dni }}</td>

                    {{-- ✅ si es largo, lo trunca con ... --}}
                    <td class="truncate" title="{{ $u->nombres }}">{{ $u->nombres }}</td>

                    @php
                        $apellidos = trim(($u->apellido_paterno ?? '').' '.($u->apellido_materno ?? ''));
                    @endphp
                    <td class="truncate" title="{{ $apellidos }}">{{ $apellidos }}</td>

                    <td class="nowrap">{{ $u->tipoUsuario?->tipo_usuario ?? '-' }}</td>
                    <td class="nowrap">{{ $u->username }}</td>

                    <td class="nowrap">
                        @if($u->estado === 'AC')
                            <span class="badge bg-success">Activo</span>
                        @elseif($u->estado === 'IN')
                            <span class="badge bg-secondary">Inactivo</span>
                        @else
                            <span class="badge bg-dark">{{ $u->estado }}</span>
                        @endif
                    </td>

                    <td class="text-end nowrap">
                        <a href="{{ route('admin.usuario.edit', $u) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-pen me-1"></i>Editar
                        </a>

                        <form action="{{ route('admin.usuario.destroy', $u) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('¿Eliminar? Se marcará estado=EL.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-trash me-1"></i>Eliminar
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="text-center text-muted py-5">
                        No hay registros.
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="card-footer bg-white">
        {{ $users->links() }}
    </div>
</div>
@endsection