@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;
    }
    
    .ctgName {
        color: #000;
        text-align: center;
        font-weight: bold;
        width: 100%;
        font-size: 13px;
        overflow: hidden;
        max-width: 100%;
        display: block;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }
    
    .countdown_box{
        display: flex;
        flex-warp: wrap;
        align-items: center;
        gap: 10px;
    }
    
    .countdown_box .count_item{
        height: 100px;
        width: 100px;
        display: grid;
        place-content: center;
        border-radius: 50%;
        border: 3px solid #f44336;
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
    }

    
    @media (max-width: 769px){
         .countdown_box .item-days{
           padding:0 20px;
        }
        .countdown_box .count_item{
            height: 60px;
            width: 60px;
            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;
    }
   .title-curve {
        clip-path: polygon(0 0, 81% 0, 100% 100%, 0% 100%);
        background: #f14705;
        text-align: center;
        width: 250px;
        padding: 10px;
    }
        
    .brand-slider .single_brand img {
        height: 100px;
        max-width: 100%;
        padding: 10px;
    }

    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;
    }
    
    .brand-slider .slick-track {
        display: flex !important;
        justify-content: center !important;
    }

    
    .category_products .banner .left, .category_products .banner .right{
        padding-left: 1rem;
    }

    .popular_product {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        position: relative;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 2%;
        color: #000;
    }
    .popular_product b {
        background-color: currentColor;
        display: block;
        flex: 1;
        height: 2px;
        opacity: .1;
    }
    .popular_product span {
        font-size: 24px;
        font-family: 'Hind Siliguri', sans-serif;
        margin-bottom: 0px;
        color: #000;
        font-weight: 600;
    }
    @media (min-width: 320px) and (max-width: 768px) {
         .countdown_box .item-days{
           padding:0 20px;
        }
        .col-lg-feaCat {
            flex: 0 0 auto;
            width: 30%;
        }
        .category_products .banner .title {
            font-size: 20px;
        }
        .category_products .banner {
            flex-wrap: wrap;
            padding: 10px 5px;
            justify-content: center;
        }
    }
    
   @media (min-width: 320px) and (max-width: 350px) {
        .ctgName{
            white-space: nowrap;
        }
    }
    
   @media (min-width: 351px) and (max-width: 390px) {
        .ctgName{
            white-space: nowrap;
        }
       
    }
    
    
   
    @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{
        aspect-ratio: 3/1;
        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: #f44336;border-radius: 2px;vertical-align: middle;font-size: 50px;
    }
    .mobileShow{
        display: none;
    }
    @media (max-width: 1300px){
        .promo-count{
            padding: 2px 10px;color: #f44336;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 #f44336;
        }
    }
    @media(max-width: 1200px){
        .date_title{
            font-size: 25px;
        }
    }
    @media(max-width: 768px){
      
        .date_title{
            font-size: 20px;
        }
        .date_see_all {
            font-size: 16px;
        }
        .category_products .banner .title {
            font-size: 25px;
        }
        .countdown_box .count_item{
            height: 80px;
            width: 80px;
            font-size: 25px;
        }
        
        .mobileShow{
            display: block;
        }
        .mobileHide{
            display: none;
        }
        .bg_image {
            aspect-ratio: 2 / 1;
        }
        
    }
    
    @media (max-width: 420px) {
        .countdown_box .item-days{
           padding:30px 33px;
        }
        .category_products .banner .title {
            font-size: 18px;
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
        }
        .countdown_box .count_item {
            height: 60px;
            width: 60px;
        }
        
        .category_products .banner .left, .category_products .banner .right{
            padding-left: 0;
        }
    }
    
     @media (min-width: 450px) and (max-width: 649px){
        .countdown_box .count_item{
            height: 95px;
            width: 95px;
            font-size: 20px;
        }
        
        .category_products .banner .title {
            font-size: 30px;
        }
     }
     @media (min-width: 650px) and (max-width: 768px){
        .countdown_box .count_item{
            height: 120px;
            width: 120px;
            font-size: 25px;
        }
      
        .category_products .banner .title {
            font-size: 30px;
        }
        .date_see_all {
            font-size: 40px;
            margin-top: 20px;
        }

     }
</style>

@php
    $home_footers = DB::table('home_footers')->first();
    $generalSetting = App\Models\GeneralSetting::first();
@endphp

<div class="container-xl">
    <div class="row">
      <div class="col-lg-12 flex-grow-1">
        <div id="main_carousel" class="carousel slide 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">
            @foreach($sliders as $key=>$sl)
            <div class="carousel-item {{$key==0?'active':''}} h-100" data-bs-interval="2000">
              <a href="{{ $sl->link ?? '#' }}" target="_blank">
              <div class="bg_image mobileHide" style="background-image: url({{ getImage('sliders',$sl->image) }});"></div>
              <div class="bg_image mobileShow" style="background-image: url({{ getImage('sliders',$sl->mobile_image) }});"></div>
              </a>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
    
        <!-- Categories Start -->
   
   @if($feateuredCategories->count())
    <section class="my-lg-3" style="">
       <div class="container-fluid p-0">
          <div class="text-center py-0">
              <div class="popular_product" bis_skin_checked="1">   
                    <b></b>    
                    <span>Popular Categories</span>    
                    <b></b>    
                </div>
          </div>
          <div class="grid_content">
            <div class="mobile-slider">
                @forelse($feateuredCategories as $item)
                    @php
                        $routeSlug = $item->slug;

                        if ($item->parent_id === null) {
                            $routeParams = $routeSlug;
                        } else {
                            $parent = $item->parent;
                            if ($parent && $parent->parent_id === null) {
                                $routeParams = $parent->slug . '/' . $item->slug;
                            } elseif ($parent) {
                                $grandParent = $parent->parent;
                                $routeParams = $grandParent ? $grandParent->slug . '/' . $parent->slug . '/' . $item->slug : $item->slug;
                            }
                        }
                    @endphp
        
                    <div class="product-item mx-2 p-1">
                        <a href="{{ route('shop', $routeParams) }}">
                            <img src="{{ asset('posadmin/images/category/' . $item->image) }}" alt="" class="rounded-1 mb-2" style="width: 100%; box-shadow: 3px 4px 6px 0px #504f4e80;">
                            <p class="ctgName">{{ $item->name }}</p>
                        </a>
                    </div>
                @empty
                    <div class="text-center w-100">
                        <strong>No Categories are Available!</strong>
                    </div>
                @endforelse
            </div>
        </div>
        
       </div>
    </section>
    @endif
   <!-- Categories End -->
   
    
    <!-- Categories End -->
    @if($productWithDate > now())
        <div class="card my-3">
            <div class="card-body p-1">
                <div class="category_products">
                    <div class="banner rounded-2">
                        <div class="left ps-lg-4 ps-2 order-0">
                            <div class="title date_title">Flash Deal</div>
                        </div>
                        <div class="right d-flex flex-wrap order-lg-1 order-2 align-items-center pe-lg-4 pe-0 gap-2">
                            <span class="promo-count" id="promoCountdown" data-date="{{ $productWithDate }}" style=""></span>
                        </div>
                        <div class="right d-flex flex-wrap align-items-center order-lg-2 order-1 pe-lg-4 pe-0 gap-2">
                            <a href="{{ route('dealProduct') }}" class="btn orange-bg text-light btn-warning px-lg-5 px-3 rounded-5 date_see_all text-cap btn-light opacity-75 medium">See All</a>
                        </div>
                    </div>
                </div>
                
                <div class="products mt-3">
                    @foreach($dealProducts as $product)
                        @if($product->last_date > now())
                            @include('partials.product',['product'=>$product])
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    
    <div class="appendData">
    @include('partials.productWithCategory')
    </div>
    
    @if($brands->count() > 0 && $generalSetting->brand_active == true)
    <section class="brands mt-lg-5 mt-3 mb-3">
        <div class="title-curve-box">
            <div class="title-curve">
                <h4 class="title text-light bold">Top Brands</h4>
            </div>
        </div>

        <div class="shadow p-3">
            <div class="mobile-slider">
                @forelse($brands as $brand)
                    @php
                        // Generate image URL
                        $imageUrl = $brand->image 
                            ? asset('posadmin/images/brand/' . $brand->image) 
                            : asset('images/default.png');

                        // Generate shop URL filtered by brand slug
                        $shopUrl = route('brand', $brand->slug);
                    @endphp

                    <div class="product-item p-2">
                        <a href="{{ $shopUrl }}">
                            <img src="{{ $imageUrl }}" alt="{{ $brand->name }}" class="img-fluid" />
                        </a>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </section>
    @endif



  </div>
  @if($generalSetting->footer_active == true)
  <div class="container-fluid divide">
    <hr/>
  </div>
  <div class="container-xl">
    <div class="row service-support-box">
        <div class="col-lg-3 col-md-6 col-6 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center">
                <!--<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)}}" alt="" 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-6 border-end mb-3">
            <div class="support service-support-single d-flex align-items-center">
                <!--<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)}}" alt="" 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-6 border-end mb-3">
          <div class="support service-support-single d-flex align-items-center">
             <!--<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)}}" alt="" 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-6 mb-3">
          <div class="support service-support-single d-flex align-items-center">
             <!--<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)}}" alt="" 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>
  @endif
@endsection

@push('js')
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Check if the countdown element exists
    const countdownElement = document.querySelector(".promo-count");
    if (!countdownElement) return; // Exit if no countdown element

    // 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 mt-lg-0 mt-3">
                    <div class="count_item item-days">${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 and start countdown
    const endDate = countdownElement.dataset.date;
    startCountdown("promoCountdown", endDate);
});
</script>


<script>
    var ENDPOINT = "{{ route('home') }}";
    var page = 1;
    var loading = false;
    var lastRequestScroll = 0;
    
   $(window).scroll(function () {
        var scrollPosition = $(window).scrollTop();
        var viewportHeight = $(window).height();
        var documentHeight = $(document).height();
        
        if (scrollPosition >= documentHeight / 4) {
            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>
function trackProductView() {
    $.ajax({
        url: '/pageView',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log('Server-side tracking PageView:', response.message);
        },
        error: function(xhr, status, error) {
            console.error('Server-side tracking error PageView:', error);
        }
    });
}

$(document).ready(function() {
    setTimeout(() => {
        trackProductView();
    }, 500);
});


    $(document).ready(function(){
        $(document).on('click', 'a#product_show', function(e) {
            e.preventDefault();
        
            let product_id   = $(this).data('productid').toString(); 
            let product_name = $(this).data('productname'); 
            let categoryName  = $(this).data('categoryName'); 
            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:', categoryName);
            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: categoryName,
                            price: sell_price,
                            quantity: quantity
                        }
                    ]
                }
            });

        
            console.log('DataLayer:', window.dataLayer);
        
            // redirect after slight delay
            setTimeout(() => {
                let url = $(this).attr('href');
                if (url) {
                    window.location.href = url;
                } else {
                    console.log('No URL found for the product.');
                }
            }, 100);
        });

        
        $(document).on('submit','form#cart_form', function(e){
        	e.preventDefault();
            let product_id = $('input[name="product_id"]').val().toString();
            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 = parseInt($('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
                        }
                    ]
                }
            });    
            
        });
                
    });
$(document).ready(function () {
    $(".mobile-slider").slick({
        dots: false,
        arrows: true,
        infinite: true,
        slidesToShow: 9,
        arrows: true,
        speed: 300,
        slidesToScroll: 1,
        centerMore:true,
        responsive: [
            {
                breakpoint: 1500,
                settings: {
                    slidesToShow: 10
                }
            },
            {
                breakpoint: 1300,
                settings: {
                    slidesToShow: 9
                }
            },
            {
                breakpoint: 1000,
                settings: {
                    slidesToShow: 8
                }
            },
            {
                breakpoint: 900,
                settings: {
                    slidesToShow: 7
                }
            },
            {
                breakpoint: 800,
                settings: {
                    slidesToShow: 5
                }
            },
            {
                breakpoint: 576,
                settings: {
                    slidesToShow: 4
                }
            },
            {
                breakpoint: 500,
                settings: {
                    slidesToShow: 4
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 3
                }
            }
        ]

    });
    
});
</script>
@endpush