<?php ?>
    <div id="content">

        <div class="row">
            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                <h1 class="page-title txt-color-blueDark">
                    <i class="fa fa-table fa-fw "></i>
                    Infos
					<span>>
						Clients
					</span>
                </h1>
            </div>
            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
                <ul id="sparks" class="">
                    <li class="sparks-info">
                        <h5> Clients actif <span class="txt-color-blue" id="Clients_actif"> </span></h5>

                    </li>
                    <li class="sparks-info">

                    </li>
                    <li class="sparks-info">

                    </li>
                </ul>
            </div>
        </div>
        <!-- widget grid -->
        <section id="widget-grid" class="">

            <!-- row -->
            <div class="row">

                <!-- NEW WIDGET START -->
                <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget" id="wid-id-0"  data-widget-colorbutton="true"  >
                        <!-- widget options:
						usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

						data-widget-colorbutton="false"
						data-widget-editbutton="false"
						data-widget-togglebutton="false"
						data-widget-deletebutton="false"
						data-widget-fullscreenbutton="false"
						data-widget-custombutton="false"
						data-widget-collapsed="true"
						data-widget-sortable="false"

						-->

                        <header>
                            <span class="widget-icon"> <i class="fa fa-table"></i></span>
                            <h2> Clients</h2>

                        </header>

                        <!-- widget div-->
                        <div>

                            <!-- widget edit box -->
                            <div class="jarviswidget-editbox">
                                <!-- This area used as dropdown edit box -->

                            </div>
                            <!-- end widget edit box -->

                            <!-- widget content -->
                            <div   class="widget-body no-padding">

                                <div id='employeeList'>
                                </div>
                                <div id='pagination' >
                                </div>


                            </div>
                            <!-- end widget content -->

                        </div>
                        <!-- end widget div -->

                    </div>

                </article>
                <!-- WIDGET END -->

            </div>

            <!-- end row -->

            <!-- end row -->

        </section>
        <!-- end widget grid -->

    </div>
</div>
<!-- END MAIN PANEL -->

<!-- ==========================CONTENT ENDS HERE ========================== -->

<script type='text/javascript'>
    $(document).ready(function() {

        createPagination(0);
        $('#pagination').on('click','a',function(e){
            e.preventDefault();
            var pageNum = $(this).attr('data-ci-pagination-page');
            createPagination(pageNum);
        });
        function createPagination(pageNum){
            $.ajax({
                url: '<?=base_url()?>index.php/Clients/loadData/'+pageNum,
                type: 'get',
                dataType: 'json',
                success: function(responseData){

                    $('#pagination').html(responseData.pagination);
                    $('#employeeList').empty();
                    $('#employeeList').html(responseData.empData);
                    $('#Clients_actif').empty();
                    $('#Clients_actif').html(responseData.recordCount);


                }
            });
        }

    });
</script>