@extends('menu.layouts.app')

@section('content')

<main class="max-w-lg min-h-screen px-4 pt-4 pb-24 mx-auto bg-stone-200">

    @if(isset($error))
    <!-- Error-only screen -->
    <div class="flex flex-col items-center justify-center min-h-[70vh] text-center px-4">
        <div class="flex items-center justify-center w-20 h-20 mx-auto mb-6 bg-red-100 rounded-full">
            <svg class="w-10 h-10 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
            </svg>
        </div>
        <h2 class="mb-2 text-xl font-semibold text-stone-900">QR Kod Geçersiz</h2>
        <p class="max-w-sm text-base text-red-700">{{ $error }}</p>
    </div>
    @else

    <!-- Header Section -->
    <ul role="list"
        class="max-w-2xl grid-cols-2 mx-auto my-6 text-center gap-x-8 gap-y-16 sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none lg:grid-cols-5 xl:grid-cols-6">
        <li>
            @if(isset($company) && $company)
            <img class="mx-auto h-28 w-28 rounded-2xl" src="{{ $company->getImageUrl() }}" alt="{{ $company->name }}" />
            <h3 class="mt-4 text-2xl leading-7 tracking-tight text-stone-900">
                {{ $company->name }}
            </h3>
            @if($company->web)
            <p class="text-sm leading-6 text-stone-600">{{ $company->web }}</p>
            @endif
            @else
            <img class="mx-auto h-28 w-28 rounded-2xl"
                src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimg.freepik.com%2Fpremium-vector%2Fvintage-lakeside-logo-design-illustration_427676-141.jpg%3Fw%3D1380&f=1&nofb=1&ipt=d5ed90dc05f2bbdb9aa42e79be9de6f0ffa634ce2638671a06574cf96177a945"
                alt="" />
            <h3 class="mt-4 text-2xl leading-7 tracking-tight text-stone-900">
                DEFAULT HOTEL
            </h3>
            <p class="text-sm leading-6 text-stone-600">www.defaulthotel.com</p>
            @endif
        </li>
    </ul>

    <!-- Language Selector -->
    @if (count($availableLocales) > 1)
    <div class="fixed top-4 right-4">
        <div class="flex items-top gap-x-2">
            <span class="mt-1.5 material-symbols-rounded text-stone-500">
                translate
            </span>
            @if(isset($availableLocales) && is_array($availableLocales) && count($availableLocales) > 1)
            <select id="localeSelector" onchange="changeLocale(this.value)"
                class="rounded-md bg-white/70 pl-3 py-1.5 text-sm text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-gray-600">
                @foreach($availableLocales as $code => $name)
                <option value="{{ $code }}" {{ $currentLocale==$code ? 'selected' : '' }}>
                    {{ $name }}
                </option>
                @endforeach
            </select>
            @elseif(isset($availableLocales) && is_array($availableLocales) && !empty($availableLocales))
            <span class="text-sm text-stone-600">{{ reset($availableLocales) }}</span>
            @else
            <span class="text-sm text-stone-600">TR</span>
            @endif
        </div>
    </div>
    @endif

    <!-- Customer Info Section -->
    @if(isset($customer))
    <div class="p-4 mb-4 border rounded-lg border-stone-300 bg-stone-50">
        <div class="flex items-center gap-3">
            <span class="text-3xl text-stone-600 material-symbols-rounded">
                person
            </span>
            <div>
                <h4 class="text-lg text-stone-900">
                    {{ $customer->name }} {{ $customer->surname }}
                </h4>
                <p class="text-sm text-stone-700">{{ $customer->phone }}</p>
            </div>
        </div>

        @if($assignedTable)
        <div class="pt-3 mt-3 border-t border-stone-300">
            <div class="flex items-center gap-2">
                <span class="text-stone-600 material-symbols-rounded">
                    table_bar
                </span>
                <p class="text-base font-medium text-stone-800">
                    No: <span class="font-bold">{{ $assignedTable->name }}</span>
                </p>
            </div>
            <div class="p-2 mt-2 border border-yellow-400 rounded-md bg-yellow-50">
                <div class="flex">
                    <div class="shrink-0">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                            class="text-yellow-400 size-5">
                            <path
                                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <div class="text-xs text-yellow-700">
                            <p>Masa numarası değişikliğı yapmak için lütfen iletişime geçiniz.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="pt-3 mt-3 border-t border-stone-200">
            <button onclick="openTableSelection()"
                class="flex items-center justify-center w-full gap-2 px-4 py-2 font-semibold text-white transition-colors rounded-lg bg-stone-600 hover:bg-stone-700">
                <span class="material-symbols-rounded">table_bar</span>
                Masa Seç
            </button>
        </div>
        @endif
    </div>
    @endif

    <!-- Product Categories (using shared partial) -->
    @if(isset($categories) && $categories->isNotEmpty())
    @include('menu.partials.product-categories', ['categories' => $categories, 'currency' => $currency])
    @endif

    <!-- Footer Information -->
    <ul role="list" class="max-w-2xl grid-cols-2 mx-auto my-6 text-center gap-x-8 gap-y-16">
        <li>
            @if(isset($company) && $company)
            @if($company->address || $company->city)
            <p class="text-sm leading-6 text-stone-600">
                {{ $company->address ?? '' }} {{ $company->city ? ', ' . $company->city : '' }} {{ $company->country ?
                ', ' . $company->country : '' }}
            </p>
            @endif

            @if($company->web)
            <p class="text-sm leading-6 text-stone-600">{{ $company->web }}</p>
            @endif

            @if($company->phone)
            <p class="text-sm leading-6 text-stone-600">{{ $company->phone }}</p>
            @endif

            @else
            <p class="mt-4 text-sm leading-7 tracking-tight text-stone-900">
                ADRES
            </p>
            <p class="text-sm leading-6 text-stone-600">WEBSITE</p>
            <p class="text-sm leading-6 text-stone-600">TELEFON</p>
            @endif
        </li>
    </ul>

    <!-- Navbar -->
    @include('menu.components.navbar')

    <!-- Table Selection Modal (only if no table assigned) -->
    @if(!isset($assignedTable) || !$assignedTable)
    @include('menu.components.table-selection-modal')
    @endif
    @endif

</main>

@endsection

@section('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Accordion
        const accordionButtons = document.querySelectorAll("[data-accordion-target]");
        accordionButtons.forEach((button) => {
            button.addEventListener("click", () => {
                const target = document.querySelector(button.dataset.accordionTarget);
                const icon = button.querySelector("[data-accordion-icon]");
                target.classList.toggle("hidden");
                icon.classList.toggle("rotate-180");
                const isExpanded = button.getAttribute("aria-expanded") === "true";
                button.setAttribute("aria-expanded", !isExpanded);
            });
        });

        // Sepete ekle (AJAX)
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        document.querySelectorAll('.add-to-cart-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
                // Check if table is assigned
                @if(!isset($assignedTable) || !$assignedTable)
                    showToast('Lütfen önce masa seçiniz!', 'warning');
                    setTimeout(() => openTableSelection(), 1000);
                    return;
                @endif

                fetch("{{ route('menu.add-to-cart') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({
                        product_id: btn.dataset.productId,
                        product_name: btn.dataset.productName,
                        product_price: btn.dataset.productPrice,
                        category_id: btn.dataset.categoryId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Navbar sepet badge guncelle
                        const badge = document.getElementById('cart-badge');
                        if (badge) {
                            badge.textContent = data.cart_count;
                            badge.classList.remove('hidden');
                        }
                        // Kisa bildirim
                        showToast(data.message);
                    }
                });
            });
        });
    });

    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        const bgColor = type === 'warning' ? 'bg-amber-600' : 'bg-stone-800';
        toast.className = `fixed top-4 left-1/2 transform -translate-x-1/2 ${bgColor} text-white px-4 py-2 rounded-lg shadow-lg text-base z-50 transition-opacity duration-300`;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 1500);
    }

    function changeLocale(locale) {
        fetch('{{ route("menu.change-locale") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                locale: locale
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                console.error('Failed to change locale:', data.message);
            }
        })
        .catch(error => {
            console.error('Error changing locale:', error);
        });
    }
</script>
@endsection