{% extends 'page-blank.html' %}
{% block css %}
    <link type="text/css" rel="stylesheet" href="/admin/vendors/bootstrap-datepicker/css/datepicker.css">
    <link type="text/css" rel="stylesheet" href="/admin/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css">
    <link type="text/css" rel="stylesheet" href="/admin/vendors/datatables/css/dataTables.bootstrap.css">
{% endblock %} 
{% block js %}
	<script src="/admin/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="/admin/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
	<script src="/admin/vendors/moment/moment.js"></script>
	<script src="vendors/datatables/js/jquery.dataTables.js"></script>
	<script src="vendors/datatables/js/dataTables.bootstrap.js"></script>
	<script type="text/javascript">
		// Add an URL parser to JQuery that returns an object
		// This function is meant to be used with an URL like the window.location
		// Use: $.parseParams('http://mysite.com/?var=string') or $.parseParams() to parse the window.location
		// Simple variable:  ?var=abc                        returns {var: "abc"}
		// Simple object:    ?var.length=2&var.scope=123     returns {var: {length: "2", scope: "123"}}
		// Simple array:     ?var[]=0&var[]=9                returns {var: ["0", "9"]}
		// Array with index: ?var[0]=0&var[1]=9              returns {var: ["0", "9"]}
		// Nested objects:   ?my.var.is.here=5               returns {my: {var: {is: {here: "5"}}}}
		// All together:     ?var=a&my.var[]=b&my.cookie=no  returns {var: "a", my: {var: ["b"], cookie: "no"}}
		// You just cant have an object in an array, e.g. ?var[1].test=abc DOES NOT WORK
		(function ($) {
		    //
		    var re = /([^&=]+)=?([^&]*)/g;
		    var decode = function (str) {
		        return decodeURIComponent(str.replace(/\+/g, ' '));
		    };
		    $.parseParams = function (query) {

		        // recursive function to construct the result object
		        function createElement(params, key, value) {
		            key = key + '';

		            // if the key is a property
		            if (key.indexOf('.') !== -1) {
		                // extract the first part with the name of the object
		                var list = key.split('.');

		                // the rest of the key
		                var new_key = key.split(/\.(.+)?/)[1];

		                // create the object if it doesnt exist
		                if (!params[list[0]]) params[list[0]] = {};

		                // if the key is not empty, create it in the object
		                if (new_key !== '') {
		                    createElement(params[list[0]], new_key, value);
		                } else console.warn('parseParams :: empty property in key "' + key + '"');
		            } else
		            // if the key is an array    
		            if (key.indexOf('[') !== -1) {
		                // extract the array name
		                var list = key.split('[');
		                key = list[0];

		                // extract the index of the array
		                var list = list[1].split(']');
		                var index = list[0]

		                // if index is empty, just push the value at the end of the array
		                if (index == '') {
		                    if (!params) params = {};
		                    if (!params[key] || !$.isArray(params[key])) params[key] = [];
		                    params[key].push(value);
		                } else
		                // add the value at the index (must be an integer)
		                {
		                    if (!params) params = {};
		                    if (!params[key] || !$.isArray(params[key])) params[key] = [];
		                    params[key][parseInt(index)] = value;
		                }
		            } else
		            // just normal key
		            {
		                if (!params) params = {};
		                params[key] = value;
		            }
		        }

		        // be sure the query is a string
		        query = query + '';
		        
		        if (query === '') query = window.location + '';
		        
		        var params = {}, e;
		        if (query) {
		            // remove # from end of query
		            if (query.indexOf('#') !== -1) {
		                query = query.substr(0, query.indexOf('#'));
		            }

		            // remove ? at the begining of the query
		            if (query.indexOf('?') !== -1) {
		                query = query.substr(query.indexOf('?') + 1, query.length);
		            } else return {};
		            
		            // empty parameters
		            if (query == '') return {};
		            
		            // execute a createElement on every key and value
		            while (e = re.exec(query)) {
		                var key = decode(e[1]);
		                var value = decode(e[2]);
		                createElement(params, key, value);
		            }
		        }
		        return params;
		    };
		})(jQuery);
	</script>
	<script>
		$('.reportrange').daterangepicker(
	        {
	            ranges: {
	                'Today': [moment(), moment()],
	                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
	                'Last 7 Days': [moment().subtract('days', 6), moment()],
	                'Last 30 Days': [moment().subtract('days', 29), moment()],
	                'This Month': [moment().startOf('month'), moment().endOf('month')],
	                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
	            },
	            startDate: moment(),
	            endDate: moment()
	        },
	        function (start, end) {
	        	$('.reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
	        	var m  = $('.reportrange').data('daterangepicker');
				var start = +m.startDate;
				var end = m.endDate + 86399999;
				var filter = $.parseParams("?"+$("#form-reporting").serialize()).filter;
				$("#csv-download").attr("href","/admin/services.csv?"+$.param({filter: filter, start: start, end : end}));
				$('#example').dataTable().fnPageChange(1);

	        }
	    );
		var m  = $('.reportrange').data('daterangepicker');
		var start = +m.startDate;
		var end = m.endDate + 86399999;
		var filter = $.parseParams("?"+$("#form-reporting").serialize()).filter;
		$("#csv-download").attr("href","/admin/services.csv?"+$.param({filter: filter, start: start, end : end}));
	    $('.reportrange span').html(moment().format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
	</script>
	<script type="text/javascript">
	$(function(){
		$("#form-reporting").submit(function(){
			EL = this;
			var moment  = $('.reportrange').data('daterangepicker');
			var start = +moment.startDate;
			var end = moment.endDate + 86399999;
			var filter = $.parseParams("?"+$(this).serialize()).filter;
			var ajax = "/admin/services.json/10/"+start+"-"+ end+"?filter="+ filter;
			var csv = "/admin/services.csv/10/"+start+"-"+ end+"?filter="+ filter;
			return false;
		})
		$('#example').dataTable( {
		       	sAjaxSource: "/admin/services.json",
		       	bProcessing: true,
    			bServerSide: true,
    			bSort: false,
    			bFilter: false,
    			fnServerParams: function ( aoData ) {
    				var moment  = $('.reportrange').data('daterangepicker');
					var start = +moment.startDate;
					var end = moment.endDate + 86399999;
					var filter = $.parseParams("?"+$("#form-reporting").serialize()).filter;	
			    	aoData.push( { name: "start", value: start} );
			    	aoData.push( { name: "end", value: end} );
			    	aoData.push( { name: "filter", value: filter} );
			    },
			    "aoColumnDefs": [ {
			      "aTargets": [ 5 ],
			      mRender: function ( data, type, full ) {
			        return moment(data).format("DD/MM/YYYY  HH:mm:ss");;
			      }
			    },{
			      "aTargets": [ 6 ],
			      mRender: function ( data, type, full ) {
			        return '<span class="label label-sm label-'+(data ?'danger' : 'info')+'">'+(data ?'OUI' : 'NON')+'</span>'
			      }
			    },{
			      "aTargets": [ 7 ],
			      mRender: function ( data, type, full ) {
			        return '<span class="label label-sm label-'+(data ?'danger' : 'info')+'">'+(data ?'OUI' : 'NON')+'</span>'
			      }
			    } ]
		    });
	})
	</script>
{% endblock %} 
{% block content %}
<div class="row">
	<form role="form" class="" id="form-reporting">
		<div class="form-group row">
			<div class="col-md-4"></div>
			<div class="col-md-3">
		        <div class="btn btn-blue reportrange"><i class="fa fa-calendar"></i>&nbsp;<span></span>&nbsp;<i
		                class="fa fa-angle-down"></i></div>
		        <div class="radio-list"><label class="radio-inline"><input
		            type="radio" name="filter"
		            value="a" checked="checked"/>&nbsp;
		        Tous</label><label class="radio-inline"><input
		            type="radio" name="filter"
		            value="r"/>&nbsp;
		        Recus</label><label class="radio-inline"><input
		            type="radio" name="filter"
		            value="s" />&nbsp;
		        Envoyé</label></div>
		    </div>
		    <div class="col-md-4">
	            <a href="#" id="csv-download" target="_blank" class="btn btn-primary"><i class="fa fa-download"></i></a>
		    </div>
		</div>
	</form>
</div>
<div class="row">
	<div class="col-lg-12">
		<div class="portlet">
		    <div class="portlet-header">
		        <div class="caption">Trafic SMS</div>
		    </div>
		    <div class="portlet-body">
				<div  class="table-responsive mtl">
					
					<table id="example" class="table table-striped table-bordered table-hover">
				        <thead>
				            <tr>
				                <th>from</th>
				                <th>to</th>
				                <th>MotCle</th>
				                <th>sms</th>
				                <th>SMSC</th>
				                <th>time</th>
				                <th>success</th>
				                <th>received</th>
				            </tr>
				        </thead>
				 
				        <tfoot>
				            <tr>
				                <th>from</th>
				                <th>to</th>
				                <th>MotCle</th>
				                <th>sms</th>
				                <th>SMSC</th>
				                <th>time</th>
				                <th>success</th>
				                <th>received</th>
				            </tr>
				        </tfoot>
				    </table>
				    
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}