@extends('layouts.dashboard.app')

@section('content')
    <div class="container-fluid mt-4">

        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <canvas id="oilChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <canvas id="rChart"></canvas>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-4">-->
            <!--    <div class="card">-->
            <!--        <div class="card-body">-->
            <!--            <canvas id="pChart"></canvas>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <canvas id="barchart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header d-flex justify-content-evenly">
                        @foreach ($roles as $role)
                            <button value="{{ $role->id }}" class="btn btn-outline-info">{{ $role->role }}</button>
                        @endforeach
                    </div>
                    <div id="hr" class="card-body">
                        <canvas id="horibarchart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <canvas id="IChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        // pie chart  pour le nombre des dossiers par catégories
        var anomalies = {!! json_encode($anomalie) !!};
        var encours = {!! json_encode($encours) !!};
        var terminer = {!! json_encode($terminer) !!};
        var company = {!! json_encode($companie) !!};
        var nbr = {!! json_encode($nbr) !!};
        var names = {!! json_encode($users) !!};
        var nbrs = {!! json_encode($nbrD) !!};
        var type = {!! json_encode($type) !!};
        var nbrt = {!! json_encode($nbrt) !!};
        var r = {!! json_encode($r) !!};
        var piece = {!! json_encode($piece) !!};

        var inter = {!! json_encode($inter) !!};
        var dossier = {!! json_encode($dossier) !!};
        // ################################
        var companiesCanvas = document.getElementById("IChart");
        var barChartData1 = {
            labels: inter,
            datasets: [{
                fillColor: "#2c8ef8",
                strokeColor: "#2c8ef8",
                highlightFill: "#2c8ef8",
                highlightStroke: "#2c8ef8",
                backgroundColor: "#2c8ef8",
                data: dossier
            }],
            scaleGridLineColor: "#000"
        }
        var barChart = new Chart(companiesCanvas, {
            type: 'bar',
            data: barChartData1,
            options: {
                scales: {
                    y: {
                        min: 0,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Intermidiaires'
                    }
                }
            },
        })
        // ################################
        
        // ################################
        var dossierCanvas = document.getElementById("rChart");

        var rdata = {
            labels: r,
            datasets: [{
                data: piece,
                backgroundColor: [
                    "#FF6384",
                    "#34378A",
                    "#57A350"

                ],
                hoverBackgroundColor: ['#FF6384', '#34378A', '#57A350']
            }]
        };

        var pieChart = new Chart(dossierCanvas, {
            type: 'pie',
            data: rdata,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Type Piece'
                    }
                }
            },
        });
        // ################################
        var dossierCanvas = document.getElementById("oilChart");

        var oilData = {
            labels: [
                'Anomalies',
                'Encours',
                'Terminer'
            ],
            datasets: [{
                data: [anomalies, encours, terminer],
                backgroundColor: [
                    "#FF6384",
                    "#34378A",
                    "#57A350"

                ],
                hoverBackgroundColor: ['#FF6384', '#34378A', '#57A350']
            }]
        };

        var pieChart = new Chart(dossierCanvas, {
            type: 'pie',
            data: oilData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Dossier Status'
                    }
                }
            },
        });
        // ################################
        var companiesCanvas = document.getElementById("barchart");
        var barChartData = {
            labels: company,
            datasets: [{
                fillColor: "#2c8ef8",
                strokeColor: "#2c8ef8",
                highlightFill: "#ACCE91",
                highlightStroke: "#ACCE91",
                backgroundColor: "#5091A3",
                data: nbr
            }],
            scaleGridLineColor: "#000"
        }
        var barChart = new Chart(companiesCanvas, {
            type: 'bar',
            data: barChartData,
            options: {
                scales: {
                    y: {
                        min: 0,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Assurance'
                    }
                }
            },
        })
        // ########################################
        var userCanvas = document.getElementById("horibarchart");
        var hbarChartData = {
            labels: names,
            datasets: [{
                label: 'Gestionnaire',
                fillColor: "#8DB986",
                strokeColor: "#8DB986",
                highlightFill: "#ACCE91",
                highlightStroke: "#ACCE91",
                backgroundColor: "#5091A3",
                data: nbrs
            }],
            scaleGridLineColor: "#000"
        };

        var barChart = new Chart(userCanvas, {
            type: 'bar',
            data: hbarChartData,
            options: {
                scales: {
                    x: {
                        min: 0,
                        ticks: {
                            // forces step size to be 50 units
                            stepSize: 1
                        }
                    }
                },
                indexAxis: 'y',
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Doughnut Chart'
                    }
                }
            },
        });
        // ##########################
        var dossierCanvas = document.getElementById("typeChart");

        var typeData = {
            labels: type,
            datasets: [{
                data: nbrt,
                backgroundColor: ['#F0B27A', '#D7DBDD', '#F1948A', '#F7DC6F',
                    '#7DCEA0', '#73C6B6', '#CB4335', '#ECF0F1', '#784212', '#A6ACAF', '#D7BDE2', '#2C3E50'
                ],
                hoverBackgroundColor: ['#F0B27A', '#D7DBDD', '#F1948A', '#F7DC6F',
                    '#7DCEA0', '#73C6B6', '#CB4335', '#ECF0F1', '#784212', '#A6ACAF', '#D7BDE2', '#2C3E50'
                ],
            }]
        };
        var typeChart = new Chart(dossierCanvas, {
            type: 'doughnut',
            data: typeData
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.btn').on('click', function() {
                var names = [];
                var nbrs = [];
                var role_id = this.value;
                var title = this.innerText;
                console.log(title);
                $.ajax({
                    url: '/Chart/Role/' + role_id,
                    type: 'get',
                    context: this,
                    success: function(response) {
                        console.log(response);
                        $.each(response, function(key, value) {
                            names.push(value.name);
                            nbrs.push(value.nbr);
                        });
                        console.log(names);
                        var userCanvas = document.getElementById("horibarchart");
                        var hbarChartData = {
                            labels: names ?? [],
                            datasets: [{
                                label: title,
                                fillColor: "#8DB986",
                                strokeColor: "#8DB986",
                                highlightFill: "#ACCE91",
                                highlightStroke: "#ACCE91",
                                backgroundColor: "#5091A3",
                                data: nbrs ?? []
                            }],
                            scaleGridLineColor: "#000"
                        };
                        barChart.clear();
                        barChart.destroy();
                        barChart = new Chart(userCanvas, {
                            type: 'bar',
                            data: hbarChartData,
                            options: {
                                indexAxis: 'y',
                                scales: {
                                    x: {
                                        min: 0,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                },
                                responsive: true,
                                plugins: {
                                    legend: {
                                        position: 'top',
                                    },
                                    title: {
                                        display: true,
                                        text: 'Type Expertise'
                                    }
                                }
                            },
                        });

                    },
                });
            });
        });
    </script>
@endsection
