@extends('homepage.layouts.master')
@section('page-css')
@endsection
@section('page-content')
    @if (isset($dataWeather))
        <div class="bg-primary">
            <div class="container mx-auto w-full py-[70px] max-lg:py-[20px] min-md:px-4">
                <div class="space-y-8">
                    <div class="flex justify-between items-center max-lg:px-4">
                        <div class="space-y-0.5">
                            <h3 class="text-[20px] max-lg:text-[12px] text-white">
                                {{_t(strtolower($langCode) . '.global.homepage.sub_weather')}}
                            </h3>
                            <h2 class="text-[32px] max-lg:text-[17px] text-white font-bold">
                                {{ $dataWeather['title'] }}
                            </h2>
                        </div>
                        <div class="max-lg:hidden space-x-4">
                            <button class="weather-button-prev">
                                <img src="/homepage/images/weather-prev.svg" alt="weather prev" />
                            </button>
                            <button class="weather-button-next">
                                <img src="/homepage/images/weather-next.svg" alt="weather next" />
                            </button>
                        </div>
                    </div>
                    <div class="weather-carousel swiper swiper-container">
                        <div class="swiper-wrapper max-lg:px-4" id="weatherCarousel">
                            @foreach ($dataWeather["data"] as $product)
                                <a
                                    href="{{ route('recipe.detail', ['langCode' => $langCode, 'slug' => toSlug($product['name'], $langCode), 'recipeDetailId' => $product['id']]) }}"
                                    class="group cursor-pointer swiper-slide max-lg:relative"
                                >
                                    <div class="relative overflow-hidden rounded-lg mb-2">
                                        <img
                                            src="{{ !empty($product['video_id']) ? getImageYoutubeByVideoId($product['video_id']) : 'https://placehold.co/640x360' }}"
                                            alt="{{ $product['name'] }}"
                                            class="max-lg:h-[160px] w-full h-56 object-cover transform group-hover:scale-105 transition duration-300"
                                        />
                                    </div>
                                    <h3 class="text-[24px] max-lg:text-[13px] font-bold transition text-white max-lg:absolute max-lg:bottom-2.5 max-lg:left-2.5">
                                        {{ $product['name'] }}
                                    </h3>
                                    <p class="max-lg:text-[13px] max-lg:hidden text-md text-white line-clamp-2 mt-2">
                                        {{ !empty($product['content']) ? $product['content']->description : '' }}
                                    </p>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    @endif
    <div class="container mx-auto w-full bg-white min-md:px-4">
        <main class="max-lg:mt-[20px] mt-[72px] space-y-[70px] max-lg:space-y-[20px] mb-[90px] max-lg:mb-[20px]">
            @foreach ($data as $title => $recipe)
                <div class="space-y-8 max-lg:space-y-[14px]">
                    <div class="space-y-0.5 max-lg:px-4 flex justify-between items-center">
                        <div>
                            <h3 class="text-[20px] max-lg:text-[12px] text-[#6D6D6D] max-lg:text-[#777777]">
                                {{_t(strtolower($langCode) . '.global.homepage.sub_' . \Str::snake($title))}}
                            </h3>
                            <h2 class="text-[32px] max-lg:text-[16px] max-lg:text-[#111111] text-primary max-lg:text-[#111111] font-bold">
                                {{_t(strtolower($langCode) . '.global.homepage.' . \Str::snake($title))}}
                            </h2>
                        </div>
                        <a
                            href="{{ route('recipe.collection', ['langCode' => $langCode, 'slug' => toSlug(\Str::of($title)->kebab(), $langCode)]) }}"
                            class="border border-{{ $recipeButtonColor[$title] }} text-{{ $recipeButtonColor[$title] }} rounded-lg px-4 py-2 max-lg:px-2 max-lg:text-sm flex items-center gap-2 hover:bg-orange-100 transition whitespace-nowrap"
                        >
                            {{_t(strtolower($langCode) . '.global.homepage.show_more')}} <span class="text-lg max-lg:text-sm">+</span>
                        </a>
                    </div>
                    <div class="grid grid-cols-4 gap-6 max-lg:block max-lg:relative max-lg:overflow-auto">
                        <div class="rounded-lg h-full max-lg:hidden">
                            <img
                            class="rounded-lg h-full w-full object-cover"
                            src="{{ $recipeImages[$title] }}"
                            alt="{{ $title }}"
                        />
                        </div>
                        <div class="col-span-3 max-lg:mx-auto max-lg:min-w-0 no-scrollbar">
                            <div class="grid auto-rows-fr grid-cols-4 max-xl:grid-cols-3 gap-[30px] max-lg:gap-[8px] max-lg:flex max-lg:overflow-x-auto no-scrollbar max-lg:px-4">
                                @foreach ($recipe as $index => $product)
                                    <div class="max-lg:min-w-[140px] {{ $index >= 6 ? 'hidden xl:block' : ''  }}">
                                        @include('homepage.commons.product', ['product' => $product])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @if (!$loop->last)
                    <div class="hidden max-lg:block h-[8px] bg-[#EEEEEE]"></div>
                @endif
            @endforeach
        </main>
    </div>
@endsection
@section('page-js')

@endsection