@extends('layouts.admin')
@section('content')

    <div class="row mb-3">
        <div class="col-md-12">
            <h3 class="font-weight-bold" style="color: var(--dm-text-main);">
                <i class="bi bi-person-bounding-box text-primary mr-2"></i>
                Detalles del Usuario: {{ $usuario->name }}
            </h3>
            <p class="text-muted mb-0" style="font-size: 0.9rem;">
                Información de perfil y roles asignados a esta cuenta de usuario.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-8">
            <div class="card card-outline card-primary">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="bi bi-info-circle mr-1"></i> Perfil de Cuenta
                    </h3>
                    <a href="{{ url('/admin/usuarios/' . $usuario->id . '/edit') }}" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-pencil mr-1"></i> Editar
                    </a>
                </div>

                <div class="card-body">
                    <div class="text-center mb-4">
                        <img src="{{ url('dist/img/user2-160x160.jpg') }}" class="img-circle elevation-2 mb-2" style="width: 80px; height: 80px;" alt="User Avatar">
                        <h4 class="font-weight-bold mb-1">{{ $usuario->name }}</h4>
                        <p class="text-muted mb-2">{{ $usuario->email }}</p>

                        @forelse($usuario->roles as $role)
                            <span class="badge badge-primary px-3 py-2 font-weight-bold text-uppercase" style="font-size: 0.85rem; border-radius: 9999px;">
                                <i class="bi bi-shield-check mr-1"></i> Rol: {{ $role->name }}
                            </span>
                        @empty
                            <span class="badge badge-light border text-muted px-3 py-2">Sin Rol Asignado</span>
                        @endforelse
                    </div>

                    <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item d-flex justify-content-between">
                            <b>ID de Usuario:</b>
                            <span>#{{ $usuario->id }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <b>Correo Electrónico:</b>
                            <span>{{ $usuario->email }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <b>Fecha de Registro:</b>
                            <span>{{ $usuario->created_at ? $usuario->created_at->format('d/m/Y H:i') : 'N/A' }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <b>Última Actualización:</b>
                            <span>{{ $usuario->updated_at ? $usuario->updated_at->format('d/m/Y H:i') : 'N/A' }}</span>
                        </li>
                    </ul>

                    <div class="d-flex justify-content-between mt-3">
                        <a href="{{ url('admin/usuarios') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left mr-1"></i> Volver a Usuarios
                        </a>
                        <a href="{{ url('admin/roles') }}" class="btn btn-outline-primary">
                            <i class="bi bi-shield-lock mr-1"></i> Ir a Roles
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection