<?php include 'header.php'; ?>

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid1">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
                <h1 class="my-3 h1">Credit History</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Credit History</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<hr class="mb-3">
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid1 row">
        <!-- Timelime example  -->
            <div class="col-md-12">
                <!-- The time line -->
                <div class="timeline-main">
					<!-- Timeline Wrapper -->
					<ul class="stepper stepper-vertical timeline timeline-basic mt-0 pt-0 pl-0">
					</ul>
                </div>
                <div class="loader-div text-center">
					<div class="preloader-wrapper active">
					  <div class="spinner-layer spinner-blue-only">
						<div class="circle-clipper left">
						  <div class="circle"></div>
						</div>
						<div class="gap-patch">
						  <div class="circle"></div>
						</div>
						<div class="circle-clipper right">
						  <div class="circle"></div>
						</div>
					  </div>
					</div>
				</div>

            </div>
            <!-- /.col -->
		
    </div>
    <!-- /.timeline -->

</section>
<!-- /.content -->
</div>

<!-- /.content-wrapper -->
<?php include 'footer.php'; ?>
<script>
   var start_date = '';
    var end_date = '';
    var load_flag = 0;
    var load_offset = 0;
    var data_end = 0;
    var limit = 3;

    getUserActivities();


    function getUserActivities() {

        $.ajax({url: 'controllers/get_user_activiti_log.php',
            data: {
                load_offset: load_offset,
            },
            type: 'post',
            success: function (output) {
//                console.log('output: ' + output);
                if (output == '') {
                    load_offset += limit;
                    getMoreUserActivities();
                } else {
                    $(".timeline").html(output);
                }
                $('.loader-div').css('display', 'none');
            }
        });
    }

    function getMoreUserActivities() {

        $.ajax({url: 'controllers/get_user_activiti_log.php',
            data: {
                load_offset: load_offset,
            },
            type: 'post',
            success: function (output) {
                console.log('output: ' + output);
                if (output == '') {
                    load_offset += limit;
                    getMoreUserActivities();
					$('.loader-div').css('display', 'none');
                } else if (output == '0') {
                    date_end = 1;
                    /*$(".timeline").append('<div><div class="timeline-item bg-blue">\n\
                            <h3 class="timeline-header no-border" style="color:white;">No more data found</h3>\n\
                        </div></div>');*/
                    $('.loader-div').css('display', 'none');

                } else {
                    $(".timeline").append(output);
                    load_flag = 0;
                    $('.loader-div').css('display', 'none');
                }
            }
        });
    }


    $(window).scroll(function () {
        if (data_end == 0) {
            var hT = $('.timeline').offset().top;
            hH = $('.timeline').outerHeight();
            wH = $(window).height();
            wS = $(this).scrollTop();
            if (wS > (hT + hH - wH)) {
                if (load_flag == 0) {
                    $('.loader-div').css('display', 'block');
                    load_flag = 1;
                    load_offset = load_offset + limit;
                    getMoreUserActivities();
                    console.log('end reached load_offset: ' + load_offset + ' load_flag: ' + load_flag);
                }
				
            }
        }
    });
</script>