@extends('layout')
@section('content')
    <div class="my-4">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4 bg-light border-0 breadcrumb-content">
                        <!-- product title section -->
                        <div class="theme-border-radius theme-box-shadow card-body p-3 theme-bg-white">
                            <ul>
                                <li><a href="@localeUrl('home.page')">@translate('catalogue', 'category_home')</a></li>
                                @if ($queryModel || $queryMaker || $queryVehicle)
                                    @if ($queryMaker)
                                        <li><a href="@localeUrl('home.page', ['maker' => $queryMaker->name])">{{$queryMaker->name}}</a></li>
                                    @endif
                                    @if ($queryModel)
                                        <li><a href="@localeUrl('part.category', ['model' => $queryModel->id])">{{$queryModel->name}}</a></li>
                                    @endif
                                    
                                    @else
                                    <li><a href="@localeUrl('part.category')">@translate('catalogue', 'category_category')</a></li>
                                @endif
                                
                                @for ($i = 0; $i < count($categoryDepth); $i++)
                                    <li><a href=""
                                            onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()" onclick="addUrlParam({param: {
                                            @for ($j = $i; $j >= 0; $j--)
                                                'cat{{ $j + 1 }}': `{{ $j == $i ? $categoryDepth[$j]['title'] : $categoryDepth[$j]['id'] }}`,
                                            @endfor
                                            }, loc: `{{$i >= 2 ? @localeUrlE('part.list') : @localeUrlE('part.category')}}`, delparams: ['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false">{{ $categoryDepth[$i]['title'] }}</a>
                                    </li>
                                @endfor
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <ul class="category-list">
                @foreach ($categories as $category)
                @php
                    \Log::info($category->lang_or_any->title . ' - ' . $category->id)
                @endphp
                    <li style="cursor: pointer; display: flex; align-items: center; gap: 8px;" onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()" onclick="addUrlParam({param: {
                    @php
                        $newestCat = $category;
                    @endphp
                    @for($k = count($categoryDepth); $k >= 0; $k--)
                        'cat{{ $k+1 }}': `{{ $k == count($categoryDepth) ? $newestCat->lang_or_any->title : $newestCat->id }}`,
                        @php
                            $newestCat = $newestCat->parentCategory;
                        @endphp
                    @endfor
                    }, loc: `{{$i >= 2 ? @localeUrlE('part.list') : @localeUrlE('part.category')}}`, delparams: ['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);"><i style="font-size: 1.2em;font-weight: bold;" class="{{ match($category->id){
                        382 => 'icon-chassis',
                        541 => 'icon-car-2',
                        134 => 'icon-car-lights',
                        1 => 'icon-break',
                        1249 => 'icon-car-parts',
                        281 => 'icon-drop',
                        579 => 'icon-window',
                        250 => 'icon-engine',
                        197 => 'icon-air-conditioner',
                        999 => 'icon-dashboard',
                        1168 => 'icon-exhaust',
                        1189 => 'icon-windshield-1',
                        98 => 'icon-windshield-2',
                        416 => 'icon-gearshift',
                        498 => 'icon-car-1',
                        330 => 'icon-suspension',
                        463 => 'icon-alloy-wheel',
                        806 => 'icon-seat',
                        624 => 'icon-car-3',
                        default => ''
                    } }}"></i><a href="" onclick="return false">{{ $category->lang_or_any->title }}</a>
                    </li>
                @endforeach
            </ul>

            @if (count($availableCategories) > 0)
                <div class="mb-5 container categories-expandable" style="font-size: 1.1em; padding: 0; overflow: hidden;">
                    @foreach ($availableCategories as $availableCategoryName1 => [$availableCategory1, $cat1node])
                    {{-- @php
                        \Log::info($cat1node);
                    @endphp --}}
                        <x-fold-menu :identificator="'category1' . str_replace([' ', ','], ['_', '-'], $availableCategoryName1)" :arrowStyle="'display: none;'" :textStyle="'hilightable'" :containerClass="'categoriesGrouping category-list '" :containerStyle="'--cildren: '.count($availableCategory1)">
                            <x-slot:title>
                                <i style="font-size: 1.2em; margin-right: 5px; font-weight: bold;" class="{{ match($cat1node->id){
                        382 => 'icon-chassis',
                        541 => 'icon-car-2',
                        134 => 'icon-car-lights',
                        1 => 'icon-break',
                        1249 => 'icon-car-parts',
                        281 => 'icon-drop',
                        579 => 'icon-window',
                        250 => 'icon-engine',
                        197 => 'icon-air-conditioner',
                        999 => 'icon-dashboard',
                        1168 => 'icon-exhaust',
                        1189 => 'icon-windshield-1',
                        98 => 'icon-windshield-2',
                        416 => 'icon-gearshift',
                        498 => 'icon-car-1',
                        330 => 'icon-suspension',
                        463 => 'icon-alloy-wheel',
                        806 => 'icon-seat',
                        624 => 'icon-car-3',
                        default => ''
                    } }}"></i>{{ $availableCategoryName1 }}
                            </x-slot>
                            <button class="showForCat" onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()"
                                    onclick="addUrlParam({param:{'cat1': `{{ $availableCategoryName1 }}`}, loc: `{{@localeUrlE('part.list')}}`, delparams:['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false">
                                {{ strtr(@translateE('catalogue', 'category_show_all'), [':category' => $availableCategoryName1]) }}
                            </button>
                            @foreach ($availableCategory1 as $availableCategoryName2 => $availableCategory2)
                            <ul>
                                <li>
                                    <a href=""
                                        onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()"
                                        onclick="addUrlParam({param:{'cat2': `{{ $availableCategoryName2 }}`, 'cat1': `{{ $cat1node->id }}`}, loc: `{{@localeUrlE('part.list')}}`, delparams:['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false"
                                        class="nav-link title">{{ $availableCategoryName2 }}</a>

                                </li>
                                @foreach ($availableCategory2 as $availableCategoryData)
                                <li><a href=""
                                        onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()"
                                        onclick="addUrlParam({param:{'cat3': `{{ $availableCategoryData->lang_or_any->title }}`, 'cat2': `{{ $availableCategoryData->parentCategory->id }}`, 'cat1': `{{ $availableCategoryData->parentCategory->parentCategory->id }}`}, loc: `{{@localeUrlE('part.list')}}`, delparams:['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false"
                                        class="nav-link">{{ $availableCategoryData->lang_or_any->title }}</a>
                                </li>
                                @endforeach
                            </ul>
                            @endforeach
                            {{-- @foreach ($availableCategory1 as $availableCategoryName2 => $availableCategory2)
                                <x-fold-menu :identificator="'category2' .
                                    str_replace([' ', ','], ['_', '-'], $availableCategoryName2)">
                                    <x-slot:arrow-style>margin-left: 10px</x-slot>
                                    <x-slot:title>
                                        <span style="">{{ $availableCategoryName2 }}</span>
                                    </x-slot>

                                    <ul class="nav flex-column ms-3">

                                        @foreach ($availableCategory2 as $availableCategoryData)
                                            <li class="nav-item w-100 no-border-last-self"><a style="margin-left:30px"
                                                    href=""
                                                    onmousedown="if (event.button===1)event.preventDefault()"onmouseup="if (event.button===1)this.click()"
                                                    onclick="addUrlParam({param:{'cat3': `{{ $availableCategoryData->lang_or_any->title }}`, 'cat2': `{{ $availableCategoryData->parentCategory->id }}`, 'cat1': `{{ $availableCategoryData->parentCategory->parentCategory->id }}`}, loc: `{{@localeUrlE('part.list')}}`, delparams:['cat1', 'cat2', 'cat3', 'page']}).go(event.pointerId===-1);return false"
                                                    class="nav-link">{{ $availableCategoryData->lang_or_any->title }}</a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </x-fold-menu>
                            @endforeach --}}
                        </x-fold-menu>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@endsection