@extends('frontend.layouts.web.app')
@section('content')

    <main>

        @if (get_setting('home_slider_images') != null)
            <div class="banner mt-4">

                <div class="container">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            @php $slider_images = json_decode(get_setting('home_slider_images'), true);  @endphp
                            @foreach ($slider_images as $key => $value)
                                <li data-target="#carouselExampleIndicators" data-slide-to="{{$key}}"
                                    class="@if($loop->first) active @endif"></li>
                            @endforeach
                        </ol>
                        <div class="carousel-inner">
                            @php $slider_images = json_decode(get_setting('home_slider_images'), true);  @endphp
                            @foreach ($slider_images as $key => $value)
                                <div class="carousel-item @if($loop->first) active @endif">
                                    <div class="slider-item">

                                        <img src="{{ uploaded_asset($slider_images[$key]) }}"
                                             alt="{{ env('APP_NAME')}} promo"
                                             onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                             class="banner-img">

                                        {{--                                        <div class="banner-content">--}}

                                        {{--                                            <p class="banner-subtitle">Trending item</p>--}}

                                        {{--                                            <h2 class="banner-title">Women's latest fashion sale</h2>--}}

                                        {{--                                            <p class="banner-text">--}}
                                        {{--                                                starting at &dollar; <b>20</b>.00--}}
                                        {{--                                            </p>--}}

                                        {{--                                            <a href="#" class="banner-btn">Shop now</a>--}}

                                        {{--                                        </div>--}}

                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only"></span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only"></span>
                        </a>
                    </div>
                </div>
            </div>
        @endif
        <!--
          - BANNER
        -->


        <div class="category">

            <div class="container">

                <div class="category-item-container has-scrollbar justify-content-center">
                    @if (get_setting('home_banner1_images') != null)
                        @php $banner_1_imags = json_decode(get_setting('home_banner1_images')); @endphp
                        @foreach ($banner_1_imags as $key => $value)
                            <div class="category-item">

                                <img src="{{ uploaded_asset($banner_1_imags[$key])  }}"
                                     alt="{{ env('APP_NAME') }} promo" style="width: 100%;    height: 20vh;
    border-radius: 10px;">


                            </div>
                        @endforeach
                    @endif

                </div>

            </div>

        </div>

        {{--        brands --}}
        @if(count($brands)>0)
            <div class="category mb-5">

                <div class="container">

                    <div class="row justify-content-center">
                        <h3 class="text-center mb-4 text-web">{{translate('brands')}}</h3>
                        @foreach($brands as $brand)

                            <div class="col inner-content d-flex flex-column align-items-center justify-content-center">
                                <div class="img-container rounded-circle">
                                    <a href="{{ route('products.brand', $brand->slug) }}">
                                        <img src="{{ uploaded_asset($brand->logo) }}"
                                             alt="{{ $brand->getTranslation('name') }}"
                                             onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                             class="rounded brand-image" width="75" height="75"></a>
                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>


            </div>
        @endif


        <!--
          - PRODUCT
        -->

        <div class="product-container">

            <div class="container">
                <!--
                  - SIDEBAR
                -->

                <div class="sidebar  has-scrollbar">

                    <div class="sidebar-category">

                        <div class="sidebar-top">
                            <h2 class="sidebar-title">{{translate('category')}}</h2>

                            <button class="sidebar-close-btn" data-mobile-menu-close-btn>
                                <ion-icon name="close-outline"></ion-icon>
                            </button>
                        </div>

                        <ul class="sidebar-menu-category-list">

                            @foreach(\App\Models\Category::where('parent_id',0)->get() as $category)
                                <li class="sidebar-menu-category">

                                    <button class="sidebar-accordion-menu" data-accordion-btn>

                                        <div class="menu-title-flex">
                                            <img src="{{ uploaded_asset($category->icon) }}"
                                                 alt="{{ $category->getTranslation('name') }}"
                                                 onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                 width="20" height="20" class="menu-title-img">

                                            <p class="menu-title"><a
                                                    href="{{ route('products.category', $category->slug) }}">{{$category->getTranslation('name')}}</a>
                                            </p>
                                        </div>

                                        <div>
                                            <ion-icon name="add-outline" class="add-icon"></ion-icon>
                                            <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                                        </div>

                                    </button>

                                    <ul class="sidebar-submenu-category-list" data-accordion>
                                        @foreach(\App\Utility\CategoryUtility::get_immediate_children_ids($category->id) as $id)
                                            <li class="sidebar-submenu-category">
                                                <a href="{{ route('products.category', category($id)->slug) }}"
                                                   class="sidebar-submenu-title">
                                                    <p class="product-name">{{category($id)->getTranslation('name')}}</p>
                                                    <data value="300" class="stock" title="Available Stock">
                                                        {{product_category_count($id)}}</data>
                                                </a>
                                            </li>
                                        @endforeach


                                    </ul>

                                </li>
                            @endforeach
                        </ul>

                    </div>


                </div>


                <div class="product-box">

                    <!--
                      - PRODUCT MINIMAL
                    -->

                    <div class="product-minimal">
                        @if (count($newest_products) > 0)
                            <div class="product-showcase">

                                <h2 class="title">{{translate('New Arrivals')}}</h2>

                                <div class="showcase-wrapper has-scrollbar">
                                    <div class="showcase-container">
                                        @foreach($newest_products as $key=>$product)
                                            @if($key <=3)
                                                <x-small-product-card :product="$product"></x-small-product-card>
                                            @endif
                                        @endforeach

                                    </div>
                                    @if($newest_products->count()>4)
                                        <div class="showcase-container">

                                            @foreach($newest_products as $key=>$product)
                                                @if($key >= 4)
                                                    <x-small-product-card :product="$product"></x-small-product-card>
                                                @endif
                                            @endforeach

                                        </div>
                                    @endif

                                </div>

                            </div>
                        @endif
                        @if (count($featured_products) > 0)
                            <div class="product-showcase">

                                <h2 class="title">{{translate('Trending')}}</h2>

                                <div class="showcase-wrapper  has-scrollbar">

                                    <div class="showcase-container">
                                        @foreach($featured_products as $key=>$product)
                                            @if($key <=3)
                                                <x-small-product-card :product="$product"></x-small-product-card>
                                            @endif
                                        @endforeach

                                    </div>
                                    @if($featured_products->count()>4)
                                        <div class="showcase-container">

                                            @foreach($featured_products as $key=>$product)
                                                @if($key >= 4)
                                                    <x-small-product-card :product="$product"></x-small-product-card>
                                                @endif
                                            @endforeach

                                        </div>
                                    @endif


                                </div>

                            </div>
                        @endif
                        @if (get_setting('best_selling') == 1)
                            @if(count($best_selling_products)> 0)
                                <div class="product-showcase">

                                    <h2 class="title">{{translate('Best Selling')}}</h2>

                                    <div class="showcase-wrapper  has-scrollbar">

                                        <div class="showcase-container">
                                            @foreach($best_selling_products as $key=>$product)
                                                @if($key <=3)
                                                    <x-small-product-card :product="$product"></x-small-product-card>
                                                @endif
                                            @endforeach

                                        </div>
                                        @if($best_selling_products->count()>4)
                                            <div class="showcase-container">

                                                @foreach($newest_products as $key=>$product)
                                                    @if($key >= 4)
                                                        <x-small-product-card
                                                            :product="$product"></x-small-product-card>
                                                    @endif
                                                @endforeach

                                            </div>
                                        @endif


                                    </div>

                                </div>
                            @endif
                        @endif

                    </div>


                    <!--
                      - PRODUCT FEATURED
                    -->

                    @if($flash_deal != null && strtotime(date('Y-m-d H:i:s')) >= $flash_deal->start_date && strtotime(date('Y-m-d H:i:s')) <= $flash_deal->end_date)

                        <div class="product-featured flash_deal"
                             data-date="{{ date('Y/m/d H:i:s', $flash_deal->end_date) }}">

                            <h2 class="title">{{translate('Flash Deal')}}</h2>

                            <div class="showcase-wrapper has-scrollbar">
                                @foreach ($flash_deal->flash_deal_products->take(20) as $key => $flash_deal_product)
                                    @php
                                        $product = \App\Models\Product::find($flash_deal_product->product_id);
                                    @endphp
                                    @if ($product != null && $product->published != 0)
                                        @php
                                            $product_url = route('product', $product->getTranslation('slug'));
                                            if($product->auction_product == 1) {
                                                $product_url = route('auction-product', $product->getTranslation('slug'));
                                            }
                                        @endphp


                                        <div class="showcase-container">

                                            <div class="showcase">

                                                <div class="showcase-banner">
                                                    <img src="{{ uploaded_asset($product->thumbnail_img) }}"
                                                         style="    height: 47vh;"
                                                         alt="{{ $product->getTranslation('name') }}"
                                                         onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                         class=" showcase-img">
                                                </div>

                                                <div class="showcase-content">


                                                    <a href="{{$product_url}}">
                                                        <h3 class="showcase-title">{{ $product->getTranslation('name') }}</h3>
                                                    </a>

                                                    <div class="showcase-rating">
                                                        {{ renderStarRating($product->rating) }}
                                                    </div>

                                                    <p class="showcase-desc">
                                                        {!! Str::limit($product->getTranslation('description'),60) !!}
                                                    </p>

                                                    <div class="price-box">
                                                        <p class="price">{{ home_discounted_base_price($product) }}</p>
                                                        @if(home_base_price($product) != home_discounted_base_price($product))
                                                            <del>{{ home_base_price($product) }}</del>
                                                        @endif
                                                    </div>
                                                    @if ($product->external_link != null)
                                                        <a type="button" class="btn btn-primary buy-now fw-600"
                                                           href="{{ $product->external_link }}">
                                                            <i class="la la-share"></i> {{ translate($detailedProduct->external_link_btn) }}
                                                        </a>
                                                    @else
                                                        {{--                                                <button type="button" class="btn btn-primary mr-2 add-to-cart fw-600"--}}
                                                        {{--                                                        onclick="addToCart()">--}}
                                                        {{--                                                    <i class="las la-shopping-bag"></i>--}}
                                                        {{--                                                    <span class="d-none d-md-inline-block"> {{ translate('Add to cart') }}</span>--}}
                                                        {{--                                                </button>--}}
                                                        {{--                                                <button type="button" class="btn btn-primary buy-now fw-600" onclick="buyNow()">--}}
                                                        {{--                                                    <i class="la la-shopping-cart"></i> {{ translate('Buy Now') }}--}}
                                                        {{--                                                </button>--}}
                                                        <button onclick="showAddToCartModal({{ $product->id }})"
                                                                class="add-cart-btn">{{translate('Add to cart')}}</button>

                                                    @endif

                                                    <div class="showcase-status">
                                                        <div class="wrapper">
                                                            @php
                                                                $qty = 0;
                                                                foreach ($product->stocks as $key => $stock) {
                                                                    $qty += $stock->qty;
                                                                }
                                                            @endphp
                                                            <p>

                                                                {{translate('already sold')}}:
                                                                <b>{{$product->num_of_sale}}</b>
                                                            </p>

                                                            <p>
                                                                @if ($product->stock_visibility_state == 'quantity')

                                                                    {{ translate('available') }}: <b>{{ $qty }}</b>
                                                                @elseif($product->stock_visibility_state == 'text' && $qty >= 1)
                                                                    (<span
                                                                        id="available-quantity">{{ translate('In Stock') }}</span>
                                                                    )
                                                                @endif
                                                            </p>
                                                        </div>

                                                        <style>
                                                            .showcase-status-bar::before {
                                                                width: @if($qty ==0)      100% @else{{($product->num_of_sale / $qty)*100 > 100 ?100:($product->num_of_sale / $qty)*100}}% @endif      !important;
                                                            }
                                                        </style>
                                                        <div class="showcase-status-bar"></div>
                                                    </div>

                                                    <div class="countdown-box">

                                                        <p class="countdown-desc">
                                                            {{translate('Hurry Up! Offer ends in')}}:
                                                        </p>

                                                        <div class="countdown">

                                                            <div class="days"></div>
                                                            <div class="hours"></div>
                                                            <div class="minutes"></div>
                                                            <div class="seconds"></div>


                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    @endif
                                @endforeach

                            </div>

                        </div>
                    @endif

                    <div class="category">

                        <div class="container">

                            <div class="category-item-container has-scrollbar justify-content-center">
                                @if (get_setting('home_banner2_images') != null)
                                    @php $banner_2_imags = json_decode(get_setting('home_banner2_images')); @endphp
                                    @foreach ($banner_2_imags as $key => $value)
                                        <div class="category-item">
                                            <img src="{{ uploaded_asset($banner_2_imags[$key])  }}"
                                                 alt="{{ env('APP_NAME') }} promo" style="width: 100%">
                                        </div>
                                    @endforeach
                                @endif

                            </div>

                        </div>

                    </div>

                    <!--
                      - Today deal
                    -->
                    <div class="product-main">
                        @if(count($todays_deal_products)>0)

                            <h2 class="title">{{translate('Todays Deal')}} <span class="badge badge-success">Hot</span>
                            </h2>
                            <a href="#" class="btn-web view-all">{{translate('view all')}}</a>

                            <div class="product-grid">
                                @foreach($todays_deal_products as $key=>$product)
                                    <x-product-card :product="$product"></x-product-card>
                                @endforeach
                            </div>

                        @endif

                        @if(count($all_products)>0)

                            <h2 class="title">{{translate('Products')}}
                            </h2>
                                <a href="#" class="btn-web view-all">{{translate('view all')}}</a>

                            <div class="product-grid">
                                @foreach($all_products as $key=>$product)
                                    <x-product-card :product="$product"></x-product-card>
                                @endforeach
                            </div>

                        @endif
                    </div>


                </div>

            </div>

        </div>


        <!--
          - TESTIMONIALS, CTA & SERVICE
        -->

        <div>

            <div class="container">

                <div class="testimonials-box">

                    <!--
                      - TESTIMONIALS
                    -->

                    <div class="testimonial">

                        <h2 class="title">testimonial</h2>

                        <div class="testimonial-card">

                            <img src="{{asset('assets/images/testimonial-1.jpg')}}" alt="alan doe"
                                 class="testimonial-banner"
                                 width="80" height="80">

                            <p class="testimonial-name">Alan Doe</p>

                            <p class="testimonial-title">CEO & Founder Invision</p>

                            <img src="{{asset('assets/images/icons/quotes.svg')}}" alt="quotation" class="quotation-img"
                                 width="26">

                            <p class="testimonial-desc">
                                Lorem ipsum dolor sit amet consectetur Lorem ipsum
                                dolor dolor sit amet.
                            </p>

                        </div>

                    </div>


                    <!--
                      - CTA
                    -->

                    <div class="cta-container">

                        <img src="{{asset('assets/images/cta-banner.jpg')}}" alt="summer collection" class="cta-banner">

                        <a href="#" class="cta-content">

                            <p class="discount">25% Discount</p>

                            <h2 class="cta-title">Summer collection</h2>

                            <p class="cta-text">Starting @ $10</p>

                            <button class="cta-btn">Shop now</button>

                        </a>

                    </div>


                    <!--
                      - SERVICE
                    -->

                    <div class="service">

                        <h2 class="title">Our Services</h2>

                        <div class="service-container">

                            <a href="#" class="service-item">

                                <div class="service-icon">
                                    <ion-icon name="boat-outline"></ion-icon>
                                </div>

                                <div class="service-content">

                                    <h3 class="service-title">Worldwide Delivery</h3>
                                    <p class="service-desc">For Order Over $100</p>

                                </div>

                            </a>

                            <a href="#" class="service-item">

                                <div class="service-icon">
                                    <ion-icon name="rocket-outline"></ion-icon>
                                </div>

                                <div class="service-content">

                                    <h3 class="service-title">Next Day delivery</h3>
                                    <p class="service-desc">UK Orders Only</p>

                                </div>

                            </a>

                            <a href="#" class="service-item">

                                <div class="service-icon">
                                    <ion-icon name="call-outline"></ion-icon>
                                </div>

                                <div class="service-content">

                                    <h3 class="service-title">Best Online Support</h3>
                                    <p class="service-desc">Hours: 8AM - 11PM</p>

                                </div>

                            </a>

                            <a href="#" class="service-item">

                                <div class="service-icon">
                                    <ion-icon name="arrow-undo-outline"></ion-icon>
                                </div>

                                <div class="service-content">

                                    <h3 class="service-title">Return Policy</h3>
                                    <p class="service-desc">Easy & Free Return</p>

                                </div>

                            </a>

                            <a href="#" class="service-item">

                                <div class="service-icon">
                                    <ion-icon name="ticket-outline"></ion-icon>
                                </div>

                                <div class="service-content">

                                    <h3 class="service-title">30% money back</h3>
                                    <p class="service-desc">For Order Over $100</p>

                                </div>

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        <!--
          - BLOG
        -->
        @if(count($blogs)>0)
            <div class="blog">

                <div class="container">

                    <div class="blog-container has-scrollbar">
                        @foreach($blogs as $blog)
                            <div class="blog-card">

                                <a href="#">
                                    <img src="{{ uploaded_asset($blog->getTranslation('banner')) }}"
                                         alt="{{ $blog->getTranslation('name') }}"
                                         onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder-rect.jpg') }}';"
                                         width="300"
                                         class="blog-banner">
                                </a>

                                <div class="blog-content">

                                    <a href="#"
                                       class="blog-category">{{ $blog->category?$blog->category->category_name:''}}</a>

                                    <a href="#">
                                        <h3 class="blog-title">{{$blog->getTranslation('name')}}</h3>
                                    </a>

                                    <p class="blog-meta">
                                        By <cite>Mr Admin</cite> /
                                        <time datetime="2022-04-06">{{ date_format( $blog->created_at,'M d,Y') }}</time>
                                    </p>

                                </div>

                            </div>
                        @endforeach

                    </div>

                </div>

            </div>
        @endif
    </main>

@endsection

@section('script')
    <script>
        $(document).ready(function () {
            function makeTimer() {
                //		var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
                // var row = $(this).closest('.flash_deal');
                var date = $('.flash_deal').attr('data-date')
                var endTime = new Date(date);
                endTime = (Date.parse(endTime) / 1000);

                var now = new Date();
                now = (Date.parse(now) / 1000);

                var timeLeft = endTime - now;

                var days = Math.floor(timeLeft / 86400);
                var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
                var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
                var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

                if (hours < "10") {
                    hours = "0" + hours;
                }
                if (minutes < "10") {
                    minutes = "0" + minutes;
                }
                if (seconds < "10") {
                    seconds = "0" + seconds;
                }

                $(".days").html(`<div class="countdown-content">

            <p class="display-number">${days}</p>

            <p class="display-text">Days</p>

        </div>`);
                $(".hours").html(`  <div class="countdown-content">
                                                    <p class="display-number">${hours}</p>
                                                    <p class="display-text">Hours</p>
                                                </div>

                                              `);
                $(".minutes").html(`  <div class="countdown-content">
                                                    <p class="display-number">${minutes}</p>
                                                    <p class="display-text">Min</p>
                                                </div>

                                               `);
                $(".seconds").html(` <div class="countdown-content">
                                                    <p class="display-number">${seconds}</p>
                                                    <p class="display-text">Sec</p>
                                                </div>`);

            }
            setInterval(function () {
                makeTimer();
            }, 1000);
            $.post('{{ route('home.section.best_sellers') }}', {_token: '{{ csrf_token() }}'}, function (data) {
                $('#section_best_sellers').html(data);
            });
        });
    </script>
@endsection