@props(['medication'])

<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="relative shadow-lg rounded-lg overflow-hidden border border-gray-200 bg-white hover:shadow-xl transition-shadow duration-200 flex flex-col">
            <div class="bg-gradient-to-r from-blue-500 to-teal-400 p-4 text-white">
                <h2 class="text-xl font-bold">{{ $medication->generic_name }}</h2>
                <p class="text-sm opacity-90">
                    {{ $medication->type }}
                    @if($medication->medicationClass)
                        • {{ $medication->medicationClass->name }}
                    @endif
                </p>
            </div>
            
            <div class="p-4 space-y-6 flex-grow">
                {{-- Primary Uses Section --}}
                @if($medication->primaryUses && count($medication->primaryUses) > 0)
                    <div>
                        <h3 class="font-bold text-lg text-blue-600 mb-3">Primary Uses</h3>
                        @foreach($medication->primaryUses as $use)
                            <div class="space-y-2 pl-4 mb-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                    <div>
                                        <span class="font-semibold">Condition:</span>
                                        <span class="ml-2">{{ $use->condition->name }}</span>
                                    </div>
                                    <div>
                                        <span class="font-semibold">Category:</span>
                                        <span class="ml-2">
                                            {{ $use->condition->categories[0]->name ?? '' }}
                                        </span>
                                    </div>
                                </div>
                                <div>
                                    <p class="font-semibold mb-1">Primary Treatment:</p>
                                    <p class="text-gray-700">{{ $use->primary_treatment }}</p>
                                </div>
                                <div>
                                    <p class="font-semibold mb-1">How It Works:</p>
                                    <p class="text-gray-700">{{ $use->mechanism_of_action }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Off-Label Uses Section --}}
                @if($medication->offLabelUses && count($medication->offLabelUses) > 0)
                    <div>
                        <h3 class="font-bold text-lg text-blue-600 mb-3">Off-Label Uses</h3>
                        <div class="space-y-4">
                            @foreach($medication->offLabelUses as $use)
                                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                                    <div class="space-y-2">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                            <div>
                                                <span class="font-semibold">Condition:</span>
                                                <span class="ml-2">{{ $use->condition->name }}</span>
                                            </div>
                                            <div>
                                                <span class="font-semibold">Category:</span>
                                                <span class="ml-2">
                                                    {{ $use->condition->categories[0]->name ?? '' }}
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <p class="font-semibold mb-1">Off-Label Treatment:</p>
                                            <p class="text-gray-700">{{ $use->primary_treatment }}</p>
                                        </div>
                                        <div>
                                            <p class="font-semibold mb-1">How It Works:</p>
                                            <p class="text-gray-700">{{ $use->mechanism_of_action }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Medication Variants Section --}}
                @if($medication->medicationVariants && count($medication->medicationVariants) > 0)
                    <div>
                        <h3 class="font-bold text-lg text-blue-600 mb-3">Available Forms</h3>
                        <div class="space-y-2">
                            @foreach($medication->medicationVariants as $variant)
                                <div class="p-2 border rounded">
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <span class="font-semibold">Brand:</span>
                                            {{ $variant->brand_name }}
                                        </div>
                                        <div>
                                            <span class="font-semibold">Strength:</span>
                                            {{ $variant->strength }}
                                        </div>
                                        <div>
                                            <span class="font-semibold">Form:</span>
                                            {{ $variant->dosage_form }}
                                        </div>
                                        <div>
                                            <span class="font-semibold">Route:</span>
                                            {{ $variant->route_of_administration }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Additional Information --}}
                <div class="border-t pt-4">
                    <div class="flex flex-wrap gap-2">
                        @if($medication->requires_prescription)
                            <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">
                                Prescription Required
                            </span>
                        @endif
                        @if($medication->controlled_substance)
                            <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">
                                Controlled Substance
                            </span>
                        @endif
                        @if($medication->breastfeeding_safe)
                            <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
                                Breastfeeding Safe
                            </span>
                        @endif
                        @if($medication->pregnancy_category)
                            <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                                Pregnancy Category: {{ $medication->pregnancy_category }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
            {{-- Add Drug Button --}}
            <div class="bottom-0 flex justify-center mt-6 px-4 mb-4">
                <button 
                    type="button"
                    @click="$splade.emit('solo-med-add-drug', {{$medication}})"
                    class="block w-full rounded bg-yellow-400 p-4 text-sm font-medium transition hover:scale-105"
                >
                    Add Drug
                </button>
            </div>
        </div>
    </div>
</div>