@extends('layouts.app')        
@if ($droits=Auth::user()->Droit(Auth::user()->id))
@endif
@section('content')
<!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Tableau de bord</h1>
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.index') }}">Accueil</a>
                    </li>
                    <li class="breadcrumb-item active">
                       Tableau de bord
                    </li>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->

<section class="content">
    <div class="container-fluid">
      <!--  <row class="">
            <div class="col-md-8 mx-auto">
                <div class="jumbotron">
                <h1 class="display-4 text-primary text-center">Bienvenue dans le panneau d'administration du GED SEHI</h1>
                <p class="lead text-center" >Il s'agit d'un système de gestion éléctronique de documents de la société SEHI.</p>
                <hr class="my-4">


                </div>
            </div>
        </row>-->
      
        <div class="row">
         
             @if ($droits->where('menu_id',8)->first()!=null && $droits->where('menu_id',8)->first()->Afficher)
             <div class="col-lg-4 col-6">
                <div class="small-box bg-primary">
                  <div class="inner"><br><br>
                    <p>Liste des prix</p>
                  </div>
                  <div class="icon">
                    <i class="fas fa-cogs"></i>
                  </div>
                  <a  href="{{ route('admin.listeprix') }}" class="small-box-footer">Voir la liste <i class="fas fa-arrow-circle-right"></i></a>
                </div>
                  </div>
                    <!-- ./col -->
                  <div class="col-lg-4 col-6">
                    <!-- small box -->
                    <div class="small-box bg-success">
                      <div class="inner"><br><br>
                        <p>Régions</p>
                      </div>
                      <div class="icon">
                        <i class="fas fa-bars"></i>
                      </div>
                      <a  href="#" class="small-box-footer">Voir la liste <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                  </div>
                  <!-- ./col -->
                  <div class="col-lg-4 col-6">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                      <div class="inner text"><br><br>
                        <p>Statistiques</p>
                      </div>
                      <div class="icon">
                        <i class="fas fa-plus"></i>
                      </div>
                      <a href="#" class="small-box-footer">Afficher <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                  </div>
              @else
             
              @endif
        
        
          <!-- ./col -->
   
    </div>





    <!-- /.container-fluid -->
</section>
<!-- /.content -->
<!-- /.content-wrapper -->

@endsection


@section('extra-js')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    $(document).ready(function() {
            Highcharts.chart('pie-chart', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                                {
                                                 text: "Imprimer",
                                                 textKey: "printChart",
                                                    onclick: function () {
                                                        this.print()
                                                    }
                                                },
                                                {
                                                separator: true
                                                },
                                                
                                                {
                                                    text: 'Télecharger en format jpg',
                                                    onclick: function () {
                                                        this.exportChart({ type: "image/jpeg" })
                                                    }
                                                },
                                                 {
                                                     text: 'Télecharger en format png',
                                                     onclick: function () {
                                                         this.exportChart()
                                                     }
                                                 }, {
                                                     text: "Télecharger en format pdf",
                                                     textKey: "downloadPDF", onclick: function () { this.exportChart({ type: "application/pdf" }) }
                                                 }

                                                ]
                                }
                            }
                        },
                title: {
                    text: 'Pourcentage des frais de déplacements par division'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Depenses',
                    colorByPoint: true,
                    data: ''
                }],

            });

  Highcharts.chart('avancespardivision', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                                {
                                                 text: "Imprimer",
                                                 textKey: "printChart",
                                                    onclick: function () {
                                                        this.print()
                                                    }
                                                },
                                                {
                                                separator: true
                                                },
                                                
                                                {
                                                    text: 'Télecharger en format jpg',
                                                    onclick: function () {
                                                        this.exportChart({ type: "image/jpeg" })
                                                    }
                                                },
                                                 {
                                                     text: 'Télecharger en format png',
                                                     onclick: function () {
                                                         this.exportChart()
                                                     }
                                                 }, {
                                                     text: "Télecharger en format pdf",
                                                     textKey: "downloadPDF", onclick: function () { this.exportChart({ type: "application/pdf" }) }
                                                 }

                                                ]
                                }
                            }
                        },
                title: {
                    text: 'Pourcentage des avances par division'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Depenses',
                    colorByPoint: true,
                    data: ''
                }],

            });
  var rapport_par_mois_fd = '';
  var rapport_par_mois_om = '';
  var mois = '';
  var mois_fd = '';

  var cat = [];
  mois.forEach(function(item) {

      cat.push(item.name);
    });

  var moisfd = [];
  mois_fd.forEach(function(item) {

      moisfd.push(item.name);
    });


    Highcharts.chart('rapport_par_mois_fd', {
                title: {
                    text: 'Frais de déplacements par mois'
                },
                subtitle: {
                    text: ''
                },
                exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                                {
                                                 text: "Imprimer",
                                                 textKey: "printChart",
                                                    onclick: function () {
                                                        this.print()
                                                    }
                                                },
                                                {
                                                separator: true
                                                },
                                                
                                                {
                                                    text: 'Télecharger en format jpg',
                                                    onclick: function () {
                                                        this.exportChart({ type: "image/jpeg" })
                                                    }
                                                },
                                                 {
                                                     text: 'Télecharger en format png',
                                                     onclick: function () {
                                                         this.exportChart()
                                                     }
                                                 }, {
                                                     text: "Télecharger en format pdf",
                                                     textKey: "downloadPDF", onclick: function () { this.exportChart({ type: "application/pdf" }) }
                                                 }

                                                ]
                                }
                            }
                        },
                xAxis: {
                    categories: moisfd
                    
                },
                yAxis: {
                    title: {
                        text: 'Total en MAD'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        allowPointSelect: true
                    }
                },
                series: [{
                    name: ' ',
                    data: rapport_par_mois_fd
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });


        Highcharts.chart('rapport_par_mois_om', {
                title: {
                    text: 'Avances par mois'
                },
                subtitle: {
                    text: ''
                },
                exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                                {
                                                 text: "Imprimer",
                                                 textKey: "printChart",
                                                    onclick: function () {
                                                        this.print()
                                                    }
                                                },
                                                {
                                                separator: true
                                                },
                                                
                                                {
                                                    text: 'Télecharger en format jpg',
                                                    onclick: function () {
                                                        this.exportChart({ type: "image/jpeg" })
                                                    }
                                                },
                                                 {
                                                     text: 'Télecharger en format png',
                                                     onclick: function () {
                                                         this.exportChart()
                                                     }
                                                 }, {
                                                     text: "Télecharger en format pdf",
                                                     textKey: "downloadPDF", onclick: function () { this.exportChart({ type: "application/pdf" }) }
                                                 }

                                                ]
                                }
                            }
                        },
                xAxis: {
                    categories: cat
                    
                },
                yAxis: {
                    title: {
                        text: 'Total en MAD'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        allowPointSelect: true
                    }
                },
                series: [{
                    name: ' ',
                    data: rapport_par_mois_om
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
           



});

          
</script>
@endsection