<?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>Organigramme</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-header"> -->
          <!-- <h3 class="card-title card-outline card-success">Page d'acceuils</h3> -->

          <!-- <div class="card-tools"> -->
            <!-- <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button> -->
            <!-- <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button> -->
          <!-- </div> -->
        <!-- </div> -->
        <div class="card-body">
          <div class="row" id="organigrammes">
            <!--  -->
          <!-- Start creating your amazing application! -->
          <!-- <div class="col-md-12" > -->
          <!-- </div> -->

          
        </div>
        </div>
        <!-- /.card-body -->
        <!-- <div class="card-footer">
          Footer
        </div> -->
        <!-- /.card-footer-->
      </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';
  ?>

<!-- jQuery UI -->
<!-- <script src="<?php echo $nouveau_url ?>plugins/jquery-ui/jquery-ui.min.js"></script> -->
<!-- AdminLTE App -->

<!-- fullCalendar 2.2.5 -->
<!-- <script src="https://code.highcharts.com//code/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script> -->



<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 type="text/javascript">
  Highcharts.chart('organigrammes', {
    chart: {
        height: 600,
        inverted: true
    },

    title: {
        text: ' '
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var nodeName = point.toNode.name,
                    nodeId = point.toNode.id,
                    nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                    parentDesc = point.fromNode.id;
                return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
            }
        }
    },

    series: [{
        type: 'organization',
        name: 'Mininter',
        keys: ['from', 'to'],
        data: [<?php echo $donnes?>],
        levels: [{
            level: 0,
            color: 'green',
            dataLabels: {
                color: 'black'
            },
            height: 50
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 50
        }, {
            level: 2,
            color: 'green',
            height: 60
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [<?php echo $daffichage;?>],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 65
    }],
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 1000,
        sourceHeight: 600
    }

});
              
</script>