@extends('homepage.layouts.master', ['typeHeader' => 'headerPage'])
@section('page-css')
@endsection
@section('page-content')
    @if ($recipeDetail)
    @endif
    <div class="max-sm:pt-[20px] max-sm:pb-[20px] max-sm:mb-[8px]  mx-auto w-full bg-white pt-[72px] pb-[96px]">
        <main class="">
            <div class="max-sm:px-[16px] max-xl:px-[30px]  px-[7.5rem]">
                {{-- <div class="max-sm:pb-0 pb-4">
                    <h4 class="max-sm:text-[12px] text-[20px] text-[#6d6d6d]">Trang chủ / Công thức</h4>
                    <h2 class="max-sm:text-[16px] text-xl md:text-[32px] font-medium text-[#ff6741]">
                        {{ $recipeDetail['name'] }}
                    </h2>
                </div> --}}
                @include('homepage.commons.breadcrumb', [
                    'link' => _t(strtolower($langCode) . '.global.homepage.home'),
                    'title' => _t(strtolower($langCode) . '.global.homepage.recipe'),
                    'subtitle' => $recipeDetail['name'],
                ])
                <div class="max-sm:border-none max-sm:pt-[14px] border-t-2 border-[#eeeeee] pt-[24px]">
                    <div class="max-sm:gap-y-1 grid grid-cols-3 gap-6 items-start h-full">
                        <div
                            class="max-sm:w-full max-xl:col-span-3 text-sm font-medium tracking-tighter text-center text-black max-md:max-w-full">
                            <div class="max-sm:h-[328px] h-[310px]">
                                <img loading="lazy"
                                    src="{{ isset($recipeDetail['video_id']) ? 'https://img.youtube.com/vi/' . $recipeDetail['video_id'] . '/hqdefault.jpg' : '' }}"
                                    class="object-cover max-w-full rounded-xl aspect-[1.77] w-full h-full"
                                    alt="{{ $recipeDetail['name'] }}" />
                            </div>

                            <section
                                class="max-sm:pb-[8px]  flex flex-wrap gap-6 items-start justify-end py-6.5 w-full max-md:max-w-full">
                                <article
                                    class="flex relative z-10 flex-col aspect-[1.571] w-[66px] max-md:pr-0 items-center">
                                    <img loading="lazy" src="{{ asset('homepage/images/clock.png') }}" class=" "
                                        alt="Cooking time icon" />
                                    <p class="text-[14px] font-medium">
                                        {{ !empty($recipeDetail['content']) ? $recipeDetail['content']->cooking_duration : '' }}
                                    </p>
                                </article>

                                <article
                                    class="flex relative z-10 flex-col aspect-[1.214] w-[51px] max-md:pr-0 items-center">
                                    <img loading="lazy" src="{{ asset('homepage/images/kcal.png') }}" class=""
                                        alt="Calories icon" />
                                    <p class="text-[14px] font-medium">
                                        {{ !empty($recipeDetail['content']) ? $recipeDetail['content']->calories : '' }}</p>
                                </article>

                                <article
                                    class="flex relative flex-col whitespace-nowrap aspect-[0.867] w-[39px] items-center">
                                    <img loading="lazy" src="{{ asset('homepage/images/share.png') }}"
                                        class="cursor-pointer" id="openModalShare" alt="Share icon" />
                                    <p class="text-[14px] font-medium">
                                        {{ _t(strtolower($langCode) . '.global.homepage.detail.share') }}</p>
                                </article>
                            </section>
                        </div>
                        @if (!empty($recipeDetail['content']))
                            <main class="col-span-2 max-xl:col-span-3 basis-0 min-w-60 max-md:max-w-full">
                                <h2
                                    class="max-sm:text-[13px] max-sm:font-bold text-[25px] font-medium tracking-wide text-black max-md:max-w-full">
                                    {{ !empty($recipeDetail['content']) ? $recipeDetail['content']->description : '' }}
                                </h2>

                                <p
                                    class="max-sm:text-[14px] max-sm:mt-[12px] mt-[24px] text-[14px] tracking-tighter text-[#777777] max-md:max-w-full">
                                    {{ str_replace('{calories}', !empty($recipeDetail['content']) ? $recipeDetail['content']->calories : '', _t(strtolower($langCode) . '.global.homepage.detail.calories_description')) }}
                                </p>

                                <section
                                    class="max-sm:mt-[32px] max-sm:mb-[30px] flex flex-wrap gap-x-6 items-start mt-[48px] w-full max-md:max-w-full">
                                    <article class="max-sm:mb-[24px] text-black rounded-3xl min-w-60 w-[292px]">
                                        <h2 class=" max-w-full text-[24px] font-bold w-[292px]">
                                            {{ _t(strtolower($langCode) . '.global.homepage.detail.ingredients') }}
                                            <span class="font-normal text-[20px] leading-[30px] text-[#777777]">
                                                {{ _t(strtolower($langCode) . '.global.homepage.detail.part_one_person') }}
                                            </span>
                                        </h2>

                                        <ul class="mt-4 text-base tracking-wide leading-7">
                                            @foreach ($recipeDetail['content']->ingredient as $key => $itemRecipe)
                                                <li class="text-[16px]">{{ $key + 1 }}. {{ $itemRecipe->name }}</li>
                                            @endforeach
                                        </ul>


                                    </article>

                                    <article class="flex-1 shrink rounded-3xl basis-0 min-w-60 max-md:max-w-full">
                                        <h2 class=" max-w-full text-[24px] font-bold text-black w-[315px]">
                                            {{ _t(strtolower($langCode) . '.global.homepage.detail.how_to_cook') }}
                                        </h2>

                                        <div
                                            class="max-sm:max-h-[max-content] max-sm:overflow-y-hidden flex gap-2.5 items-start mt-4 w-full max-md:max-w-full max-h-[376px] overflow-y-scroll custom-scrollbar">
                                            <div class="max-sm:w-full flex flex-wrap gap-4 items-start min-w-60 w-[787px]">
                                                <section
                                                    class="flex-1 shrink text-base tracking-wide leading-8 text-black basis-0 min-w-60 max-md:max-w-full pr-[5px]">
                                                    @foreach ($recipeDetail['content']->step as $key => $itemRecipeStep)
                                                        <article class="max-md:max-w-full mb-[16px]">
                                                            <p class="text-[16px]">
                                                                {{ $key + 1 }}. {{ $itemRecipeStep->name }}
                                                            </p>
                                                            @if (!empty($itemRecipeStep->detail) && is_array($itemRecipeStep->detail))
                                                                @foreach ($itemRecipeStep->detail as $key => $itemRecipeStepDetail)
                                                                    <p class="text-[16px]">
                                                                        {{ $itemRecipeStepDetail }}
                                                                    </p>
                                                                @endforeach
                                                            @endif
                                                        </article>
                                                    @endforeach
                                                </section>
                                            </div>
                                        </div>
                                    </article>
                                </section>
                            </main>
                        @endif
                    </div>
                </div>
            </div>
            <div class="max-sm:block hidden bg-[#eeeeee] w-full h-[20px]"></div>
            @if ($recipeDetail['youtube_videos'])
                <section class="max-sm:mt-[20px] mt-[45px]  w-full bg-white">
                    <h3
                        class="max-sm:text-[16px] max-sm:text-[#111111] max-sm:mb-[10px] max-sm:px-[16px] max-xl:px-[30px]  px-[7.5rem] text-[32px] text-[#ff6741] font-bold mb-[45px]">
                        {{ _t(strtolower($langCode) . '.global.homepage.detail.video_recipe') }}</h3>
                    <div
                        class="max-sm:overflow-x-scroll max-sm:px-[16px] max-xl:px-[30px]  max-xl:overflow-x-scroll px-[7.5rem] flex flex-col items-start  no-scrollbar">
                        <div class="max-sm:gap-x-2 flex gap-x-6">
                            @php
                                $countVideo =
                                    count($recipeDetail['youtube_videos']) > 4
                                        ? 4
                                        : count($recipeDetail['youtube_videos']);
                            @endphp
                            @foreach (array_slice($recipeDetail['youtube_videos'], 0, $countVideo) as $key => $itemRecipeVideo)
                                <div class="max-sm:w-[280px] max-xl:w-[280px] w-1/4 item-video cursor-pointer"
                                    data-videoId="{{ $itemRecipeVideo['videoId'] }}">
                                    <div class="max-sm:h-[157px] h-[275px] relative w-full">
                                        <img src="{{ isset($itemRecipeVideo['videoId']) ? 'https://img.youtube.com/vi/' . $itemRecipeVideo['videoId'] . '/hqdefault.jpg' : $itemRecipeVideo['thumbnail'] }}"
                                            src="https://img.youtube.com/vi/apC3NNoKaVI/hqdefault.jpg"
                                            alt="{{ $itemRecipeVideo['title'] }}"
                                            class="object-cover w-full h-full rounded-xl " title="channelTitle" />
                                        <span
                                            class="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 z-[10]">
                                            <img src="{{ asset('homepage/images/play.png') }}" alt="play" />
                                        </span>
                                    </div>
                                    <p
                                        class="max-sm:text-[13px] max-sm:mt-[5px] mt-[16px] text-[24px] font-bold text-[#111111] line-clamp-2">
                                        {!! $itemRecipeVideo['title'] !!}
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            <div id="modalShare"
                class="max-sm:px-[16px] fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full inset-0 bg-black/50 flex items-center justify-center hidden z-[99]">
                <!-- Modal Content -->
                <div class="max-sm:w-full bg-white rounded-lg shadow-lg w-96 p-6 relative">
                    <h2 class="text-xl font-semibold mb-4"></h2>
                    <img id="closeModalShare" class="absolute right-[10px] top-[10px]"
                        src="{{ asset('homepage/images/icon_close.svg') }}" alt="icon_close" />
                    <div>
                        <div class="bg-white px-4 py-[30px] sm:p-6 sm:pb-4 text-lg font-medium text-center pb-[20px]">
                            <div>
                                <h3 class="text-[14px] font-medium text-[#111111]">
                                    {{ _t(strtolower($langCode) . '.global.homepage.detail.share_this_recipe') }}
                                </h3>
                                <div class="py-[20px]">
                                    <div class="flex gap-x-2.5 justify-center">
                                        <button class="gap-y-2" onclick="shareOnFacebook()">
                                            <img src="{{ asset('homepage/images/icon_fb.svg') }}" alt="FbShare"
                                                class=" shrink-0 aspect-square w-[50px]" />
                                        </button>
                                        <button class="gap-y-2" onclick="shareOnKakao()">
                                            <img src="{{ asset('homepage/images/icon_kakao.svg') }}" alt="KakaoShare"
                                                class=" shrink-0 aspect-square w-[50px]" />
                                        </button>
                                    </div>
                                </div>
                                <div class="bg-[#f8f8f8] rounded-[4px]">
                                    <div class="flex justify-between pl-[10px] items-center h-[40px] pr-[20px] relative">
                                        <div class="flex items-center w-[calc(100%-75px)]">
                                            <img src="{{ asset('homepage/images/icon_copy.svg') }}" alt="CopyShare"
                                                class="object-contain shrink-0 aspect-square w-[18px] h-[18px] mr-[5px]" />
                                            <label for="" class="text-[12px] whitespace-nowrap overflow-hidden"
                                                id="urlShare">
                                            </label>
                                        </div>
                                        <label id="copyLink" onclick="handleCopy()" for=""
                                            class="text-[12px] text-[#999999] font-medium whitespace-nowrap">
                                            {{ _t(strtolower($langCode) . '.global.homepage.detail.copy') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div id="modalVideo"
                class="max-sm:px-[16px] fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full inset-0 bg-black/50 flex items-center justify-center hidden z-[99]">
                <div
                    class="max-sm:w-full max-sm:h-[350px] bg-white rounded-lg shadow-lg w-[750px] h-[450px] p-6 relative pt-[36px]">
                    <img id="closeModalVideo" class="absolute right-[10px] top-[10px]"
                        src="{{ asset('homepage/images/icon_close.svg') }}" alt="icon_close" />
                    <div class="h-full">
                        <iframe id="iframeVideo" width="100%" height="100%" src="" frameborder="0"
                            allowfullscreen>
                        </iframe>
                    </div>
                    {{-- <div class="flex justify-end space-x-2">
                        <button id="closeModalVideo" class="px-4 py-2 bg-gray-300 rounded-lg">Close</button>
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save</button>
                    </div> --}}
                </div>
            </div>


        </main>
    </div>
@endsection
@section('page-js')
    <script>
        const recipeDetail = @json($recipeDetail);
        // const datePublished = new Date().toISOString().split('T')[0];

        // const jsonLdData = {
        //     "@context": "https://schema.org",
        //     "@type": "Recipe",
        //     "name": recipeDetail?.name,
        //     "image": "https://heycooker.dev.e777.biz/images/buchimgae.jpg",
        //     "author": {
        //         "@type": "Person",
        //         "name": "HeyCooker"
        //     },
        //     "datePublished": datePublished,
        //     "description": recipeDetail?.content?.description,
        //     "recipeIngredient": recipeDetail?.content?.ingredient?.map(item => item.name),
        //     "recipeInstructions": recipeDetail?.content?.step?.map(item => ({
        //         "@type": "HowToStep",
        //         "text": item.name
        //     }))
        // };

        // document.addEventListener("DOMContentLoaded", () => {
        //     const script = document.createElement("script");
        //     script.type = "application/ld+json";
        //     script.textContent = JSON.stringify(jsonLdData);
        //     document.head.appendChild(script);
        // });
    </script>


    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        const configKeyKakao = @json(config('app.key_kakaotalk_homepage'));
        const id = @json($recipeDetail['id']);

        const transCopiedText = @json(_t(strtolower($langCode) . '.global.homepage.detail.copied'));
        const transCopyText = @json(_t(strtolower($langCode) . '.global.homepage.detail.copy'));
        const titleHeaderPage = document.getElementById("titleHeaderPage");

        if (screen.width < 768) {
            document.body.classList.add('bg-[#eeeeee]');
        } else {
            if (titleHeaderPage) {
                titleHeaderPage.textContent = recipeDetail?.name;
            }
        }
        const urlShare = document.getElementById("urlShare");

        const modal = document.getElementById("modalShare");
        const openModalBtn = document.getElementById("openModalShare");
        const closeModalBtn = document.getElementById("closeModalShare");
        openModalBtn.addEventListener("click", () => {
            modal.classList.remove("hidden");
        });
        closeModalBtn.addEventListener("click", () => {
            modal.classList.add("hidden");
        });
        modal.addEventListener("click", (e) => {
            if (e.target === modal) {
                modal.classList.add("hidden");
            }
        });
        let envApp = "web";

        function paramsShare(params) {
            let apiVersion = "1.3.0";
            let langCurrent = "vi";

            let recipeRequestId = params;
            let dataShareSns = "facebook,kakao";
            let webviewVersion = "1.3.0";
            const paramUrlShare =
                `recipeId=${id}&requestId=${recipeRequestId}&v=${apiVersion}&lang=${langCurrent}&data=${dataShareSns}&ev=${envApp}&va=${webviewVersion}`;
            const encodedString = btoa(unescape(encodeURIComponent(paramUrlShare))); // Mã hóa
            return encodedString;
        }
        let hostHome = "https://heycooker.e777.biz";

        const modalVideo = document.getElementById("modalVideo");
        const openModalBtnVideo = document.getElementById("openModalVideo");
        const closeModalBtnVideo = document.getElementById("closeModalVideo");
        const iframeVideo = document.getElementById("iframeVideo");

        const copyLink = document.getElementById("copyLink");
        let linkShare = `${hostHome}/share.html?token=${paramsShare(envApp)}`;
        linkShare = window.location.href;
        urlShare.textContent = linkShare;

        // openModalBtnVideo.addEventListener("click", () => {
        //     modalVideo.classList.remove("hidden");
        // });

        const openModalButtons = document.querySelectorAll(".item-video");

        openModalButtons.forEach(button => {
            button.addEventListener("click", () => {
                const videoId = button.getAttribute("data-videoId");
                iframeVideo.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
                modalVideo.classList.remove("hidden");
            });
        });

        closeModalBtnVideo.addEventListener("click", () => {
            modalVideo.classList.add("hidden");
            iframeVideo.src = ``;
        });
        modalVideo.addEventListener("click", (e) => {
            if (e.target === modalVideo) {
                modalVideo.classList.add("hidden");
            }
        });

        function handleCopy() {
            const valueCopy = linkShare
            const input = document.createElement('input');
            input.setAttribute('readonly', 'readonly');
            input.setAttribute('value', valueCopy);
            document.body.appendChild(input);
            input.setSelectionRange(0, 9999); // Select all text in input
            input.select();
            document.execCommand('copy');
            document.body.removeChild(input);
            copyLink.classList.add("!text-[#2FCF78]");
            copyLink.textContent = transCopiedText;
            setTimeout(() => {
                copyLink.classList.remove("!text-[#2FCF78]");
                copyLink.textContent = transCopyText;
            }, 3000);
        }

        // function shareOnFacebook() {
        //     const url = encodeURIComponent(window.location.href);
        //     const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
        //     window.open(fbShareUrl, "_blank", "width=600,height=400");
        // }

        function shareOnFacebook() {
            const url = encodeURIComponent(window.location.href);
            window.open(
                `https://www.facebook.com/sharer.php?display=popup&u=${url}`,
                '_blank',
                'width=600,height=400,toolbar=0,status=0'
            );
        }

        function shareOnFacebookOld() {
            try {
                const currentUrl = window.location.href;

                // Sử dụng Facebook Share Dialog chính thức
                const fbShareUrl = new URL('https://www.facebook.com/dialog/share');
                fbShareUrl.searchParams.append('app_id', 'YOUR_FB_APP_ID'); // Bắt buộc nếu dùng dialog
                fbShareUrl.searchParams.append('href', encodeURIComponent(currentUrl));
                fbShareUrl.searchParams.append('redirect_uri', currentUrl);

                // Mở cửa sổ chia sẻ
                const windowOptions = `width=600,height=400,left=${(screen.width-600)/2},top=${(screen.height-400)/2}`;
                const shareWindow = window.open(
                    fbShareUrl.toString(),
                    'fb-share-dialog',
                    windowOptions
                );

                // Fallback nếu trình chặn popup hoạt động
                if (!shareWindow || shareWindow.closed) {
                    window.location.href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`;
                }
            } catch (error) {
                console.error('Facebook share failed:', error);
                // Fallback thứ cấp
                window.open(
                    `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`,
                    '_blank'
                );
            }
        }


        if (!Kakao.isInitialized()) {
            Kakao.init(configKeyKakao);
        }

        function shareOnKakao() {
            Kakao.Link.sendDefault({
                objectType: "feed",
                content: {
                    title: recipeDetail?.name, // Tiêu đề
                    description: recipeDetail?.content?.description, // Mô tả
                    imageUrl: `https://img.youtube.com/vi/${recipeDetail?.videoId}/hqdefault.jpg`, // URL hình ảnh
                    link: {
                        mobileWebUrl: window.location.href,
                        webUrl: window.location.href,
                    },
                },
            });
        }
    </script>
@endsection