@extends('layouts.user_dashboard')

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

<div class="bg-white border-2 border-gray-300 shadow-md p-4 mt-6 flex flex-col sm:flex-row gap-4 justify-between">
    <div class="flex flex-col sm:flex-row items-center gap-2 w-full sm:flex-grow">
    <a href="{{ url()->previous() }}"
       class="bg-gray-600 text-white h-10 px-4 whitespace-nowrap truncate hover:bg-gray-700 transition flex items-center justify-center w-full sm:w-auto">
        <i class="fa-solid fa-arrow-left mr-2"></i> Voltar
    </a>
    </div>
    <div class="flex flex-col sm:flex-row items-center gap-2 w-full sm:flex-grow">
        <form action="{{ route('restrito.user.medicamentos.busca') }}" method="GET" class="flex flex-col sm:flex-row gap-2 w-full">
            <input type="text"
                   name="busca-remedio"
                   value="{{ old('busca-remedio') }}"
                   placeholder="Informe o nome medicamento"
                   class="w-full px-3 py-2 border border-gray-300 text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
            <button type="submit"
                    class="bg-green-500 text-white h-10 px-4 whitespace-nowrap truncate hover:bg-green-600 transition w-full sm:w-auto flex items-center justify-center">
                <i class="fa-solid fa-magnifying-glass mr-2"></i> Buscar
            </button>
        </form>
    </div>
</div>

<!-- Tabela de Trocas -->
<div class="bg-white p-6 mt-6 shadow-md overflow-x-auto">
    <table class="min-w-full border border-gray-200 rounded-lg">
        <thead>
            <tr class="bg-gray-100 text-gray-700 uppercase text-sm">
                <th class="py-3 px-4 border">Data da Solicitação</th>
                <th class="py-3 px-4 border">Medicamento</th>
                <th class="py-3 px-4 border">Ofertante</th>
                <th class="py-3 px-4 border">Status</th>
                <th class="py-3 px-4 border">Ações</th>
            </tr>
        </thead>
        <tbody>
            @foreach($trocas as $troca)
                <tr class="border-b text-gray-700 text-sm text-center">
                    <td class="py-3 px-4">{{ \Carbon\Carbon::parse($troca->created_at)->format('d/m/Y H:i') }}</td>
                    <td class="py-3 px-4">
                        <a href="{{ route('restrito.user.medicamentos.show', $troca->medicamento->slug) }}" class="text-blue-600 hover:underline font-medium">
                            {{ $troca->medicamento->name }}
                        </a>
                    </td>
                    <td class="py-3 px-4">{{ $troca->medicamento->user->name }}</td>
                    <td class="py-3 px-4">
                        <span class="px-3 py-1 text-sm font-semibold rounded-lg
                            {{ $troca->status == 'pendente' ? 'bg-yellow-200 text-yellow-800' : '' }}
                            {{ $troca->status == 'aceito' ? 'bg-green-200 text-green-800' : '' }}
                            {{ $troca->status == 'rejeitado' ? 'bg-red-200 text-red-800' : '' }}">
                            {{ ucfirst($troca->status) }}
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <a href="{{ route('restrito.user.pedidos-troca.show', $troca->codigo_troca) }}"
                        class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-all">
                            Ver Detalhes
                        </a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Paginação -->
    <div class="mt-6">
        {{ $trocas->links() }}
    </div>
</div>

<!-- Cards Responsivos -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
    @foreach($trocas as $troca)
    <a href="{{ route('restrito.user.medicamentos.show', $troca->medicamento->slug) }}">
        <div class="bg-white shadow-md  p-4 flex flex-col items-center text-center">
            <div class="w-32 h-32 flex items-center justify-center">
                @if($troca->medicamento->imagens->isNotEmpty())
                    <img src="{{ asset('storage/' . $troca->medicamento->imagens->first()->path) }}"
                        alt="{{ $troca->medicamento->name }}"
                        class="w-full h-full object-contain rounded-lg">
                @else

                    <img src="{{ asset('assets/sem-imagem.png') }}"
                        alt="{{ $troca->medicamento->name }}"
                        class="w-full h-full object-contain rounded-lg">
                @endif
            </div>

            <p class="text-md font-medium mt-2 text-">{{ Str::limit($troca->medicamento->name,30) }}</p>

            <div class="flex flex-col  p-2 gap-3 mt-3 text-sm ">

                <div class="flex justify-between gap-2">
                    <div class="text-red-600 font-bold">Data da Solicitação:</div>
                    <div class="text-red-600 font-bold">{{ \Carbon\Carbon::parse($troca->created_at)->format('d/m/Y') }}</div>
                </div>

                <div class="flex flex-col">
                    <div class="text-gray-500 underline text-lg font-bold">Solicitante:</div>
                    <div class="flex items-center gap-3 w-full">
                        <div class="rounded-full w-14 h-14 border-2 border-gray-600 p-1 flex items-center justify-center">
                            <img src="{{ asset('storage/' . $troca->requester->profile_photo) }}"
                                class="object-cover rounded-full w-full h-full">
                        </div>
                        <div class="text-gray-700 font-medium">
                            {{ $troca->requester->name }}
                        </div>
                    </div>
                </div>

                <div class="flex flex-col">
                    <div class="text-gray-500 underline text-lg font-bold">Ofertante:</div>
                    <div class="flex items-center gap-3 w-full">
                        <div class="rounded-full w-14 h-14 border-2 border-gray-600 p-1 flex items-center justify-center">
                            <img src="{{ asset('storage/' . $troca->medicamento->user->profile_photo) }}"
                                class="object-cover rounded-full w-full h-full">
                        </div>
                        <div class="text-gray-700 font-medium">
                            {{ $troca->medicamento->user->name }}
                        </div>
                    </div>
                </div>



                <div class="flex items-center justify-center mt-2">
                    <span class="px-3 py-1 text-sm lg:text-lg rounded-full font-semibold
                         @if($troca->status == 'pendente') bg-yellow-200 text-yellow-800
                         @elseif($troca->status == 'em_troca') bg-blue-200 text-blue-800
                         @elseif($troca->status == 'aceito') bg-green-200 text-green-800
                         @elseif($troca->status == 'rejeitado') bg-red-200 text-red-800
                         @endif">
                        {{ $troca->status == 'em_troca' ? 'Em Troca' : ucfirst($troca->status) }}
                    </span>
                </div>
            </div>
        </div>
    </a>
    @endforeach
</div>

@endsection