 <?php include_once PUBLIC_PATH. '/files_to_include/header_content.php'; ?>
<!-- =============================================== -->

  <!-- Left side column. contains the sidebar -->
  <aside class="main-sidebar" id="aside_menu" >
      <section class="sidebar">
          <ul class="sidebar-menu">
            <?php include_once PUBLIC_PATH. '/files_to_include/menu.php'; ?>
          </ul>
      </section>
  </aside>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper " style="background-color: white; td{border: solid  2px #000; }">
   

    <!-- Main content -->
    <section class="content">
         <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">Tableau de bord</h3>
                </div>
            </div>
            
            <div class="row">
                <div class=" container col-lg-offset-1 col-lg-10" id="caisse">
                    <legend>Mouvements de fonds</legend>
                    <form id="chart-caisse" class="col-lg-12">
                        <div class="col-lg-9 form-group">
                            <label>Periode de Consultation</label>
                            <input class="form-control periode" id="debut-caisse"  placeholder="Periode de Consultation"/>
                        </div> <br>
                        <div class="col-lg-3">
                           
                            <button type="submit" class="btn btn-microsoft">Valider</button>
                        </div>
                    </form>
                    <div id="graphique-caisse" class="col-sm-12" style="height: 250px;">

                    </div>
                </div>
            </div>
            <hr style="display: block;height: 1px;border: 0;border-top: 1px solid #1AB7EA;margin: 1em 0;padding: 0;">
            <div class="row">
                <div  class=" container col-lg-offset-1 col-lg-10" id="vente">
                <legend>Ventes</legend>
                <form id="chart-vente" class="col-sm-12">
                   
                    <div class="col-lg-9 form-group">
                        <label>Periode de consultation</label>
                        <input class="form-control periode" id="debut-vente"  placeholder="Periode de Consultation"/>
                    </div>
                    
                     <br>
                    <div class="col-lg-3 form-group">
                      
                        <button type="submit" class="btn btn-microsoft">Valider</button>
                    </div>
                </form>
                <div id="graphique-ventes" style="height: 280px;" class="col-sm-12">

                </div>
            </div>
            </div>
            <hr style="display: block;height: 1px;border: 0;border-top: 1px solid #1AB7EA;margin: 1em 0;padding: 0;">
            <div class="row">
                <div class="container col-lg-offset-1 col-lg-10" id="produit">
            <legend>Produits</legend>
            <form id="chart-produit" class="col-lg-12">
               
                <div class="col-lg-6 form-group">
                    <label>Periode</label>
                    <input class="form-control periode" id="debut-produit"  placeholder="Periode de Consultation"/>
                </div>
                <div class="col-lg-6 form-group">
                    <label>Produit</label>
                    <select name="produit" class="form-control select2" multiple="multiple" id="produit-produit" data-live-search="true">
                       
                        <?php
                          foreach( $this->produits as $produit){
                              echo "<option value='" . $produit->getIdproduit() . "'>". $produit->getNom() . "</option>";
                          }
                        ?>
                    </select>
                </div>
               
                <div class="col-sm-12 form-group">
                    <button type="submit" class="btn btn-microsoft">Valider</button>
                </div>
            </form>
             <div id="graphique-produits" style="height: 250px;" class="col-sm-12">
                
             </div>
        </div>
            </div>
            <hr style="display: block;height: 1px;border: 0;border-top: 1px solid #1AB7EA;margin: 1em 0;padding: 0;">
            <div class="row">
                <div class=" container col-lg-offset-1 col-lg-10" id="stock">
                    <legend>Stocks</legend>
            <form id="chart-stock" class="col-lg-12">
               
                <div class="col-lg-6 form-group">
                    <label>Période de Consultation</label>
                    <input class="form-control periode" id="debut-stock"  placeholder="Periode de Consultation"/>
                </div>
                
                <div class="col-lg-6 form-group">
                    <label>Produit</label>
                    <select name="produit" class="form-control select2"  multiple="multiple" id="produit-stock" data-live-search="true">
                        
                        <?php
                          foreach( $this->produits as $produit){
                              echo "<option value='" . $produit->getIdproduit() . "'>". $produit->getNom() . "</option>";
                          }
                        ?>
                    </select>
                </div>
                
                <div class="col-sm-12 form-group">
                    <button type="submit" class="btn btn-microsoft">Valider</button>
                </div>
            </form>
                <div id="graphique-stock" style="height: 250px;" class="col-sm-12">
                
                </div>
           </div>
            </div>
            
        </div>
     

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 <?php include_once PUBLIC_PATH. '/files_to_include/footer_content.php'; ?>
  
   <script src="<?php echo $this->baseUrl('script/jquery.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/bootstrap.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/sb-admin-2.js');?>"></script>
    <script src="<?php echo $this->baseUrl("script/jquery.dataTables.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/dataTables.bootstrap.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/dataTables.buttons.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/jszip.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/pdfmake.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/vfs_fonts.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/buttons.html5.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl("script/buttons.print.min.js");?>"></script>
    <script src="<?php echo $this->baseUrl('script/loadingoverlay.min.js');?>"></script>
     <script src="<?php echo $this->baseUrl('script/jquery.slimscroll.min.js');?>"></script>
      <script src="<?php echo $this->baseUrl("script/jquery-confirm.min.js");?>"></script>
      <script src="<?php echo $this->baseUrl('script/jquery.toast.min.js');?>"></script> 
      <script src="<?php echo $this->baseUrl('script/canvasjs.min.js');?>"></script>
       <script src="<?php echo $this->baseUrl("script/moment.js");?>"></script>
      <script src="<?php echo $this->baseUrl("script/daterangepicker.js");?>"></script>
    
     
      <script src="<?php echo $this->baseUrl("script/select2.full.min.js");?>"></script>
<!-- FastClick -->
<script src="<?php echo $this->baseUrl('script/fastclick.js');?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo $this->baseUrl('script/adminlte.min.js');?>"></script>
<script src="<?php echo $this->baseUrl('script/demo.js');?>"></script>
  <script type="text/javascript">
    $('.sidebar-menu').tree();
          
        var options = {};
        $('#rtl-wrap').show();
            options.locale = {
              direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
              format: 'YYYY/MM/DD',
              separator: ' - ',
              applyLabel: 'Apply',
              cancelLabel: 'Cancel',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
            };
            $(".select2").select2();
             $('.periode').daterangepicker(options);
      var $biCaisseEntree = <?php  echo $this->superDatas["biCaisseEntree"];?>;
      var $biCaisseSortie = <?php  echo $this->superDatas["biCaisseSortie"];?>;
      var $biFacture = <?php  echo $this->superDatas["biFacture"];?>;
      var $biRemboursement = <?php echo   $this->superDatas["biRemboursement"];?>;
      var $biPaiementRemboursement = <?php echo  $this->superDatas["biPaiementRemboursement"];?>;
      var $biPaiementFacture = <?php echo   $this->superDatas["biPaiementFacture"];?>;
      var $biProduits = <?php echo $this->superDatas["produits"];?>;
      var $biEntrees = <?php echo $this->superDatas["entrees"];?>;
      var $biSorties = <?php echo $this->superDatas["sorties"];?>;
      
      $.each($biProduits , function( key , val){
         
         $biProduits[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biEntrees , function( key , val){
         $biEntrees[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biSorties , function( key , val){
         $biSorties[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biCaisseEntree , function( key , val){
         $biCaisseEntree[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biCaisseSortie , function( key , val){
         $biCaisseSortie[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biFacture , function( key , val){
         $biFacture[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biRemboursement , function( key , val){
         $biRemboursement[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biPaiementRemboursement , function( key , val){
         $biPaiementRemboursement[key]["y"]  = parseInt(val["y"]);
      });
      
      $.each($biPaiementFacture , function( key , val){
         $biPaiementFacture[key]["y"]  = parseInt(val["y"]);
      });
      
        var $allCheck = $("input[type='checkbox']");
        for( var i=0 ; i<$allCheck.length ; i++){
             $allCheck.eq(i).trigger("click");
        }
        
       
        
       
      
      
        var chart2 = new CanvasJS.Chart("graphique-caisse", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true,
                  dataPointWidth : 10,
                 zoomType: "xy",
                  legend:{
                   fontSize : 21
                  },
                 axisY: {
                   suffix: " FCFA"
                 },
		title:{
			text: " Mouvements de fonds du " + "<?php echo $this->debut;?>" + " au " + "<?php echo $this->fin;?>"              
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                        color:'#3c763d',
                        legendText: "Entrees",
			dataPoints: $biCaisseEntree
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series3",
                        color:'#dd4b39',
                        legendText: "Sorties",
			dataPoints: $biCaisseSortie
		}
		]
                
	});
	chart2.render();
        
        var chart1 = new CanvasJS.Chart("graphique-ventes", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true,
                  dataPointWidth : 10,
                 zoomType: "xy",
                  legend:{
                   fontSize : 21
                  },
                 axisY: {
                   suffix: " FCFA"
                 },
		title:{
			text: " Ventes du " + "<?php echo $this->debut;?>" + " au " + "<?php echo $this->fin;?>"              
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                         color:'#3c763d',
                        legendText: "Factures",
			dataPoints: $biFacture
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series2",
                        color:"#a2d246",
                        legendText: "Paiements de factures",
			dataPoints: $biPaiementFacture
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series3",
                        color:'#f39c12',
                        legendText: "Remboursements",
			dataPoints: $biRemboursement
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series4",
                        color:'#dd4b39',
                        legendText: "Paiements Remboursements",
			dataPoints: $biPaiementRemboursement
		}
		]
                
	});
	chart1.render();
        
        var chart3 = new CanvasJS.Chart("graphique-produits", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true,
                  dataPointWidth : 10,
                 zoomType: "xy",
                  legend:{
                   fontSize : 21
                  },
		title:{
			text: " Ventes de produit du " + "<?php echo $this->debut;?>" + " au " + "<?php echo $this->fin;?>"              
		},
		data: [              
		{
			type: "column",
			dataPoints: $biProduits
		}
		]
	});
        chart3.render();
        
        var chart4 = new CanvasJS.Chart("graphique-stock", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true, 
                  dataPointWidth : 10,
                 zoomType: "xy",
                 legend:{
                   fontSize : 21
                 },
		title:{
			text: " Mouvements de stock du " + "<?php echo $this->debut;?>" + " au " + "<?php echo $this->fin;?>"              
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                        color:'#3c763d',
                        legendText: "Entrees",
			dataPoints: $biEntrees
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series2",
                        color:'#dd4b39',
                        legendText: "Sorties",
			dataPoints: $biSorties
		}
		]
	});
        chart4.render();
        
        var url = "<?php echo $this->url(array('controller' => 'Accueil', 'action' => 'statistique')); ?>";
        
        function hideCanvas(){
            $(".canvasjs-chart-credit").hide();
            setTimeout(function(){
                hideCanvas();
            },300);
        }
        
        hideCanvas();
        
        $("#chart-caisse").on("submit",function(e){
            e.preventDefault();
             var list = $("#debut-caisse").val();
      list = list.toString();
      var chaine1 = list.substr(0, list.search("-"));
      var chaine2 = list.substr(12, list.length+1);
            if ( chaine1 === "" || chaine2 === ""){
                $.toast({
                    heading : "Statut",
                    text : "Veuillez indiquer la période de consultation",
                    hideAfter : false,
                    stack : false, 
                    icon : "error",
                    position : 'mid-center'
                });
                return false;
            }
            var objet = {
                type : "caisse",
                debut : chaine1,
                fin : chaine2
            };
            
            $.ajax({
                url : url,
                data : objet,
                dataType :"json",
                type : "post",
                beforeSend : function(){
                    $("#caisse").LoadingOverlay("show");
                },
                success : function(data){
                    var dataPointsCaisseEntrees = [];
                    var dataPointsCaisseSorties = [];
//                    var dataPointsCaisseEspeces = [];
                    $.each ( data.datasCaisseEntrees , function( key , val ){
                        dataPointsCaisseEntrees.push({"label":val.label , "y" : parseInt(val.y)});
                    });
                    $.each ( data.datasCaisseSorties , function( key , val ){
                        dataPointsCaisseSorties.push({"label":val.label , "y" : parseInt(val.y)});
                    });
//                    $.each ( data.datasCaisseEspeces , function( key , val ){
//                        dataPointsCaisseEspeces.push({"label":val.label , "y" : val.y});
//                    });
                    $("#graphique-caisse").empty();
                    var chart6 = new CanvasJS.Chart("graphique-caisse", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true,
                 dataPointWidth : 10,
                 zoomType: "xy",
                  legend:{
                   fontSize : 21
                  },
                 axisY: {
                   suffix: " FCFA"
                 },
		title:{
			text: data.title             
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                        color:'#3c763d',
                        legendText: "Entrees",
			dataPoints: dataPointsCaisseEntrees
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series3",
                        color:'#dd4b39',
                        legendText: "Sorties",
			dataPoints: dataPointsCaisseSorties
		}
		]
                
	});
	chart6.render();
                },
                complete : function(){
                    $("#caisse").LoadingOverlay("hide");
                }
            });
        });
        
        $("#chart-vente").on("submit",function(e){
            e.preventDefault();
             var list = $("#debut-vente").val();
      list = list.toString();
      var chaine1 = list.substr(0, list.search("-"));
      var chaine2 = list.substr(12, list.length+1);
            if ( chaine1 === "" || chaine2 === ""){
                $.toast({
                    heading : "Statut",
                    text : "Veuillez indiquer la période de consultation",
                    hideAfter : false,
                    stack : false, 
                    icon : "error",
                    position : 'mid-center'
                });
                return false;
            }
            var objet = {
                type : "vente",
                debut : chaine1,
                fin : chaine2
            };
            
            $.ajax({
                url : url,
                data : objet,
                dataType :"json",
                type : "post",
                beforeSend : function(){
                    $("#vente").LoadingOverlay("show");
                },
                success : function(data){
                    var dataPointsFacture = [];
                    var dataPointsPaiements = [];
                    var dataPointsRemboursement = [];
                    var dataPointsPaiementsRemboursement = [];
                    $.each ( data.datasFacture , function( key , val ){
                        dataPointsFacture.push({"label":val.label , "y" : parseInt(val.y)});
                    });
                    $.each( data.datasPaiement , function ( key , val){
                        dataPointsPaiements.push({"label":val.label , "y" : parseInt(val.y)});
                    });
                    $.each( data.datasRemboursement , function ( key , val ){
                        dataPointsRemboursement.push({"label" : val.label , "y" : parseInt(val.y)});
                    });
                    $.each( data.datasPaiementRemboursement , function( key , val ){
                        dataPointsPaiementsRemboursement.push({"label" : val.label , "y" : parseInt(val.y)});
                    });
                   
                    $("#graphique-ventes").empty();
             var chart1 = new CanvasJS.Chart("graphique-ventes", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true, 
                  dataPointWidth : 10,
                 zoomType: "xy",
                 legend:{
                   fontSize : 21
                 },
                 axisY: {
                   suffix: " FCFA"
                 },
		title:{
			text: data.title             
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                        color:'#3c763d',
                        legendText: "Factures",
			dataPoints: dataPointsFacture
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series2",
                        color:"#a2d246",
                        legendText: "Paiements de factures",
			dataPoints: dataPointsPaiements
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series3",
                        color:'#f39c12',
                        legendText: "Remboursements",
			dataPoints: dataPointsRemboursement
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series4",
                        color:'#dd4b39',
                        legendText: "Paiements Remboursements",
			dataPoints: dataPointsPaiementsRemboursement
		}
		]
                
	});
        chart1.render();
                },
                complete : function(){
                    $("#vente").LoadingOverlay("hide");
                }
            });
            
        });
        
        $("#chart-produit").on("submit",function(e){
            e.preventDefault();
              var list = $("#debut-produit").val();
      list = list.toString();
      var chaine1 = list.substr(0, list.search("-"));
      var chaine2 = list.substr(12, list.length+1);
            if ( chaine1 === "" || chaine2 === ""){
                $.toast({
                    heading : "Statut",
                    text : "Veuillez indiquer la période de consultation",
                    hideAfter : false,
                    stack : false, 
                    icon : "error",
                    position : 'mid-center'
                });
                return false;
            }
            var objet = {
                type : "produit",
                debut : chaine1,
                fin : chaine2,
                produit : $("#produit-produit").val()
            };
            
            $.ajax({
                url : url,
                data : objet,
                dataType :"json",
                type : "post",
                beforeSend : function(){
                    $("#produit").LoadingOverlay("show");
                },
                success : function( data ){
                    var dataPoints = [];
                    $.each( data.datasProduits , function(key,val){
                        dataPoints.push({"label" : val.label , "y" : val.y});
                    });
                    var chart2 =new CanvasJS.Chart("graphique-produits", {
                                animationEnabled: true,
                                animationDuration: 4000,
                                 dataPointWidth : 10,
                                zoomEnabled: true, 
                                zoomType: "xy",
                               title:{
                                       text: data.title             
                               },
                               data: [              
                               {
                                       type: "column",
                                       dataPoints: dataPoints
                               }
                               ]
                       });
                    chart2.render();
                },
                complete : function(){
                    $("#produit").LoadingOverlay("hide");
                }
                
            });
        });
        
        $("#chart-stock").on("submit",function(e){
            e.preventDefault();
            var list = $("#debut-stock").val();
      list = list.toString();
      var chaine1 = list.substr(0, list.search("-"));
      var chaine2 = list.substr(12, list.length+1);
            if ( chaine1 === "" || chaine2 === ""){
                $.toast({
                    heading : "Statut",
                    text : "Veuillez indiquer la période de consultation",
                    hideAfter : false,
                    stack : false, 
                    icon : "error",
                    position : 'mid-center'
                });
                return false;
            }
            var objet = {
                type : "stock",
                debut : chaine1,
                fin : chaine2,
                produit : $("#produit-stock").val()
            };
            $.ajax({
                url : url,
                data : objet,
                dataType :"json",
                type : "post",
                beforeSend : function(){
                    $("#stock").LoadingOverlay("show");
                },
                success : function( data ){
                    var dataPointsEntrees = [];
                    var dataPointsSorties = [];
                    var dataPointsStock = [];
                    $.each( data.datasStockEntrees , function(key , val){
                        dataPointsEntrees.push({"label": val.label, "y": val.y});
                    });
                    $.each( data.datasStockSorties , function(key, val){
                        dataPointsSorties.push({"label": val.label, "y":val.y});
                    });
                    $.each( data.datasStockStock, function(key, val){
                        dataPointsStock.push({"label":val.label, "y":val.y});
                    });
                    
                  
                        var chart3 = new CanvasJS.Chart("graphique-stock", {
                 animationEnabled: true,
                 animationDuration: 4000,
                 zoomEnabled: true, 
                  dataPointWidth : 10,
                 zoomType: "xy",
                 legend:{
                   fontSize : 21
                 },
		title:{
                    text:data.title            
		},
		data: [              
		{
			type: "column",
                        showInLegend: true, 
                        name: "series1",
                        color:'#3c763d',
                        legendText: "Entrees",
			dataPoints: dataPointsEntrees
		},
                {
			type: "column",
                        showInLegend: true, 
                        name: "series2",
                        color:'#dd4b39',
                        legendText: "Sorties",
			dataPoints: dataPointsSorties
		}
		]
	});
        chart3.render();
                    
                },
                complete : function(){
                    $("#stock").LoadingOverlay("hide");
                }
                
            });
        });
      
    </script>

</body>

</html>