@extends('layouts.app')
@section('content')
    <style>
        .myrow::after {
            content: "";
            clear: both;
            display: table;
        }
        .myeditdelete{
            border: 0;
            outline: 0;
        }

        .myeditdelete:focus{
            outline: 0;
            border: 0;
        }
        .factorHead{
            font-weight: bold;
            font-style: italic;
            margin-bottom: 20px;
        }
        .barChartStyle canvas{
            height: 200px;
        }

        @media print {
            #header {display: none}
            @page {
                padding: 20px;
                margin-top: 50px;
            }
        }
    </style>
    @push('custom-scripts')
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    @endpush
    <section id="content_outer_wrapper">
        <div id="content_wrapper" class="rightnav_v2 toggle-right">
            <div id="header_wrapper" class="header-md" style="height:6%">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12">
                            <header id="header">
                                <h1>ევროპის უნივერსიტეტის ადმინისტრაციული პერსონალის შეფასების რეპორტი, 2020 წელი - {{$surveyOption["fullName"]}}</h1>
                                @if(Auth::user()->rule==1)
                                    <br>
                                    <a href="{{ route('importSurveyForStaff',  ['id' => $sheduleId]) }}">მონაცემების ექსელში იმპორტი</a>
                                @endif
                                <br>
                                <a href="javascript:window.print()">ბეჭდვა</a>
                            </header>
                        </div>
                    </div>
                </div>
            </div>
            @if($factorAddData!=null)
                <div id="content" class="container-fluid">
                    <div class="content-body">
                        <div class="flex-row align-items-center" style="align-items: center">
                            <div class="col-xs-12" style="margin-bottom: 20px">
                                <canvas id="radarChart" style="border: solid 1px silver; padding: 8px;" ></canvas>
                            </div>
                            <div class="col-xs-12" style="margin-bottom: 20px">
                                <div class="col-xs-3">
                                    <canvas id="bar-chart-f0" class="" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                                <div class="col-xs-3">
                                    <canvas id="bar-chart-f1" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                                <div class="col-xs-3">
                                    <canvas id="bar-chart-f2" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                                <div class="col-xs-3">
                                    <canvas id="bar-chart-f3" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                            </div>
                            <div class="col-xs-12" style="margin-bottom: 20px">
                                <div class="col-xs-8" style="margin-top: 20px">
                                    <canvas id="bar-chart-full" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                                <div class="col-xs-4" style="margin-top: 20px">
                                    <canvas id="bar-chart-sum" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                            </div>
                            <div class="col-xs-12" style="margin-bottom: 20px">
                                <div class="col-xs-6" style="margin-top: 20px">
                                    <canvas id="bar-chart-max" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                                <div class="col-xs-6" style="margin-top: 20px">
                                    <canvas id="bar-chart-min" style="border: solid 1px silver; padding: 8px;" ></canvas>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                @foreach($surveyOption["factory"] as $_factory)
                                    <div class="form-group myrow" style="border-bottom: solid 1px #a3acb9">
                                        <div class="col-xs-10">
                                            <div class="factorHead">
                                                ფაქტორი - {{$_factory->name}}
                                            </div>
                                            @for($i=0; $i<count($resultArr); $i++)
                                                <div class="card-body p-0">
                                                    <ul>
                                                        @for($j=0; $j<count($resultArr[$i]); $j++)
                                                            @if($_factory->id==$resultArr[$i][$j][0])
                                                                @if($resultArr[$i][$j][1]==23)
                                                                    <li class="list-group-item ">
                                                                        <div class="list-group-item-body">
                                                                            <div class="list-group-item-text">{{$resultArr[$i][$j][2]}}</div>
                                                                        </div>
                                                                    </li>
                                                                @endif
                                                            @endif
                                                        @endfor
                                                    </ul>
                                                </div>
                                            @endfor
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div id="content" class="container-fluid">
                    <div class="content-body">
                        <div class="flex-row align-items-center" style="align-items: center">
                            <h3>შედეგები ვერ მოიძებნა!!!</h3>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>

    @if($factorAddData!=null)
        @push('custom-scripts')
            <script type="text/javascript">
                var stafFullName = {!!  json_encode($surveyOption["fullName"]) !!};
                var factories = {!! json_encode($factories) !!};
                var appraiserRoles = {!! json_encode($appraiserRoles) !!};
                var factorAddData = {!! json_encode($factorAddData) !!};
                var surveyComponentsMax =  {!!  json_encode($surveyComponentsMax) !!};
                var componentDataMax =  {!!  json_encode($componentDataMax) !!};
                var surveyComponentsMin =  {!!  json_encode($surveyComponentsMin) !!};
                var componentDataMin =  {!!  json_encode($componentDataMin) !!};
                var dataArray  = [];
                var maxValue = 0;
                for (var key in factorAddData) {
                    var obj = factorAddData[key];
                    var helpDataArray = [];
                    for(var subKey in obj){
                        if(maxValue<obj[subKey]){
                            maxValue = obj[subKey];
                        }
                        helpDataArray.push(obj[subKey]);
                    }
                    dataArray.push(helpDataArray);
                };
                var backgroundColor = ["#5b9bd5", "#a5a5a5", "#ffc000", "#ed7d31"];

                //Radar
                {
                    var datasetForRadar = [];
                    for(var i=0; i<dataArray.length;i++){
                        var node =  {
                            label: appraiserRoles[i],
                            backgroundColor: "white",
                            borderWidth: 3,
                            borderColor: backgroundColor[i],
                            data: dataArray[i]
                        };
                        datasetForRadar.push(node);
                    };
                    var radarCanvas = document.getElementById("radarChart");
                    var radarData = {
                        labels: factories,
                        datasets: datasetForRadar
                    };
                    var radarOptions = {
                        scale: {
                            angleLines: {
                                display: false
                            },
                            ticks: {
                                suggestedMin: 0,
                                suggestedMax: maxValue,
                                fontColor: "white"
                            },
                            gridLines: {
                                display: false
                            }
                        },
                        legend: {
                            display: true
                        },
                        title: {
                            display: true,
                            text: stafFullName
                        }
                    };
                    var radarChart = new Chart(radarCanvas, {
                        type: 'radar',
                        data: radarData,
                        options: radarOptions
                    });
                }

                //Simple Bar Chart
                {
                    var dataArrayForBar = [];
                    for (var i = 0; i < dataArray[0].length; i++) {
                        var helpDataArray = [];
                        for (j = 0; j < dataArray.length; j++) {
                            helpDataArray.push(dataArray[j][i]);
                        }
                        dataArrayForBar.push(helpDataArray);
                    }
                    for (var i = 0; i < dataArrayForBar.length; i++) {
                        for (var j = 0; j < dataArrayForBar[i].length; j++) {
                            if (Array.isArray(dataArrayForBar[i][j])) {
                                dataArrayForBar[i][j] = 0;
                            }
                        }
                        var dataForBarChart = {"data": [], "backgroundColor": [], "appraiserRoles": []};
                        for (var k = 0; k < dataArrayForBar[i].length; k++) {
                            if (dataArrayForBar[i][k] != 0) {
                                dataForBarChart["data"].push(dataArrayForBar[i][k]);
                                dataForBarChart["backgroundColor"].push(backgroundColor[k]);
                                dataForBarChart["appraiserRoles"].push(appraiserRoles[k]);
                            }
                        }
                        var barCanvas = document.getElementById("bar-chart-f" + i);
                        barCanvas.height = 330;
                        var barData = {
                            labels: dataForBarChart["appraiserRoles"],
                            datasets: [
                                {
                                    label: factories[i],
                                    backgroundColor: dataForBarChart["backgroundColor"],
                                    data: dataForBarChart["data"]
                                }
                            ]
                        }
                        var barOptions = {
                            scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        beginAtZero: true,
                                        stepSize: 0.5,
                                        max: 5
                                    }
                                }]
                            },
                            legend: {display: false},
                            title: {
                                display: true,
                                text: factories[i]
                            }
                        }
                        var barChart = new Chart(barCanvas, {
                            type: 'bar',
                            data: barData,
                            options: barOptions
                        });
                    }
                }

                // Full Bar
                {
                    var fullBCanvas = document.getElementById("bar-chart-full");
                    var datasetsForFullBar = [];
                    for (var i = dataArray.length - 1; i >= 0; i--) {
                        var isArray = 0;
                        for (var j = 0; j < dataArray[i].length; j++) {
                            if (Array.isArray(dataArray[i][j])) {
                                isArray++;
                            }
                        }
                        if (isArray != dataArray[i].length) {
                            var singleData = {
                                backgroundColor: backgroundColor[i],
                                data: dataArray[i]
                            };
                            datasetsForFullBar.push(singleData);
                        }
                    }
                    datasetsForFullBar.reverse();
                    var fullBarData = {
                        labels: factories,
                        datasets: datasetsForFullBar
                    };
                    var fullBarOptions = {
                        scales: {
                            yAxes: [{
                                display: true,
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 0.5,
                                    max: 5
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: stafFullName
                        },
                        hover: {
                            "animationDuration": 0
                        },
                        animation: {
                            duration: 1,
                            onComplete: function () {
                                var chartInstance = this.chart,
                                    ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';
                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y + 40);
                                    });
                                });
                            }
                        },
                    }
                    var fullBarChart = new Chart(fullBCanvas, {
                        type: 'bar',
                        data: fullBarData,
                        options: fullBarOptions
                    });
                }

                //Sum Bar
                {
                    var datasetsForSumBar = [];
                    var backgroundsForSumBar = ["#73b865", "#ab7f19", "#22c0f1", "#f26c52"];
                    var colorIndex = 0;
                    for (var i = 0; i < datasetsForFullBar[0].data.length; i++) {
                        var s = 0;
                        for (var j = 0; j < datasetsForFullBar.length; j++) {
                            s += parseFloat(datasetsForFullBar[j].data[i]);
                        }
                        var singleSumData = {
                            backgroundColor: backgroundsForSumBar[colorIndex],
                            data: [(s / datasetsForFullBar.length).toFixed(2)]
                        };
                        datasetsForSumBar.push(singleSumData);
                        colorIndex += 1;
                    }
                    var sumCanvas = document.getElementById("bar-chart-sum");
                    sumCanvas.height = 330;
                    var sumBarData = {
                        labels: ["ჯამური შეფასება"],
                        datasets: datasetsForSumBar
                    };
                    var sumBarOptions = {
                        scales: {
                            yAxes: [{
                                display: true,
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 0.5,
                                    max: 5
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: stafFullName
                        },
                        hover: {
                            "animationDuration": 0
                        },
                        animation: {
                            duration: 1,
                            onComplete: function () {
                                var chartInstance = this.chart,
                                    ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';
                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y + 40);
                                    });
                                });
                            }
                        },
                    }
                    var sumBarChart = new Chart(sumCanvas, {
                        type: 'bar',
                        data: sumBarData,
                        options: sumBarOptions
                    });
                }

                //Max horizontal Bar
                {
                    surveyComponentsMax.splice(3, surveyComponentsMax.length-3);
                    componentDataMax.splice(3, componentDataMax.length-3);
                    var barCanvas = document.getElementById("bar-chart-max");
                    var barData = {
                        labels: surveyComponentsMax,
                        datasets:[
                            {
                                backgroundColor: "#5b9bd5",
                                data: componentDataMax,
                            }
                        ]
                    };
                    var barOptions = {
                        scales: {
                            xAxes: [{
                                display: true,
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 0.5,
                                    max: 5
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: "ყველაზე მაღალი შეფასების მქონე ქცევითი ინდიკატორები"
                        },
                        hover: {
                            "animationDuration": 0
                        },
                        animation: {
                            duration: 1,
                            onComplete: function () {
                                var chartInstance = this.chart,
                                    ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';
                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x-20, bar._model.y+10);
                                    });
                                });
                            }
                        },
                    }
                    var barChart = new Chart(barCanvas, {
                        type: 'horizontalBar',
                        data: barData,
                        options: barOptions
                    });
                }

                //Min horizontal Bar
                {
                    surveyComponentsMin.splice(0, surveyComponentsMin.length-3);
                    componentDataMin.splice(0, componentDataMin.length-3);
                    var barCanvas = document.getElementById("bar-chart-min");
                    var barData = {
                        labels: surveyComponentsMin,
                        datasets:[
                            {
                                backgroundColor: "#5b9bd5",
                                data: componentDataMin,
                            }
                        ]
                    };
                    var barOptions = {
                        scales: {
                            xAxes: [{
                                display: true,
                                ticks: {
                                    beginAtZero: true,
                                    stepSize: 0.5,
                                    max: 5
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: "ყველაზე დაბალი შეფასების მქონე ქცევითი ინდიკატორები"
                        },
                        hover: {
                            "animationDuration": 0
                        },
                        animation: {
                            duration: 1,
                            onComplete: function () {
                                var chartInstance = this.chart,
                                    ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';
                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x-20, bar._model.y+10);
                                    });
                                });
                            }
                        },
                    }
                    var barChart = new Chart(barCanvas, {
                        type: 'horizontalBar',
                        data: barData,
                        options: barOptions
                    });
                }

            </script>
        @endpush
    @endif
@endsection