@extends('layouts.app')
@php
    $navbar_language = collect($navbarLanguages);
    $currentLocale = app()->getLocale();
    $currentLanguage = $navbar_language->firstWhere('code', $currentLocale);
    $isRtl = $currentLanguage['is_rtl'] ?? false;
@endphp
@section('title', __('messages.categories'))

@section('content')
        @php
            function hexToRgb($hex)
            {
                $hex = ltrim($hex, '#');
                if (strlen($hex) == 3) {
                    $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
                }
                $r = hexdec(substr($hex, 0, 2));
                $g = hexdec(substr($hex, 2, 2));
                $b = hexdec(substr($hex, 4, 2));
                
                return "$r, $g, $b";
            }
        @endphp
        <div class="container mx-auto my-5">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12">
                <!-- Main Content (9 Columns) -->
                <div class="col-span-9">
                <!-- Page Title and Description -->
                    <div class="mb-10 ml-4 mr-4">
                        {{ Breadcrumbs::render('categories') }}
                        <h1 class="text-3xl font-bold">{{ __('messages.categories') }}</h1>
                        <p class="text-gray-600 mt-3 ">{{ __('messages.categories_description') }}</p>
                    </div>
                    <!-- Categories with Background -->
                    <div class="grid grid-cols-1 gap-4 mb-5">
                        @foreach ($categories as $category)
                            @if ($category->getBackgroundUrl() != null)
                                <div class="col-span-1">
                                    <div class="md:rounded-[20px] lg:rounded-[20px] p-4 "
                                        style="background: linear-gradient({{ $isRtl === true ? 'to left' : 'to right' }}, rgba(255, 255, 255, 0.8), rgb({{ hexToRgb($defaultColor) }}, 0.8)), url('{{ $category->getBackgroundUrl() }}'); background-size: cover; background-position: center;">
                                        <div class="flex flex-row items-center">
                                            <img src="{{ $category->getIconUrl() }}" alt="{{ $category->name }}"
                                                class="w-12 h-12 object-cover mr-2">
                                            <a href="{{ route('categories.show', $category->slug) }}" target="_blank">
                                                <h1 class="text-[27px] font-bold">{{ $category['name'] }}</h1>
                                            </a>
                                        </div>
                                        <div class="flex flex-row  gap-2 mt-3">
                                            @foreach ($category->stores as $store)
                                                <a href="{{ route('store.details', $store->slug) }}" class="text-white w-28 flex-basis-1/4"
                                                    data-aos="zoom-in" data-aos-offset="100" data-aos-easing="ease-in-sine"
                                                    data-aos-delay="{{ $loop->index * 200 }}">
                                                    <div class="bg-white rounded-[0.5em] shadow-[1px_1px_6px_rgba(0,0,0,0.15)] p-[0.75em]">
                                                        <img src="{{ $store->getStoreLogoUrl() }}" alt="{{ $store->name }}"
                                                            class="w-full h-24 object-contain rounded-md">
                                                        <div class="mt-2">
                                                            <hr class="border-gray-300">
                                                            <p class="overflow-hidden text-ellipsis text-sm text-black" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{ $store['description'] }}</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    <!-- SubCategories -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 p-3">
                        @foreach ($categories as $category)
                            @if ($category->children->isNotEmpty())
                                @foreach ($category->children as $subcategory)
                                    <div class="col-span-1">
                                        <a href="{{ route('categories.show', $subcategory->slug) }}"
                                            class="block w-full px-4 py-2 border border-gray-300 rounded-md text-center text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 ">
                                            {{ $subcategory->name }}
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        @endforeach
                    </div>
                </div>

                <!-- Sidebar (3 Columns) -->
                <div class="sm:col-span-1 md:col-span-3">
                    @include('partials.sidebar')
                </div>
            </div>
        </div>
@endsection