@props(['categories', 'currency' => 'TL', 'clickable' => true, 'serviceOpenOverride' => null])

@if(isset($categories) && $categories->count())
@foreach($categories as $category)
@php
// When a group-level override is provided (grouped view), always render the
// full accordion so customers can browse products. Ordering is controlled
// solely via the $clickable prop.
if ($serviceOpenOverride !== null) {
$isServiceOpen = true; // Always show accordion in grouped mode
$isGroupClosed = !$serviceOpenOverride;
$serviceClosedReason = $groupClosedReason ?? __('menu.group_service_closed');
} else {
$isServiceOpen = $category->service_open ?? true;
$isGroupClosed = false;
$serviceClosedReason = $category->service_closed_reason ?? null;
}
@endphp
@if($isServiceOpen)
<div class="mb-2 overflow-hidden">
    <h2 id="accordion-heading-{{ $category->id }}">
        <button type="button"
            class="flex items-center justify-between w-full px-4 py-5 border bg-stone-50 rounded-xl border-stone-400 text-stone-600"
            @if($category->image ?? null)
            style="background-image: linear-gradient(to right, rgba(255,255,255), rgba(255,255,255,0.1)), url('{{
            asset('storage/' . str_replace('uploads/', '', $category->image->url)) }}'); background-size: cover;
            background-position: center;"
            @endif
            data-accordion-target="#accordion-body-{{ $category->id }}" aria-expanded="true"
            aria-controls="accordion-body-{{ $category->id }}">
            <h1 class="text-2xl text-left {{ $isGroupClosed ? 'text-stone-400' : 'text-stone-700' }}">
                {{ $category->name }}
            </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>

    <!-- SERVİS SAATLERİ UYARISI -->
    @php
    $categoryData = $category->data ?? [];
    $hasCategoryHours = $categoryData['service_hours_enabled'] ?? false;
    $categorySlots = $hasCategoryHours ? ($categoryData['service_hours'][now()->dayOfWeekIso] ?? []) : [];
    // Eski format dönüşümü
    if (isset($categorySlots['start'])) {
    $categorySlots = [['name' => 'Servis', 'open' => $categorySlots['start'], 'close' => $categorySlots['end']]];
    }
    $categorySlots = collect($categorySlots)->filter(fn($s) => !($s['is_closed'] ?? false));
    @endphp
    @if($hasCategoryHours && $categorySlots->isNotEmpty())
    <div class="flex items-center gap-1 text-xs text-teal-600">
        <span class="text-base material-symbols-rounded">timelapse</span>
        <span>{{ __('menu.service_hours') }}
            @foreach($categorySlots as $slot)
            {{ $slot['open'] ?? '' }} - {{ $slot['close'] ?? '' }}{{ !$loop->last ? ',' : '' }}
            @endforeach
        </span>
    </div>
    @endif

    <div id="accordion-body-{{ $category->id }}"
        class="grid hidden grid-cols-1 mt-1 bg-white border divide-y border-stone-300 rounded-xl divide-stone-200"
        aria-labelledby="accordion-heading-{{ $category->id }}">
        @foreach($category->products as $product)
        @include('menu.partials.product-card', ['product' => $product, 'category' => $category, 'currency' =>
        $currency, 'clickable' => $clickable])
        @endforeach
    </div>
</div>
@else
<div class="py-3 pl-4 mb-2 overflow-hidden border rounded-lg bg-stone-50 border-stone-200 opacity-60" @if($category->
    image ?? null)
    style="background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('{{ asset('storage/' .
    str_replace('uploads/', '', $category->image->url)) }}'); background-size: cover; background-position: center;"
    @endif
    >
    <div class="flex items-center justify-between">
        <h1 class="text-2xl text-stone-400">
            {{ $category->name }}
        </h1>
        <span class="flex items-center gap-1 mr-4 text-xs text-stone-400">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            {{ $serviceClosedReason ?? __('menu.category_service_closed') }}
        </span>
    </div>
</div>
@endif
@endforeach
@endif