@extends('front._layouts.master')

@section('content')

    <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>
            <img class="mx-auto h-28 w-28 rounded-2xl"
                 src="{{ $company->getImageUrl() . '?v=' . config('versioning.main') }}"
                 alt="">
            <h3 class="mt-4 text-2xl font-bold leading-7 tracking-tight text-stone-900">- {{ $company->name }} -</h3>
            <p class="text-sm leading-6 text-stone-600">{{ $company->web }}</p>
        </li>
    </ul>

    @foreach($categories as $category)
        <!--ÜRÜN KAPSAYICI-->
        <div class="overflow-hidden rounded-lg bg-white shadow mb-2 px-4 py-3 sm:p-6">
            <h2 id="accordion-collapse-heading-{{ $category->id }}">
                @php
                    $categoryName = $category->name;
                    $parts = explode('/', $categoryName);
                    $formattedCategoryName = $parts[0];

                    if (count($parts) > 1) {
                        $formattedCategoryName .= '<br><span class="text-sm">| ' . implode('/', array_slice($parts, 1)) . '</span>';
                    }
                @endphp
                <button type="button"
                        class="flex items-center justify-between w-full font-medium rtl:text-right text-gray-500"
                        data-accordion-target="#accordion-collapse-body-{{ $category->id }}"
                        aria-expanded="false"
                        aria-controls="accordion-collapse-body-{{ $category->id }}">
                    <h1 class="text-xl font-bold tracking-tight text-stone-400 text-left sm:text-4xl">
                        | {!! $formattedCategoryName !!}</h1>
                    <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2" d="M9 5 5 1 1 5"/>
                    </svg>
                </button>
            </h2>

            <div id="accordion-collapse-body-{{ $category->id }}" class="hidden mt-3"
                 aria-labelledby="accordion-collapse-heading-{{ $category->id }}">
                @foreach($category->products as $product)
                    @if($product->mainImage() == '/assets/front/images/product-default.jpg')
                        <!--ÜRÜN ADI VE AÇIKLAMA-->
                        @php
                            $productName = $product->name;
                            $parts = explode('/', $productName);
                            $formattedProductName = $parts[0];

                            if (count($parts) > 1) {
                                $formattedProductName .= '<br><span class="text-sm">' . implode('/', array_slice($parts, 1)) . '</span>';
                            }
                        @endphp
                        <div class="flex justify-between border-t">
                            <div class="my-1">
                                <h4 class="font-bold">{!! $formattedProductName !!}</h4>
                                <p class="text-xs italic text-stone-500 mt-1">{!! str_replace('/', '<br>', $product->description) !!}</p>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                @if($company->settingsGet('show_prices_on_menu'))
                                    <p class="text-lg">
                                        {{ number_format($product->gross_price, 2, ',', '') }}<span
                                                class="text-xs ml-0.5 uppercase">{{ $company->settingsGet('currency') }}</span>
                                    </p>
                                @endif
                            </div>
                        </div>
                    @else
                        <!--ÜRÜN ADI, AÇIKLAMA ve GÖRSEL-->
                        <div class="flex justify-between py-2 border-t">
                            @php
                                $productName = $product->name;
                                $parts = explode('/', $productName);
                                $formattedProductName = $parts[0];

                                if (count($parts) > 1) {
                                    $formattedProductName .= '<br><span class="text-sm">' . implode('/', array_slice($parts, 1)) . '</span>';
                                }
                            @endphp
                            <div>
                                <h4 class="text-lg font-bold">{!! $formattedProductName !!}</h4>
                                <p class="text-xs italic text-stone-500 mt-1">{!! str_replace('/', '<br>', $product->description) !!}</p>
                                @if($company->settingsGet('show_prices_on_menu'))
                                    <p class="text-lg">
                                        {{ number_format($product->gross_price, 2, ',', '') }}<span
                                                class="text-xs ml-0.5 uppercase">{{ $company->settingsGet('currency') }}</span>
                                    </p>
                                @endif
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <img class="h-24 w-28 object-cover rounded-lg bg-white text-stone-300"
                                     src="{{ $product->mainImage('thumb') }}"
                                     alt="">
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @endforeach

    <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>
            <p class="mt-4 text-sm leading-7 tracking-tight text-stone-900">{{ $company->address }}</p>
            <p class="text-sm leading-6 text-stone-600">{{ $company->web }}</p>
            <p class="text-sm leading-6 text-stone-600">{{ $company->phone }}</p>
        </li>
    </ul>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            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);
                });
            });
        });
    </script>
@endsection