@php
$channel = core()->getCurrentChannel();
@endphp
<!-- SEO Meta Content -->
@push ('meta')
<meta name="title" content="{{ $channel->home_seo['meta_title'] ?? '' }}" />
<meta name="description" content="{{ $channel->home_seo['meta_description'] ?? '' }}" />
<meta name="keywords" content="{{ $channel->home_seo['meta_keywords'] ?? '' }}" />
@endPush

@if(isset($bannerData) && !empty($bannerData))
<x-shop::layouts>
<x-slot:title>
        {{  $channel->home_seo['meta_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', '', Storage::url('') ) . str_replace('storage', 'cache/original',  $bannerData['banner_img']) }}"
            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 ">
                    {{$bannerData['title']}}
                </h1>
                <span class="text-[16px] max-w-[458px] text-center font-[500] text-[#FFFFFF]">
                    {{ strip_tags($bannerData['short_description']) }}
                </span>
            </div>
        </div>
    </div>

    <!-- <v-recipies-slider :latest="{{ $latest_recipes }}" ></v-recipies-slider> -->
    <v-category :subcat="{{ json_encode($subCategories) }}" :latest="{{ json_encode($latest_recipes) }}"></v-category>


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

        <div class="w-full bg-[#E6E6E666] min-h-[976px] h-auto flex justify-center items-start px-5 pt-[60px] md:pt-[90px] pb-[60px] md:pb-[40px] max-sm:pb-[25px] recipes_reduce_top_padding set_height_fit_content">
        <div class="latest-recipies w-full max-w-[1300px]">
            <div class="latest-recipies-top w-full flex justify-between items-center">
                <div class="relative">
                    <img class="absolute top-[-57px] max-md:top-[-105px] left-[-18px] latest_blogs_image latest_recipes_store_image" 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-center max-md: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: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-[20px] md:p-[60px] md:pb-[30px] recipes_slider_content bg-[#FFFFFF] max-h-[430px] set_height_fit_content md:max-h-[557px] h-[557px] min-h-[430px] w-full">
                    <h1 class="text-[#121F2C] truncate-2-lines font-[600] font_normal text-[48px] leading-[48px]">
                    @{{ latest[currentSlide].title.toUpperCase() }}
                    </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-[20px] text-[16px] font-[400] rounded-[40px] hover:bg-gray-400 hover:text-white hover:border-none">Read More</button>
                </div>
            </div>
        </div>
    </div>
            <div class="w-full bg-[#FFFFFF] h-auto flex justify-center items-start px-5 py-20 max-sm:pb-0 max-md:py-3 recipes_reduce_top_padding recipes_set_bottom">
                <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 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 text-[#7e7071] font-semibold hover:text-[#1F2C12]"
                                >
                                    @{{ 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>
                    <div class="recipies-cards grid grid-cols-4 py-10 justify-start gap-8 flex-wrap max-sm:pb-1 max-md:py-5 recipes_reduce_top_padding recipes_set_bottom">
                    @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 transform transition-transform duration-300 hover:scale-105" 
        @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] 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>

           <div class="flex justify-between w-full items-center">
           <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>
                <span class='mt-1'>{{ $recipe->prep_time }}  </span>
            </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="32" height="32" viewBox="0 0 64 64" fill="#00000099" style="margin-top: -10px">
 

  <!-- Plate -->
  <rect x="8" y="52" width="48" height="4" rx="2" />

  <!-- Cloche dome -->
  <path d="M12 52a20 20 0 1 1 40 0Z" />

  <!-- Handle on top -->
  <circle cx="32" cy="28" r="3" />
</svg>
                <span class='mt-1'>{{ $recipe->serving }} </span>
            </span>
           </div>
        </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 rounded-full hover:text-[#FFFF] hover:bg-gray-400"
                      :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 hover:text-[#FFFF] hover:bg-gray-400"
                      :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 hover:text-[#FFFF] hover:bg-gray-400"
                      :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: {
                subcat: {
                    type: Object,
                },
                latest: {
                    type: Object,
                },
            },
            data() {
                return {
                    recipesData: @json($recipes),
                    categories: [],
                    subcategories: [],
                    selectedCategoryId: null,
                    latest_sliders: this.latest,
                    currentSlide: 0,
                    paginationLinks: [],
                };
            },

            mounted() {
                this.fetchCategories();
                this.paginationLinks = this.recipesData.links
                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');
                            }
                        });
                    } else {}
                });

            },
            methods: {
                fetchCategories() {
                    fetch(`{{ route('shop.api.recipes.menu.categories') }}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                this.categories = data.data.categories;
                            } 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.subcat.filter(item => item.recipe_category_id == categoryid);
                    const itemCat = this.categories.filter(item => item.id == itemSubCat[0].parent_id);

                    window.location.href = "{{route('shop.recipie-detail.index',['', '',''])}}" + "/" + 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;
                    }

                },

                selectCategory(slug) {

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

                    const itemSubCat = this.subcat.filter(item => item.recipe_category_id == categoryid);

                    const itemCat = this.categories.filter(item => item.id == itemSubCat[0].parent_id);
                    window.location.href = "{{route('shop.recipie-detail.index',['', '',''])}}" + "/" + 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;
                        }


                    }

                }

            }
        });
    </script>

    @endPushOnce




</x-shop::layouts>
@else
    <div class="flex items-center justify-center min-h-[400px] bg-gray-100">
        <div class="text-center">
            <h1 class="text-3xl font-semibold text-gray-700 mb-4">CMS Banner Not Created</h1>
            <p class="text-gray-500">Please create a CMS Banner page first. Go to backoffice/cms and create banner for the page.</p>
        </div>
    </div>
@endif