@extends('layouts.user_dashboard')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6">

    <div class="flex flex-col md:flex-row justify-between items-center p-4 bg-white shadow-md">
        <h1 class="text-2xl font-bold text-gray-600">Painel do Usuário</h1>
        <div class="flex flex-col md:flex-row gap-2 mt-4 md:mt-0">
            <div class="flex gap-2">
                <label class="font-bold text-gray-700">Usuário:</label>
                <span class="text-gray-600">{{ auth()->user()->name }}</span>
            </div>
            <div class="flex gap-2">
                <label class="font-bold text-gray-700">Perfil:</label>
                <span class="text-gray-600 uppercase">
                    {{ optional(auth()->user()->roles()->first())->name ?? 'Sem perfil' }}
                </span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 mt-6">

        <a href="{{ route('restrito.user.medicamentos.index')}}" class="block">
            <div class="p-4 bg-white border-3 border-purple-200 hover:bg-purple-300 hover:text-purple-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-purple-600">Meus Medicamentos</h2>
                <p class="text-3xl font-bold text-purple-600">{{ $totMeusMedicamentos }}</p>
            </div>
        </a>

        <a href="#pedidos-solicitados" class="block">
            <div class="p-4 bg-white border-3 border-teal-200 hover:bg-teal-300 hover:text-teal-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-teal-600">Trocas Solicitadas</h2>
                <p class="text-3xl font-bold text-teal-600">{{ $totPedidosSolicitados }}</p>
            </div>
        </a>

        <a href="#pedidos-recebidos" class="block">
            <div class="p-4 bg-white border-3 border-yellow-200 hover:bg-yellow-300 hover:text-yellow-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-yellow-600">Trocas Recebidas</h2>
                <p class="text-3xl font-bold text-yellow-600">{{ $totPedidosRecebidos }}</p>
            </div>
        </a>

        <!--<a href="#entregas-em-andamento" class="block">
            <div class="p-4 bg-white border-3 border-orange-200 hover:bg-orange-300 hover:text-orange-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-orange-600">Entregas em Andamento</h2>
                <p class="text-3xl font-bold text-orange-600">{{ $totEntregasEmAndamento }}</p>
            </div>
        </a>-->

        <a href="#trocas-concluidas" class="block">
            <div class="p-4 bg-white border-3 border-green-200 hover:bg-green-300 hover:text-green-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-green-600">Trocas Concluídas</h2>
                <p class="text-3xl font-bold text-green-600">{{ $totTrocasConcluidas }}</p>
            </div>
        </a>

        <a href="#trocas-canceladas" class="block">
            <div class="p-4 bg-white border-3 border-red-200 hover:bg-red-300 hover:text-red-600 flex flex-col items-center text-center shadow-sm hover:shadow-lg transition-all duration-300">
                <h2 class="text-lg font-semibold text-red-600">Trocas Canceladas</h2>
                <p class="text-3xl font-bold text-red-600">{{ $totTrocasCanceladas }}</p>
            </div>
        </a>
    </div>

    <!-- Meus Medicamentos -->
    <div class="max-w-7xl mx-auto py-8 my-4 bg-white shadow-md">
        <a href="{{ route('restrito.user.medicamentos.index') }}" class="block">
            <h2 class="text-2xl font-bold text-purple-600 text-center mb-6 underline underline-offset-6">
                Meus Medicamentos ({{ $userMedicamentos->total() }})
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mx-4 gap-6 mt-6">
                @forelse ($userMedicamentos as $medicamento)
                    <div class="bg-white border border-gray-200 hover:shadow-lg transition-shadow flex flex-col overflow-hidden ">
                        <div class="bg-purple-600 text-white text-lg font-semibold text-center py-3 px-4">
                            {{ Str::limit($medicamento->name, 25) }}
                        </div>
                        <div class="flex items-center justify-center h-48 bg-gray-100">
                            {{-- START: Image Logic for Meus Medicamentos --}}
                            @php
                                $primeiraImagem = optional($medicamento->imagens)->first();
                                $imagePath = optional($primeiraImagem)->path;
                                $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                            @endphp
                            <img src="{{ $finalImageSrc }}"
                                alt="{{ $medicamento->name ?? 'Medicamento' }}"
                                class="w-full h-full object-contain p-2">
                            {{-- END: Image Logic for Meus Medicamentos --}}
                        </div>
                        <div class="p-4 flex flex-col items-center text-center flex-grow">
                            <span class="inline-block px-3 py-1 text-sm font-mediummb-3
                                {{ $medicamento->status == 'available' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ ucfirst(str_replace('_', ' ', $medicamento->status)) }}
                            </span>
                            <p class="text-sm font-semibold text-gray-700 mb-1">
                                Validade: {{ \Carbon\Carbon::parse($medicamento->validity)->format('d/m/Y') }}
                            </p>
                        </div>
                        <div class="p-4 flex justify-center gap-3 border-t border-gray-200">
                            <a href="{{ route('restrito.user.medicamentos.show', $medicamento->slug) }}"
                                title="Ver Detalhes"
                                class="px-3 py-2 bg-gray-600 text-white text-xllg:text-2xl font-medium hover:bg-blue-700 transition flex items-center gap-2 shadow-md">
                                <i class="ri-search-line"></i>
                            </a>
                            <a href="{{ route('restrito.user.medicamentos.edit', $medicamento->slug) }}"
                                title="Editar Medicamento"
                                class="px-3 py-2 bg-blue-600 text-white text-xllg:text-2xl font-medium hover:bg-blue-700 transition flex items-center gap-2 shadow-md">
                                <i class="ri-edit-line"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full text-center p-6 bg-gray-50 shadow-sm">
                        <p class="text-gray-600">Você não possui medicamentos cadastrados.</p>
                        <a href="{{ route('restrito.user.medicamentos.create') }}" class="mt-4 inline-block bg-purple-600 text-white px-4 py-2hover:bg-purple-700 transition">
                            Cadastrar Novo Medicamento
                        </a>
                    </div>
                @endforelse
            </div>
            @if ($userMedicamentos->hasPages())
                <div class="mt-6 flex justify-center">
                    {{ $userMedicamentos->links('pagination::tailwind') }}
                </div>
            @endif
        </a>
    </div>
    <!-- Fim Meus Medicamentos -->


    <div id="pedidos-solicitados" class="bg-white p-6 shadow-md border border-gray-200 mb-10">
        <h2 class="text-2xl font-bold text-teal-600 mb-4 text-center underline underline-offset-6">
            Pedidos de Troca Solicitados ({{ $pedidosSolicitados->total() }})
        </h2>
        <h3 class="text-lg font-medium text-gray-600 mb-6 text-center">
            Medicamentos que você solicitou de outros usuários
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse ($pedidosSolicitados as $pedido)
                <div @class([
                    'bg-white shadow-sm border-l-4 h-full flex flex-col hover:shadow-md transition duration-200',
                    'border-yellow-500' => $pedido->status === 'pendente',
                    'border-green-500' => $pedido->status === 'aceito',
                    'border-red-500' => $pedido->status === 'rejeitado' || $pedido->status === 'cancelado',
                    'border-blue-500' => $pedido->status === 'em_troca',
                    'border-gray-500' => $pedido->status === 'concluido',
                ])>
                    <a href="{{ route('restrito.troca.show', $pedido->codigo_troca ?? '') }}" class="block flex-1">
                        <div class="flex items-start p-4">
                            {{-- START: Image Logic for Pedidos Solicitados --}}
                            @php
                                $medicamento = optional($pedido)->medicamento;
                                $primeiraImagem = optional($medicamento)->imagens->first();
                                $imagePath = optional($primeiraImagem)->path;
                                $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                            @endphp
                            <img src="{{ $finalImageSrc }}"
                                 class="w-20 h-20 object-contain mr-4 flex-shrink-0"
                                 alt="{{ optional($medicamento)->name ?? 'Medicamento' }}">
                            {{-- END: Image Logic for Pedidos Solicitados --}}
                            <div class="flex-1 min-w-0">
                                <h3 class="text-base font-semibold text-gray-800 truncate">
                                    {{ optional($pedido->medicamento)->name ?? 'Sem Nome' }}
                                </h3>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Proprietário:</span>
                                    <span class="truncate block">{{ optional(optional($pedido->medicamento)->user)->name ?? 'Desconhecido' }}</span>
                                </p>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Código:</span>
                                    <span class="text-red-600 hover:text-red-700 hover:underline transition-colors duration-200">
                                        {{ $pedido->codigo_troca ?? 'N/A' }}
                                    </span>
                                </p>
                                <span @class([
                                    'inline-block mt-2 px-3 py-1 text-sm font-medium',
                                    'bg-yellow-100 text-yellow-800' => $pedido->status === 'pendente',
                                    'bg-green-100 text-green-800' => $pedido->status === 'aceito',
                                    'bg-red-100 text-red-800' => $pedido->status === 'rejeitado' || $pedido->status === 'cancelado',
                                    'bg-blue-100 text-blue-800' => $pedido->status === 'em_troca',
                                    'bg-gray-100 text-gray-800' => $pedido->status === 'concluido',
                                ])>
                                    {{ ucfirst(str_replace('_', ' ', $pedido->status)) }}
                                </span>
                            </div>
                        </div>
                    </a>

                    <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col gap-3 min-h-[72px]">
                        @if(in_array($pedido->status, ['pendente', 'aceito']))
                            <form action="{{ route('restrito.user.troca.cancelar', $pedido->codigo_troca ?? '') }}"
                                method="POST" id="cancelarTrocaForm-{{ $pedido->codigo_troca }}" class="w-full">
                                @csrf
                                <button type="button"
                                        onclick="confirmarAcao('cancelar', '{{ $pedido->codigo_troca ?? '' }}')"
                                        class="w-full flex items-center justify-center px-4 py-2 bg-red-600 text-white font-medium text-sm lg:text-lg hover:bg-red-700 transition duration-200">
                                    <i class="ri-close-circle-line mr-2 text-sm lg:text-lg"></i> Cancelar Solicitação
                                </button>
                            </form>
                        @else
                            <span class="text-sm text-gray-500 text-center">Ações não disponíveis neste status.</span>
                        @endif
                    </div>

                    <div @class([
                        'px-3 py-2 text-md text-white flex justify-between',
                        'bg-yellow-500' => $pedido->status === 'pendente',
                        'bg-green-500' => $pedido->status === 'aceito',
                        'bg-red-500' => $pedido->status === 'rejeitado' || $pedido->status === 'cancelado',
                        'bg-blue-500' => $pedido->status === 'em_troca',
                        'bg-gray-500' => $pedido->status === 'concluido',
                    ])>
                        <span>{{ optional($pedido->created_at)->format('d/m/Y H:i') ?? 'N/A' }}</span>
                        <span>{{ optional($pedido->created_at)->diffForHumans() ?? 'N/A' }}</span>
                    </div>
                </div>

            @empty
                <div class="col-span-full text-center text-gray-600 py-4 p-6 bg-gray-50 shadow-sm">
                    Nenhum pedido de troca solicitado encontrado.
                    <a href="{{ route('restrito.user.dashboard') }}" class="mt-4 inline-block bg-teal-600 text-white px-4 py-2hover:bg-teal-700 transition">
                        Buscar Medicamentos para Troca
                    </a>
                </div>
            @endforelse
        </div>
        <div class="mt-6 flex justify-center">{{ $pedidosSolicitados->links('pagination::tailwind') }}</div>
    </div>

    <div id="pedidos-recebidos" class="bg-white p-6 shadow-md border border-gray-200 mb-10">
        <h2 class="text-2xl font-bold text-yellow-600 mb-4 text-center underline underline-offset-6">
            Pedidos de Troca Recebidos ({{ $pedidosRecebidos->total() }})
        </h2>
        <h3 class="text-lg font-medium text-gray-600 mb-6 text-center">
            Pedidos que você recebeu de outros usuários para seus medicamentos
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse ($pedidosRecebidos as $pedido)
                <div class="bg-white shadow-sm border-l-4 h-full flex flex-col hover:shadow-md transition duration-200
                    {{ $pedido->status == 'pendente' ? 'border-yellow-500' : '' }}
                    {{ $pedido->status == 'aceito' ? 'border-green-500' : '' }}
                    {{ $pedido->status == 'rejeitado' ? 'border-red-500' : '' }}
                    {{ !in_array($pedido->status, ['pendente', 'aceito', 'rejeitado']) ? 'border-gray-300' : '' }}">

                    <a href="{{ route('restrito.troca.show', $pedido->codigo_troca ?? '') }}" class="block flex-1">
                        <div class="flex items-start p-4">
                            {{-- START: Image Logic for Pedidos Recebidos --}}
                            @php
                                $medicamento = optional($pedido)->medicamento;
                                $primeiraImagem = optional($medicamento)->imagens->first();
                                $imagePath = optional($primeiraImagem)->path;
                                $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                            @endphp
                            <img src="{{ $finalImageSrc }}"
                                 class="w-20 h-20 object-contain mr-4 flex-shrink-0"
                                 alt="{{ optional($medicamento)->name ?? 'Medicamento' }}">
                            {{-- END: Image Logic for Pedidos Recebidos --}}

                            <div class="flex-1 min-w-0">
                                <h3 class="text-base font-semibold text-gray-800 truncate">{{ optional($pedido->medicamento)->name ?? 'Sem Nome' }}</h3>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Solicitado por:</span>
                                    <a href="{{ route('user-details', ['mail' => optional($pedido->requester)->email ?? '']) }}"
                                       class="text-gray-600 hover:text-green-700 hover:underline transition-colors duration-200 truncate block"
                                       title="Veja os detalhes do solicitante">
                                        {{ optional($pedido->requester)->name ?? 'Desconhecido' }}
                                    </a>
                                </p>
                                <p class="text-sm text-gray-600 mt-1">
                                    <span class="font-semibold uppercase text-xs">Código:</span>

                                    <a href="{{route('restrito.troca.show', $pedido->codigo_troca ?? '') }}">
                                    <span class="text-red-600 hover:text-red-700 hover:underline transition-colors duration-200">
                                        {{ $pedido->codigo_troca ?? 'N/A' }}
                                    </span>
                                    </a>
                                </p>
                                <span class="inline-block mt-2 px-3 py-1 text-sm font-medium
                                    {{ $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' : '' }}
                                    {{ $pedido->status == 'cancelado' ? 'bg-gray-100 text-gray-800' : '' }}
                                    {{ !in_array($pedido->status, ['pendente', 'aceito', 'rejeitado', 'cancelado']) ? 'bg-gray-100 text-gray-800' : '' }}">
                                    {{ ucfirst(str_replace('_', ' ', $pedido->status)) }}
                                </span>
                            </div>
                        </div>
                    </a>
                    <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col gap-3 min-h-[112px]">
                        @if($pedido->status == 'pendente')
                            <form action="{{ route('restrito.user.troca.aceitar', $pedido->codigo_troca ?? '') }}"
                                    method="POST" id="aceitarTrocaForm-{{ $pedido->codigo_troca }}" class="w-full">
                                @csrf
                                <button type="button" onclick="confirmarAcao('aceitar', '{{ $pedido->codigo_troca ?? '' }}')"
                                        class="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white font-medium hover:bg-green-700 transition duration-200">
                                    <i class="ri-check-line mr-2"></i> Aceitar
                                </button>
                            </form>
                            <form action="{{ route('restrito.user.troca.rejeitar', $pedido->codigo_troca ?? '') }}"
                                    method="POST" id="rejeitarTrocaForm-{{ $pedido->codigo_troca }}" class="w-full">
                                @csrf
                                <button type="button" onclick="confirmarAcao('rejeitar', '{{ $pedido->codigo_troca ?? '' }}')"
                                        class="w-full flex items-center justify-center px-4 py-2 bg-red-600 text-white font-medium hover:bg-red-700 transition duration-200">
                                    <i class="ri-close-line mr-2"></i> Rejeitar
                                </button>
                            </form>
                        @else
                            <span class="text-sm text-gray-500 text-center">Ações não disponíveis neste status.</span>
                        @endif
                    </div>
                    <div class="p-3 text-xs text-white flex justify-between
                        {{ $pedido->status == 'pendente' ? 'bg-yellow-500' : '' }}
                        {{ $pedido->status == 'aceito' ? 'bg-green-500' : '' }}
                        {{ $pedido->status == 'rejeitado' ? 'bg-red-500' : '' }}
                        {{ $pedido->status == 'cancelado' ? 'bg-gray-500' : '' }}
                        {{ !in_array($pedido->status, ['pendente', 'aceito', 'rejeitado', 'cancelado']) ? 'bg-gray-500' : '' }}">
                        <span>{{ optional($pedido->created_at)->format('d/m/Y H:i') ?? 'N/A' }}</span>
                        <span>{{ optional($pedido->created_at)->diffForHumans() ?? 'N/A' }}</span>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center text-gray-600 py-4 p-6 bg-gray-50 shadow-sm">
                    Nenhum pedido de troca recebido encontrado.
                </div>
            @endforelse
        </div>
        <div class="mt-6 flex justify-center">{{ $pedidosRecebidos->links('pagination::tailwind') }}</div>
    </div>

    <div id="entregas-em-andamento" class="mt-8 bg-white shadow-md p-4">
        <h2 class="text-2xl font-bold text-orange-600 text-center mb-6 underline underline-offset-6">
            Minhas Entregas em Andamento ({{ $entregasEmAndamento->total() }})
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-6">

            {{-- Removed @dd($entregasEmAndamento) --}}
            @forelse ($entregasEmAndamento as $entrega)
                <div class="bg-white border border-orange-300 shadow-lg p-6 flex flex-col items-center">

                    <h2 class="text-lg font-semibold text-gray-800 text-center">{{ optional(optional($entrega->pedidoTroca)->medicamento)->name ?? 'Medicamento Desconhecido' }}</h2>

                    <div class="flex items-center justify-center h-36 w-full bg-gray-100 mt-3">
                        {{-- Removed @dd(($entrega->pedidoTroca)) --}}
                        {{-- START: Image Logic for Entregas em Andamento --}}
                        @php
                            $medicamento = optional(optional($entrega->pedidoTroca)->medicamento);
                            $primeiraImagem = optional($medicamento)->imagens->first();
                            $imagePath = optional($primeiraImagem)->path;
                            $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                        @endphp
                        <img src="{{ $finalImageSrc }}"
                             alt="{{ optional($medicamento)->name ?? 'Medicamento' }}"
                             class="w-full h-full object-contain p-2">
                        {{-- END: Image Logic for Entregas em Andamento --}}
                    </div>

                    <div class="w-full mt-5 text-sm text-gray-700 space-y-1">
                        <p><strong class="text-gray-900">Código Troca:</strong> {{ optional(optional($entrega->pedidoTroca)->codigo_troca) ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Origem:</strong> {{ optional($entrega->enderecoOrigem)->bairro ?? 'N/A' }} - {{ optional($entrega->enderecoOrigem)->uf ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Destino:</strong> {{ optional($entrega->enderecoDestino)->bairro ?? 'N/A' }} - {{ optional($entrega->enderecoDestino)->uf ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Status:</strong> <span class="text-orange-600 font-semibold">{{ $entrega->formatted_status }}</span></p>
                        <p><strong class="text-gray-900">Motoboy:</strong> {{ optional($entrega->motoboy)->name ?? 'Aguardando' }}</p>
                        <p><strong class="text-gray-900">Custo:</strong> {{ $entrega->formatted_custo_entrega }}</p>
                        <p><strong class="text-gray-900">Pagamento:</strong> {{ ucfirst(str_replace('_', ' ', $entrega->metodo_pagamento)) }}</p>
                    </div>

                    <div class="w-full mt-5 flex justify-center">
                        <a href="{{ route('restrito.troca.show', optional(optional($entrega->pedidoTroca)->codigo_troca) ?? '') }}"
                           title="Ver Detalhes da Troca"
                           class="px-3 py-2 bg-gray-600 text-whitetext-md font-medium hover:bg-blue-700 transition flex items-center gap-2 shadow-md">
                            <i class="ri-search-line"></i> Detalhes
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center p-6 bg-gray-50 shadow-sm">
                    <p class="text-gray-600">Nenhuma entrega em andamento envolvendo você.</p>
                </div>
            @endforelse
        </div>
        @if ($entregasEmAndamento->hasPages())
            <div class="mt-6 flex justify-center">
                {{ $entregasEmAndamento->links('pagination::tailwind') }}
            </div>
        @endif
    </div>

    <div id="trocas-concluidas" class="mt-8 bg-white shadow-md p-4">
        <h2 class="text-2xl font-bold text-green-600 text-center mb-6 underline underline-offset-6">
            Trocas Concluídas ({{ $trocasConcluidas->total() }})
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-6">
            @forelse ($trocasConcluidas as $troca)
                <div class="bg-white border border-green-300 shadow-lg p-6 flex flex-col items-center">
                    <h2 class="text-lg font-semibold text-gray-800 text-center">{{ optional($troca->medicamento)->name ?? 'Medicamento Desconhecido' }}</h2>

                    <div class="flex items-center justify-center h-36 w-full bg-gray-100 mt-3">
                        {{-- START: Image Logic for Trocas Concluídas --}}
                        @php
                            $medicamento = optional($troca)->medicamento;
                            $primeiraImagem = optional($medicamento)->imagens->first();
                            $imagePath = optional($primeiraImagem)->path;
                            $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                        @endphp
                        <img src="{{ $finalImageSrc }}"
                             alt="{{ optional($medicamento)->name ?? 'Medicamento' }}"
                             class="w-full h-full object-contain p-2">
                        {{-- END: Image Logic for Trocas Concluídas --}}
                    </div>

                    <div class="w-full mt-5 text-sm text-gray-700 space-y-1">
                        <p><strong class="text-gray-900">Código Troca:</strong> {{ $troca->codigo_troca ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Status:</strong> <span class="text-green-600 font-semibold">{{ ucfirst(str_replace('_', ' ', $troca->status)) }}</span></p>
                        <p><strong class="text-gray-900">Data Conclusão:</strong> {{ optional(\Carbon\Carbon::parse(optional($troca->updated_at)))->format('d/m/Y H:i') ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Tipo:</strong> {{ $troca->requester_id == auth()->id() ? 'Solicitada por Você' : 'Recebida por Você' }}</p>
                        <p><strong class="text-gray-900">Custo Entrega:</strong> {{ optional(optional($troca->entrega)->formatted_custo_entrega) ?? 'N/A' }}</p>
                    </div>

                    <div class="w-full mt-5 flex justify-center">
                        <a href="{{ route('restrito.troca.show', $troca->codigo_troca ?? '') }}"
                           title="Ver Detalhes"
                           class="px-3 py-2 bg-gray-600 text-whitetext-md font-medium hover:bg-blue-700 transition flex items-center gap-2 shadow-md">
                            <i class="ri-search-line"></i> Detalhes
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center p-6 bg-gray-50 shadow-sm">
                    <p class="text-gray-600">Nenhuma troca concluída encontrada.</p>
                </div>
            @endforelse
        </div>
        @if ($trocasConcluidas->hasPages())
            <div class="mt-6 flex justify-center">
                {{ $trocasConcluidas->links('pagination::tailwind') }}
            </div>
        @endif
    </div>

    <div id="trocas-canceladas" class="mt-8 bg-white shadow-md p-4">
        <h2 class="text-2xl font-bold text-red-600 text-center mb-6 underline underline-offset-6">
            Trocas Canceladas ({{ $trocasCanceladas->total() }})
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-6">
            @forelse ($trocasCanceladas as $troca)
                <div class="bg-white border border-red-300 shadow-lg p-6 flex flex-col items-center">
                    <h2 class="text-lg font-semibold text-gray-800 text-center">{{ optional($troca->medicamento)->name ?? 'Medicamento Desconhecido' }}</h2>

                    <div class="flex items-center justify-center h-36 w-full bg-gray-100 mt-3">
                        {{-- START: Image Logic for Trocas Canceladas --}}
                        @php
                            $medicamento = optional($troca)->medicamento;
                            $primeiraImagem = optional($medicamento)->imagens->first();
                            $imagePath = optional($primeiraImagem)->path;
                            $finalImageSrc = asset('storage/' . ($imagePath ?? 'images/sem-imagem.png'));
                        @endphp
                        <img src="{{ $finalImageSrc }}"
                             alt="{{ optional($medicamento)->name ?? 'Medicamento' }}"
                             class="w-full h-full object-contain p-2">
                        {{-- END: Image Logic for Trocas Canceladas --}}
                    </div>

                    <div class="w-full mt-5 text-sm text-gray-700 space-y-1">
                        <p><strong class="text-gray-900">Código Troca:</strong> {{ $troca->codigo_troca ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Status:</strong> <span class="text-red-600 font-semibold">{{ ucfirst(str_replace('_', ' ', $troca->status)) }}</span></p>
                        <p><strong class="text-gray-900">Data Cancelamento:</strong> {{ optional(\Carbon\Carbon::parse(optional($troca->updated_at)))->format('d/m/Y H:i') ?? 'N/A' }}</p>
                        <p><strong class="text-gray-900">Tipo:</strong> {{ $troca->requester_id == auth()->id() ? 'Solicitada por Você' : 'Recebida por Você' }}</p>
                    </div>

                    <div class="w-full mt-5 flex justify-center">
                        <a href="{{ route('restrito.troca.show', $troca->codigo_troca ?? '') }}"
                           title="Ver Detalhes"
                           class="px-3 py-2 bg-gray-600 text-whitetext-md font-medium hover:bg-blue-700 transition flex items-center gap-2 shadow-md">
                            <i class="ri-search-line"></i> Detalhes
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center p-6 bg-gray-50 shadow-sm">
                    <p class="text-gray-600">Nenhuma troca cancelada encontrada.</p>
                </div>
            @endforelse
        </div>
        @if ($trocasCanceladas->hasPages())
            <div class="mt-6 flex justify-center">
                {{ $trocasCanceladas->links('pagination::tailwind') }}
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
{{-- Include SweetAlert2 as per your dashboard blade --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmarAcao(acao, codigoTroca) {
        let title, text, icon, confirmButtonColor;
        let formId;

        if (acao === 'aceitar') {
            title = 'Aceitar Pedido de Troca?';
            text = 'Você está prestes a aceitar este pedido de troca. Esta ação é irreversível.';
            icon = 'warning';
            confirmButtonColor = '#10B981'; // green-500
            formId = `aceitarTrocaForm-${codigoTroca}`;
        } else if (acao === 'rejeitar') {
            title = 'Rejeitar Pedido de Troca?';
            text = 'Você está prestes a rejeitar este pedido de troca. Esta ação é irreversível.';
            icon = 'warning';
            confirmButtonColor = '#EF4444'; // red-500
            formId = `rejeitarTrocaForm-${codigoTroca}`;
        } else if (acao === 'cancelar') {
            title = 'Cancelar Solicitação de Troca?';
            text = 'Você está prestes a cancelar este pedido. Esta ação é irreversível.';
            icon = 'warning';
            confirmButtonColor = '#DC2626'; // red-600
            formId = `cancelarTrocaForm-${codigoTroca}`;
        } else {
            return;
        }

        Swal.fire({
            title: title,
            text: text,
            icon: icon,
            showCancelButton: true,
            confirmButtonColor: confirmButtonColor,
            cancelButtonColor: '#6B7280', // gray-500
            confirmButtonText: 'Sim, continuar!',
            cancelButtonText: 'Não, cancelar',
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
                cancelButton: 'px-5 py-2 text-base font-medium'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(formId).submit();
            }
        });
    }

    // Exibir mensagens flash do Laravel com SweetAlert2
    @if(session('success'))
        Swal.fire({
            title: 'Sucesso!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#10B981', // green-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif

    @if(session('error'))
        Swal.fire({
            title: 'Erro!',
            text: '{{ session('error') }}',
            icon: 'error',
            confirmButtonColor: '#EF4444', // red-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif

    @if(session('info'))
        Swal.fire({
            title: 'Informação!',
            text: '{{ session('info') }}',
            icon: 'info',
            confirmButtonColor: '#3B82F6', // blue-500
            customClass: {
                popup: 'shadow-xl',
                confirmButton: 'px-5 py-2 text-base font-medium',
            }
        });
    @endif
</script>
@endsection