@extends('layouts.app')

@section('title', 'Admin - Usuario')

@section('content')
<div class="p-6 max-w-5xl mx-auto">
    <!-- Encabezado -->
    <div class="mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
            <h1 class="text-4xl font-semibold text-gray-800 dark:text-gray-100">Perfil del Usuario</h1>
        </div>
    </div>

    <!-- Información del Usuario -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 space-y-4">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Información del Usuario</h2>

        <div class="flex items-center space-x-4">
            @if ($user->avatar != null)
            <img src="{{ asset('storage/avatars/'.$user->id.'/'.$user->avatar) }}"
                class="w-16 h-16 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" alt="Avatar">
            @else
            <div
                class="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-500">
                <i class="fas fa-user fa-lg"></i>
            </div>
            @endif
            <div>
                <p class="text-sm text-gray-700 dark:text-gray-300"><strong>Nombre:</strong> {{ $user->name }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300"><strong>Email:</strong> {{ $user->email }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300"><strong>Rol:</strong> {{ $user->rol->nombre }}</p>
                <p class="text-sm text-gray-700 dark:text-gray-300">
                    <strong>Token:</strong>
                    @if ($user->token == null)
                    <span class="text-red-500 font-medium">No tiene token</span>
                    @else
                    <span class="text-sky-600 font-mono">{{ $user->token }}</span>
                    @endif
                </p>
            </div>
        </div>
    </div>

    <div class="mt-6">
        <a href="{{ route('admin.users') }}" class="inline-flex items-center px-4 py-2 
                  text-sm font-medium text-white rounded-md 
                  transition-colors duration-200
                  bg-gray-400 
                  dark:bg-gray-700">
            ← Volver
        </a>
    </div>


</div>
@endsection