<?php
  include VIEWPATH.'includes/new_header.php';
  ?>
  <!-- fullCalendar -->
  <!-- <link rel="stylesheet" href="<?php echo $nouveau_url ?>plugins/fullcalendar/main.css"> -->

  
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <?php
  include VIEWPATH.'includes/new_top_menu.php';
  include VIEWPATH.'includes/new_menu_principal.php';
  ?>

  

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Dashboard Vente & Client</h1>
          </div>
          <div class="col-sm-6">
           
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">

        <div class="card-body">

      <form method="POST" action="<?=base_url('dashboard/Dashboard_Vente')?>" id="myform">
            

              <div class="form-row">


              <!-- <div class="col-md-4">
                <label>Statut du congé</label> 
                    <select class="custom-select" name="STATUS_CONGE" id="STATUS_CONGE" onchange="get_info()">
                          <option>-- Select --</option>
                          <?php
                          foreach ($typeconge as $typeconge) { ?>

                           <option value="<?php echo $typeconge['STATUS_CONGE'] ?>" <?php echo  set_select('STATUS_CONGE', $typeconge['STATUS_CONGE']); ?> <?= ($STATUS_CONGE == $typeconge['STATUS_CONGE'])?"selected":"" ?> ><?php echo $typeconge['DESCRIPTION']?></option>


                           


                         <?php }
                          ?>
                        </select>
              </div> -->




                 <div class="col-md-4">
                <label>Du</label>
               
                  <input type="date"  name="DATE1" id="DATE1" class="form-control" onchange="get_info()" value="<?=set_value('DATE1')?>">
              </div>


               <div class="col-md-4">
                <label>Au</label>

                  <input type="date" name="DATE2" id="DATE2" class="form-control" onchange="get_info()" value="<?=set_value('DATE2')?>">
                </div>
              </div>

</form>


          <div class="row col-md-12">
            
            <div class="col-md-12 text-center"><br>
            <h4><?php echo $titre_rapport?></h4>
            </div>
            <div class="col-md-6" id="container1"></div>
      <div class="col-md-6" id="container"></div>
      <div class="col-md-6" id="container5"></div>
      <div class="col-md-6" id="container3"></div>


       <div class="col-md-6" id="container4"></div>
       <div class="col-md-6" id="container2"></div>
       
       
       

        </div>

      <div class="row col-md-12">
       

        </div>
        <div class="row col-md-12">
       

        </div>


        </div>

      </div>
      <!-- /.card -->

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

  <?php
 include VIEWPATH.'includes/new_copy_footer.php';  
  ?>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<?php
  include VIEWPATH.'includes/new_script.php';
  ?>

<script src="<?php echo $nouveau_url ?>higthchart/code/highcharts.js"></script>
<script src="<?php echo $nouveau_url ?>higthchart/code/modules/sankey.js"></script>
<script src="<?php echo $nouveau_url ?>higthchart/code/modules/organization.js"></script>
<script src="<?php echo $nouveau_url ?>higthchart/code/modules/exporting.js"></script>
<script src="<?php echo $nouveau_url ?>higthchart/code/modules/accessibility.js"></script>

</body>
</html>
<script>


         function get_info() {
       
       myform.action= myform.action;
        myform.submit();
      } 
  

</script>

<!---rapport 1-->

<script type="text/javascript">
    Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Evolution Des commandes'
    },
    // subtitle: {
    //     text: 'Source: ' +
    //         '<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
    //         'target="_blank">Wikipedia.com</a>'
    // },
    xAxis: {
        categories: <?php echo $categorven2 ?>
    },
    yAxis: {
        title: {
            text: 'Nombre'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '500ml',
        data: <?php echo $data_nombrevide1?>
    }, {
        name: '1.5L',
        data: <?php echo $data_nombrevide2?>
    }
    , {
        name: '20L',
        data: <?php echo $data_nombrevide3?>
    },
    {
        name: '5L',
        data: <?php echo $data_nombrevide4?>
    }
    
]
});
</script>
<script type="text/javascript">
    Highcharts.chart('container4', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Retour Vente'
    },
    // subtitle: {
    //     text: 'Source: ' +
    //         '<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
    //         'target="_blank">Wikipedia.com</a>'
    // },
    xAxis: {
        categories: <?php echo $categories2?>
    },
    yAxis: {
        title: {
            text: 'Nombre'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: '500ml',
        data: <?php echo $data_nombreplien1 ?>
    }, {
        name: '20L',
        data: <?php echo $data_nombreplien2?>
    }]
});
</script>



<script type="text/javascript">
Highcharts.setOptions({
    colors: Highcharts.getOptions().colors.map(function (color) {
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.3,
                r: 0.7
            },
            stops: [
                [0, color],
                [1, Highcharts.color(color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    })
});

// Build the chart
Highcharts.chart('container1', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Status actuelle des commandes'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<span style="font-size: 1.2em"><b>{point.name}</b>' +
                    '</span><br>' +
                    '<span style="opacity: 0.6">{point.percentage:.1f} ' +
                    '%</span>',
                connectorColor: 'rgba(128,128,128,0.5)'
            }
        }
    },
    series: [{
        name: 'Share',
        data: <?php echo $datav1 ?>
    }]
});
</script>

<script type="text/javascript">
(function (H) {
    H.seriesTypes.pie.prototype.animate = function (init) {
        const series = this,
            chart = series.chart,
            points = series.points,
            {
                animation
            } = series.options,
            {
                startAngleRad
            } = series;

        function fanAnimate(point, startAngleRad) {
            const graphic = point.graphic,
                args = point.shapeArgs;

            if (graphic && args) {

                graphic
                    // Set inital animation values
                    .attr({
                        start: startAngleRad,
                        end: startAngleRad,
                        opacity: 1
                    })
                    // Animate to the final position
                    .animate({
                        start: args.start,
                        end: args.end
                    }, {
                        duration: animation.duration / points.length
                    }, function () {
                        // On complete, start animating the next point
                        if (points[point.index + 1]) {
                            fanAnimate(points[point.index + 1], args.end);
                        }
                        // On the last point, fade in the data labels, then
                        // apply the inner size
                        if (point.index === series.points.length - 1) {
                            series.dataLabelsGroup.animate({
                                opacity: 1
                            },
                            void 0,
                            function () {
                                points.forEach(point => {
                                    point.opacity = 1;
                                });
                                series.update({
                                    enableMouseTracking: true
                                }, false);
                                chart.update({
                                    plotOptions: {
                                        pie: {
                                            innerSize: '40%',
                                            borderRadius: 8
                                        }
                                    }
                                });
                            });
                        }
                    });
            }
        }

        if (init) {
            // Hide points on init
            points.forEach(point => {
                point.opacity = 0;
            });
        } else {
            fanAnimate(points[0], startAngleRad);
        }
    };
}(Highcharts));

Highcharts.chart('container5', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Etat de recouvrement'
    },
   
    tooltip: {
        headerFormat: '',
        pointFormat:
            '<span style="color:{point.color}">\u25cf</span> ' +
            '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            borderWidth: 2,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br>{point.percentage}%',
                distance: 20
            }
        }
    },
    series: [{
        // Disable mouse tracking on load, enable after custom animation
        enableMouseTracking: false,
        animation: {
            duration: 2000
        },
        colorByPoint: true,
        data: <?php echo $datav3 ?>
    }]
});
</script>




<script type="text/javascript">

Highcharts.chart('container3', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Repartition des clients'
    },
    xAxis: {
        categories: <?php echo $datar5?>,
        crosshair: true,
        accessibility: {
            description: 'Motif'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Nombre'
        }
    },
    tooltip: {
        valueSuffix: ' '
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [
        {
            name: 'Vide',
            data: <?php echo $data_vide1; ?>
        },
        {
            name: 'Pleine',
            data: <?php echo $data_plein1; ?>
        }
    ]
});

</script>
<script>
Highcharts.chart('container2', {

title: {
    text: 'Top 10 des clients',
    align: 'left'
},

// subtitle: {
//     text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
//     align: 'left'
// },

yAxis: {
    title: {
        text: 'Nombre d achat'
    }
},

xAxis: {
    categories: <?php echo $categories6 ?>
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

// plotOptions: {
//     series: {
//         label: {
//             connectorAllowed: false
//         },
//         pointStart: 2010
//     }
// },

series: [{
    name: '500ML',
    data: <?php echo $data_prod1?>
}, {
    name: '1.5L',
    data: <?php echo $data_prod2?>
}, {
    name: '20L',
    data: <?php echo $data_prod3?>
}, {
    name: '5L',
    data: <?php echo $data_prod4?>
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
</script>