@extends('app')
@section('content')
@php
    $home_footers = DB::table('home_footers')->first();
@endphp
<div class="container-xl" style="min-height: 800px">
    <div class="products shopProducts mt-3">
        
    </div>
</div>
<div class="container-xl">
    <div class="row service-support-box" style="margin-left:3%; margin-right:3%;padding-top:50px;">
        <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:50px 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).on('click', ".pagination a", function(e) {
        e.preventDefault();
        $('li').removeClass('active');
        $(this).parent('li').addClass('active');
        var page = $(this).attr('href').split('page=')[1];
        getProduct(page);
    });
    
    $(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>



<script>
    let page = 1;
    let loading = false;
    let lastRequestScroll = 0;

    $(window).scroll(function () {
        const scrollPosition = $(window).scrollTop();
        const viewportHeight = $(window).height();
        const documentHeight = $(document).height();

        if (scrollPosition + viewportHeight >= documentHeight - (0.5 * viewportHeight) && !loading && scrollPosition > lastRequestScroll + 100) {
            loading = true;
            page++;
            loadProducts(page);
            lastRequestScroll = scrollPosition;
        }
    });

    function loadProducts(page) {
        $.ajax({
            type: 'GET',
            url: '{{ route("newProduct") }}?page=' + page,
            success: function (data) {
                $("div.shopProducts").append(data.html);
                loading = false;
            },
            error: function () {
                loading = false;
            }
        });
    }

    loadProducts(page);
</script>

@endpush