@php
$channel = core()->getCurrentChannel();
@endphp
<!-- SEO Meta Content -->
@push ('meta')
<meta name="title" content="{{ $parentCategory->meta_title ?? '' }}" />
<meta name="description" content="{{  $parentCategory->meta_description ?? '' }}" />
<meta name="keywords" content="{{  $parentCategory->meta_keywords ?? '' }}" />
<link rel="canonical" href="{{ route('shop.product_or_category.index', $parentCategory->slug) }}" />
@endPush


<x-shop::layouts>
<x-slot:title>
        {{ $parentCategory->title ?? '' }}
    </x-slot>
    <div class="relative w-full flex items-center justify-center " style="height: 600px">
        <img class="aspect-[4/1] absolute object-cover w-full h-full "
            src="{{str_replace('storage', 'cache/original', Storage::url('')) . $parentCategory->banner}}"
            alt="Recipies Image Failed" />
        <div
            class="absolute inset-0 bg-opacity-0 bg-[rgb(0,0,0,0.3)] flex items-center justify-center transition-all duration-300">
        </div>

        <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
            <div class="flex justify-center">
                <img src="{{ bagisto_asset('images/Heading.svg') }}" class="h-full absolute mx-auto -top-10"
                    alt="the chef its you" width="400" />
            </div>
            <div class="w-full max-w-[523px] px-10 flex flex-col">
                <h1 class=" tracking-[16px] text-[66px] latest_recipes_title text-white  uppercase font-stritch ">
                    {{$parentCategory->title}}
                </h1>
                <span class="text-[16px] max-w-[458px] text-center font-[500] text-[#FFFFFF]">
                    {{ strip_tags($parentCategory->description) }}

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




    <v-category :slug="'{{ $parentCategory->slug }}'" :parentid="'{{ $parentCategory->parent_id }}'" :latest="{{ $latest_recipes }}"></v-category>






    @pushOnce('scripts')
    <script type="text/x-template" id="v-category-template">
        @if(count($latest_recipes) > 0)

    <div class="w-full bg-[#E6E6E666] min-h-[976px] h-auto flex justify-center items-start px-5 pt-[180px] pb-[80px]">
        <div class="latest-recipies w-full max-w-[1300px]">
            
            <!-- Arrow Buttons -->
            <div class="latest-recipies-top w-full flex justify-between items-center">
                <div class="latest-recipies-title relative">
                    <img class="absolute top-[-105px] left-[-18px]" src="{{ bagisto_asset('images/latest-recipes-sign.svg') }}" alt="">
                    <h1 class="text-[#7E7071] font-[500] latest_recipes_title font-stritch text-[66px] leading-[66px] tracking-[23px]">LATEST RECIPES</h1>
                </div>
                <div class="latest-recipies-btns flex items-center justify-end gap-5" v-if="latest.length > 1">
                    <!-- Navigation Buttons -->
                    <span @click="prevSlide" class="border group cursor-pointer border-[#121F2C4D] w-[72px] h-[48px] rounded-[40px] flex justify-center items-center hover:bg-gray-400 hover:border-none">
                        <svg class="group-hover:stroke-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(18, 31, 44)" viewBox="0 0 16 16" stroke="#121f2c">
                            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                        </svg>
                    </span>
                    <span  @click="nextSlide" class="border group cursor-pointer border-[#121F2C4D] w-[72px] h-[48px] rounded-[40px] flex justify-center items-center rotate-180 hover:bg-gray-400 hover:text-white hover:border-none">
                        <svg class="group-hover:stroke-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(18, 31, 44)" viewBox="0 0 16 16" stroke="#121f2c">
                            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                        </svg>
                    </span>
                </div>
            </div>
            <div class="latest-recipies-content w-full flex justify-start pt-[60px] items-center" >
                
                <img class="w-[480px] h-[557px] object-cover" :src="latest[currentSlide].thumb.replace('storage', '/cache/original')" alt="">
                <!-- <img class="w-[480px] h-[557px] object-cover" :src="latest[currentSlide].thumb" alt=""> -->
                <div class="flex flex-col p-[60px] recipes_slider_content bg-[#FFFFFF] max-h-[557px] min-h-[557px] h-[557px] min-h-[557px] w-full">
                    <h1 class="text-[#121F2C] truncate-2-lines font-[600] font_normal text-[48px] leading-[48px] h-[120px]">
                    @{{latest[currentSlide].title}}
                    </h1>
                
                    <span class="text-[#00000099] truncate-3-lines font-[400] mt-5 font_normal text-[18px] leading-[25px] max-h-[fit-content]">
                    @{{latest[currentSlide].shortDescription}}.
                    </span>
                    <div class="flex items-center gap-5 pt-[20px]">
                        <span class="text-[#00000099] font-[400] font_normal text-[18px] leading-[25px]">Prep time:</span>
                        <span class="text-[#121F2C] text-[20px] font-[400] leading-[28px] font-stritch">@{{latest[currentSlide].prep_time}}</span>
                    </div>
                    <div class="flex items-center gap-5 pt-[20px]">
                        <span class="text-[#00000099] font-[400] font_normal text-[18px] leading-[25px]">Cook Time:</span>
                        <span class="text-[#121F2C] text-[20px] font-[400] leading-[28px] font-stritch">@{{latest[currentSlide].cook_time}}</span>
                    </div>
                    <div class="flex items-center gap-5 pt-[20px]">
                        <span class="text-[#00000099] font-[400] font_normal text-[18px] leading-[25px]">Serving:</span>
                        <span class="text-[#121F2C] text-[20px] font-[400] leading-[28px] font-stritch"> @{{latest[currentSlide].serving}} persons</span>
                    </div>
                    <button @click="viewRecipe(latest[currentSlide].category_id,latest[currentSlide].slug)" class="border border-navyBlue w-[138px] min-h-[48px] h-[48px] flex justify-center items-center mt-[38px] text-[16px] font-[400] rounded-[40px] hover:bg-gray-400 hover:text-white hover:border-none">Read More</button>
                </div>
            </div>
        </div>
    </div>
    @endif

        <div class="w-full bg-[#FFFFFF] h-auto flex justify-center items-start px-5 py-14">
                <div class="w-full max-w-[1300px] recipies_categories">
                    <div class="categories_section">
                        <h1 class="text-[#7E7071] font-[500] latest_recipes_title text-center font-stritch text-[66px] leading-[66px] tracking-[23px]">OUR RECIPES</h1>
                        <div class="flex categories_wrapper justify-center py-10 flex-wrap gap-[50px] items-center w-full">

                        <template v-if="categories.length > 0" >
                            <template v-for="(category, index) in categories" :key="category.id">
                                <span @click="selectCategory(category.slug)" 
                                class="flex gap-5  cursor-pointer tracking-[5px]  uppercase font-stritch text-center font-semibold hover:text-[#1F2C12]"
                                :class="category.slug == '{{$parentCategory->slug}}' ? 'text-[#121F2C]' : category.id=='{{$parentCategory->parent_id}}' ? 'text-[#121F2C]' : 'text-graypink'"
                                >
                                    @{{ category.name }} 
                                </span>
                                <span v-if="index !== categories.length - 1" class="bg-[#7E7071] w-[1px] h-[20px] hover:bg-navyBlue"  ></span>
                            </template>
                        </template>
                        </div>
                        <div class="flex categories_child_wrapper justify-center pb-10 flex-wrap gap-[20px] items-center w-full">

                        <template v-if="subcategories.length > 0">
                            <button v-for="subcategory in subcategories" @click="selectSubCategory(subcategory.id, subcategory.slug, subcategory.parent_id)" :key="subcategory.id" class="px-[20px] min-w-[140px] flex justify-center items-center border border-[#121F2C33] h-[43px] hover:bg-[#121F2C] hover:text-[#FFF] font-[500] font_normal text-[18px] rounded-[60px]"
                            :class="subcategory.id=='{{$parentCategory->recipe_category_id}}' ? 'bg-navyBlue text-white' : 'text-[#121F2C] '">
                                @{{ subcategory.name }}
                            </button>
                        </template> 
  
                        </div>
                    </div>

                    <div class="recipies-cards grid grid-cols-4 py-10 justify-start gap-8 flex-wrap">
                    @if ($recipes->isEmpty())
    <p class="text-center text-[#121111] font-[600] text-[20px]">
        No recipes available.
    </p>
@else
    @foreach ($recipes->items() as $recipe)
        <div class="min-w-[295px] w-full max-w-[480px] recipies-cards_grid_item h-auto cursor-pointer flex flex-col gap-3 justify-start items-start" 
        @click="redirectRecipeDetailpage('{{ $recipe->category_id }}', '{{ $recipe->slug }}')"
        >
        <img class="w-full h-[400px] object-cover"
                 src="{{ str_replace('storage', 'cache/original', Storage::url('')) . str_replace('storage/', '', $recipe->thumb) }}" 
                 alt="">

            <span class="text-[#121111] uppercase truncate-1-lines font-[600] text-[20px] font_normal">
                {{ $recipe->title }}
            </span>

            <span class="text-[#00000099] truncate-2-lines font-[400] font_normal text-[14px]">
                {{ $recipe->shortDescription }} 
            </span>

            <span class="text-[#00000099] truncate-1-lines flex justify-start items-center gap-2 font-[400] font_normal text-[14px]">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#00000099">
                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm3.293 14.707L11 12.414V6h2v5.586l3.707 3.707-1.414 1.414z" fill="#00000099"/>
                </svg>
                {{ $recipe->prep_time }}  Minutes
            </span>
        </div>
    @endforeach
@endif
                    </div>
                </div>
            </div>


            
            <!-- Paginations -->
            <div class="flex justify-center items-center space-x-2 mb-10"
              
                >
                <div v-if="paginationLinks.length > 3" v-for="(link, index) in paginationLinks" :key="link.label">
                    <!-- First Button (Index 0) with SVG -->
                    <button v-if="index === 0"
                        class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full"
                        :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                        @click="loadPage(link)">
                        <svg width="7" height="10" class="transform rotate-180" viewBox="0 0 7 10"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1.675 0L0.5 1.175L4.31667 5L0.5 8.825L1.675 10L6.675 5L1.675 0Z"
                                fill="#121F2C" />
                        </svg>
                    </button>

                    <!-- Middle Buttons (Without SVG) -->
                    <button v-else-if="index > 0 && index < paginationLinks.length - 1"
                        class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full"
                        :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                        @click="loadPage(link)">
                        @{{ link.label }}
                    </button>

                    <!-- Last Button with SVG -->
                    <button v-else-if="index === paginationLinks.length - 1"
                        class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full"
                        :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                        @click="loadPage(link)">
                        <svg width="7" height="10" viewBox="0 0 7 10" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1.675 0L0.5 1.175L4.31667 5L0.5 8.825L1.675 10L6.675 5L1.675 0Z"
                                fill="#121F2C" />
                        </svg>
                    </button>
                </div>


            </div>
        </script>


    <script type="module">
        app.component('v-category', {
            template: '#v-category-template',
            props: ["latest", "slug", "parentid"],
            data() {
                return {
                    recipesData: @json($recipes),
                    categories: [],
                    subcategories: [],
                    selectedCategoryId: null,
                    latest_sliders: this.latest,
                    currentSlide: 0,
                    paginationLinks: [],
                };
            },
            mounted() {
                this.fetchCategories();
                this.paginationLinks = this.recipesData.links
                console.log("paginationLinks", this.paginationLinks)
                window.addEventListener('scroll', () => {
                    const overlay = document.getElementById('header_overlay');

                    if (overlay) {
                        window.addEventListener('scroll', function() {
                            const scrollPosition = window.scrollY || document.documentElement.scrollTop;
                            if (scrollPosition >= 5) {
                                overlay.classList.add('header-onscroll');
                            } else {
                                overlay.classList.remove('header-onscroll');
                            }
                        });
                    }
                });

            },
            methods: {
                fetchCategories() {
                    fetch(`{{ route('shop.api.recipes.menu.categories') }}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                this.categories = data.data.categories;
                                if ("{{$parentCategory->parent_id}}" == 0) {
                                    const currentCategoryID = this.categories.filter(item => item.slug === "{{$parentCategory->slug}}");
                                    this.selectedCategoryId = currentCategoryID[0]?.id;
                                    this.fetchSubcategories();
                                } else {
                                    const currentCategoryID = this.categories.filter(item => item.id == "{{$parentCategory->parent_id}}");
                                    this.selectedCategoryId = currentCategoryID[0]?.id;
                                    this.fetchSubcategories();
                                }
                            } else {
                                console.error('Failed to fetch categories');
                            }
                        });
                },
                fetchSubcategories() {
                    if (this.selectedCategoryId) {
                        fetch(`{{ route('shop.api.recipes.menu.subcategories','') }}/${this.selectedCategoryId}`)
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    this.subcategories = data.data.subCategories;
                                } else {
                                    console.error('Failed to fetch subcategories');
                                }
                            });
                    }
                },
                viewRecipe(categoryid, slug) {

                    const itemSubCat = this.subcategories.filter(item => item.id == categoryid);
                    const itemCat = this.categories.filter(item => item.id == itemSubCat[0].parent_id);
                    window.location.href = "{{route('shop.recipie-detail.index',['', '',''])}}" + "/" + itemCat[0].slug + "/" + itemSubCat[0].slug + "/" + slug;
                    // window.scrollTo({
                    //     top: 0,
                    //     behavior: 'smooth'
                    // })
                },
                nextSlide() {
                    if (this.currentSlide < this.latest_sliders.length - 1) {
                        this.currentSlide++;
                    } else {
                        this.currentSlide = 0;
                    }
                },
                prevSlide() {
                    if (this.currentSlide > 0) {
                        this.currentSlide--;
                    } else {
                        this.currentSlide = this.latest_sliders.length - 1;
                    }

                },
                selectSubCategory(subid, slug, parent_id) {
                    const categoryslug = this.categories.filter(item => item.id == parent_id);

                    window.location.href = "{{route('shop.recipie_or_subcategory.index',['', ''])}}" + "/" + categoryslug[0].slug + "/" + slug;
                    // window.scrollTo({
                    //     top: 0,
                    //     behavior: 'smooth'
                    // })
                },


                selectCategory(slug) {

                    window.location.href = "{{route('shop.recipie_or_category.index',[''])}}" + "/" + slug;
                    // window.scrollTo({
                    //     top: 0,
                    //     behavior: 'smooth'
                    // })

                },
                redirectRecipeDetailpage(categoryid, recipeslug) {
                    const itemSubCat = this.subcategories.filter(item => item.id == categoryid);
                    const itemCat = this.categories.filter(item => item.id == itemSubCat[0].parent_id);
                    if ('{{$parentCategory->parent_id}}' == 0) {
                        window.location.href = "{{route('shop.recipie-detail.index',['', '',''])}}" + "/" + itemCat[0].slug + "/" + recipeslug;
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        })
                    } else {
                        window.location.href = "{{route('shop.recipie-detail.index',['', '',''])}}" + "/" + itemCat[0].slug + "/" + itemSubCat[0].slug + "/" + recipeslug;
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        })
                    }
                },
                loadPage(link) {

                    if (link.url) {

                        if (this.selected_category) {
                            this.blogs_loader = true;
                            const url = link.url;
                            this.$axios.get(url)
                                .then(response => {
                                    this.blogs = response.data.data
                                    this.paginationLinks = response.data.data.links
                                    this.blogs_loader = false
                                    this.selected_category = category.id;
                                })
                        } else {
                            window.location.href = link.url;
                        }


                    }

                }

            },
            computed: {
                firstVisibleIndex() {
                    return this.currentSlide; // Directly return currentSlide as the visible index
                }
            }
        });
    </script>

    @endPushOnce


</x-shop::layouts>