@extends('layouts.embed_camembert')

@section('title')
    {{ $compte->name }} - Suivi des engagements
@endsection


@section('content')

    @if (!$is_embed)
        <div style="max-width:800px; margin: 80px auto 30px;">
    @endif

    <div id="donutchart" class="chart"></div>

    @if (!$is_embed)
        </div>
    @endif
@endsection



@section('js-script')
    <script src="{{ mix('/js/embed-suivi.js') }}"></script>

    <script type="text/javascript">

        $(document).ready( function () {

            google.charts.load("current", {packages:["corechart"]});
            google.charts.setOnLoadCallback(drawChart);

            // https://developers.google.com/chart/interactive/docs/gallery/piechart
            function drawChart()
            {
                var data = google.visualization.arrayToDataTable([
                    ['Statut', 'Nombre'],
                    @foreach ($statuts as $statut)
                        [ "{!! $statut->name !!}", {{ count($statut->engagements()->whereCompteId($compte->id)->get()) }} ],
                    @endforeach
                ]);

                var options = {
                    //title: 'Mise en oeuvre du programme',
                    legend: 'bottom',
                    pieHole: 0.5,
                    colors: [
                        @foreach ($statuts as $statut)
                            '{{ $statut->embed_color }}',
                        @endforeach
                    ],
                    pieSliceTextStyle: {color:'#313435'},
                    chartArea: {
                        top:0,
                        left:0,
                        width: '100%',
                        height: '80%'
                    },
                };

                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
            }


            $(window).resize(function(){
                drawChart();
            });
        });

    </script>
@endsection