@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="{{ route('medicamentos.index') }}" class="hover:text-green-700 font-semibold transition-colors duration-200">Medicamentos Disponíveis</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>

    <!-- Filtros -->
    <div class="w-full py-4 mb-4 px-4 bg-gray-200">
        <form action="{{ route('medicamentos.index') }}" method="GET" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <label for="nome" class="block text-sm font-medium text-gray-700 mb-1">Nome do Medicamento</label>
                    <input type="text" name="nome" id="nome" value="{{ request('nome') }}"
                        class="w-full bg-white p-2 border-gray-300 shadow-sm focus:ring-green-500 focus:border-green-500 text-sm"
                        placeholder="Ex: Paracetamol, Amoxicilina...">
                </div>

                <div>
                    <label for="uf" class="block text-sm font-medium text-gray-700 mb-1">Estado (UF)</label>
                    <select name="uf" id="uf"
                            class="w-full p-2 bg-white border-gray-300 shadow-sm focus:ring-green-500 focus:border-green-500 text-sm">
                        <option value="">Todos os Estados</option>
                        {{-- Verifica se a variável $distinctUfs existe e tem itens --}}
                        @if(isset($distinctUfs) && $distinctUfs->count() > 0)
                            @foreach($distinctUfs as $uf_sigla)
                                <option value="{{ $uf_sigla }}" {{ request('uf') == $uf_sigla ? 'selected' : '' }}>
                                    {{ $uf_sigla }}
                                </option>
                            @endforeach
                        @else
                            {{-- Fallback caso não haja UFs ou a variável não seja passada (apenas para segurança) --}}
                            {{-- Você pode remover este bloco de fallback se confiar que $distinctUfs sempre existirá --}}
                            <option value="SP" {{ request('uf') == 'SP' ? 'selected' : '' }}>São Paulo (Exemplo)</option>
                            <option value="RJ" {{ request('uf') == 'RJ' ? 'selected' : '' }}>Rio de Janeiro (Exemplo)</option>
                        @endif
                    </select>
                </div>

                <div>
                    <label for="forma_farmaceutica" class="block text-sm font-medium text-gray-700 mb-1">Forma Farmacêutica</label>
                    <select name="forma_farmaceutica" id="forma_farmaceutica"
                            class="w-full p-2 bg-white border-gray-300 shadow-sm focus:ring-green-500 focus:border-green-500 text-sm">
                        <option value="">Todas as Formas</option>
                        @if(isset($distinctFormasFarmaceuticas) && $distinctFormasFarmaceuticas->count() > 0)
                            @foreach($distinctFormasFarmaceuticas as $forma)
                                <option value="{{ $forma }}" {{ request('forma_farmaceutica') == $forma ? 'selected' : '' }}>
                                    {{ ucfirst($forma) }} {{-- ucfirst para capitalizar --}}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div>
                    <label for="validade_minima" class="block text-sm font-medium text-gray-700 mb-1">Não expira antes de</label>
                    <input type="date" name="validade_minima" id="validade_minima" value="{{ request('validade_minima') }}"
                        class="w-full bg-white p-2 border-gray-300 shadow-sm focus:ring-green-500 focus:border-green-500 text-sm"
                        placeholder="DD/MM/AAAA">
                </div>
                </div>

            <div class="flex items-center justify-center gap-x-4 pt-2">
                <a href="{{ route('medicamentos.index') }}"
                class="text-sm font-medium text-gray-600 hover:text-green-700 hover:underline transition-colors duration-200">
                    Limpar Filtros
                </a>
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2 rounded-3xl">
                    <i class="ri-filter-3-line text-lg"></i>
                    Filtrar
                </button>
            </div>
        </form>
    </div>
    <!-- Fim Filtros-->

    <!-- Mensagem quando não há medicamentos -->
    @if($medicamentos->isEmpty())
        <div class="flex items-start gap-4 bg-yellow-50 border-l-4 border-yellow-400 text-yellow-700 p-6 shadow-md max-w-2xl mx-auto">
            <div>
                <i class="ri-information-fill text-2xl text-yellow-500"></i> </div>
            <div>
                <p class="font-semibold text-lg">Nenhum medicamento disponível no momento</p>
                <p class="text-sm mt-1">Tente novamente mais tarde ou ajuste os filtros de busca.</p>
            </div>
        </div>
    @else
        <!-- Grade de Medicamentos -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
            @foreach($medicamentos as $medicamento)
                <div class="bg-white border-2 py-2 border-gray-400 shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                    <!-- Carrossel de Imagens -->
                    <div class="relative w-full h-40 bg-white">
                        @if($medicamento->imagens->isNotEmpty())
                            <div class="swiper border-b-2 border-gray-200" id="swiper-{{ $medicamento->id }}">
                                <div class="swiper-wrapper">
                                    @foreach($medicamento->imagens as $imagem)
                                        <div class="swiper-slide place-items-center">
                                            <img src="{{ asset('storage/' . $imagem->path) }}"
                                                alt="{{ $medicamento->name }}"
                                                class="w-40 h-36 object-contain p-4">
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Botões de Navegação -->
                                <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-36 border-b-2 border-gray-200 flex items-center justify-center bg-white">
                                <img src="{{asset('assets/images/no-image.png')}}"
                                                class="w-40 h-36 object-contain p-4">
                            </div>
                        @endif
                    </div>

                    <!-- Detalhes do Medicamento -->
                    <div class="py-0 px-4 space-y-0  ">
                        <!-- Nome do Medicamento -->
                        <h4 class="text-lg font-semibold text-gray-800 text-center line-clamp-1">{{ $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-medium text-gray-500">Situação:</span>
	                            <span class="font-semibold text-gray-700">{{ $medicamento->status ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">Quantidade:</span>
                                <span>{{ $medicamento->remaining_quantity . '/' . $medicamento->volume_quantity . ' ' . ($medicamento->pharmaceutical_form ?? 'un.') }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">Dosagem:</span>
                                <span>{{ $medicamento->dosage ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">UF:</span>
                                <span>{{ $medicamento->user->enderecos->first()->uf ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between text-red-600">
                                <span class="font-semibold">Validade:</span>
                                <span>{{ $medicamento->validade ? \Carbon\Carbon::parse($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 {{ $medicamento->is_available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $medicamento->is_available ? 'Disponível' : 'Indisponível' }}
                            </span>
                        </div>

                        <!-- Ações -->
                        <div class="mt-4 flex gap-3">
                            <a href="{{ route('medicamentos.show', $medicamento->slug) }}"
                            title="Detalhes do medicamento"
                            class="flex-1 bg-gray-600 rounded-3xl text-white font-semibold py-2 px-4 hover:text-gray-600 hover:bg-white 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-search-line font-thin"></i>
                                <span>Detalhes</span>
                            </a>

                                <form action="{{ route('restrito.user.medicamentos.solicitar-troca', $medicamento->slug) }}" method="POST" class="flex-1">
                                    @csrf
                                    <button type="submit" title="Solicitar troca do medicamento"
                                            class="w-full bg-green-600 rounded-3xl text-white font-semibold py-2 px-4 hover:text-green-700 hover:bg-white focus:ring-4 focus:ring-green-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2 {{ !$medicamento->is_available ? 'cursor-not-allowed opacity-50' : '' }}"
                                            {{ !$medicamento->is_available ? 'disabled' : '' }}>
                                        <i class="ri-hand  text-lg font-thin"></i>
                                        <span>Solicitar</span>
                                    </button>
                                </form>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Aviso sobre Login -->
        <div class="mt-12 p-4 bg-blue-50 border border-blue-200 text-center rounded-md">
            <p class="text-blue-700 font-medium text-lg">
                <i class="ri-information-line mr-1 text-lg align-middle"></i>
                É necessário ter uma conta gratuita no TrovaMedicamentos para solicitar trocas.
                <a href="{{ route('register.user') }}" class="text-green-600 hover:text-green-700 font-semibold underline">Registre-se aqui</a>.
            </p>
        </div>
    @endif
</div>

<!-- Script para inicializar o Swiper -->
@vite('resources/js/app.js') <!-- Certifique-se de que Swiper está incluído no 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