@php
    use Illuminate\Support\Str;
@endphp

@aware(['page'])

<div class="categories mb-16">
    <div class="theme-max-w mx-auto my-4 px-5">
        <div class="flex flex-col md:flex-row gap-4">
            <div class="rounded-xl p-4 w-full md:w-52 bg-slate-200 shadow-lg md:self-start">
                <h3 class="text-xl font-bold text-gray-900 mb-4 text-center">Categories</h3>
                <nav class="flex md:flex-col flex-row justify-center md:justify-start md:space-y-2 space-x-2 md:space-x-0"
                     aria-label="Tabs" role="tablist">
                    @foreach($categories as $category)
                        @php $catId = Str::slug($category['name']) @endphp
                        @if(!empty($category['image']) && !empty($category['subitems']))
                            <button type="button" class="hs-tab-active:bg-slate-500 hs-tab-active:text-white py-2 px-4 rounded-lg text-md font-semibold text-gray-700 hover:bg-blue-100 hover:text-blue-700 transition-colors {{ $loop->first ? 'active' : '' }}" id="tab-{{ $catId }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" data-hs-tab="#tab-panel-{{ $catId }}" aria-controls="tab-panel-{{ $catId }}" role="tab">
                                {{ $category['name'] }}
                            </button>
                        @endif
                    @endforeach
                </nav>
            </div>


            <div class="w-full">
                @foreach($categories as $category)
                    @php $catId = Str::slug($category['name']) @endphp
                    @if(!empty($category['image']) && !empty($category['subitems']))
                        <div id="tab-panel-{{ $catId }}"
                             class="{{ $loop->first ? '' : 'hidden' }}"
                             role="tabpanel" aria-labelledby="tab-{{ $catId }}">

                            <!-- Subcategory Horizontal Tabs -->
                            <div class="border-b border-gray-200">
                                <nav class="flex gap-x-2" aria-label="Sub Tabs" role="tablist">
                                    @foreach($category['subitems'] as $subitem)
                                        @php $subId = Str::slug($subitem['title']) @endphp
                                        @if(!empty($subitem['image']))
                                            <button type="button" class="hs-tab-active:bg-slate-600 hs-tab-active:text-white py-2 px-12 rounded-lg text-md font-semibold text-gray-700 hover:bg-slate-100 hover:text-blue-700 transition-colors {{ $loop->first ? 'active' : '' }}"
                                                    id="subtab-{{ $catId }}-{{ $subId }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" data-hs-tab="#subpanel-{{ $catId }}-{{ $subId }}" role="tab">
                                                {{ $subitem['title'] }}
                                            </button>
                                        @endif
                                    @endforeach
                                </nav>
                            </div>

                            <!-- Subtab Content -->
                            <div class="mt-2">
                                @foreach($category['subitems'] as $subitem)
                                    @php $subId = Str::slug($subitem['title']) @endphp
                                    @if(!empty($subitem['image']))
                                        <div id="subpanel-{{ $catId }}-{{ $subId }}" class="{{ $loop->first ? '' : 'hidden' }}" role="tabpanel" aria-labelledby="subtab-{{ $catId }}-{{ $subId }}">
                                            <div>
                                                <div class="relative w-full mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
                                                    <div class="w-full" id="{{isset($subitem['name']) ? $subitem['name'] : ''}}">
                                                        <img src="{{asset('storage/'.$subitem['image'])}}" alt="" class="shadow-xl rounded-xl w-full"/>
                                                    </div>
                                                </div>
                                                @if(isset($subitem['pointers']))
                                                @if($subitem['pointers'])
                                                    @push('inlinescript')
                                                        @php
                                                            $safeVarName = 'pointers' . preg_replace('/[^A-Za-z0-9_]/', '_', $subitem['name']);
                                                        @endphp
                                                        <script>
                                                            const {{$safeVarName}} = [
                                                                @foreach($subitem['pointers'] as $pointer)
                                                                    { top: {{$pointer['top']}}, left: {{$pointer['left']}}, label: '{{$pointer['label']}}' },
                                                                @endforeach
                                                            ];
                                                            createInteractivePoints(pointers{{$subitem['name']}}, '{{$subitem['name']}}');
                                                        </script>
                                                    @endpush
                                                @endif
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

        </div>
    </div>
</div>