<?php 
session_start();
$title = "Articles";
$group = "article";
$menu = "article";
include('header.php');
$_SESSION['isEdit']=false;

$page = 1;
if(isset($_GET['page']))
{
    $page = $_GET['page'];
}

?>
<script>
function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}
	 	
	return xmlhttp;
}


function loadArticles(showloading, gotopage) {
	if(showloading == 1)		
	document.getElementById('load').innerHTML='<img src="img/loading.gif"/>';
	var searchkey = document.getElementById('searchkey').value;
	var category =  document.getElementById('categoryid').value;
	var fromdate =  document.getElementById('fromdate').value;
	var todate =  document.getElementById('todate').value;
	var no_records = document.getElementById('norecords').value;
	var lastrecord = document.getElementById('lastrecord').value;
	var page = "<?php echo $page?>";
	if(gotopage != null)
		page = gotopage;  
		
	var strURL="../load/load_articles.php?page="+page+"&lastrecord="+lastrecord+"&searchkey="+searchkey+"&category="+category+"&startdate="+fromdate+"&enddate="+todate+"&no_records="+no_records;
	//alert(strURL);
	var req = getXMLHTTP();
	
	if (req) {
		
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				// only if "OK"
				if (req.status == 200) {	
					//alert(req.responseText);	
					var result = JSON.parse(req.responseText);			
					document.getElementById('load').innerHTML=result.text;
					document.getElementById('pagination').innerHTML=result.pagination;	
					document.getElementById('lastrecord').value	= result.lastrecord;				
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}		
}

function Delete(id)
{
	if(confirm("Delete Article?"))
	{
    	var datastring = {'id':id,'delete':'article_list'};
    	$.ajax({
    	            type: "POST",
    	            url: "../include/delete_ajax.php",
    	            data: datastring,
    	            dataType: 'json',
    	            cache: false,
    	            success: function(data) {
    	            	if(data.success == 1)
    	            	{       
    	            		loadArticles(0);    		
    	            		setTimeout(function() {
    	                        toastr.options = {
    	                            closeButton: true,
    	                            progressBar: true,
    	                            positionClass: "toast-top-full-width",
    	                            showMethod: 'slideDown',
    	                            timeOut: 4000
    	                        };
    	                        toastr.success('Article deleted successfully');
    	                        
    	                    }, 1300);
    	            	}
    	            	else
    	            	{
    	            		setTimeout(function() {
    	                        toastr.options = {
    	                            closeButton: true,
    	                            progressBar: true,
    	                            positionClass: "toast-top-full-width",
    	                            showMethod: 'slideDown',
    	                            timeOut: 4000
    	                        };
    	                        toastr.error('Error');
    
    	                    }, 1300);
    	            	}
    	            },
    	            error: function(){
    	                  alert('error handling here');
    	            }
    	        });
	}
}

$(document).ready(function(){
	loadArticles(1);
	$('.filter').change(function(){
		loadArticles(1);
	})
});


$(document).ready(function(){
	$('#data_5 .input-daterange').datepicker({
	    keyboardNavigation: false,
	    forceParse: false,
	    autoclose: true
	});
})
</script>
<input type="hidden" id="lastrecord" value="1"/>
        <div class="content-body">
        	<div class="row">
                    <div id="recent-transactions" class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Article List</h4>
                            </div>
                            <div class="card-content">
                            	<div class="row row-pad">
                                <div class="col-md-3">
                                    <select class="form-control filter" id="categoryid">
                                        <option value="">--select category--</option>
                                        <?php 
                                            $sql = "select id,name from news_category order by name";
                                            $q=$con->select_query($sql);
                                            foreach($q as $r)
                                            {
                                                echo '<option value="'.$r['id'].'">'.$r['name'].'</option>';
                                            }
                                        ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control filter" id="searchkey" placeholder="Search Title"/>
                                </div>
                                <div class="col-md-4" id="data_5">
                                        <div class="input-daterange input-group" id="datepicker" style="width: 100%">
                                            <input type="text" class="input-sm form-control filter" id="fromdate"/>
                                            <span class="input-group-addon">to</span>
                                            <input type="text" class="input-sm form-control filter" id="todate"/>
                                        </div>
                                 </div>
                                <div class="col-md-2">                                	
                                       <select id="norecords" class="form-control pull-left filter">
                                            <option value="20">20 records</option>
                                            <option value="50">50 records</option>
                                            <option value="100" selected>100 records</option>
                                            <option value="200">200 records</option>
                                        </select>                                    
                                </div>
                            </div>
                            <div class="row row-pad">
                                <div class="col-lg-12"><a class="btn btn-info pull-right" href="article_setup">Add new</a></div>
                            </div>
                                <div class="row row-pad">
                                <div class="col-lg-12">
                                    <div class="table-responsive">
                                       <table class="table table-striped table-bordered table-hover table-advanced smaller">
                                            <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Title</th>
                                                    <th>Category</th>
                                                    <th>Date Created</th>  
                                                    <th>Status</th>  
                                                    <th colspan="2">Actions</th>                             
                                                </tr>
                                            </thead>
                                            <tbody id="load">
                                                    
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <td colspan="7" class="footable-visible" id="pagination">
                                                    
                                                </td>
                                            </tr>
                                            </tfoot>
                                       </table>
                                   </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ Recent Transactions -->

   </div>
        

    
    <?php    
        include('footer.php');
    ?>

   
