@extends('layouts.user_dashboard')

{{-- Mantendo seus estilos Swiper existentes --}}
<style>
    .swiper-button-next,
    .swiper-button-prev {
        color: #6b7280 !important; /* gray-500 */
        top: 50%; /* Ajustado para centralizar na imagem */
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.7); /* Fundo semi-transparente para melhor visibilidade */
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }

    .swiper-button-prev {
        left: 5px; /* Ajuste para não colar na borda */
    }

    .swiper-button-next {
        right: 5px; /* Ajuste para não colar na borda */
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(255, 255, 255, 0.9);
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px !important; /* Tamanho do ícone */
        color: #6b7280 !important; /* gray-500 */
    }

    .swiper-pagination-bullet {
        background: #d1d5db !important; /* gray-300 */
        opacity: 1 !important;
        width: 8px;
        height: 8px;
        margin: 0 4px !important;
    }

    .swiper-pagination-bullet-active {
        background: #6b7280 !important; /* gray-500 */
    }

    /* Removido o overflow-x: scroll para o swiper em mobile, pois o Swiper.js já lida com o toque. */
</style>

@section('content')

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
    {{-- Header da Página --}}
    <div class="flex flex-col md:flex-row justify-between items-center gap-4 my-6 p-6 bg-white shadow-lg rounded-lg">
        <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 flex items-center gap-2 mb-3 md:mb-0">
            <i class="ri-dashboard-line text-gray-700 text-3xl sm:text-4xl"></i> {{ $title }}
        </h1>

        <div class="flex flex-col md:flex-row gap-4 mt-4 md:mt-0 text-base text-gray-700">
            <div class="flex items-center gap-2">
                <span class="font-semibold text-gray-700">Usuário:</span>
                <span class="text-gray-700">{{ auth()->user()->name }}</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="font-semibold text-gray-700">Perfil:</span>
                <span class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-xs font-medium uppercase">
                    {{ auth()->user()->roles()->first()->name ?? 'Sem perfil' }}
                </span>
            </div>
        </div>
    </div>

    {{-- As mensagens de sessão serão exibidas via SweetAlert2, então removemos os divs aqui --}}
    {{-- @if(session('success')) ... @endif --}}
    {{-- @if($errors->any()) ... @endif --}}

    {{-- Painel de Controle (Botões e Busca) --}}
    <div class="bg-white border border-gray-200 shadow-lg rounded-lg p-6 mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:flex-wrap">

        <!-- Botão Voltar -->
        <div class="w-full sm:w-auto">
            <a href="{{ url()->previous() }}"
                class="inline-flex items-center w-full justify-center sm:w-auto px-6 py-3 bg-gray-500 text-white font-semibold rounded-md shadow-md hover:bg-gray-600 transition-colors duration-200">
                <i class="ri-arrow-left-line mr-2"></i> Voltar
            </a>
        </div>

        <!-- Formulário de busca -->
        <form action="{{ route('restrito.user.medicamentos.busca') }}"
            method="GET"
            class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto sm:flex-1 sm:justify-center">
            <input type="text"
                    name="busca-remedio"
                    value="{{ old('busca-remedio') }}"
                    placeholder="Buscar medicamento..."
                    class="w-full sm:max-w-sm px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 text-gray-700 placeholder-gray-400"
            >
            <button type="submit"
                    class="inline-flex items-center justify-center px-6 py-3 bg-green-500 text-white font-semibold rounded-md shadow-md hover:bg-green-600 transition-colors duration-200 whitespace-nowrap">
                <i class="ri-search-line mr-2"></i> Buscar
            </button>
        </form>

        <!-- Botão Novo Medicamento -->
        <div class="w-full sm:w-auto">
            <a href="{{ route('restrito.user.medicamentos.create') }}"
                class="inline-flex items-center w-full justify-center sm:w-auto px-6 py-3 bg-blue-500 text-white font-semibold rounded-md shadow-md hover:bg-blue-600 transition-colors duration-200 whitespace-nowrap">
                <i class="ri-add-line mr-2"></i> Novo Medicamento
            </a>
        </div>
    </div>

    {{-- Grid de Medicamentos --}}
    <div class="mx-auto mt-8">
        @if($medicamentos->isEmpty())
            <div class="text-center text-gray-600 py-16 bg-white border border-gray-200 shadow-lg rounded-lg">
                <p class="text-xl font-bold mb-4">📌 Nenhum medicamento disponível para troca no momento.</p>
                <p class="text-lg">Comece adicionando seus medicamentos para iniciar trocas!</p>
                <a href="{{ route('restrito.user.medicamentos.create') }}"
                   class="mt-6 inline-flex items-center px-6 py-3 bg-blue-500 text-white font-semibold rounded-md shadow-md hover:bg-blue-600 transition-colors duration-200">
                    <i class="ri-add-line mr-2"></i> Adicionar Primeiro Medicamento
                </a>
            </div>
        @else
            {{-- Ajuste da grade para mais itens por linha --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">

                @foreach($medicamentos as $medicamento)
                    <div class="bg-white rounded-lg shadow-xl overflow-hidden border border-gray-100 flex flex-col h-full">

                        {{-- Link principal do card para detalhes do medicamento --}}
                        <a href="{{ route('restrito.user.medicamentos.show', ['medicamento' => $medicamento->slug]) }}" class="block flex-1 hover:opacity-90 transition-opacity duration-300">
                            <div class="bg-gray-200 p-2 text-gray-700 text-center font-semibold text-lg truncate flex items-center justify-center min-h-[50px] max-h-[70px]">
                                <h3 class="w-full whitespace-nowrap overflow-hidden text-ellipsis px-2 py-1">
                                    {{ $medicamento->name }}
                                </h3>
                            </div>

                            <div class="flex justify-center p-4 min-h-[160px] items-center">
                                @if($medicamento->imagens->isNotEmpty())
                                    <div class="swiper w-40 h-40 relative flex-shrink-0" id="swiper-{{ $medicamento->id }}">
                                        <div class="swiper-wrapper">
                                            @foreach($medicamento->imagens as $imagem)
                                                <div class="swiper-slide flex items-center justify-center">
                                                    <img src="{{ asset('storage/' . $imagem->path) }}"
                                                         onerror="this.onerror=null;this.src='https://placehold.co/160x160/cbd5e1/4b5563?text=Imagem+N/A';"
                                                         alt="{{ $medicamento->name }}"
                                                         class="w-full h-full object-contain">
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="swiper-button-prev"></div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                @else
                                    <img src="{{ asset('assets/images/sem-imagem.png') }}"
                                         onerror="this.onerror=null;this.src='https://placehold.co/160x160/cbd5e1/4b5563?text=Sem+Imagem';"
                                         alt="Sem Imagem"
                                         class="w-40 h-40 object-contain flex-shrink-0">
                                @endif
                            </div>

                            <div class="p-4 border-t border-gray-200 text-sm text-gray-700 space-y-2 flex-grow">
                                <div class="flex justify-between items-center">
                                    <span class="font-semibold text-red-600">Validade:</span>
                                    <span class="text-red-600 font-medium">{{ date('d/m/Y', strtotime($medicamento->validade)) }}</span>
                                </div>
                                @php
                                    $trocaAtiva = $medicamento->trocas->firstWhere(function($troca) {
                                        return !in_array($troca->status, ['concluido', 'cancelado', 'rejeitado']);
                                    });
                                    // Manter as cores de status que você já tinha ou que foram inferidas
                                    $statusBadgeClasses = [
                                        'pendente' => 'bg-yellow-100 text-yellow-800',
                                        'aceito' => 'bg-green-100 text-green-800',
                                        'rejeitado' => 'bg-red-100 text-red-800',
                                        'em_troca' => 'bg-blue-100 text-blue-800', // Um status que o medicamento pode ter quando uma troca está em andamento
                                        'cancelado' => 'bg-gray-100 text-gray-800',
                                        'concluido' => 'bg-purple-100 text-purple-800',
                                    ];
                                @endphp

                                <div class="flex justify-between items-center">
                                    <span class="font-semibold">Status:</span>
                                    @if($trocaAtiva)
                                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full {{ $statusBadgeClasses[$trocaAtiva->status] ?? 'bg-gray-200 text-gray-700' }}">
                                            {{ ucfirst(str_replace('_', ' ', $trocaAtiva->status)) }}
                                        </span>
                                    @else
                                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full {{ $medicamento->is_available ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                            {{ $medicamento->is_available ? 'Disponível' : 'Indisponível' }}
                                        </span>
                                    @endif
                                </div>

                                <div class="flex justify-between items-center">
                                    <span class="font-semibold">Nº de Trocas:</span>
                                    <span>{{ $medicamento->trocas->count() }}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="font-semibold">Adicionado:</span>
                                    <span class="text-gray-500">{{ $medicamento->created_at ? $medicamento->created_at->diffForHumans() : 'N/A' }}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="font-semibold">Vence em:</span>
                                    <span class="text-red-600 font-medium">{{ \Carbon\Carbon::parse($medicamento->validade)->diffForHumans() ?? 'N/A' }}</span>
                                </div>
                            </div>
                        </a>

                        {{-- Área de Ações --}}
                        <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row justify-center sm:justify-between items-center gap-2 w-full">

                            @can('update_medicamento', $medicamento)
                                <a href="{{ route('restrito.user.medicamentos.edit', ['medicamento' => $medicamento->slug]) }}"
                                   class="flex-1 w-full flex items-center justify-center px-4 py-2 bg-yellow-500 text-white text-base font-semibold rounded-md shadow-md hover:bg-yellow-600 transition-colors duration-200">
                                    <i class="ri-pencil-line mr-2"></i> Editar
                                </a>
                            @endcan

                            @can('deletar_medicamento', $medicamento)
                                @if($medicamento->is_available)
                                    <form id="form-indisponivel-{{ $medicamento->id }}" action="{{ route('restrito.user.marcar-indisponivel', ['medicamento' => $medicamento->slug]) }}" method="POST" class="flex-1 w-full">
                                        @csrf
                                        <button type="button"
                                                onclick="confirmarIndisponivel({{ $medicamento->id }})"
                                                class="w-full flex items-center justify-center px-4 py-2 bg-red-500 text-white text-base font-semibold rounded-md shadow-md hover:bg-red-600 transition-colors duration-200">
                                            <i class="ri-eye-off-line mr-2"></i> Desativar
                                        </button>
                                    </form>
                                @endif
                            @endcan

                            @can('requerer_medicamento', $medicamento)
                                @if($medicamento->is_available && !$trocaAtiva && $medicamento->user_id !== auth()->id())
                                    <form action="{{ route('medicamentos.request', $medicamento->slug) }}" method="POST" class="flex-1 w-full" id="solicitarTrocaForm-{{ $medicamento->slug }}">
                                        @csrf
                                        <button type="button" onclick="confirmarSolicitacao('{{ $medicamento->slug }}')"
                                                class="w-full flex items-center justify-center px-4 py-2 bg-green-500 text-white text-base font-semibold rounded-md shadow-md hover:bg-green-600 transition-colors duration-200">
                                            <i class="ri-exchange-line mr-2"></i> Solicitar Troca
                                        </button>
                                    </form>
                                @elseif($medicamento->user_id === auth()->id())
                                    {{-- Se o medicamento é do usuário logado, não pode solicitar troca, mas pode ter outra ação --}}
                                    <span class="flex-1 text-center text-sm text-gray-500 p-2">Seu medicamento</span>
                                @elseif($trocaAtiva)
                                    <a href="{{ route('restrito.user.pedidos-troca.show', optional($trocaAtiva)->codigo_troca) }}"
                                       class="flex-1 w-full flex items-center justify-center px-4 py-2 bg-blue-500 text-white text-base font-semibold rounded-md shadow-md hover:bg-blue-600 transition-colors duration-200">
                                        <i class="ri-information-line mr-2"></i> Ver Troca Ativa
                                    </a>
                                @else
                                    <span class="flex-1 text-center text-sm text-gray-500 p-2">Não disponível para troca</span>
                                @endif
                            @endcan
                        </div>

                    </div>
                @endforeach
            </div>

            <div class="mt-8">
                {{ $medicamentos->links() }}
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
    {{-- Importe o Swiper JS --}}
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    {{-- Importe o Remixicon CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
    {{-- Importe o SweetAlert2 JS --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Funções para exibir mensagens flash com SweetAlert2
        @if(session('success'))
            Swal.fire({
                title: 'Sucesso!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonColor: '#22C55E', // green-500
                customClass: { popup: 'shadow-xl rounded-lg', confirmButton: 'px-5 py-2 text-base font-medium rounded-md', }
            });
        @endif

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

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

        // Funções de confirmação usando SweetAlert2
        function confirmarIndisponivel(id) {
            Swal.fire({
                title: 'Confirmação',
                text: 'Tem certeza que deseja desativar este medicamento? Ele não aparecerá mais para troca.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#EF4444', // red-500
                cancelButtonColor: '#6B7280', // gray-500
                confirmButtonText: 'Sim, Desativar',
                cancelButtonText: 'Cancelar',
                customClass: { popup: 'shadow-xl rounded-lg', confirmButton: 'px-5 py-2 text-base font-medium rounded-md', cancelButton: 'px-5 py-2 text-base font-medium rounded-md', }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Desativando Medicamento...',
                        text: 'Por favor, aguarde.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    document.getElementById('form-indisponivel-' + id).submit();
                } else {
                    Swal.fire('Ação cancelada', '', 'info');
                }
            });
        }

        function confirmarSolicitacao(slug) {
            Swal.fire({
                title: 'Confirmar Solicitação',
                text: 'Confirma a solicitação de troca do medicamento?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#22C55E', // green-500
                cancelButtonColor: '#6B7280', // gray-500
                confirmButtonText: 'Sim, Solicitar',
                cancelButtonText: 'Cancelar',
                customClass: { popup: 'shadow-xl rounded-lg', confirmButton: 'px-5 py-2 text-base font-medium rounded-md', cancelButton: 'px-5 py-2 text-base font-medium rounded-md', }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Enviando Solicitação...',
                        text: 'Por favor, aguarde.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    document.getElementById('solicitarTrocaForm-' + slug).submit();
                } else {
                    Swal.fire('Solicitação cancelada', '', 'info');
                }
            });
        }

        // Inicialização do Swiper para cada medicamento
        document.addEventListener('DOMContentLoaded', function() {
            const swipers = document.querySelectorAll('.swiper');
            swipers.forEach(swiperElement => {
                if (swiperElement.id) {
                    new Swiper(`#${swiperElement.id}`, {
                        loop: true,
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: `#${swiperElement.id} .swiper-pagination`,
                            clickable: true,
                        },
                        navigation: {
                            nextEl: `#${swiperElement.id} .swiper-button-next`,
                            prevEl: `#${swiperElement.id} .swiper-button-prev`,
                        },
                    });
                }
            });
        });
    </script>
@endsection