@extends('layouts.vending')

@section('title', $product->name . ' - LMIV Informationen')

@section('content')
<div class="max-w-4xl mx-auto px-4">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="javascript:history.back()" class="inline-flex items-center text-blue-600 hover:text-blue-800">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Zurück zur Auswahl
        </a>
    </div>

    <!-- Product Header -->
    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Product Image -->
            <div class="text-center">
                @if($product->image)
                    <img src="{{ asset('storage/' . $product->image) }}" 
                         alt="{{ $product->name }}" 
                         class="w-full max-w-sm mx-auto rounded-lg shadow">
                @else
                    <div class="w-full max-w-sm mx-auto h-64 bg-gray-200 rounded-lg flex items-center justify-center">
                        <span class="text-gray-400">Kein Produktbild verfügbar</span>
                    </div>
                @endif
            </div>
            
            <!-- Product Info -->
            <div>
                <h1 class="text-3xl font-bold mb-4">{{ $product->name }}</h1>
                
                @if($product->description)
                    <p class="text-gray-700 mb-4">{{ $product->description }}</p>
                @endif
                
                @if(isset($tenant) && $tenant->show_prices)
                    <div class="mb-4">
                        <span class="text-2xl font-bold text-green-600">{{ number_format($product->price, 2) }}€</span>
                    </div>
                @elseif(!isset($tenant))
                    <!-- Wenn kein Mandant gesetzt ist, Preis anzeigen -->
                    <div class="mb-4">
                        <span class="text-2xl font-bold text-green-600">{{ number_format($product->price, 2) }}€</span>
                    </div>
                @endif
                
                @if($product->net_weight)
                    <p class="text-gray-600 mb-2"><strong>Nettofüllmenge:</strong> {{ $product->net_weight }}</p>
                @endif
                
                @if($product->manufacturer)
                    <p class="text-gray-600 mb-2"><strong>Hersteller:</strong> {{ $product->manufacturer }}</p>
                @endif
                
                @if($product->origin)
                    <p class="text-gray-600 mb-2"><strong>Herkunft:</strong> {{ $product->origin }}</p>
                @endif
            </div>
        </div>
    </div>

    <!-- LMIV Information Tabs -->
    <div class="bg-white rounded-lg shadow-lg">
        <div x-data="{ activeTab: 'nutrition' }" class="w-full">
            <!-- Tab Navigation -->
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                    <button @click="activeTab = 'nutrition'"
                            :class="activeTab === 'nutrition' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        Nährwerte
                    </button>
                    <button @click="activeTab = 'ingredients'"
                            :class="activeTab === 'ingredients' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        Zutaten & Allergene
                    </button>
                    <button @click="activeTab = 'additional'"
                            :class="activeTab === 'additional' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        Weitere Informationen
                    </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="p-6">
                <!-- Nutrition Tab -->
                <div x-show="activeTab === 'nutrition'" class="space-y-4">
                    <h3 class="text-xl font-semibold mb-4">Nährwerte pro 100g</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if($product->energy_kj || $product->energy_kcal)
                            <div class="border rounded p-4">
                                <h4 class="font-semibold mb-2">Brennwert</h4>
                                @if($product->energy_kj)
                                    <p>{{ $product->energy_kj }} kJ</p>
                                @endif
                                @if($product->energy_kcal)
                                    <p>{{ $product->energy_kcal }} kcal</p>
                                @endif
                            </div>
                        @endif
                        
                        @if($product->fat)
                            <div class="border rounded p-4">
                                <h4 class="font-semibold mb-2">Fett</h4>
                                <p>{{ $product->fat }}g</p>
                                @if($product->saturated_fat)
                                    <p class="text-sm text-gray-600">davon gesättigte Fettsäuren: {{ $product->saturated_fat }}g</p>
                                @endif
                            </div>
                        @endif
                        
                        @if($product->carbohydrates)
                            <div class="border rounded p-4">
                                <h4 class="font-semibold mb-2">Kohlenhydrate</h4>
                                <p>{{ $product->carbohydrates }}g</p>
                                @if($product->sugars)
                                    <p class="text-sm text-gray-600">davon Zucker: {{ $product->sugars }}g</p>
                                @endif
                            </div>
                        @endif
                        
                        @if($product->protein)
                            <div class="border rounded p-4">
                                <h4 class="font-semibold mb-2">Eiweiß</h4>
                                <p>{{ $product->protein }}g</p>
                            </div>
                        @endif
                        
                        @if($product->salt)
                            <div class="border rounded p-4">
                                <h4 class="font-semibold mb-2">Salz</h4>
                                <p>{{ $product->salt }}g</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Ingredients Tab -->
                <div x-show="activeTab === 'ingredients'" class="space-y-4">
                    @if($product->ingredients)
                        <div>
                            <h3 class="text-xl font-semibold mb-4">Zutaten</h3>
                            <div class="bg-gray-50 rounded p-4">
                                <p class="text-gray-800">{{ $product->ingredients }}</p>
                            </div>
                        </div>
                    @endif
                    
                    @if($product->allergens)
                        <div>
                            <h3 class="text-xl font-semibold mb-4">Allergene</h3>
                            <div class="bg-yellow-50 border border-yellow-200 rounded p-4">
                                <p class="text-yellow-800"><strong>Achtung:</strong> {{ $product->allergens }}</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Additional Information Tab -->
                <div x-show="activeTab === 'additional'" class="space-y-4">
                    @if($product->best_before)
                        <div>
                            <h4 class="font-semibold mb-2">Mindesthaltbarkeitsdatum</h4>
                            <p class="text-gray-700">{{ $product->best_before }}</p>
                        </div>
                    @endif
                    
                    @if($product->storage_conditions)
                        <div>
                            <h4 class="font-semibold mb-2">Aufbewahrungshinweise</h4>
                            <p class="text-gray-700">{{ $product->storage_conditions }}</p>
                        </div>
                    @endif
                    
                    @if($product->usage_instructions)
                        <div>
                            <h4 class="font-semibold mb-2">Verwendungshinweise</h4>
                            <p class="text-gray-700">{{ $product->usage_instructions }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- LMIV Notice -->
    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 class="font-semibold text-blue-900 mb-2">Hinweis zur LMIV</h3>
        <p class="text-blue-800 text-sm">
            Die angezeigten Informationen entsprechen der Lebensmittelinformationsverordnung (LMIV) der EU. 
            Alle Angaben ohne Gewähr. Bei Allergien oder Unverträglichkeiten wenden Sie sich bitte an den Betreiber.
        </p>
    </div>
</div>
@endsection