@extends('layouts.default') 
@section('content')
<style>
    text.amcharts-pie-label {
        font-size: 8px!important;
    }
    .p-1{padding: 2px!important;}
    .m-1{margin: 2px!important;}
    .flex-container {
      display: flex;
      justify-content: space-between;
    }
    .flex-container > div {
      text-align: center;
    }
    .b-icon{
        position: absolute;
        font-size: 27px;
        top: 10px;
        right: 20px;
    }
    .relative{ position: relative; }
    .absolute{ position: absolute; }
    .selected-inventaire{
        border: 3px solid dodgerblue;
        border-radius: 20px!important;
    }
    .z-depth-0>span{font-size: 14px;}
    .c-white{color:#fff!important;}
</style>
<div class="row">
    <div class="col-md-3 p-1 col-xs-12 col-sm-6">
        <div class="panel panel-body p-1 m-1 relative bg-green">
            <h3 class="text-center">{{$zones}} Zones</h3>
            <i class="fas fa-globe-americas  b-icon"></i>
        </div>
    </div>
    <div class="col-md-3 p-1 col-xs-12 col-sm-6">
        <div class="panel panel-body p-1 m-1 relative bg-yellow">
            <h3 class="text-center c-white" >{{$agences}} Agences</h3>
            <i class="fas fa-warehouse b-icon  c-white"></i>
        </div>
    </div>
    <div class="col-md-3 p-1 col-xs-12 col-sm-6">
        <div class="panel panel-body p-1 m-1 relative bg-red">
            <h3 class="text-center">{{$batiments}} Batiments</h3>
            <i class="fas fa-building b-icon"></i>
        </div>
    </div>

    <div class="col-md-3 p-1 col-xs-12 col-sm-6">
        <div class="panel panel-body p-1 m-1 relative bg-blue">
            <h3 class="text-center">{{$equipements}} Equipements</h3>
            <i class="fas fa-barcode b-icon"></i>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-body">
            <div id="pie-categories-models" style="width: 100%;height: 466px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-body">
            <form action="" method="GET" class="form-inline">
                <select name="entite_code" style="width: 17%"
                            onchange="selectZoneByEntite('zone_code', 'entite_code');
                            selectAgenceByEntiteZone('entite_code', 'zone_code', 'agence_code');"
                            id="entite_code">
                    <option value="">Choisir...</option>
                    @foreach($sel_entites as $entite)
                        <option value="{{ $entite->code}}"
                            @if($entite_code == $entite->code) selected @endif>
                            {{$entite->designation}}
                        </option>                                   
                    @endforeach
                </select>
                <select name="zone_code" id="zone_code" style="width: 17%"
                        onchange="selectAgenceByEntiteZone('entite_code', 'zone_code', 'agence_code');">
                    <option value="">Choisir...</option>
                    @foreach($sel_zones as $zone)
                        <option value="{{ $zone->code}}"
                            @if($zone_code == $zone->code) selected @endif>
                            {{$zone->designation}}
                        </option>
                    @endforeach
                </select>
                <select name="agence_code" style="width: 17%" id="agence_code"
                        onchange="selectEtageByAgence('etage_code', 'agence_code');">
                    <option value="">Choisir...</option>
                    @foreach($sel_agences as $agence)
                        <option value="{{ $agence->code}}"
                            @if($agence_code == $agence->code) selected @endif>
                            {{$agence->designation}}
                        </option>                                   
                    @endforeach
                </select>
                <select name="departement_code"  style="width: 17%!important;">
                    <option value="">Choisir...</option>
                    @foreach($sel_departements as $departement)
                        <option value="{{ $departement->code}}"
                            @if($departement_code == $departement->code) selected @endif>
                            {{$departement->designation}}
                        </option>
                    @endforeach
                </select>
                <select name="group_by"  style="width: 17%!important;">
                    <option value="group_categorie" @if($group_by=='group_categorie') selected @endif >Group By Categorie</option>
                    <option value="group_article" @if($group_by=='group_article') selected @endif >Group By Articles</option>
                </select>
                <button class="btn btn-xs btn-success" style="margin-top: 0px;">
                    <i class="fa fa-search"></i>
                </button>
            </form>
            <table class="table" id="datatable-inv">
                <thead>
                    <tr>
                        <th class="text-center">{{ count($list_articles) }} @if($group_by=='group_categorie') Categories @else Articles @endif</th>
                        <th class="text-center">Quantite</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($list_articles as $article)
                    <tr>
                        <td class="">{{ $article->designation }}</td>
                        <td class="text-center">{{ $article->nbr_article }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-body">
            <div id="pie-equipements-statut" style="width: 100%;height: 466px;"></div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="panel panel-body">
            
        </div>
    </div>

    
</div>



<!-- Chart code -->
<script>

    $.ajax({
        url: '{{route("dashboardStat.pieCategoriesModels")}}',
        method: 'GET'
    })
    .done(function(response) {
        console.log(response);
         // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("pie-categories-models", am4charts.PieChart);

        // Set data
        var selected;
        var types = response;

        // Add data
        chart.data = generateChartData();

        var label = chart.seriesContainer.createChild(am4core.Label);
        label.text = "Categories/Models";
        label.horizontalCenter = "middle";
        label.verticalCenter = "middle";
        label.fontSize = 22;

        // Add and configure Series
        var pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = "percent";
        pieSeries.dataFields.category = "type";
        pieSeries.slices.template.propertyFields.fill = "color";
        pieSeries.slices.template.propertyFields.isActive = "pulled";
        pieSeries.slices.template.strokeWidth = 0;
        /*
            pieSeries.alignLabels = true;
            pieSeries.labels.template.bent = false;
            pieSeries.labels.template.radius = 3;
            pieSeries.labels.template.padding(0,0,0,0);
        */
        pieSeries.ticks.template.disabled = true;
        pieSeries.alignLabels = false;
        pieSeries.labels.template.text = "{value.percent.formatNumber('#.0')}%";
        pieSeries.labels.template.radius = am4core.percent(-15);
        pieSeries.labels.template.fill = am4core.color("white");

        pieSeries.innerRadius = am4core.percent(70);

        function generateChartData() {
          var chartData = [];
          for (var i = 0; i < types.length; i++) {
            if (i == selected) {
              for (var x = 0; x < types[i].subs.length; x++) {
                var type = (types[i].subs[x].type == null ) ? 'NA' : types[i].subs[x].type;
                chartData.push({
                  type: type,
                  percent: types[i].subs[x].percent,
                  color: types[i].color,
                  pulled: true
                });
              }
            } else {
              chartData.push({
                type: types[i].type,
                percent: types[i].percent,
                color: types[i].color,
                id: i
              });
            }
          }
          return chartData;
        }

        pieSeries.slices.template.events.on("hit", function(event) {
          if (event.target.dataItem.dataContext.id != undefined) {
            selected = event.target.dataItem.dataContext.id;
          } else {
            selected = undefined;
          }
          chart.data = generateChartData();
        });
    });
    

    $.ajax({
        url: '{{route("dashboardStat.pieEquipementStatut")}}',
        method: 'GET'
    })
    .done(function(response) {
        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("pie-equipements-statut", am4charts.PieChart);

        var label = chart.seriesContainer.createChild(am4core.Label);
        label.text = "Statut Equipements";
        label.horizontalCenter = "middle";
        label.verticalCenter = "middle";
        label.fontSize = 22;

        // Add and configure Series
        var pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = "nbr_equipement";
        pieSeries.dataFields.category = "statut";

        // Let's cut a hole in our Pie chart the size of 30% the radius
        //chart.innerRadius = am4core.percent(60);

        // Put a thick white border around each Slice
        //pieSeries.slices.template.stroke = am4core.color("#fff");
        //pieSeries.slices.template.strokeWidth = 2;
        //pieSeries.slices.template.strokeOpacity = 1;
        pieSeries.slices.template
          // change the cursor on hover to make it apparent the object can be interacted with
          .cursorOverStyle = [
            {
              "property": "cursor",
              "value": "pointer"
            }
          ];

       /* pieSeries.alignLabels = false;
        pieSeries.labels.template.bent = true;
        pieSeries.labels.template.radius = 3;
        pieSeries.labels.template.padding(0,0,0,0);

        pieSeries.ticks.template.disabled = true;*/

        pieSeries.ticks.template.disabled = true;
        pieSeries.alignLabels = false;
        pieSeries.labels.template.text = "{value.percent.formatNumber('#.0')}%";
        pieSeries.labels.template.radius = am4core.percent(-15);
        pieSeries.labels.template.fill = am4core.color("white");
        pieSeries.innerRadius = am4core.percent(70);

        // Create a base filter effect (as if it's not there) for the hover to return to
        var shadow = pieSeries.slices.template.filters.push(new am4core.DropShadowFilter);
        shadow.opacity = 0;

        // Create hover state
        var hoverState = pieSeries.slices.template.states.getKey("hover"); // normally we have to create the hover state, in this case it already exists

        // Slightly shift the shadow and make it more prominent on hover
        var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
        //hoverShadow.opacity = 0.7;
        //hoverShadow.blur = 5;

        // Add a legend
        //chart.legend = new am4charts.Legend();

        chart.data = response;
    });
    
   
</script>
@endsection