@extends('layouts.site')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-12">
    <!-- 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">
                {{$title}}
            </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>

    <h1 class="text-4xl py-8 font-normal lg:tracking-widest tracking-normal text-green-700  text-center ">{{ $title }}</h1>

    <!-- Mensagem de Sucesso -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border-l-4 border-green-500 text-green-700 p-4 rounded-r-lg">
            <strong class="font-semibold">Sucesso!</strong>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <!-- Mensagem de Erro -->
    @if($errors->any())
        <div class="mb-6 bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-r-lg">
            <strong class="font-semibold">Erro!</strong>
            <ul class="list-disc ml-5">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Conteúdo Principal -->
    <div class="space-y-6">
        <!-- Cabeçalho de Avaliações -->
        <div class="bg-white p-6 shadow-sm border border-gray-200">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <h2 class="text-xl font-bold text-gray-800">
                    Avaliações recebidas por {{ $user->name }}
                </h2>
                <div class="flex items-center gap-2">
                    <span class="text-xl font-semibold text-gray-800">
                        {{ number_format($user->avaliacoesRecebidas->avg('nota'), 1) }}
                    </span>
                    <div class="flex text-yellow-400 text-lg">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star {{ $i <= round($user->avaliacoesRecebidas->avg('nota')) ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                        @endfor
                    </div>
                    <span class="text-sm text-gray-500">
                        ({{ $user->avaliacoesRecebidas->count() }} avaliações)
                    </span>
                </div>
            </div>
        </div>

        <!-- Lista de Avaliações -->
        <div class="space-y-4">
            @forelse($avaliacoes as $avaliacao)
                <div class="bg-white p-6 shadow-sm border border-gray-200">
                    <div class="flex flex-col sm:flex-row justify-between items-start gap-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                                @if($avaliacao->avaliador->profile_photo_path)
                                    <img src="{{ asset('storage/' . $avaliacao->avaliador->profile_photo_path) }}"
                                         alt="{{ $avaliacao->avaliador->name }}"
                                         class="w-full h-full object-cover">
                                @else
                                    <span class="text-gray-600 text-lg">{{ substr($avaliacao->avaliador->name, 0, 1) }}</span>
                                @endif
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">{{ $avaliacao->avaliador->name }}</h3>
                                <p class="text-sm text-gray-600">
                                    @switch($avaliacao->tipo)
                                        @case('dono_para_requerente') Dono do Medicamento @break
                                        @case('requerente_para_dono') Requerente @break
                                        @case('motoboy_para_dono') Motoboy → Dono @break
                                        @case('dono_para_motoboy') Dono → Motoboy @break
                                        @default Participante
                                    @endswitch
                                </p>
                            </div>
                        </div>
                        <div class="flex text-yellow-400">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= $avaliacao->nota ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                            @endfor
                        </div>
                    </div>

                    @if($avaliacao->pedidoTroca)
                        <div class="mt-3">
                            <a href="{{ route('pedidos.show', $avaliacao->pedidoTroca->codigo_troca) }}"
                               class="text-sm text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-200">
                                Troca #{{ $avaliacao->pedidoTroca->codigo_troca }}
                            </a>
                        </div>
                    @endif

                    @if($avaliacao->comentario)
                        <div class="mt-4 bg-gray-50 p-4 rounded-md">
                            <p class="text-gray-700 italic">"{{ $avaliacao->comentario }}"</p>
                        </div>
                    @endif

                    <div class="mt-3 text-xs text-gray-500">
                        {{ $avaliacao->created_at->format('d/m/Y H:i') }}
                    </div>
                </div>
            @empty
                <div class="bg-white p-6 shadow-sm border border-gray-200 text-center">
                    <p class="text-gray-600">Este usuário ainda não recebeu avaliações.</p>
                </div>
            @endforelse
        </div>

        <!-- Paginação -->
        @if($avaliacoes->hasPages())
            <div class="mt-6">
                {{ $avaliacoes->links('pagination::tailwind') }}
            </div>
        @endif
    </div>
</div>
@endsection