@extends('layouts.user_dashboard')

@section('content')

<div class="flex flex-col md:flex-row justify-between items-center my-2 mt-6 p-4 bg-white shadow-md">

    <h1 class="text-2xl font-bold text-gray-800">Avaliações Usuário</h1>
    <div class="flex flex-wrap gap-4 mt-4 md:mt-0">
        <div class="flex gap-2">
            <label class="font-bold">Usuário:</label>
            <span class="text-gray-700">{{ $user->name }}</span>
        </div>
        <div class="flex gap-2">
            <label class="font-bold">Perfil:</label>
            <span class="text-gray-700">
                {{ $user->roles()->first()->name ?? 'Sem perfil' }}
            </span>
        </div>
    </div>
</div>
 <!-- Breadcrumbs -->
 <nav class="flex flex-col lg:flex-row gap-4 items-center justify-between text-gray-600 bg-white px-4 py-4 text-base shadow-lg mt-0">
    <!-- Links de Navegação -->
    <div class="flex flex-wrap items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-green-700 font-semibold transition-colors duration-200">Home</a>
        <span class="mx-1 text-gray-400">/</span>
        <a href="#" class="hover:text-green-700 font-semibold transition-colors duration-200">Avaliações</a>

    </div>

    <!-- Botão Voltar -->
    <div class="flex-shrink-0">
        <a href="{{ url()->previous() }}"
        class="bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-6 shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
            <i class="ri-arrow-left-line text-lg"></i>
            Voltar
        </a>
    </div>
</nav>
<div class="max-w-7xl mx-auto mt-10 p-6 bg-white shadow-lg">




    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Cabeçalho -->
        <h1 class="text-2xl font-bold text-gray-800 mb-6">
            Detalhes do Usuário: {{ $user->name }}
        </h1>

        <!-- Informações do Usuário -->
        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <span class="block text-sm font-semibold uppercase text-gray-600">Nome</span>
                    <span class="text-gray-800">{{ $user->name ?? 'N/A' }}</span>
                </div>
                <div>
                    <span class="block text-sm font-semibold uppercase text-gray-600">Email</span>
                    <span class="text-gray-800">{{ $user->email ?? 'N/A' }}</span>
                </div>
            </div>
        </div>

        <!-- Avaliações Recebidas -->
        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Avaliações Recebidas</h2>
            @if($avaliacoes->isEmpty())
                <p class="text-gray-600">Nenhuma avaliação recebida ainda.</p>
            @else
                <div class="space-y-4">
                    @foreach($avaliacoes as $avaliacao)
                        <div class="border-b border-gray-200 pb-4">
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold">Avaliador:</span>
                                <span>{{ $avaliacao->avaliador->name ?? 'Desconhecido' }}</span>
                            </p>
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold">Nota:</span>
                                <span>{{ $avaliacao->nota ?? 'N/A' }} / 5</span>
                            </p>
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold">Comentário:</span>
                                <span>{{ $avaliacao->comentario ?? 'Sem comentário' }}</span>
                            </p>
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold">Tipo:</span>
                                <span>{{ ucfirst($avaliacao->tipo) ?? 'N/A' }}</span>
                            </p>
                            <p class="text-sm text-gray-600">
                                <span class="font-semibold">Data:</span>
                                <span>{{ $avaliacao->created_at->format('d/m/Y H:i') }}</span>
                            </p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>


    </div>
</div>
@endsection