@include('projets.index.layouts.onglets.commons.button-ajouter-projet')

{{-- Performance achat --}}
<div class="custom-frame mt-4 p-3">
    <div class="row">
        <div class="col-12">
            <h5>Performance économique des actions achats</h5><br>
        </div>
    </div>
    <div class="row text-center">
        <div class="col">
            <h4><span class="autonumeric">@isset($gains_cibles) {{ $gains_cibles }} @else 0 @endisset</span><span class="text-primary"> €</span></h4>
            <h6 class="font-weight-bold mb-1">Gains cibles</h6>
        </div>
        <div class="col">
            <h4><span class="autonumeric">@isset($gains_notifies) {{ $gains_notifies }} @else 0 @endisset</span><span class="text-primary"> €</span></h4>
            <h6 class="font-weight-bold mb-1">Gains notifiés</h6>
        </div>
        <div class="col">
            <h4>@isset($nombre_projets) {{ $nombre_projets }} @else 0 @endisset</h4>
            <h6 class="font-weight-bold mb-1">Nombre total de projets</h6>
        </div>
        <div class="col">
            <h4>@isset($gains_notifies, $gains_cibles) @if($gains_cibles > 0) {{ round($gains_notifies/$gains_cibles, 2) }} @else 0 @endif @else 0 @endisset<span class="text-primary"> %</span></h4>
            <h6 class="font-weight-bold mb-1">Taux de transformation</h6>
        </div>
        <div class="col">
            <h4><span class="autonumeric">@isset($montant_depenses_traitees) {{ $montant_depenses_traitees }} @else 0 @endisset</span><span class="text-primary"> €</span></h4>
            <h6 class="font-weight-bold mb-1">Montant des dépenses traitées</h6>
        </div>
    </div>
</div>

<div class="row">
    {{-- TOP 10 projets --}}
    <div class="col-md-8">
        <div class="custom-frame pl-3 pr-3">
            <h5>Top 10 des projets achats</h5>
            <br>
            @if(sizeof($top_10_projets) > 0)
                <table class="table table-striped mt-3">
                    @foreach($top_10_projets as $t10p)
                        <tr>
                            <td>{{ $loop->index + 1 }}</td>
                            <td>{{ $t10p->objet }}</td>
                            <td>
                                <div class="multi-step col-6">
                                    <ul class="multi-step-list">
                                        @for($i = 1; $i <= ETAPE_PROJET::NOMBRE_ETAPE; $i++)
                                            <li class="multi-step-item progress-{{ $i }} @isset($t10p) @if(in_array(ETAPE_PROJET::ETAPES_ORDERED[$i - 1], $t10p->etapes())) current @endif @endisset">
                                                <div class="item-wrap">
                                                    <p class="item-title">{{ $i }}</p>
                                                </div>
                                            </li>
                                        @endfor
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Montant de référence : <span class="autonumeric">{{ $t10p->montant_reference ?? 0 }}</span> €</td>
                            <td>Gains cibles : <span class="autonumeric">{{ $t10p->gains_cible ?? 0 }}</span> €</td>
                            <td>Gains notifiés : <span class="autonumeric">{{ $t10p->gains_notifie ?? 0 }}</span> €</td>
                        </tr>
                    @endforeach
                </table>
            @else
                <div class="pt-2">
                    <h4>Pas de données disponible.</h4>
                </div>
            @endif
        </div>
    </div>
    {{-- Graphique Directions & leviers --}}
    <div class="col-md-4">
        <div class="custom-frame pl-3 pr-3">
            <h5>Directions</h5>
            <br>
            @if(sizeof(array_keys($graphe_directions)) > 0)
                <canvas id="directions-chart" width="400" height="400"></canvas>
            @else
                <span>Pas de données disponible.</span>
            @endif
            <h5>Leviers</h5>
            <br>
            @if(sizeof(array_keys($graphe_leviers)) > 0)
                <canvas id="leviers-chart" width="400" height="400"></canvas>
            @else
                <span>Pas de données disponible.</span>
            @endif
        </div>
    </div>
</div>


<script>
    @if(sizeof(array_keys($graphe_directions)) > 0 || sizeof(array_keys($graphe_leviers)) > 0)
        {{-- Définitions des différentes couleurs des graphes --}}
        var backgroundColor = ["rgba(54,144,220,0.6)","rgba(70,191,189,0.6)","rgba(253,180,92,0.6)","rgba(238,130,81,0.6)","rgba(99,83,141,0.6)","rgba(90,151,130,0.6)","rgba(118,111,85,0.6)","rgba(231,104,110,0.6)","rgba(233,170,226,0.6)","rgba(77,83,96,0.6)","rgba(225,238,158,0.6)","rgba(106,131,118,0.6)","rgba(176,232,222,0.6)"];
        var borderColor = ["rgb(54,144,220)","rgb(70,191,189)","rgb(253,180,92)","rgb(238,130,81)","rgb(99,83,141)","rgb(90,151,130)","rgb(118,111,85)","rgb(231,104,110)","rgb(233,170,226)","rgb(77,83,96)","rgb(225,238,158)","rgb(106,131,118)","rgb(176,232,222)"];
    @endif

    {{-- On met un if pour ne pas provoquer d'erreur sur le getContext on null --}}
    @if(sizeof(array_keys($graphe_directions)) > 0)
        var directionsData = {
            datasets: [{
                data: [{{ implode(',', array_values($graphe_directions)) }}],
                backgroundColor: backgroundColor,
                borderColor: borderColor
            }],
            labels: [{!! '"' . implode('","', array_keys($graphe_directions)) . '"' !!}]
        };

        var ctxDirections = document.getElementById('directions-chart').getContext('2d');
        new Chart(ctxDirections, {
            type: 'doughnut',
            data: directionsData,
            options: {
                responsive: true,
                plugins: {
                    labels: {
                        render: 'percentage',
                        fontSize: 14,
                        fontStyle: 'bold',
                        fontColor: '#fff',
                    }
                }
            },
        });
    @endif

    {{-- On met un if pour ne pas provoquer d'erreur sur le getContext on null --}}
    @if(sizeof(array_keys($graphe_leviers)) > 0)
        {{-- On affiche un doughnut si on a que 2 leviers différents sinon pas lisible --}}
        @if(sizeof(array_keys($graphe_leviers)) > 2)
            var leviersData = {
                datasets: [{
                    label: 'Leviers',
                    data: [{{ implode(',', array_values($graphe_leviers)) }}],
                    backgroundColor: backgroundColor,
                    borderColor: borderColor
                }],
                labels: [{!! '"' . implode('","', array_keys($graphe_leviers)) . '"' !!}]
            };

            var ctxLeviers = document.getElementById('leviers-chart').getContext('2d');
            new Chart(ctxLeviers, {
                type: 'radar',
                data: leviersData,
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scale: {
                        ticks: {
                            beginAtZero: true,
                            max: 5
                        }
                    }
                }
            });
        @else
            var leviersData = {
                datasets: [{
                    data: [{{ implode(',', array_values($graphe_leviers)) }}],
                    backgroundColor: backgroundColor,
                    borderColor: borderColor
                }],
                labels: [{!! '"' . implode('","', array_keys($graphe_leviers)) . '"' !!}]
            };

            var ctxLeviers = document.getElementById('leviers-chart').getContext('2d');
            new Chart(ctxLeviers, {
                type: 'doughnut',
                data: leviersData,
                options: {
                    responsive: true,
                    plugins: {
                        labels: {
                            render: 'percentage',
                            fontSize: 14,
                            fontStyle: 'bold',
                            fontColor: '#fff',
                        }
                    }
                },
            });
        @endif
    @endif
</script>