@extends('menu.layouts.app')

@section('content')

<main class="max-w-lg min-h-screen px-4 pt-4 pb-8 mx-auto bg-stone-200">
    <!-- Firma Bilgisi -->
    <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>

    @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(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>
    @endif

    @if(isset($error))
    <div class="p-4 mt-4 rounded-md bg-red-50">
        <div class="flex">
            <div class="shrink-0">
                <svg class="text-red-400 size-5" 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, read-only) -->
    @include('menu.partials.product-categories', ['categories' => $categories, 'currency' => $currency, 'clickable' =>
    false])

    <!--ALT BİLGİLER-->
    <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>

</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);
            });
        });
    });

    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