@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-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-gray-800 font-semibold">{{ Str::limit($medicamento->name, 30) }}</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>

    <!-- Title -->
    <h1 class="text-4xl py-8 font-normal lg:tracking-widest tracking-normal text-green-700 text-center">{{ $title }}</h1>

    <!-- Main Content -->
    <div class="bg-white p-8 shadow-lg md:flex md:space-x-8">
        <!-- Medication Image -->
        <div class="md:w-1/3 flex justify-center items-center mb-6 md:mb-0">
            @if($medicamento->imagens->count() > 0)
                <img src="{{ asset('storage/' . $medicamento->imagens->first()->path) }}"
                     alt="{{ $medicamento->name }}"
                     class="w-72 h-72 object-contain p-4 shadow-md transition-all duration-300 hover:scale-105">
            @else
                <div class="w-72 h-72 flex items-center justify-center bg-gray-100 shadow-md text-gray-500 text-lg">
                    Sem imagem disponível
                </div>
            @endif
        </div>

        <!-- Medication Details -->
        <div class="md:w-2/3">
            <h2 class="text-3xl font-semibold text-gray-400 mb-4">{{ $medicamento->name }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-gray-700 mb-6">
                <div class="space-y-4">
                    <p><span class="font-semibold">Forma Farmacêutica:</span> {{ $medicamento->pharmaceutical_form ?? 'N/A' }}</p>
                    <p><span class="font-semibold">Dosagem:</span> {{ $medicamento->dosage ?? 'N/A' }}</p>
                    <p><span class="font-semibold">Estado:</span> {{ $medicamento->user->enderecos()->first()->estado ?? 'N/A' }}</p>
                    <p><span class="font-semibold">UF:</span> {{ $medicamento->user->enderecos()->first()->uf ?? 'N/A' }}</p>
                    <p class="text-red-600"><span class="font-semibold">Validade:</span> {{ $medicamento->validade ? \Carbon\Carbon::parse($medicamento->validade)->format('d/m/Y') : 'N/A' }}</p>
                </div>
                <div class="space-y-1">
                    <div class="flex lg:flex-col items-center border-2 border-gray-300 p-2 gap-3">
                        <span class="font-semibold text-lg">Proprietário:</span>
                        <div class="flex flex-col items-center gap-2">
                            @if($medicamento->user->profile_photo)
                                <img src="{{ asset('storage/' . $medicamento->user->profile_photo) }}"
                                     alt="{{ $medicamento->user->name }}"
                                     class="w-20 h-20 rounded-full object-cover border border-gray-300">
                            @else
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-semibold">
                                    {{ Str::substr($medicamento->user->name, 0, 1) }}
                                </div>
                            @endif
                            <span>{{ $medicamento->user->name }}</span>

                            <div class="mb-6 justify-center">
                                <p class="font-semibold text-center text-gray-700 text-md">Avaliação:</p>
                                <div class="flex items-center text-yellow-500 space-x-1 mt-1">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="{{ $i <= ($medicamento->avaliacao ?? 2) ? 'ri-star-fill' : 'ri-star-line' }} text-xl"></i>
                                    @endfor
                                    <span class="text-gray-600 text-sm ml-2">({{ $medicamento->avaliacao ?? 2 }}/5)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p><span class="font-semibold">Cidade:</span> {{ $medicamento->user->enderecos->first()->cidade ?? 'N/A' }}</p>
                    <p><span class="font-semibold text-lg text-blue-600">Medicamentos Ofertados:</span> <span class="text-blue-600 text-lg">{{ $medicamento->user->medicamentos->count() ?? '0' }}</span></p>
                    <p><span class="font-semibold">Troca desde:</span> {{ \Carbon\Carbon::parse($medicamento->user->created_at)->diffForHumans() }}</p>
                    <p><span class="font-semibold">Situação:</span>
                        <span class="inline-block px-2 py-1 text-xs font-medium rounded-full {{ $medicamento->is_available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $medicamento->is_available ? 'Disponível' : 'Indisponível' }}
                        </span>
                    </p>
                </div>
            </div>

            <!-- Aviso sobre Conta -->
            <div class="bg-red-50 p-4 mb-6">
                <p class="text-red-600 text-sm font-medium text-center">
                    <i class="ri-information-line mr-1 text-xl align-middle"></i>
                    É necessário ter uma conta gratuita no TrovaMedicamentos para realizar o requerimento de trocas.
                    <br>
                    <a href="{{ route('register.user') }}" class="text-green-600 text-lg hover:text-green-700 font-semibold ml-1">
                        Registre-se aqui
                    </a>
                </p>
            </div>

            <!-- Botão Requerer -->
            <div class="flex justify-start">
                @auth
                    @can('requerer_medicamento', $medicamento)
                        <form action="{{ route('medicamentos.request', $medicamento->slug) }}" method="POST" class="flex">
                            @csrf
                            <button type="submit" onclick="return confirm('Confirma a solicitação de troca do medicamento?')"
                                    class="flex items-center justify-center text-green-600 border border-green-500 py-2 px-4 hover:bg-green-200 hover:text-green-700 transition text-sm w-40">
                                <i class="fa-solid fa-exchange-alt mr-2"></i> Solicitar Troca
                            </button>
                        </form>
                    @endcan
                @else
                    <a href="{{ route('login') }}?redirect={{ urlencode(route('medicamentos.request', $medicamento->slug)) }}"
                    class="flex items-center justify-center text-green-600 border border-green-500 py-2 px-4 hover:bg-green-200 hover:text-green-700 transition text-sm w-40">
                        <i class="fa-solid fa-exchange-alt mr-2"></i> Faça Login para Solicitar
                    </a>
                @endauth
            </div>
        </div>
    </div>
</div>
@endsection