@extends('layouts.user_dashboard')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-6">
    <!-- 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-md mt-0">
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('home') }}" class="hover:text-green-700 font-semibold transition-colors duration-300">Home</a>
            <span class="mx-1 text-gray-400">/</span>
            <a href="{{ route('medicamentos.index') }}" class="hover:text-green-700 font-semibold transition-colors duration-300">Medicamentos</a>
            <span class="mx-1 text-gray-400">/</span>
            <span class="text-green-800 font-semibold">Trocas Abertas</span>
        </div>

        <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>


    <!-- Título -->
    <h1 class="text-4xl font-bold text-green-700 my-12 text-center tracking-tight capitalize">{{$title}}</h1>

    <!-- Mensagem quando não há pedidos -->
    @if($trocasFeitas->isEmpty())
        <div class="bg-yellow-50 border-l-4 border-yellow-400 text-yellow-700 p-6 shadow-md max-w-2xl mx-auto">
            <p class="font-semibold text-lg">Nenhuma troca aberta no momento</p>
            <p class="text-sm mt-2">Aguarde novos pedidos ou verifique mais tarde!</p>
        </div>
    @else
        <!-- Grade de Pedidos -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
            @foreach($trocasFeitas as $troca)

                <div class="bg-white border border-gray-200 shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                    <!-- Carrossel de Imagens -->
                    <div class="relative w-full h-48 bg-gray-50">
                        @if($troca->medicamento->imagens->isNotEmpty())
                            <div class="swiper" id="swiper-{{ $troca->medicamento->id }}">
                                <div class="swiper-wrapper">
                                    @foreach($troca->medicamento->imagens as $imagem)
                                        <div class="swiper-slide">
                                            <img src="{{ asset('storage/' . $imagem->path) }}"
                                                 alt="{{ $troca->medicamento->name }}"
                                                 class="w-full h-48 object-contain p-4">
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-prev text-gray-500 opacity-75 hover:opacity-100"></div>
                                <div class="swiper-button-next text-gray-500 opacity-75 hover:opacity-100"></div>
                            </div>
                        @else
                            <div class="w-full h-48 flex items-center justify-center bg-gray-100">
                                <span class="text-gray-500 text-sm font-medium">Sem Imagem</span>
                            </div>
                        @endif
                    </div>

                    <!-- Detalhes do Medicamento -->
                    <div class="p-4 space-y-4">
                        <!-- Nome do Medicamento -->
                        <h4 class="text-lg font-semibold text-gray-800 text-center line-clamp-1">{{ $troca->medicamento->name }}</h4>

                        <!-- Informações Básicas -->
                        <div class="space-y-2 text-sm text-gray-600">
                            <div class="flex justify-between">
                                <span class="font-semibold">Situação:</span>
                                <span class="{{ App\Helpers\EntregaHelper::corSituacaoMedicamento($troca->medicamento->situacao ?? 'N/A') }}">
                                    {{ App\Helpers\EntregaHelper::formatarSituacaoMedicamento($troca->medicamento->situacao ?? 'N/A') }}
                                </span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">Quantidade:</span>
                                <span>{{ $troca->medicamento->remaining_quantity }}/{{ $troca->medicamento->volume_quantity }} {{ $troca->medicamento->pharmaceutical_form ?? 'un.' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">Dosagem:</span>
                                <span>{{ $troca->medicamento->dosage ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">UF:</span>
                                <span>{{ $troca->medicamento->user->enderecos->first()->uf ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between text-red-600">
                                <span class="font-semibold">Validade:</span>
                                <span>{{ $troca->medicamento->validade ? \Carbon\Carbon::parse($troca->medicamento->validade)->format('d/m/Y') : 'N/A' }}</span>
                            </div>
                        </div>

                        <!-- Disponibilidade -->
                        <div class="text-center mt-3">
                            <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold {{ $troca->medicamento->is_available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $troca->medicamento->is_available ? 'Disponível' : 'Indisponível' }}
                            </span>
                        </div>

                        <!-- Ações -->
                        <div class="mt-4 flex flex-col gap-3">
                            <a href="{{ route('trocas.show', $troca->codigo_troca) }}"
                               title="Ver detalhes da troca"
                               class="bg-blue-600 text-white py-2 px-4 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                                <i class="ri-search-line text-lg"></i>
                                <span>Ver Troca</span>
                            </a>
                            @auth
                                @if(auth()->user()->hasRole('motoboy'))
                                    <form action="{{ route('entrega.solicitar', $troca->codigo_troca) }}" method="POST">
                                        @csrf
                                        <button type="submit"
                                                class="w-full bg-orange-600 text-white  py-2 px-4 hover:bg-orange-700 focus:ring-4 focus:ring-orange-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2 {{ !$troca->medicamento->is_available ? 'cursor-not-allowed opacity-50' : '' }}"
                                                {{ !$troca->medicamento->is_available ? 'disabled' : '' }}>
                                            <i class="ri-motorbike-line text-lg"></i>
                                            <span>Solicitar Entrega</span>
                                        </button>
                                    </form>
                                @else
                                    <form action="{{ route('restrito.user.medicamentos.solicitar-troca', $troca->medicamento->slug) }}" method="POST">
                                        @csrf
                                        <button type="submit"
                                                class="w-full bg-green-600 text-white  py-2 px-4 hover:bg-green-700 focus:ring-4 focus:ring-green-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2 {{ !$troca->medicamento->is_available ? 'cursor-not-allowed opacity-50' : '' }}"
                                                {{ !$troca->medicamento->is_available ? 'disabled' : '' }}>
                                                <i class="ri-hand text-lg font-thin"></i>
                                            <span>Solicitar Troca</span>
                                        </button>
                                    </form>
                                @endif
                            @else
                                <a href="{{ route('login') }}"
                                   title="Faça login para solicitar entrega ou troca"
                                   class="bg-gray-600 text-white py-2 px-4 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                                   <i class="ri-motorbike-fill text-lg"></i>
                                   <span>Realizar Entrega</span>
                                </a>
                            @endauth
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Aviso sobre Login -->
        <div class="mt-12 text-center">
            <p class="text-red-600 text-base font-medium">
                <i class="ri-information-line mr-1 text-xl align-middle"></i>
                É necessário ter uma conta gratuita no TrovaMedicamentos para visualizar detalhes ou solicitar entregas.
                <a href="{{ route('register.user') }}" class="text-green-600 hover:text-green-700 font-semibold underline ml-1">Registre-se aqui</a>.
            </p>
        </div>
    @endif
</div>

<!-- Script para inicializar o Swiper -->
@vite('resources/js/app.js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.swiper').forEach(swiperEl => {
            new Swiper(swiperEl, {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: true,
                },
                navigation: {
                    nextEl: swiperEl.querySelector('.swiper-button-next'),
                    prevEl: swiperEl.querySelector('.swiper-button-prev'),
                },
            });
        });
    });
</script>
@endsection