@extends('menu.layouts.app')

@section('content')

<main class="bg-stone-200 max-w-lg min-h-screen mx-auto px-4 pb-24 pt-4">
    <ul role="list"
        class="mx-auto my-6 max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center 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>

    <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(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>
            @else
            <span class="text-sm text-stone-600">{{ reset($availableLocales) }}</span>
            @endif
        </div>
    </div>

    @if(isset($error))
    <div class="rounded-md bg-red-50 p-4 mt-4">
        <div class="flex">
            <div class="shrink-0">
                <svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700">{{ $error }}</p>
            </div>
        </div>
    </div>
    @endif

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

    <!--ALT BİLGİLER-->
    <ul role="list" class="mx-auto my-6 max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center">
        <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>

    @include('menu.components.navbar')

</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', () => {
                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) {
        const toast = document.createElement('div');
        toast.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-stone-800 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