@extends('layout')
@section('contents')
<section id="demos"> 
<div class="section">
    <h2 class="sub-header">ITPL Road</h2>
    <div id="sb_wall1">      
        @include('category')
        <div id="timeline_wall1" class="sboard sb-wall sb-modern sb-modern-light" data-columns>
            <div class="sb-gsizer"></div>
            <div class="sb-isizer"></div>  
            <div class="infinite-scroll"> 
            @foreach($data as $row) 
                
                @include('card')    
            @endforeach  
            {{ $data->links() }}     
            </div>
        </div>
 
</div>      
                    
                </div>
            </section>
@endsection
@section('myscripts')
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('ul.pagination').hide(); // Hide the default pagination links
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true, // Optional: useful for debugging
            loadingHtml: '<p class="text-center">Loading more...</p>',
            padding: 0,
            nextSelector: '.pagination li.active + li a', // Selector for the "next page" link
            contentSelector: 'div.infinite-scroll', // The div where new content is appended
            callback: function() {
                $('ul.pagination').remove(); // Remove the pagination links after new content is loaded
            }
        });
    });
    </script>
@endsection