@extends('frontend.layouts.app')

@section('title', "Knewton Testimonials")
{{--
@section('description', $page->seo_description)
@section('keywords', $page->seo_keywords)
--}}

@if (!empty($page->image))
    @section('image', $page->image)
@endif
@push("style")
<style>
.author h6 {
    font-weight: 600;
    font-size: larger;
    text-transform: capitalize;
}
</style>
@endpush
@section('content')
@include('frontend.common.header')
<section class="page-title page-title-blog">
    <h2>Testimonials</h2>
</section>

<section  class="bg-background">
    <div class="container" id="card-scroll">
        <div class="row">
		<div class="col-md-6" id="left-card">
        </div>
		<div class="col-md-6" id="right-card">
        </div>
    </div>
</section>
@push("script")
	<script>
	history.scrollRestoration = "manual";
	call_card();
		function left_div_height(){
			var left_height = 0;			
			$("#left-card .card").each(function( index ) {
				  left_height = parseInt(left_height) + parseInt($( this ).height()) + parseInt(16);
			});
			return left_height;
		}
		function right_div_height(){
			var right_height = 1;
			$("#right-card .card").each(function( index ) {
				  right_height = parseInt(right_height) + parseInt($( this ).height()) + parseInt(16);
			});
			return right_height;
		}
		var start = 0;
		var total_card = {{ $testimonials }};
		var call_ajax = true;
		$(document).scroll(function() {
		  var currY = $(this).scrollTop();
		  var scrollHeight = $('#card-scroll').height();
		  if((currY-100) > scrollHeight && call_ajax && start<total_card){
			 call_ajax = false;
			 call_card();
			console.log(currY);
		  }
		});
		
		function call_card(){
			$.ajax({
				url: "{{ route('fe.testimonials-ajax') }}",
				type:"POST",
				data:{
				  start:start,
				  _token: "{{csrf_token()}}"
				},
				success:function(response){
					call_ajax = true; 
					start = parseInt(start) + 10;			
					result = JSON.parse(response);
					if(screen.width>767){
						for(var i=0;i<result.length;i++){
							if(left_div_height()<right_div_height()){
								$("#left-card").append(result[i]);
							}else{
								$("#right-card").append(result[i]);					
							}    
						}
					}else{
					for(var i=0;i<result.length;i++){
							$("#left-card").append(result[i]);
						}
					}
				},
				error: function(error) {
					console.log(error);
				}
		   });
		   return ;
		}
		
		
		
	</script>
@endpush

@include('frontend.block.subscribe')
@endsection