@extends('layouts.app')

@section('title', 'Detalle de Usuario')

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="header-title mb-4">👤 Detalle del Usuario</h4>

        <div class="table-responsive">
            <table class="table table-bordered table-striped mb-4">
                <tbody>
                    <tr>
                        <th style="width: 30%;">Nombre</th>
                        <td>{{ $usuario->name }}</td>
                    </tr>
                    <tr>
                        <th>Usuario</th>
                        <td>{{ $usuario->usuario }}</td>
                    </tr>
                    <tr>
                        <th>Correo</th>
                        <td>{{ $usuario->email ?? '—' }}</td>
                    </tr>
                    <tr>
                        <th>Rol</th>
                        <td>{{ $usuario->rol->nombre ?? '—' }}</td>
                    </tr>
                    <tr>
                        <th>Área</th>
                        <td>{{ $usuario->area->nombre ?? '—' }}</td>
                    </tr>
                    <tr>
                        <th>Firma Digital</th>
                        <td>
                            @if ($usuario->firma_digital)
                                <img src="{{ asset('storage/' . $usuario->firma_digital) }}" alt="Firma Digital" style="height: 120px;">
                            @else
                                <em>— No registrada —</em>
                            @endif
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="text-end">
            <a href="{{ route('usuarios.index') }}" class="btn btn-secondary">← Volver al listado</a>
        </div>
    </div>
</div>
@endsection