@extends('layouts.app')
@section('title_and_meta')
    <title>Cake Delivery Varanasi | Order Best Birthday, Anniversary Cake Online | Free Home Delivery</title>
    <meta name="description" content="The best cake delivery all over Varanasi! Whether it's a Birthday Cake, Anniversary Cake, Designer Cake, Homemade Cake, special day Cake or just to satisfy that sweet tooth, we have you covered! take your cake to the next level with deluxe with wishours" />
    <meta name="keywords" content="Cake Delivery Varanasi, Anniversary Cake Online, Cakes Online Varanasi, birthday cake delivery, Free delivery in Varanasi" />
    <link rel="stylesheet" href="{{asset('frontEnd')}}/css/jquery-ui.css">
@endsection
@section('content')
<div class="top_category">
    <div class="container">
        <div class="row">
            @foreach ($Allcategories as $menu)
            <div class='col-md-2 content'>
                <div class='product-default'>
                    <a href="{{ route('product.listing', ['category' => '/cakes', 'url' => $menu->slug]) }}">
                    <figure class='product-image-container'>
                            <img src="{{ asset('/uploads') .'/'.$menu->catthumb}}" alt="product">
                    </figure>
                    <div class="product-details">
                        <h2 class="product-title">
                            <a href="#" target="_blank">{{ $menu->title }}</a>
                        </h2>
                    </div><!-- End .product-details -->
                     </a>
                </div><!-- End .product -->
           </div>
            @endforeach
        
        </div>
    </div>
</div>
<div class="main-container filter-pro-main container mt-5">

     <div class="page-cutome  ">
        <nav class="toolbox horizontal-filter">
            <div class="toolbox-left">
                <div class="filter-toggle ">
                    <span>Filter:</span>
                    <a href=#></a>
                </div>
            </div><!-- End .toolbox-left -->
        </nav>
     </div>
       
        <div class="row products-body">
            <div class="col-lg-9 main-category-content">
                <div class="banner banner-cat mb-3" style="background-image: url('');">
                    <div class="banner-content">
                        <!--<h2 class="banner-subtitle">check out over <span>200+</span></h2>-->
                        <h1 class="banner-title">
                          Cakes <span class="item_count">@if($product_length) ( {{ $product_length }} items ) @endif</span>
                        </h1>
                       <!-- <a href="#" class="btn btn-dark">Shop Now</a>-->
                    </div><!-- End .banner-content -->
                </div><!-- End .banner -->
               
                <div id="data-wrapper2" class="row">
                    <!-- Results -->
                </div>
                <div id="finalProduct">
                <div id="data-wrapper" class="row">
                    <!-- Results -->
                </div>
            </div>
            
                <!-- Data Loader -->
                 {{--<div class="auto-load text-center">
                    <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                        <path fill="#000"
                            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                                from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                        </path>
                    </svg>
                </div> --}}
                <div class="auto-load text-center">
                    <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                        <path fill="#000"
                            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                                from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                        </path>
                    </svg>
                </div> 



                
            </div>

            <div class="sidebar-overlay"></div>
            <aside class="sidebar-shop col-sm-9 col-lg-3 order-lg-first mobile-sidebar">
                <div class="sidebar-wrapper">
                    <div class="widget wdg-1">
                        <h3 class="widget-title">
                            <a data-toggle="collapse" href="#widget-body-1" role="button" aria-expanded="true" aria-controls="widget-body-1">Flavour</a>
                        </h3>

                        <div class="collapse show" id="widget-body-1">
                            <div class="widget-body">
                                @if(isset($flavourCategories))
                    @foreach($flavourCategories as $flavourCategory)
                    <input type="checkbox" id="cake_flvour{{ $flavourCategory->id }}" name="cake_flvour[]" value="{{ $flavourCategory->title }}" onchange="cakeflavourFilter('{{ $flavourCategory->id }}','{{ $flavourCategory->title}}')">
                    <label for="cake_flvour{{ $flavourCategory->id }}">{{ $flavourCategory->title }}</label><br/>
                    @endforeach  
                  @endif
                            </div><!-- End .widget-body -->
                        </div><!-- End .collapse -->
                    </div><!-- End .widget -->
                   
                    <div class="widget wdg-2">
                        <h3 class="widget-title">
                            <a data-toggle="collapse" href="#widget-body-2" role="button" aria-expanded="true" aria-controls="widget-body-2">Price Range</a>
                        </h3>
                       
                        <div class="collapse show" id="widget-body-2">
                            <div class="widget-body">
                            <div data-role="fieldcontain" style="padding-left:5px;">
                                <div id="slider-range-price"></div>
                                <div class="price-range"><div class="min-value" id="priceMinVal">₹ 200</div><div class="max-value" id="priceMaxVal">₹ 2000</div></div>
                                <p>
                                  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                              </p>
                               
                            </div><!-- End .widget-body -->
                        </div><!-- End .collapse -->
                    </div><!-- End .widget -->

                </div><!-- End .sidebar-wrapper -->
                  <div class="popup-footer">
                    <button class="cancel-btn">Cancel</button>
                    <button class="done-btn">Done</button>
                </div>
            </aside><!-- End .col-lg-3 -->
        </div><!-- End .row -->
    </div><!-- cutom page contaniner -->
    <div class="mobile-filter">
        <div class="tab-list">
            <button class="filter_item" data-id="flavor"><i class="fas fa-filter"></i> Flavour</button>
            <button class="filter_item" data-id="price_range"><i class="fas fa-sliders-h"></i> Price Range</button>
        </div>
    </div>


</div><!-- End .main-container -->
 <script src="{{asset('frontEnd')}}/js/jquery-ui.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
     <script>
        $(".filter_item").click(function() {
            $('.filter-pro-main').addClass('sidebar-opened');
            var dataId = $(this).data('id');
            if (dataId == 'flavor') {
                $('.wdg-1').show();
                $('.wdg-2').hide();
            } else if (dataId == 'price_range') {
                $('.wdg-1').hide();
                $('.wdg-2').show();
               
            } else {
                 $('.wdg-1').hide();
                 $('.wdg-2').hide();
            }
    
        });
        $('.cancel-btn').click(function() {
            $('.filter-pro-main').removeClass('sidebar-opened');
        })
        $('.done-btn').click(function() {
            $('.filter-pro-main').removeClass('sidebar-opened');
        })
    </script>
<script>
   
   
  
//   $(document).on('touchmove', onScroll); // for mobile
//   $(window).on('scroll', onScroll);
    var ENDPOINT = "{{ url('/') }}";
    var page = 1;
    infinteLoadMore(page);
    
    
  $(document.body).on('touchmove', onMScroll); // for mobile
  $(window).on('scroll', onScroll);

// callback
   function onScroll() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        
        if ($(window).scrollTop() + $(window).height() + 1700 >= $(document).height()) {
                page++;
                infinteLoadMore(page);      
           }
    }else if ($(window).scrollTop() + $(window).height() + 800 >= $(document).height()) {
                page++;
                infinteLoadMore(page);
    }
        }

        // function onMScroll() {
        //     //$(window).scrollTop() + window.innerHeight + 500 >= document.body.scrollHeight
        //     if ($(window).scrollTop() >= 500) {
        //         page++;
        //         // alert('I m here');
        //         infinteLoadMore(page);
        //     }
        // }
 // callback
// function onScroll(){
  
//     if (window.pageYOffset + $(window).height() >= $(document).height()) {
//             page++;
//               alert(1);
//             infinteLoadMore(page);
//         }
// }
    // $(window).scroll(function () {
    //     if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
    //         page++;
    //         infinteLoadMore(page);
    //     }
    // });

    function infinteLoadMore(page) {
        $.ajax({
                url: ENDPOINT + "/cakes?page=" + page,
                datatype: "html",
                type: "get",
                beforeSend: function () {
                    $('.auto-load').show();
                }
            })
            .done(function (response) {
                if (response.length == 0) {
                    $('.auto-load').html("");
                    return;
                }
                $('.auto-load').hide();
                $("#data-wrapper").append(response);
               
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
                console.log('Server error occured');
            });
    }

/***** flavour filter *****/
var flavour = [];
var page1 = 1;
function cakeflavourFilter(val1, val2){
    $("#data-wrapper2 .content").remove();
    page1++
    var id = "#cake_flvour"+val1;
    if($(id).is(":checked")){
        flavour.push(val2);      
    }
    else if($(id).is(":not(:checked)")){
        flavour.splice( $.inArray(val2, flavour), 1 );    
       
    }
if(flavour.length >= 1 ){
    $.ajax({
                url: ENDPOINT + "/filterFlavour",
                datatype: "html",
                type: "post",
                data:{'_token':'{{ csrf_token() }}','flavour':flavour},
                beforeSend: function () {
                    $('.auto-load').show();
                }
            })
            .done(function (response) {
                if (response.length == 0) {
                    $('.auto-load').html("");
                    return;
                }
                $('.auto-load').hide();
                $("#data-wrapper2").append(response);
                $("#finalProduct #data-wrapper").remove();
               //console.log(response);
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
               
                console.log('Server error occured');
            });
        }else{
            $("#data-wrapper2 .content").remove();
            $("#finalProduct").append("<div id='data-wrapper' class='row'></div>");
            infinteLoadMore(1);
        }
    //alert(flavour);
}


</script>

<script>
	$( function() {
        var min = 0;
        var max = 0;
		$( "#slider-range-price" ).slider({
			range: true,
			min: 200,
			max: 2000,
			values: [ 200, 2000 ],
			slide: function( event, ui ) {
                $("#priceMinVal").html("₹" + ui.values[0]);
                $("#priceMaxVal").html("₹" + ui.values[1]);
                min = ui.values[0]
                max = ui.values[1]
  
			},
            stop: function(event, ui) {
                $("#data-wrapper2 .content").remove();
                priceRange(min, max);
            }   
		});
        
        function priceRange(val1, val2){
          if(flavour.length > 0){
            console.log(val1,val2);
            console.log(flavour);

            $.ajax({
                url: ENDPOINT + "/filterFlavour",
                datatype: "html",
                type: "post",
                data:{'_token':'{{ csrf_token() }}','flavour':flavour, 'minPrice':val1, 'maxPrice':val2},
                beforeSend: function () {
                    $('.auto-load').show();
                }
            })
            .done(function (response) {
                if (response.length == 0) {
                    $('.auto-load').html("");
                    return;
                }
                $('.auto-load').hide();
                $("#data-wrapper2").append(response);
                $("#finalProduct #data-wrapper").remove();
               //console.log(response);
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
               
                console.log('Server error occured');
            });





          }else{
           // console.log(val1,val2);
            
            $.ajax({
                url: ENDPOINT + "/filterFlavour",
                datatype: "html",
                type: "post",
                data:{'_token':'{{ csrf_token() }}', 'minPrice':val1, 'maxPrice':val2},
                beforeSend: function () {
                    $('.auto-load').show();
                }
            })
            .done(function (response) {
                if (response.length == 0) {
                    $('.auto-load').html("");
                    return;
                }
                $('.auto-load').hide();
                $("#data-wrapper2").append(response);
                $("#finalProduct #data-wrapper").remove();
               //console.log(response);
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
               
                console.log('Server error occured');
            });



          }
        }
	
	} );
	</script>
                     

@endsection