@php
    $channel = core()->getCurrentChannel();
@endphp

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



<x-shop::layouts>
    <x-slot:title>
        {{ ucwords(strtolower($recipe->title)) ?? '' }}
        </x-slot>

        <div
            class="w-full bg-[#FFFFFF] h-auto px-[60px] recipes_details_page flex justify-center items-start pt-[180px] pb-[60px] md:pb-[80px] recipes_reduce_bottom_padding">

            <div class="flex flex-col justify-between pb-[60px] pt-0 md:pt-[60px]  items-start w-full max-w-[1300px] min-w-[300px]">
                <div class="flex flex-col lg:flex-row justify-between gap-[40px]">
                    @if(!empty($recipe->video_url))
                                        @php
                                            $parsedUrl = parse_url($recipe->video_url);
                                            if (isset($parsedUrl['query'])) {
                                                parse_str($parsedUrl['query'], $queryParams);
                                                if (isset($queryParams['v'])) {
                                                    $youtubeId = $queryParams['v'];
                                                }
                                            }
                                            if (isset($parsedUrl['path'])) {
                                                $pathParts = explode('/', $parsedUrl['path']);
                                                $videoId = end($pathParts);

                                            }
                                        @endphp
                                        <div
                                            class="recipies-details_top_content flex flex-col w-full lg:w-[700px] justify-start items-start gap-[20px] max-sm:text-center">
                                            @if(isset($youtubeId))
                                                <iframe width="100%" height="400"
                                                    src="https://www.youtube.com/embed/{{$youtubeId}}?controls=0&showinfo=0&rel=0&modestbranding=1&autoplay=1&mute=1&iv_load_policy=3&loop=1&playlist={{$youtubeId}}"
                                                    title="YouTube video player" frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen=""></iframe>
                                            @elseif(isset($videoId))
                                                <iframe src="https://player.vimeo.com/video/{{$videoId}}?autoplay=1&muted=1&loop=1"
                                                    class="aspect-[2.743/1] max-h-full w-full max-w-full" width="100%" height="400"
                                                    title="Vimeo video player" frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen=""></iframe>
                                            @endif
                                        </div>


                    @else
                        <img class="w-[500px] md:w-full lg:w-[500px]  object-cover min-h-[470px]"
                            src="{{ str_replace('/storage', '/cache/original', Storage::url('')) . str_replace('storage/', '', $recipe->thumb) }}"
                            alt="{{ ucwords(strtolower($recipe->title)) }}" />
                    @endif

                    <div
                        class="recipies-details_top_content flex flex-col justify-start items-start gap-[20px] max-sm:text-center lg:w-[60%]">
                        <h1 class="text-[#121F2C]  font-[600] font_normal text-[48px] leading-[55px]">
                            {{ ucwords(strtolower($recipe->title)) }}
                        </h1>
                        <span class="text-[#00000099]  font-[400] mt-5 font_normal text-[18px] leading-[25px]">
                            {!! $recipe->description !!}
                        </span>


                        <div class="flex items-center border-b w-full border-[#0000001A] gap-5 max-sm:justify-center ">
                            <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 max-sm:justify-center ">
                                {{ $recipe->prep_time }}
                            </span>
                        </div>

                        <div
                            class="flex items-center border-b w-full border-[#0000001A] gap-5 pt-[20px] max-sm:justify-center ">
                            <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 max-sm:justify-center ">
                                {{ $recipe->cook_time }}
                            </span>
                        </div>

                        <div
                            class="flex items-center border-b w-full border-[#0000001A] gap-5 pt-[20px] max-sm:justify-center ">
                            <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">
                                {{ $recipe->serving }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class=" h-auto bg-[#E6E6E64D] w-full px-5 flex justify-center items-start">

            <div
                class="flex flex-col justify-start gap-[88px] py-[60px] recipes_details_mid_section items-start max-w-[1300px] min-w-[300px] reduce_gaps recipes_reduce_top_padding recipes_reduce_bottom_padding ingredient_content_center">

                <div class="recipies_details_ingredients flex justify-start items-start gap-[120px] ">
                    @if (count($ingredients) > 0)
                        <div
                            class="bg-[#121F2C08] rounded-[16px] w-full max-w-[402px] py-[32px] px-[40px] set_full_width ingredient_content_left">

                            <h1
                                class="text-[#121F2C] text-center mb-8 font-[600] font_normal text-[36px] leading-[36px] ingredient_content_left">
                                Ingredients
                            </h1>
                            <div
                                class="flex flex-col items-center gap-[32px] ingredient_reduce_gap w-full max-w-[322px] ingredient_content_left">
                                @foreach ($ingredients as $ingredient)
                                    <span
                                        class="text-[#00000099] font-[400] font_normal text-[18px] leading-[27px] first-letter">
                                        {{ $ingredient->title }} {{ $ingredient->value }}
                                    </span>
                                @endforeach
                            </div>

                        </div>
                    @endif
                    @if (count($steps) > 0)
                        <div
                            class="w-full max-w-[778px] min-w-[378px] recipies_details_ingredients_right py-[32px] max-md:py-[10px] px-[40px] recipes_details_steps_padding_reduce">

                            <h1
                                class="text-[#121F2C] mb-8 font-[600] recipes_details_steps font_normal text-[36px] leading-[36px] text-center md:text-left">
                                Steps To Follow
                            </h1>

                            <p class="text-[#00000099] font-[400] font_normal text-[18px] leading-[27px]">
                                {!! $recipe->steps_description !!}
                            </p>

                            <div class="flex flex-col mt-8 gap-[40px] reduce_gaps">
                                @foreach ($steps as $index => $step)
                                    <div class="gap-[32px] flex justify-start items-start step_top_follow_set_padding">
                                        <span
                                            class="border border-[#00000033] min-w-[48px] rounded-full w-[48px] h-[48px] flex justify-center items-center text-[#121F2C] text-[24px] font-[500]">
                                            {{ $index + 1 }}
                                        </span>
                                        <span class="text-[#00000099] font-[400] font_normal text-[18px] leading-[27px]">
                                            {{ $step->value }}
                                        </span>
                                    </div>
                                @endforeach

                            </div>


                        </div>
                    @endif

                </div>

                @if (count($nutrions) > 0)
                    <div class="recipes-details-nutritional-info w-full  px-5 flex flex-col justify-center items-center">

                        <h1
                            class="text-[#121F2C] mb-8 font-[600] font_normal text-[36px] leading-[36px] remove_nutrition_title_bottom_margin">
                            Nutritional Info
                        </h1>

                        <div
                            class="flex flex-wrap recipes-details-nutritional-info_content justify-center items-center gap-[80px] pb-5 pt-[40px] recipes_reduce_top_padding nutrition_gap_remove reduce_gaps">
                            @foreach ($nutrions as $nutrion)
                                <div class="flex flex-col items-center ">
                                    <span class="text-[#121F2C80] font-[600] text-[20px]font-['Acumin Variable Concept']">
                                        {{ $nutrion->title }}
                                    </span>
                                    <span
                                        class="text-[#121F2C] font-[400] text-[24px] font-stritch font-['Acumin Variable Concept']">
                                        {{ $nutrion->value }}
                                    </span>


                                </div>
                            @endforeach
                        </div>

                    </div>
                @endif
            </div>
        </div>

        @if (count($related_recipes) > 0)
            <div
                class="related-recipies w-full bg-[#FFFFFF] p-[60px] flex justify-center items-center bottom_padding_remove">

                <div
                    class="flex flex-col w-full related_recipes_grid max-w-[1300px] py-[60px] top_padding_reduce bottom_padding_remove">
                    <div class="related-recipies-top w-full flex justify-between items-center related_padding_top">
                        <div class="latest-recipies-title relative">
                            <img class="absolute top-[-65px] left-[0]"
                                src="{{ bagisto_asset('images/latest-recipes-sign.svg') }}" alt="">
                            <h1
                                class="text-[#7E7071] font-[500] font-stritch text-[66px] latest_recipes_title leading-[66px] tracking-[23px]">
                                RELATED RECIPES</h1>
                            <span class="text-[#000000B2] text-[16px] font-[400] leading-[24px]">
                                {{core()->getConfigData('general.content.related_recipe_description.title')}}
                            </span>
                        </div>
                        <div class="latest-recipies-btns flex items-center justify-end gap-5 mt-4">

                            <button onclick="allRelatedProducts()"
                                class="border text-[16px] text-[#121F2C] hover:text-[#FFF] hover:bg-[#121F2C] font-[400] leading-[20px] cursor-pointer border-[#121F2C] w-[138px] h-[48px] rounded-[40px] flex justify-center items-center">
                                View All
                            </button>
                        </div>
                    </div>



                    <div class="recipies-cards grid grid-cols-4 py-10 justify-start gap-8 flex-wrap">
                        @foreach ($related_recipes->take(4) as $relrecipe)
                            <div class="min-w-[295px] w-full max-w-full h-auto cursor-pointer flex flex-col gap-3 justify-start items-start transform transition-transform duration-300 hover:scale-105"
                                onclick="redirectRecipeDetailpage('{{ $relrecipe->category_id }}', '{{ $relrecipe->slug }}')">
                                <img class="w-full h-[400px] object-cover"
                                    src="{{ str_replace('storage', 'cache/original', Storage::url('')) . str_replace('storage/', '', $relrecipe->thumb) }}"
                                    alt="{{ ucwords(strtolower($relrecipe->title)) }}">
                                <span class="text-[#121111] truncate-1-lines font-[600] text-[20px] font_normal">
                                    {{ ucwords(strtolower($relrecipe->title)) }}
                                </span>
                                <span class="text-[#00000099] truncate-2-lines font-[400] font_normal text-[14px]">
                                    {{ $relrecipe->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>
                                    {{ $relrecipe->prep_time }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
</x-shop::layouts>

<script>
    function getyoutubeid(video) {
        const urlObj = new URL(video);
        const youtubeId = urlObj.searchParams.get("v");
        return youtubeId
    }

    function allRelatedProducts() {
        const category_slug = @json($recipe->category_slug);
        console.log(category_slug);

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

    function redirectRecipeDetailpage(categoryid, recipeslug) {
        console.log(categoryid, recipeslug);
        window.location.href = "{{ route('shop.recipie-detail.index', ['', '', '']) }}" + "/" + recipeslug;
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }


    const overlay = document.getElementById('header_overlay');
    if (overlay) {
        overlay.classList.add('header-onscroll');
    }
</script>