@extends('app')
@section('content')
<style>
    div.quantity_box button[type="button"] {
        padding: 0 5px;
        min-width: 25px;
        min-height: unset;
        height: 42px;
        border: 2px solid rgb(211, 211, 211);
        background: white;
        box-shadow: none;
        color: black;
        border-radius: 0;
    }
    
    .countdown_box{
        display: flex;
        flex-warp: wrap;
        align-items: center;
        gap: 10px;
        padding: 8px;
    }
    .countdown_box .count_item{
        height: 120px;
        width: 120px;
        display: grid;
        place-content: center;
        border-radius: 50%;
        border: 3px solid white;
    }
    

    
    @media (max-width: 769px){
        .countdown_box .count_item{
            height: 70px;
            width: 70px;
            font-size: 20px;
        }
    }
    @media(min-width: 1200px){
        .min-h-430{
            min-height: 430px;
        }
    }
    .service-support-box a {
        color: #000;
    }
    .divide {
        padding-top: 16px;
    }
    
    .feature-cat {
        box-shadow: 1px 1px 4px 0px #bbbbbb;
    }
    
    .col-lg-feaCat {
        flex: 0 0 auto;
        width: 10.3%;
        /*background: #fff;*/
        /*border-radius: 7%;*/
    }
    .col-lg-feaCat .category img:hover{
        scale: 1.1;
    }
   

    p.featureItem {
        color: #000;
        font-weight: 600;
        font-size: 12px;
        margin: 6px 0;
    }
    .img-fluid {
        max-width: 85%;
        height: auto;
        clip-path: polygon(50% 0, 100% 25%, 100% 80%, 50% 101%, 0 80%, 0 25%);
    }
    
    .promo-v1{
        font-size: 26px;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

    
    @media (min-width: 320px) and (max-width: 768px) {
        .col-lg-feaCat {
            flex: 0 0 auto;
            width: 30%;
        }
        .category_products .banner .title {
            font-size: 40px;
        }
        .category_products .banner {
            flex-wrap: wrap;
            padding: 10px;
            justify-content: center;
        }
    }
    
   
    @media (min-width: 769px) and (max-width: 1024px) {
        .col-lg-feaCat {
            flex: 0 0 auto;
            width: 23%;
        }
        p.featureItem {
           font-size: 14px; 
           margin-top: -24px;
        }
    }
    @media (min-width: 1200px) and (max-width: 2600px) {
        .category_dropdown_box .categories{
            height: 452px;
        }
        .heightFixed{
            height: 445px;
        }
    }
    .bg_image{
        height: 445px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .date_title{
        font-size: 30px;
    }
    .date_see_all{
        white-space: nowrap;
    }
    .promo-count{
        padding: 2px 10px;color: #ffffff;border-radius: 2px;vertical-align: middle;font-size: 50px;
    }
    @media (max-width: 1300px){
        .promo-count{
            padding: 2px 10px;color: #ffffff;border-radius: 2px;vertical-align: middle;font-size: 30px;
        }
        .countdown_box .count_item{
            height: 80px;
            width: 80px;
            display: grid;
            place-content: center;
            border-radius: 50%;
            border: 3px solid white;
        }
    }
    @media(max-width: 1200px){
        .bg_image{
            height: 423px;
        }
        .date_title{
            font-size: 25px;
        }
    }
    @media(max-width: 768px){
        .bg_image{
            height: 200px;
        }
        .date_title{
            font-size: 20px;
        }
        .date_see_all {
            font-size: 25px;
            margin-top: 10px;
        }
        
        .category_products .banner .title {
            font-size: 40px;
        }
        .countdown_box .count_item{
            height: 80px;
            width: 80px;
            font-size: 30px;
        }
        
    }
    
    @media (max-width: 420px) {
        .category_products .banner .title {
            font-size: 35px;
        }
        .countdown_box .count_item {
            height: 70px;
            width: 70px;
        }
    }
    
     @media (min-width: 450px) and (max-width: 649px){
        .countdown_box .count_item{
            height: 95px;
            width: 95px;
            font-size: 40px;
        }
        .category_products .banner .title {
            font-size: 45px;
        }
     }
     @media (min-width: 650px) and (max-width: 768px){
        .countdown_box .count_item{
            height: 120px;
            width: 120px;
            font-size: 50px;
        }
        .category_products .banner .title {
            font-size: 60px;
        }
        .date_see_all {
            font-size: 40px;
            margin-top: 20px;
        }

     }
</style>

@php
    $home_footers = DB::table('home_footers')->first();
@endphp

<div class="container-xl">
    <div class="row">
      <div class="col-lg-4 " style="width: 290px;"></div>
      <div class="col-lg-8 flex-grow-1 min-h-430">
        <div id="main_carousel" class="carousel slide ps-lg-2 pt-2 h-100" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                @foreach($sliders as $key=>$sld)
                <li data-bs-target="#main_carousel" data-bs-slide-to="{{$key}}" class="{{$key==0?'active':''}}" aria-current="true" aria-label="{{ $sld->title }}" ></li>
                @endforeach
            </ol>
          <div class="carousel-inner h-100" role="listbox">
            @foreach($sliders as $key=>$sl)
            <div class="carousel-item {{$key==0?'active':''}} h-100" data-bs-interval="2000">
              <a href="">
              <!--  <img-->
              <!--  src="{{ getImage('sliders',$sl->image) }}"-->
              <!--  class="w-100 d-block heightFixed" -->
              <!--  alt="{{ $sl->title }}"-->
              <!--/>-->
              <div class="bg_image" style="background-image: url({{ getImage('sliders',$sl->image) }});"></div>
              </a>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
    
    
      <!-- Categories Start -->
   
   @if($feateuredCategories->count())
   <section class="my-lg-5">
     <div class="text-center  my-4">
        <h4 style="margin:0px"><strong>Popular Category</strong></h4>
     </div>
       <div class="row feature-cat justify-content-center">
            @forelse($feateuredCategories as $key => $item)
            <div class="col-lg-2 col-lg-feaCat col-md-2 col-sm-4 col-4 m-1 p-1">
                <a href="{{ route('shop',['cat_id'=>$item->id])}}">
                   <div class="category text-center p-0 rounded-3">
                       <div style="overflow: hidden;">
                     <img src="{{ asset('posadmin/images/category/'.$item->image) }}" alt="" class="img-fluid">
                     </div>
                     <p class="featureItem">{{ $item->name }}</p>
                   </div>
               </a>
            </div>
            @empty
            <strong>No Categories are Available!</strong>
            @endforelse
       </div>
   </section>
   @endif
   <!-- Categories End -->
    
    {{--
    <div class="products_types mt-3">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button
            class="nav-link active text-cap font-20 nato light"
            id="new-tab"
            data-bs-toggle="tab"
            data-bs-target="#new"
            type="button"
            role="tab"
            aria-controls="new"
            aria-selected="true"
          >
            New
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button
            class="nav-link text-cap font-20 nato light"
            id="top-tab"
            data-bs-toggle="tab"
            data-bs-target="#top"
            type="button"
            role="tab"
            aria-controls="top"
            aria-selected="false"
          >
            Top
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button
            class="nav-link text-cap font-20 nato light"
            id="flash-tab"
            data-bs-toggle="tab"
            data-bs-target="#flash"
            type="button"
            role="tab"
            aria-controls="flash"
            aria-selected="false"
          >
            <i class="fa fa-fire"></i>
            Flash Sale
          </button>
        </li>
      </ul>
      
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="new" role="tabpanel" aria-labelledby="new-tab">
          <div class="products mt-3">
            @foreach($products as $product)
                @if($product->is_new)
                    @include('partials.product',['product'=>$product])
                @endif
            @endforeach
          </div>
        </div>
        <div class="tab-pane" id="top" role="tabpanel" aria-labelledby="top-tab">
            <div class="products mt-3">
                @foreach($products as $product)
                    @if($product->is_top)
                        @include('partials.product',['product'=>$product])
                    @endif
                @endforeach
            </div>
        </div>
        <div class="tab-pane" id="flash" role="tabpanel" aria-labelledby="flash-tab">
            <div class="products mt-3">
                @foreach($products as $product)
                    @if($product->is_flash)
                        @include('partials.product',['product'=>$product])
                    @endif
                @endforeach
            </div>
        </div>
      </div> 
    </div>
    
    --}}
    
    <!-- Categories End -->
    @if($productWithDate > now())
        <div class="category_products">
            <div class="banner rounded-2 orange-bg">
                <div class="left ps-lg-4 ps-2">
                    <div class="title date_title text-white">Deal of the Day</div>
                </div>
                <div class="right d-flex flex-wrap align-items-center pe-lg-4 pe-0 gap-2">
                    <span class="promo-count mx-2" id="promoCountdown" data-date="{{ $productWithDate }}" style=""></span>
                </div>
                <div class="right d-flex flex-wrap align-items-center pe-lg-4 pe-3 gap-2">
                    <a href="{{ route('dealProduct') }}" class="btn px-5 rounded-5 date_see_all text-cap btn-light opacity-75 medium ms-lg-3 ms-2">See All</a>
                </div>
            </div>
        </div>
    
    
        <!--<div class="promo-v1 py-3 text-center"><strong>Deal of the Day </strong>-->
        <!--    <span class="promo-count mx-2" id="promoCountdown" data-date="{{ $productWithDate }}" style="background-color: #f14705;padding: 2px 10px;color: #ffffff;border-radius: 2px;vertical-align: middle;"></span>-->
        <!--    <span style="float:right;" class="mobileDeal"><a class="btn btn-warning orange-bg text-white" href="{{ route('dealProduct') }}">Deal View</a></span>-->
        <!--</div>-->
        <div class="products mt-3">
            @foreach($dealProducts as $product)
                @if($product->last_date > now())
                    @include('partials.product',['product'=>$product])
                @endif
            @endforeach
        </div>
    @endif
    
    <div class="appendData">
    @include('partials.productWithCategory')
    </div>

  </div>
  <div class="container-fluid divide">
    <hr/>
  </div>
  <div class="container-xl">
     
    
    <div class="row service-support-box" style="margin-left:3%; margin-right:3%;padding-top:23px;">
        
        <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center ps-4">
                <!--<img width="40" height="40" src="https://img.icons8.com/ios/40/marker--v1.png" alt="marker--v1"/>-->
                <img src="{{url('posadmin/home_footer', $home_footers->service_one_icon)}}" width="40" height="40">
                <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_one_header }}</strong></h6>
                    <p class="font-13 m-0">
                        {{ $home_footers->service_one_text }}
                    </p>
                </div>
           </div>
        </div>
        
        <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center ps-4">
                <!--<img width="30" height="30" src="https://img.icons8.com/ios/30/return.png" alt="return"/>-->
                <img src="{{url('posadmin/home_footer', $home_footers->service_two_icon)}}" width="40" height="40">
                <div class="" style="margin: 5px;padding: 0px;">
                    <h6 style="margin:0px"><strong>{{ $home_footers->service_two_header }}</strong></h6>
                    <p class="font-13 m-0">
                        {{ $home_footers->service_two_text }}
                    </p>
                </div>
            </div>
        </div>
        
       <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
          <div class="support service-support-single d-flex align-items-center ps-4">
             <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/geography--v1.png" alt="geography--v1"/>-->
             <img src="{{url('posadmin/home_footer', $home_footers->service_three_icon)}}" width="40" height="40">
             <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_three_header }}</strong></h6>
                <p class="font-13 m-0">
                   {{ $home_footers->service_three_text }}
                </p>
             </div>
          </div>
       </div>
       
       <div class="col-lg-3 col-md-6 col-12 mb-3">
          <div class="support service-support-single d-flex align-items-center ps-4">
             <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/private2.png" alt="private2"/>-->
             <img src="{{url('posadmin/home_footer', $home_footers->service_four_icon)}}" width="40" height="40">
             <div class="" style="margin: 5px;padding: 0px;">
                <h6 style="margin:0px"><strong>{{ $home_footers->service_four_header }}</strong></h6>
                <p class="font-13 m-0">
                  {{ $home_footers->service_four_text }}
                </p>
             </div>
          </div>
       </div>
       
    </div>
    <div class="row service-support-box" style="margin-left:3%; margin-right:3%;padding:33px 0px;">
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/about.png" alt="about"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_one_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                       <a href="{{ route('aboutSite') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_one_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="40" height="40" src="https://img.icons8.com/ios/40/marker--v1.png" alt="marker--v1"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_two_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                        <a href="{{ route('deliveryPolicy') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_two_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="40" height="40" src="https://img.icons8.com/dotty/40/term.png" alt="term"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_three_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                         <a href="{{ route('termsCondition') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_three_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                    <!--<img width="30" height="30" src="https://img.icons8.com/ios/30/return.png" alt="return"/>-->
                    <img src="{{url('posadmin/home_footer', $home_footers->page_four_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                        <a href="{{ route('returnedPolicy') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_four_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
            </div>
  </div>
@endsection

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Function to start the countdown
        function startCountdown(elementId, endDate) {
            const countdownElement = document.getElementById(elementId);
            const targetDate = new Date(endDate).getTime();

            if (isNaN(targetDate)) {
                countdownElement.innerHTML = "Invalid date";
                return;
            }

            function updateCountdown() {
                const now = new Date().getTime();
                const distance = targetDate - now;

                if (distance < 0) {
                    countdownElement.innerHTML = "Expired";
                    clearInterval(interval);
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                countdownElement.innerHTML = `
                        <div class="countdown_box">
                            <div class="count_item">${days}d</div>
                            <div class="count_item">${hours}h</div>
                            <div class="count_item">${minutes}m</div>
                            <div class="count_item">${seconds}s</div>
                        </div>
                `;
            }
            updateCountdown(); // Initialize immediately
            const interval = setInterval(updateCountdown, 1000);
        }

        // Fetch the `data-date` attribute
        const countdownElement = document.querySelector(".promo-count");
        const endDate = countdownElement.dataset.date;

        // Start the countdown
        startCountdown("promoCountdown", endDate);
    });
</script>
<script>
    var ENDPOINT = "{{ route('home') }}";
    var page = 1;
    var loading = false;
    var lastRequestScroll = 0;
    
    $(window).scroll(function () {
        var scrollPosition = $('.appendData').scrollTop();
        var viewportHeight = $(window).height();
            
        if (scrollPosition >= lastRequestScroll) {
            if (!loading) {
                loading = true;
                page++;
                infinteLoadMore(page);
                lastRequestScroll = scrollPosition;
            }
        }
    });
    
    function infinteLoadMore(page) {
        $.ajax({
            url: ENDPOINT + "?page=" + page,
            datatype: "html",
            type: "get",
            beforeSend: function () {
                $('.auto-load').show();
            }
        }).done(function (response) {
            if (response.html == '') {
                $('.auto-load').html("We don't have more data to display: &#128514;");
                return;
            }
    
            $('.auto-load').hide();
            $(".appendData").append(response.html);
            loading = false;
    
        }).fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('Server error occurred');
            loading = false;
        });
    }
</script>

<script>
    $(document).ready(function(){
        $(document).on('click', 'a#product_show', function(e) {
            e.preventDefault();
            let product_id = $(this).data('productid'); 
            let product_name = $(this).data('productname'); 
            let category_id = $(this).data('categoryid'); 
            let sell_price = parseFloat($(this).closest('.product').find('.content span.current_price').text().replace(/[^\d.]/g, ''));
            let quantity=1;
    
            console.log('Product ID:', product_id);
            console.log('Product Name:', product_name);
            console.log('Category ID:', category_id);
            console.log('Sell Price:', sell_price);
    
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                event: "view_item",
                ecommerce: {
                    currency: "BDT",
                    value: sell_price, 
                    items: [
                        {
                            item_id: product_id,
                            item_name: product_name,
                            item_category: category_id,
                            price: sell_price,
                            quantity: quantity
                        }
                    ]
                }
            });
    
            console.log('DataLayer:', window.dataLayer);
    
             setTimeout(function() {
                let url = $(this).attr('href');
                if (url) {
                    window.location.href = url;
                } else {
                    console.log('No URL found for the product.');
                }
            }.bind(this), 100);
            
        });
        
        $(document).on('submit','form#cart_form', function(e){
        	e.preventDefault();
            let product_id = $('input[name="product_id"]').val();
            let product_name = $('input[name="product_name"]').val();
            let category_id = $('input[name="category_id"]').val();
            let sell_price = parseFloat($(this).closest('.product_modal').find('.pop.bold').text().replace(/[^\d.]/g, ''));
            let quantity = parseFloat($('input[name="quantity"]').val());
            
            dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                    currency: "BDT",
                    value: sell_price,
                    items: [
                        {
                            item_id: product_id,
                            item_name: product_name,
                            item_category: category_id,
                            price: sell_price,
                            quantity: quantity
                        }
                    ]
                }
            });      
        });
                
    });

</script>
@endpush