@extends('index')

@section('content')
@include('banner')
<section>
    <div class="container py-4">
        <h1 class="title_1">{{__('custom.高山系列')}}</h1>
        <p class="fz_18 mt-4 mb-4 mb-lg-5 SerifFonts">{{__('custom.將誠摯心意，化作味蕾的感動')}}<br>{{__('custom.成為珍藏一輩子的記憶')}}</p>
        <div class="row g-lg-5">
            <div class="col-lg-5">
                <img class="img-fluid" src="{{asset('images/TeaCeremony.jpg')}}" alt="">
            </div>
            <div class="col-lg-7">
                <div class="swiper-wrapper-wrap TeaLine">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            @foreach($mountain_tea as $product)
                            <div class="swiper-slide">
                                <div class="Item">
                                    <div class="d-flex align-items-center py-2">
                                        <h4 class="title_4 mt-3 SerifFonts"><a href="{{ "/product/{$product->product_id}" }}">{{$product->product_name}}</a></h4>
                                        <a data-product_id="{{$product->product_id}}" class="btn_add_to_cart ms-auto" href="javascript:"><img src="{{asset('images/Icon_Cart.svg')}}" alt=""></a>
                                    </div>
                                    <div>
                                        <a class="swbody" href="{{ "/product/{$product->product_id}" }}">
                                            <img src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$product->product_id.'/'.str_replace('.', '_t.', $product->productAlbum[0]->album_photo)}}" alt="{{$product->product_name}}">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="d-flex justify-content-end align-items-center mt-4 pt-3">
                        <div class="swiper-button-prev hero-prev--mountain"></div>
                        <div class="swiper-button-next hero-next--mountain ms-1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="my-5">
    <div class="bg-white d-flex flex-column flex-lg-row align-items-lg-center pb-4 pb-lg-0">
        <div class="text-center order-1 order-lg-0 RareSeriesText">
            <h3 class="title_2">{{__('custom.精品茶禮')}}</h3>
            <p class="SerifFonts my-4">{{__('custom.每一品茶，都有獨特的個性與風味')}} <br>{{__('custom.細細品嚐舌尖上娓娓道來的故事')}}</p>
            <a class="btn_333" href="/series/tea%20gift%20box">{{__('custom.單筆消費滿千免運')}} <img src="{{asset('images/Icon_ToRight.svg')}}" alt=""></a>
        </div>
        <div class="ms-lg-auto order-0 order-lg-1">
            <picture>
                <source media="(max-width: 991.98px)" srcset="{{asset('images/RareMb.jpg')}}">
                <img class="img-fluid" src="{{asset('images/Rare.jpg')}}" alt="Slide 1">
            </picture>
        </div>
    </div>
</section>

<section>
    <div class="container py-5">
        <h2 class="title_1">{{__('custom.暢銷系列')}}</h2>
        <p class="fz_18 mt-4 mb-4 mb-lg-5 SerifFonts">{{__('custom.當月促銷系列，把悠閒帶回家，讓好茶陪您度過每一刻')}}</p>
        <div class="row g-lg-5">
            <div class="col-lg-5">
                <img class="img-fluid" src="{{asset('images/NewYear.jpg')}}" alt="">
            </div>
            <div class="col-lg-7">
                <div class="swiper-wrapper-wrap TeaLine">
                    <div class="swiper mySwiper1">
                        <div class="swiper-wrapper">
                            @foreach($moon_gift as $product)
                            <div class="swiper-slide">
                                <div class="Item">
                                    <div class="d-flex align-items-center py-2">
                                        <h4 class="title_4 mt-3 SerifFonts"><a href="P{{ "/product/{$product->product_id}" }}">{{$product->product_name}}</a></h4>
                                        <a data-product_id="{{$product->product_id}}" class="btn_add_to_cart ms-auto" href="javascript:"><img src="{{asset('images/Icon_Cart.svg')}}" alt=""></a>
                                    </div>
                                    <div>
                                        <a class="swbody" href="{{ "/product/{$product->product_id}" }}">
                                            <img src="{{'https://changshun.nouveau0713.com/uploadimages/products/'.$product->product_id.'/'.str_replace('.', '_t.', $product->productAlbum[0]->album_photo)}}" alt="{{$product->product_name}}">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="d-flex justify-content-end mt-4 pt-3">
                        <div class="swiper-button-prev hero-prev--moon"></div>
                        <div class="swiper-button-next hero-next--moon"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="my-4 my-lg-5">
    <div class="bg-white d-flex flex-column flex-lg-row align-items-lg-center pb-4 pb-lg-0">
        <picture>
            <source media="(max-width: 991.98px)" srcset="{{asset('images/BrandAgencyMb.jpg')}}">
            <img class="img-fluid" src="{{asset('images/BrandAgency.jpg')}}" alt="Slide 1">
        </picture>
        <div class="text-center RareSeriesText">
            <h3 class="title_2">{{__('custom.品牌代理')}}</h3>
            <p class="SerifFonts my-4">{{__('custom.深厚的團隊優勢與專業技術')}} <br>{{__('custom.隨時為您應援')}}</p>
            <a class="btn_333" href="/brandStory">{{__('custom.觀看更多')}} <img src="{{asset('images/Icon_ToRight.svg')}}" alt=""></a>
        </div>
    </div>
</section>

<section class="mb-5">
    <div class="container pb-4">
        <h2 class="title_1">{{__('custom.最新消息')}}</h2>
        <p class="fz_18 mt-4 mb-4 mb-lg-5 SerifFonts">{{__('custom.隨時掌握一年四季，茶道、茶禮、茶知識的即刻脈動')}}</p>
        <ul class="IndexNewsBox">
            @foreach($news as $new)
            <li>
                <span>{{ $new->news_start_date }}</span>
                <img class="d-none d-lg-block ms-lg-4" src="{{asset('images/Line_32.svg')}}" alt="">
                <a style="text-decoration: none;" href="/news/newsDetail/{{$new->news_id}}">
                    <p class="ms-lg-4">{{ $new->news_title }}</p>
                </a>
                <a class="ms-lg-auto" href="/news/newsDetail/{{$new->news_id}}">
                    <svg width="97" height="18" viewBox="0 0 97 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M95.0859 9.5H0.292969V8.5H95.0859L87.9395 1.35359L88.6466 0.646484L97.0001 9.00004L88.6466 17.3536L87.9395 16.6465L95.0859 9.5Z" fill="currentColor" />
                    </svg>
                </a>
            </li>
            @endforeach
        </ul>
    </div>
</section>

<section class="my-4 my-lg-5">
    <div class="bg-white d-flex flex-column flex-lg-row align-items-lg-center pb-4 pb-lg-0">
        <div class="text-center order-1 order-lg-0 RareSeriesText">
            <h3 class="title_2">{{__('custom.門市據點')}}</h3>
            <p class="SerifFonts my-4">{{__('custom.放鬆身心，駐足片刻，')}} <br>{{__('custom.讓我們為您泡杯茶')}}</p>
            <a class="btn_333" href="/storeLocation">{{__('custom.查詢據點')}} <img src="{{asset('images/Icon_ToRight.svg')}}" alt=""></a>
        </div>
        <div class="ms-lg-auto order-0 order-lg-1">
            <picture>
                <source media="(max-width: 991.98px)" srcset="{{asset('images/StoreLocationsMb.jpg')}}">
                <img class="img-fluid" src="{{asset('images/StoreLocations.jpg')}}" alt="Slide 1">
            </picture>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
    const swiper = new Swiper(".mySwiper", {
        slidesPerView: "auto",
        spaceBetween: 10,
        // centeredSlides: true,
        loop: true,
        observer: true,
        observeParents: true,
        preloadImages: false,
        watchSlidesProgress: true,
        navigation: {
            nextEl: '.hero-next--mountain',
            prevEl: '.hero-prev--mountain'
        },
        pagination: false,
        breakpoints: {
            991: {
                slidesPerView: 1,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 1.7,
                spaceBetween: 20
            }
        },
        on: {
            imagesReady() {
                this.update();
                this.navigation.update();
            }
        }
    });

    const swiper1 = new Swiper(".mySwiper1", {
        slidesPerView: "auto",
        spaceBetween: 10,
        // centeredSlides: true,
        loop: true,
        observer: true,
        observeParents: true,
        preloadImages: false,
        watchSlidesProgress: true,
        navigation: {
            nextEl: '.hero-next--moon',
            prevEl: '.hero-prev--moon'
        },
        pagination: false,
        breakpoints: {
            991: {
                slidesPerView: 1,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 1.7,
                spaceBetween: 20
            }
        },
        on: {
            imagesReady() {
                this.update();
                this.navigation.update();
            }
        }
    });

    /*加入購物車*/
    $('.btn_add_to_cart').on('click', function() {
        let _this = $(this),
            v_data = {
                product_id: _this.data('product_id'),
                product_qty: 1,
                _method: 'POST',
                _token: '{!! csrf_token() !!}'
            };

        $.ajax({
            type: 'POST',
            url: '{{url('cart_process/add_item_to_cart')}}',
            data: $.param(v_data),
            datatype: 'json',
            success: function(msg) {
                if (msg.status) {
                    let qty = parseInt($('#header_itemnum').text()) + 1;
                    $('#header_itemnum').text(qty);

                    Swal.fire({
                        icon: 'success',
                        html: `已加入購物車！`,
                        confirmButtonText: '確定',
                        allowOutsideClick: false
                    });
                } else {
                    Swal.fire({
                        type: 'warning',
                        title: '提示',
                        text: msg.text,
                    });
                }
            },
            error: function() {
                Swal.fire({
                    type: 'error',
                    title: '錯誤',
                    text: '加入購物車失敗，請重整再試',
                });
            }
        });
    });
</script>
@endsection()