@extends('layouts.user_dashboard')

@section('content')
<div class="bg-white border border-gray-200 shadow-lg p-6 my-6">
    <div class="flex flex-col md:flex-row justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800">{{ $title }}</h1>
        <div class="flex flex-col md:flex-row gap-4 text-sm">
            <div class="flex items-center gap-2">
                <span class="font-semibold text-gray-700">Usuário:</span>
                <span class="text-gray-600">{{ auth()->user()->name }}</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="font-semibold text-gray-700">Perfil:</span>
                <span class="text-gray-600">{{ auth()->user()->roles()->first()->name ?? 'Sem perfil' }}</span>
            </div>
        </div>
    </div>
</div>

<div class="bg-white border border-gray-200 shadow-lg p-6">
    @if ($trocas->isEmpty())
        <p class="text-center text-gray-600 text-lg">Nenhum pedido de troca recebido.</p>
    @else
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($trocas as $pedido)
                <div class="border border-gray-200 bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    <div class="relative w-full h-48">
                        <img src="{{ $pedido->medicamento->imagens->isNotEmpty() ? asset('storage/' . $pedido->medicamento->imagens->first()->path) : asset('assets/sem-imagem.png') }}"
                             alt="{{ $pedido->medicamento->name }}"
                             class="w-full h-full object-contain p-2">
                    </div>
                    <div class="p-4 space-y-2">
                        <p class="text-sm text-gray-500">📅 Criado em: <strong>{{ \Carbon\Carbon::parse($pedido->created_at)->format('d/m/Y') }}</strong></p>
                        <p class="text-sm text-gray-500">💊 Medicamento:
                            <a href="{{ route('restrito.user.medicamentos.show', $pedido->medicamento->slug) }}"
                               class="text-blue-600 hover:underline font-medium">
                                {{ $pedido->medicamento->name }}
                            </a>
                        </p>
                        <p class="text-sm text-gray-500">🙍‍♂️ Solicitante:
                            <span class="text-gray-700 font-semibold">{{ $pedido->requester->name }}</span>
                        </p>

                        <div class="flex items-center gap-2">
                            <span class="text-gray-600 font-semibold">Status:</span>
                            <span class="px-3 py-1 text-xs font-semibold
                                {{ $pedido->status == 'pendente' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                {{ $pedido->status == 'aceito' ? 'bg-green-100 text-green-800' : '' }}
                                {{ $pedido->status == 'rejeitado' ? 'bg-red-100 text-red-800' : '' }}">
                                {{ ucfirst($pedido->status) }}
                            </span>
                        </div>
                    </div>
                    <div class="p-4 border-t border-gray-200 flex flex-col gap-2">
                        <a href="{{ route('pedidos.show', ['pedido_troca' => $pedido->codigo_troca]) }}"
                           class="block text-center px-3 py-2 bg-blue-500 text-white hover:bg-blue-600 font-bold transition-colors text-md">
                           <i class="ri-search-line mr-2 "></i>Ver Detalhes
                        </a>

                        @if ($pedido->status == 'pendente')
                            <div class="flex gap-2">
                                <a href="{{ route('restrito.user.troca.aceitar', ['codigo_troca' => $pedido->codigo_troca]) }}"
                                   class="flex-1 text-center px-3 py-2 bg-green-500 text-white hover:bg-green-600 font-bold transition-colors text-md">
                                   <i class="ri-check-fill mr-2"></i>Aceitar
                                </a>
                                <a href="{{ route('restrito.user.troca.rejeitar', $pedido->codigo_troca) }}"
                                   class="flex-1 text-center px-3 py-2 bg-red-500 text-white hover:bg-red-600 font-bold transition-colors text-md">
                                   <i class="ri-close-large-line mr-2"></i>Recusar
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

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