@extends('template', ['show_menu' => true])
@section('content')
    <!--home page slider start-->
    <section class="home-slider-3">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="menu-slider3">
                        <div class="menu-content"></div>
                        <div class="menu-slider">
                            <div class="home-slider-3">
                                <div class="home-slider3 owl-carousel owl-theme">
                                    @foreach ($banners as $banner)
                                        <div class="items">
                                            <div class="img-back" style="background-image:url({{ $banner->image }});">
                                                <div class="slide-c-1 h-s-content">
                                                    <span class="slider-name">{{ $banner->name }}</span>
                                                    <h1>{{ $banner->title }}<span class="slider-offer"></span>
                                                    </h1>
                                                    <a href="{{ $banner->url }}" class="btn btn-style1">馬上訂購</a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                    <div class="items">
                                        <div class="img-back" style="background-image:url(image/slider9.jpg);">
                                            <div class="slide-c-2 h-s-content">
                                                <span class="slider-name">冰心烤地瓜</span>
                                                <h1>冰的熱的都好吃</h1>
                                                <a href="{{ url('products/3') }}" class="btn btn-style1">馬上訂購</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="items">
                                        <div class="img-back" style="background-image:url(image/slider8.jpg);">
                                            <div class="slide-c-3 h-s-content">
                                                <span class="slider-name">超火熱銷</span>
                                                <h1>鮮嫩多汁烤乳豬<br><span class="slider-offer">金黃脆皮超酥脆</span>
                                                </h1>
                                                <a href="{{ url('products/3') }}" class="btn btn-style1">馬上訂購</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--home page slider end-->
    <!-- service start -->
    <section class="service-section section1-t-padding">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="service">
                        <div class="service-box">
                            <div class="s-box">
                                <i class="ti-truck"></i>
                                <div class="service-content">
                                    <span>新鮮送達</span>
                                    <p>省錢.省時.省力,只管輕鬆去烤肉</p>
                                </div>
                            </div>
                        </div>
                        <div class="service-box">
                            <div class="s-box">
                                <i class="ti-star"></i>
                                <div class="service-content">
                                    <span>專業認證</span>
                                    <p> ISO9001 & HACCP 雙認證</p>
                                </div>
                            </div>
                        </div>
                        <div class="service-box">
                            <div class="s-box">
                                <i class="ti-bag"></i>
                                <div class="service-content">
                                    <span>烤肉的便利商店</span>
                                    <p>食材器具分組.分箱裝好,全年無休</p>
                                </div>
                            </div>
                        </div>
                        <div class="service-box">
                            <div class="s-box">
                                <i class="ti-package"></i>
                                <div class="service-content">
                                    <span>烤肉的魔術師</span>
                                    <p>專業控管,格式多變化</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- service end -->
    <!-- banner grid start -->
    <section class="pt-2">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="left-right-column">
                        <div class="right-column">
                            <!-- teb product start -->
                            <div class="pro-tab">
                                <div class="section-title3">
                                    <h2><span>精選烤肉食材</span></h2>
                                </div>
                                <ul class="nav nav-tabs">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#home">精選套餐</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#profile">美味單點</a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-pro-slider">
                                    <div class="tab-pane fade show active" id="home">
                                        <div class="our-pro-tab swiper-container">
                                            <div class="swiper-wrapper">
                                                @foreach ($new_products as $product)
                                                    <div class="swiper-slide">
                                                        <div class="tab-product">
                                                            <div class="tred-pro">
                                                                <div class="tr-pro-img">
                                                                    <a href="{{ url('products/' . $product->productID) }}">
                                                                        <img src="{{ asset('uploads/products/' . $product->productID . '.jpg') }}"
                                                                            alt="pro-img1" class="img-fluid">
                                                                        {{-- <img src="image/pro/pro-img-04.jpg"
                                                                            alt="additional image"
                                                                            class="img-fluid additional-image"> --}}
                                                                    </a>
                                                                </div>
                                                                <div class="Pro-lable">
                                                                    {{-- <span class="p-text">New</span> --}}
                                                                </div>
                                                                <div class="pro-icn">
                                                                    <a href="javascript:void(0)"
                                                                        data-product = "{{ $product->productID }}"
                                                                        onclick="addToFavorite(this)"
                                                                        class="w-c-q-icn {{ $product->inWish() ? 'active' : '' }}"><i
                                                                            class="fa fa-heart"></i></a>
                                                                    <a href="javascript:void(0)"
                                                                        onclick="addToCart({{ $product->productID }},1)"
                                                                        class="w-c-q-icn"><i
                                                                            class="fa fa-shopping-bag"></i></a>
                                                                    <a href="javascript:void(0)" class="w-c-q-icn"
                                                                        onclick="popupProduct({{ $product->productID }},'exampleModal')"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#exampleModal"><i
                                                                            class="fa fa-eye"></i></a>
                                                                </div>
                                                            </div>
                                                            <div class="tab-caption">
                                                                <h3><a
                                                                        href="/products/{{ $product->productID }}">{{ $product->name }}</a>
                                                                </h3>
                                                                <div class="pro-price">
                                                                    <span class="new-price">${{ $product->price }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="swiper-buttons">
                                            <div class="content-buttons">
                                                <div class="swiper-button-next" tabindex="0" role="button"
                                                    aria-label="Next slide" aria-disabled="false"></div>
                                                <div class="swiper-button-prev swiper-button-disabled" tabindex="0"
                                                    role="button" aria-label="Previous slide" aria-disabled="true">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="profile">
                                        <div class="our-pro-tab swiper-container">
                                            <div class="swiper-wrapper">
                                                @foreach ($featured_products as $product)
                                                    <div class="swiper-slide">
                                                        <div class="tab-product">
                                                            <div class="tred-pro">
                                                                <div class="tr-pro-img">
                                                                    <a
                                                                        href="{{ url('products/' . $product->productID) }}">
                                                                        <img src="{{ asset('uploads/products/' . $product->productID . '.jpg') }}"
                                                                            alt="pro-img1" class="img-fluid">
                                                                        {{-- <img src="image/pro/pro-img-07.jpg"
                                                                            alt="additional image"
                                                                            class="img-fluid additional-image"> --}}
                                                                    </a>
                                                                </div>
                                                                <div class="Pro-lable">
                                                                    {{-- <span class="p-text">Hot</span> --}}

                                                                    {{-- <span class="p-discount">-10%</span> --}}
                                                                </div>
                                                                <div class="pro-icn">
                                                                    <a href="javascript:void(0)"
                                                                        data-product = "{{ $product->productID }}"
                                                                        onclick="addToFavorite(this)"
                                                                        class="w-c-q-icn {{ $product->inWish() ? 'active' : '' }}"><i
                                                                            class="fa fa-heart"></i></a>
                                                                    <a href="javascript:void(0)"
                                                                        onclick="addToCart({{ $product->productID }},1)"
                                                                        class="w-c-q-icn"><i
                                                                            class="fa fa-shopping-bag"></i></a>
                                                                    <a href="javascript:void(0)" class="w-c-q-icn"
                                                                        onclick="popupProduct({{ $product->productID }},'exampleModal')"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#exampleModal"><i
                                                                            class="fa fa-eye"></i></a>
                                                                </div>
                                                            </div>
                                                            <div class="tab-caption">
                                                                <h3><a
                                                                        href="/products/{{ $product->productID }}">{{ $product->name }}</a>
                                                                </h3>
                                                                <div class="pro-price">
                                                                    <span class="new-price">${{ $product->price }}</span>
                                                                    {{-- <span class="old-price"><del>$590.00 USD</del></span> --}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </div>
                                        <div class="swiper-buttons">
                                            <div class="content-buttons">
                                                <div class="swiper-button-next" tabindex="0" role="button"
                                                    aria-label="Next slide" aria-disabled="false"></div>
                                                <div class="swiper-button-prev swiper-button-disabled" tabindex="0"
                                                    role="button" aria-label="Previous slide" aria-disabled="true">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- teb product end -->
                            <!-- deal of the day start -->
                            <div class="deal3-banner section1-t-padding">
                                <div class="deal">
                                    <div class="deal-day owl-carousel owl-theme">
                                        @foreach ($special_products as $product)
                                            <div class="items">
                                                <div class="deal-area">
                                                    <div class="deal-img">
                                                        <a href="{{ url('product/' . $product->productID) }}">
                                                            <img src="{{ asset($product->images[0] ?? 'images/high.jpg') }}"
                                                                class="img-fluid" alt="deal-image">
                                                        </a>
                                                        <div class="Pro-lable">
                                                            <span class="p-discount">-18%</span>
                                                        </div>
                                                    </div>
                                                    <div class="deal-caption">
                                                        <div class="deal-title">
                                                            <h4>限時特價</h4>
                                                            <h3>今日特價商品</h3>
                                                        </div>

                                                        <h3 class="deal-pro-name"><a
                                                                href="products/{{ $product->productID }}">
                                                                {{ $product->name }}</a>
                                                        </h3>
                                                        <div class="deal-price">
                                                            <span class="new-price">${{ $product->price }}</span>
                                                            <span class="old-price"><del>$999</del></span>
                                                        </div>
                                                        <ul class="contdown_row">
                                                            <li class="countdown_section">
                                                                <span id="days" class="countdown_timer">254</span>
                                                                <span class="countdown_title">Day</span>
                                                            </li>
                                                            <li class="countdown_section">
                                                                <span id="hours" class="countdown_timer">11</span>
                                                                <span class="countdown_title">Hrs</span>
                                                            </li>
                                                            <li class="countdown_section">
                                                                <span id="minutes" class="countdown_timer">33</span>
                                                                <span class="countdown_title">Min</span>
                                                            </li>
                                                            <li class="countdown_section">
                                                                <span id="seconds" class="countdown_timer">36</span>
                                                                <span class="countdown_title">Sec</span>
                                                            </li>
                                                        </ul>
                                                        <a href="javascript:void(0)"
                                                            onclick="addToCart({{ $product->productID }},1)"
                                                            class="deal-cart"><i class="fa fa-shopping-bag"></i>加入購物車</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <!-- deal of the day end -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('shorts.quick_view')
@endsection