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


@if(session('success'))
<div class="my-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 relative mb-4">
    <strong class="font-bold">Sucesso!</strong>
    <span class="block sm:inline">{{ session('success') }}</span>
    <button type="button" title="Fechar mensagem" class="absolute top-1 right-3 text-green-700 hover:text-green-900 focus:outline-none" onclick="this.parentNode.remove();" aria-label="Fechar mensagem de sucesso">
        <i class="fa-solid fa-xmark text-xl"></i>
    </button>
</div>
@endif

@if($errors->any())
<div class="my-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative mb-4">
    <strong class="font-bold">Erro!</strong>
    <ul>
        @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
    <button type="button" class="absolute top-1 right-1 text-red-700 hover:text-red-900 focus:outline-none" onclick="this.parentNode.remove();" aria-label="Fechar mensagem de erro">
        <i class="fa-solid fa-xmark text-xl"></i>
    </button>
</div>
@endif

<div class="bg-gray-50 p-4 sm:p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
        <!-- Detalhes do Medicamento -->
        <div class="bg-white p-4 sm:p-6 shadow-sm border border-gray-200">
            <div class="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">

                <!-- Carrossel com Swiper -->
                <div class="w-full sm:w-60 h-60 relative flex-shrink-0">
                    @if($medicamento->imagens->isNotEmpty())
                        <div class="swiper w-full h-full overflow-hidden" id="swiper-show-{{ $medicamento->id }}">
                            <div class="swiper-wrapper">
                                @foreach($medicamento->imagens as $imagem)
                                    <div class="swiper-slide">
                                        <img src="{{ asset('storage/' . $imagem->path) }}"
                                             alt="{{ $medicamento->name }}"
                                             class="w-full h-full object-contain">
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-prev text-gray-600"></div>
                            <div class="swiper-button-next text-gray-600"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                    @else
                        <img src="{{ asset('assets/images/sem-imagem.png') }}"
                             alt="{{ $medicamento->name }}"
                             class="w-full h-full object-cover">
                    @endif
                </div>

                <!-- Informações do Medicamento -->
                <div class="space-y-3 text-gray-700 text-sm sm:text-base">
                    <p><span class="font-semibold">Nome:</span> {{ $medicamento->name }}</p>
                    <p><span class="font-semibold">Dosagem:</span> {{ $medicamento->dosage }}</p>
                    <p><span class="font-semibold">Laboratório:</span> {{ $medicamento->laboratorio }}</p>
                    <p><span class="font-semibold">Validade:</span> <label class="text-red-600">{{ date('d/m/Y', strtotime($medicamento->validade)) }}</label></p>
                    <p><span class="font-semibold">Vence em:</span> <label class="text-red-600">{{ \Carbon\Carbon::parse($medicamento->validade)->diffForHumans() }}</label></p>
                </div>
            </div>
        </div>

        <!-- Detalhes do Proprietário -->
        <div class="bg-white p-4 sm:p-6 shadow-sm border border-gray-200">
            <h4 class="text-lg sm:text-xl text-center font-semibold text-gray-800 mb-4">Proprietário</h4>
            @if($medicamento->user)
                <div class="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
                    <!-- Imagem do Proprietário -->
                    <div class="w-20 sm:w-24 h-20 sm:h-24 rounded-full overflow-hidden flex-shrink-0 border border-gray-300">
                        @if($medicamento->user->profile_photo)
                            <img src="{{ asset('storage/' . $medicamento->user->profile_photo) }}"
                                alt="{{ $medicamento->user->name }}"
                                class="w-full h-full object-cover">
                        @else
                            <img src="{{ asset('assets/images/default-user.png') }}"
                                alt="Sem foto"
                                class="w-full h-full object-cover">
                        @endif
                    </div>

                    <!-- Informações do Proprietário -->
                    <div class="space-y-3 text-gray-700 text-sm sm:text-base">
                        <p><span class="font-semibold">Nome:</span> {{ $medicamento->user->name }}</p>
                        <p>
                            <span class="font-semibold">Endereço:</span>
                            @if($medicamento->user->enderecos->isNotEmpty())
                                {{ $medicamento->user->enderecos->first()->logradouro ?? 'N/A' }},
                                nº {{ $medicamento->user->enderecos->first()->numero ?? 'N/A' }}
                                @if($medicamento->user->enderecos->first()->complemento)
                                    ({{ $medicamento->user->enderecos->first()->complemento }})
                                @endif
                                - {{ $medicamento->user->enderecos->first()->bairro ?? 'N/A' }},
                                {{ $medicamento->user->enderecos->first()->cidade ?? 'N/A' }}/{{ $medicamento->user->enderecos->first()->estado ?? 'N/A' }}
                                (CEP: {{ $medicamento->user->enderecos->first()->cep ?? 'N/A' }})
                            @else
                                Não informado
                            @endif
                        </p>
                        <p>
                            <span class="font-semibold">
                                <i class="fa-brands fa-whatsapp bg-green-600 text-white p-2 rounded-full"></i>
                            </span>
                            <span class="ml-2">{{ $medicamento->user->formatted_telefone ?? 'Não informado' }}</span>
                        </p>
                        <p>
                            <span class="font-semibold">Classificação:</span>
                            <span class="flex items-center gap-1">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fa-solid fa-star {{ $i <= ($medicamento->user->rating ?? 0) ? 'text-yellow-400' : 'text-gray-300' }} text-sm sm:text-base"></i>
                                @endfor
                                <span class="ml-2 text-sm">({{ $medicamento->user->rating ?? 'Sem avaliação' }})</span>
                            </span>
                        </p>
                    </div>
                </div>
            @else
                <p class="text-gray-600">Proprietário não encontrado.</p>
            @endif
        </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-center mt-8 gap-4">
        <a href="{{ url()->previous() }}"
           class="w-full sm:w-72 px-6 py-2 bg-gray-700 text-white hover:bg-gray-800 transition flex items-center justify-center gap-2 text-base sm:text-lg">
            <i class="fa-solid fa-arrow-left"></i> Voltar
        </a>

        @can('request', $medicamento)
            <form action="{{ route('medicamentos.request', ['slug'=>$medicamento->slug]) }}" method="POST" class="w-full sm:w-auto">
                @csrf
                <button type="submit" onclick="return confirm('Confirma pedido de troca para medicamento?')"
                        class="w-full sm:w-72 px-6 py-2 bg-green-600 text-white hover:bg-green-700 transition flex items-center justify-center gap-2 text-base sm:text-lg">
                    <i class="fa-regular fa-thumbs-up"></i> Requerer Medicamento
                </button>
            </form>
        @endcan
    </div>
</div>
@endsection