@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    {{-- Wir fügen hier x-data hinzu, um den Zustand des Modals zu steuern --}}
    <div x-data="{ isQrModalOpen: false }">
        <h2 class="text-2xl font-bold text-white mb-6">Willkommen zurück!</h2>

        @if (session('error'))
            <div class="bg-red-500 text-white p-4 rounded-lg mb-6">
                {{ session('error') }}
            </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            
            <livewire:quick-actions />

            <div class="bg-gray-800 p-6 rounded-lg flex flex-col items-center justify-center">
                 <h3 class="font-semibold text-lg mb-4 text-blue-400">Ihr QR-Code</h3>
                 
                 @if ($restaurant && $restaurant->subdomain)
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https://{{ $restaurant->subdomain }}.tagsmenu.app" alt="QR Code" class="rounded-md">
                    
                    {{-- Der "Herunterladen"-Link wurde durch diesen Button ersetzt --}}
                    <button @click="isQrModalOpen = true" class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700">
                        <span>Vergrößern</span>
                    </button>
                 @else
                    <p class="text-gray-400 text-sm">Bitte legen Sie in den Einstellungen eine Subdomain fest, um einen QR-Code zu sehen.</p>
                 @endif
            </div>

        </div>

        {{-- KORREKTUR: Das Modal wird jetzt nur noch gerendert, wenn $restaurant existiert --}}
        @if ($restaurant && $restaurant->subdomain)
            <div x-show="isQrModalOpen" 
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-30 flex items-center justify-center bg-black bg-opacity-75" 
                 x-cloak>
                
                <div @click.away="isQrModalOpen = false" class="bg-white p-8 rounded-lg text-center">
                    <h3 class="font-bold text-lg text-gray-800 mb-4">{{ $restaurant->name }}</h3>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://{{ $restaurant->subdomain }}.tagsmenu.app" alt="QR Code Groß" class="rounded-md">
                    <button @click="isQrModalOpen = false" class="mt-6 px-4 py-2 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-500">
                        Schließen
                    </button>
                </div>
            </div>
        @endif
        {{-- ENDE DER KORREKTUR --}}
    </div>
@endsection