@extends('layouts.mainlay')
@section('title','قصص نجاح')
@section('content')
	<div style="height: 130px"></div>
	<div class="about-box" style="text-align: right; padding:1%">
	    <div class="container">
            <div class="allstorydiv">
                @foreach($succ as $item)
                    <div class="@if($loop->last) lastdiv @endif " style="border:dashed 1px #555; margin-bottom: 5px;background-color: #8bca92; width:95%">
                        <div style="margin-bottom: 3px;">
                            <a href="{{route('story.id',$item->id)}}" style="color:#eff5ef; font-size: 25px">{{$item->storyTitle}} </a>
                        </div>
                        <div style="margin-left:0px;margin-right: 0px">{{$item->story}}<br></div>
                        <div style="text-align: left;margin-left: 30px"><a href="{{route('story.id',$item->id)}}" style="color:#eff5ef; font-size: 15px;"> للمزيد</a></div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection
@section('scriptadded')
 <script>
     $.fn.isInViewport = function() {
        
         if($(this).offset()!=null){
            var elementTop = $(this).offset().top;
            var elementBottom = elementTop + $(this).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            return elementBottom > viewportTop && elementTop < viewportBottom;
         }else return false;
        
    };
     $(document).scroll(function(){
         if ($('.lastdiv').isInViewport()) {
             $('.lastdiv').removeClass('lastdiv')
            $.ajax({
                url: "{{route('story.ajax',1)}}",
                method: "get",
                success: function(data) {
                    for(var i =0; i<data.length; i++){
                        lastDiv='';
                        if(i==data.length-1) lastDiv='lastdiv'
                        id=data[i]['id']
                        url=`/sucess-ajax/${id}}}`
                        title=data[i]['storyTitle']
                        story=data[i]['story']
                        html=`<div class="${lastDiv}" style="border:dashed 1px #555; margin-bottom: 5px;background-color: #8bca92; width:95%">
                                    <div style="margin-bottom: 3px;">
                                        <a href="${url}" style="color:#eff5ef; font-size: 25px">${title}</a>
                                    </div>
                                    <div style="margin-left:0px;margin-right: 0px">${story}<br></div>
                                    <div style="text-align: left;margin-left: 30px"><a href="${url}" style="color:#eff5ef; font-size: 15px;"> للمزيد</a></div>
                              </div>`;
                        $('.allstorydiv').append(html);
                    }
                    console.log(data);
                   
                }
            });
        } else {
            // The element is NOT visible, do something else
        }   
     })
  
</script>   
@endsection