@extends('layouts.app')

@section('title')
Tableau de bord - Suivi des engagements
@endsection

@section('page-title')
Tableau de bord
@endsection


@section('button-top')
<a class="btn cur-p btn-copernic" href="{{ route('suivi.configuration') }}">Modifier la configuration</a>
@endsection



@section('content')


    <div class="row">
        <div class="col-md-6">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <h4 class="c-grey-900 mB-30">Répartition des engagements par statut</h4>
                
                <canvas id="engagements-repartition-statut" height="200"></canvas>

                <h4 class="c-grey-900 mB-20 mT-40">Intégrer le graphique ci-dessus à votre site</h4>

                Pour afficher le graphique ci-dessus sur votre site web, vous devez copier-coller le code ci-dessous sur la page sur laquelle vous souhaitez que le module apparaisse.

                <div class="consultation-code">
                    <code class="bgc-grey-100 p-10 mT-20" style="width:100%; display:block; border:1px solid rgba(0, 0, 0, 0.2);">{{ html_entity_decode('<iframe src="https://'.env('EMBED_SUBDOMAIN').'.'.env('APP_DOMAIN').'/sc/'.currentAccount()->str_id.'" id="copernic-'.currentAccount()->str_id.'" style="width:100%;max-width:700px;" height="500" noborder frameborder="0"></iframe>') }}</code>
                    <a class="copy-block" href="#" data-toggle="tooltip" data-placement="left" title="Copier le code">
                        <i class="fas fa-download"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="bgc-white bd bdrs-3 p-20 mB-20 ">
                <h4 class="c-grey-900 mB-20">Avancement par thématique</h4>
                @foreach ($thematiques as $thematique)
                    <div class="thematique thematique-{{ $thematique->id }} mB-15">
                        {{ $thematique->name }}

                        @php
                            $total_thematique = $thematique->engagements()->count();
                            $engagements_by_statuts = $thematique->engagements()->get()->groupBy('statut_id');

                            $pourcentage = 0;
                            $previous = 0;
                        @endphp

                        <div class="thematique-graph mT-3">
                            @foreach ($statuts as $statut)
                                @php
                                    $previous += $pourcentage;

                                    $pourcentage = 0;

                                    if ($total_thematique AND isset($engagements_by_statuts[$statut->id])) {
                                        $pourcentage = count($engagements_by_statuts[$statut->id]) * 100 / $total_thematique;
                                    }
                                @endphp
                                <div class="thematique-detail thematique-{{ \Illuminate\Support\Str::slug($statut->name) }}" style="left:{{ $previous }}%; width:{{ $pourcentage }}%; background-color:{{ $statut->bg_color }}; color:{{ $statut->color }}; @if ($pourcentage == 0) padding:0; @endif">@if ($pourcentage > 0) {{ number_format($pourcentage, 2, ',', ' ') }}% @endif </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        

    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <h4 class="c-grey-900 mB-20">Intégrer le suivi à votre site web</h4>

                Pour afficher le suivi des engagemnts sur votre site web, vous devez copier-coller le code ci-dessous sur la page sur laquelle vous souhaitez que le module apparaisse.

                <div class="consultation-code">
                    <code class="bgc-grey-100 p-10 mT-20" style="width:100%; display:block; border:1px solid rgba(0, 0, 0, 0.2);">{{ html_entity_decode('<iframe src="https://'.env('EMBED_SUBDOMAIN').'.'.env('APP_DOMAIN').'/s/'.currentAccount()->str_id.'" id="copernic-'.currentAccount()->str_id.'" style="width:100%;max-width:700px;" height="800" noborder frameborder="0"></iframe>') }}<br />
{{ html_entity_decode('<script src="https://'.env('EMBED_SUBDOMAIN').'.'.env('APP_DOMAIN').'/js/sdk.js"></script>') }}</code>
                    <a class="copy-block" href="#" data-toggle="tooltip" data-placement="left" title="Copier le code">
                        <i class="fas fa-download"></i>
                    </a>
                </div>

            </div>
        </div>



        <div class="col-md-6">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <h4 class="c-grey-900 mB-20">Accéder au suivi des engagements</h4>

                Pour accéder directement au suivi des engagements vous pouvez <a href="https://{{ env('EMBED_SUIVI_SUBDOMAIN').'.'.env('APP_DOMAIN') }}/{{ currentAccount()->subdomain_slug }}" target="_blank">cliquer ici</a> ou partager le lien ci-dessous :

                <p class="ta-c mT-20">https://{{ env('EMBED_SUIVI_SUBDOMAIN').'.'.env('APP_DOMAIN') }}/{{ currentAccount()->subdomain_slug }}</p>

            </div>
        </div>

    </div>


@endsection



@section('js')
    <script type="text/javascript">

        $(document).ready( function () {
            var ctx = document.getElementById('engagements-repartition-statut').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'doughnut',

                // The data for our dataset
                data: {
                    labels: [
                        @foreach ($statuts as $statut)
                            '{{ $statut->name }} ',
                        @endforeach
                    ],
                    datasets: [{
                            label: 'Répartition des engagements par statut',
                            /*backgroundColor: 'rgba(235, 61, 0, 0.2)',
                            borderColor: '#EB3D00',*/
                            data: [
                                @foreach ($statuts as $statut)
                                    {{ count($statut->engagementsForCurrentAccount) }},
                                @endforeach
                            ],
                            backgroundColor:[
                                @foreach ($statuts as $statut)
                                    '{{ $statut->embed_color }}',
                                @endforeach
                            ]
                        }]
                },

                // Configuration options go here
                options: {
                    legend: {
                        display: true
                    }
                }
            });
        });
    </script>
@endsection