@extends('layouts.vending')

@section('title', $vendingMachine->name)

@section('content')
<div class="max-w-6xl mx-auto px-4">
    <div class="mb-8">
        <div class="flex items-center space-x-4 mb-4">
            <a href="{{ route('vending-machines.index') }}" class="text-blue-600 hover:text-blue-800">
                ← Zurück zur Übersicht
            </a>
        </div>
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ $vendingMachine->name }}</h1>
                <p class="text-xl text-gray-600 mt-2">{{ $vendingMachine->location }}</p>
                @if($vendingMachine->serial_number)
                    <p class="text-sm text-gray-500 mt-1">S/N: {{ $vendingMachine->serial_number }}</p>
                @endif
            </div>
            <div class="flex space-x-3">
                @if($vendingMachine->tenant && $vendingMachine->tenant->public_slug && $vendingMachine->machine_number)
                    <a href="{{ route('vending.public.machine', ['publicSlug' => $vendingMachine->tenant->public_slug, 'machineNumber' => $vendingMachine->machine_number]) }}" 
                       class="inline-flex items-center px-4 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50" target="_blank">
                        Öffentliche Ansicht
                    </a>
                @endif
                <a href="{{ route('vending-machines.edit', $vendingMachine) }}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Bearbeiten
                </a>
                <form action="{{ route('vending-machines.destroy', $vendingMachine) }}" method="POST" class="inline" 
                      onsubmit="return confirm('Sind Sie sicher, dass Sie diesen Automaten löschen möchten?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="inline-flex items-center px-4 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50">
                        Löschen
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Automatinformationen -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4 border-b border-gray-200 pb-2">
                    Automatinformationen
                </h2>
                
                <div class="space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-1">Status</h3>
                        @if($vendingMachine->is_active)
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Aktiv
                            </span>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Inaktiv
                            </span>
                        @endif
                    </div>

                    @if($vendingMachine->description)
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-1">Beschreibung</h3>
                            <p class="text-gray-600">{{ $vendingMachine->description }}</p>
                        </div>
                    @endif

                    <div>
                        <h3 class="font-semibold text-gray-900 mb-1">Erstellt</h3>
                        <p class="text-gray-600">{{ $vendingMachine->created_at->format('d.m.Y H:i') }}</p>
                    </div>

                    <div>
                        <h3 class="font-semibold text-gray-900 mb-1">Zuletzt bearbeitet</h3>
                        <p class="text-gray-600">{{ $vendingMachine->updated_at->format('d.m.Y H:i') }}</p>
                    </div>

                    <!-- QR-Code für Mandanten-URL -->
                    @if($vendingMachine->tenant && $vendingMachine->tenant->public_slug)
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-3">QR-Code Download</h3>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <h4 class="text-sm font-medium text-gray-900 mb-2">Mandanten-spezifischer QR-Code</h4>
                                <p class="text-xs text-gray-600 mb-3">Nur für {{ $vendingMachine->tenant->name }}</p>
                                
                                <!-- URL anzeigen -->
                                <div class="mb-3">
                                    <div class="flex items-center space-x-2 mb-2">
                                        <code class="text-xs bg-white px-2 py-1 rounded border flex-1">
                                            {{ route('vending.public.machine', ['publicSlug' => $vendingMachine->tenant->public_slug, 'machineNumber' => $vendingMachine->machine_number]) }}
                                        </code>
                                        <button onclick="copyToClipboard('{{ route('vending.public.machine', ['publicSlug' => $vendingMachine->tenant->public_slug, 'machineNumber' => $vendingMachine->machine_number]) }}')" 
                                                class="text-blue-600 hover:text-blue-800 text-xs">
                                            📋
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- QR-Code Download Button -->
                                <a href="{{ route('vending-machines.qr-code', $vendingMachine->id) }}" 
                                   class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    QR-Code herunterladen
                                    <span class="ml-1 text-xs opacity-75">(SVG/PNG)</span>
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="p-3 bg-yellow-50 rounded-lg">
                            <h4 class="text-sm font-medium text-gray-900 mb-1">QR-Code nicht verfügbar</h4>
                            <p class="text-xs text-gray-600">
                                @if(!$vendingMachine->tenant)
                                    Kein Mandant zugewiesen.
                                @else
                                    {{ $vendingMachine->tenant->name }} hat keinen öffentlichen Slug konfiguriert.
                                @endif
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Statistiken -->
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4 border-b border-gray-200 pb-2">
                    Statistiken
                </h2>
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center p-3 bg-blue-50 rounded-lg">
                        <div class="text-2xl font-bold text-blue-900">{{ $vendingMachine->slots->count() }}</div>
                        <div class="text-sm text-blue-600">Gesamte Slots</div>
                    </div>
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <div class="text-2xl font-bold text-green-900">{{ $vendingMachine->slots->whereNotNull('pivot.product_id')->count() }}</div>
                        <div class="text-sm text-green-600">Belegte Slots</div>
                    </div>
                    <div class="text-center p-3 bg-yellow-50 rounded-lg">
                        <div class="text-2xl font-bold text-yellow-900">{{ $vendingMachine->slots->whereNull('pivot.product_id')->count() }}</div>
                        <div class="text-sm text-yellow-600">Freie Slots</div>
                    </div>
                    <div class="text-center p-3 bg-purple-50 rounded-lg">
                        <div class="text-2xl font-bold text-purple-900">{{ $vendingMachine->slots->pluck('products')->flatten()->unique('id')->count() }}</div>
                        <div class="text-sm text-purple-600">Verschiedene Produkte</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slot-Übersicht -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-6 border-b border-gray-200 pb-2">
                    <h2 class="text-xl font-semibold text-gray-900">Slot-Übersicht</h2>
                    <a href="{{ route('slots.index') }}?machine={{ $vendingMachine->id }}" 
                       class="inline-flex items-center px-4 py-2 border border-purple-300 text-sm font-medium rounded-md text-purple-700 bg-white hover:bg-purple-50">
                        Alle Slots verwalten
                    </a>
                </div>

                @if($vendingMachine->slots->count() > 0)
                    <div class="grid grid-cols-6 gap-2">
                        @foreach($vendingMachine->slots->sortBy('slot_number') as $slot)
                            <div class="border rounded-lg p-3 text-center {{ $slot->products->count() > 0 ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                                <div class="font-semibold text-sm {{ $slot->products->count() > 0 ? 'text-green-900' : 'text-gray-600' }}">
                                    {{ $slot->slot_number }}
                                </div>
                                @if($slot->products->count() > 0)
                                    @php $product = $slot->products->first() @endphp
                                    <div class="text-xs text-green-700 mt-1 truncate" title="{{ $product->name }}">
                                        {{ Str::limit($product->name, 10) }}
                                    </div>
                                    <div class="text-xs text-green-600 mt-1">
                                        {{ $product->pivot->stock_quantity ?? 0 }}x
                                    </div>
                                @else
                                    <div class="text-xs text-gray-500 mt-1">Leer</div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <!-- Legende -->
                    <div class="mt-6 flex justify-center space-x-6 text-sm">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-green-50 border border-green-200 rounded mr-2"></div>
                            <span class="text-gray-600">Belegt</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-gray-50 border border-gray-200 rounded mr-2"></div>
                            <span class="text-gray-600">Leer</span>
                        </div>
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h2a2 2 0 002-2z"/>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">Keine Slots</h3>
                        <p class="mt-1 text-sm text-gray-500">Für diesen Automaten wurden noch keine Slots erstellt.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        // Show a temporary notification
        const originalText = event.target.textContent;
        event.target.textContent = '✓';
        event.target.style.color = 'green';
        
        setTimeout(() => {
            event.target.textContent = originalText;
            event.target.style.color = '';
        }, 1000);
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>
@endsection