@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',$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="container mt-5">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                  Filter
                </div>
                <div class="card-body">
                    <h3>Flavour</h3>
                    @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
    
                 <br/>
                  <h3>Price Range</h3>
                  <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>
              </div>
        </div>
        <div class="col-md-9">
            <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>

</div>
 <script src="{{asset('frontEnd')}}/js/jquery-ui.js"></script>
<script>
    var ENDPOINT = "{{ url('/') }}";
    var page = 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