@extends('tenant.layouts.admin')

{{-- Tilte Section --}}
@section('title', 'Report Answers Page')

{{-- Style Section --}}
@section('style')

    <style>

        .p-10 {
            padding: 10px;
        }
        .b-radius-10 {
            border-radius: 10px;
        }
        .header-field{
            /*display: flex;*/
            /*flex-direction: column;*/
            /*justify-content: center;*/
            width: 23%;
            display: flex;
            flex-direction: row;
            justify-content: end;
        }
        .section-one{
            border-radius: 10px;
            height: 18rem;
            background-color: white;
            margin: 2% 0;
        }
        .section-one-head{
            height: 20%;
            background-image: linear-gradient(to right, #02a34e , #abc959);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .section-one-field{
            height: 80%;
            padding: 2%;
            overflow: auto;
        }
        .shadow{
            box-shadow: 0 0.1rem 1rem #00000026!important;
        }
        .custom-select select {

            border-radius: 0px;
            cursor: pointer;
        }
        .arrow-icon {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            pointer-events: none;
            fill: #00a34e;
            width: 36px;
            height: 32px;
        }
        .form-control{
            font-weight: 300;
            border-radius: 0;
        }
        .col-form-label{
            font-weight: 500;
        }
        .section-tow{
            border-radius: 10px;
            height: 18rem;
            background-color: white;
            margin: 2% 0;
            display: flex;
            flex-direction: row;
        }
        .section-tow-boxes{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .section-tow-chart{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: row;
            position: relative;
        }
        .section-tow-chart::before {
            content: '';
            position: absolute;
            left: 0;
            top: 22px;
            height: 84%;
            width: 2px;
            background-color: #d0caca;
        }
        .row-box-one{
            height: 50%;
            padding: 4% 4% 1%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .row-box-tow{
            height: 50%;
            padding: 2% 4% 3%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .box{
            box-shadow: 0 0.0rem .5rem #00000026!important;
            width: 45%;
            height: 100%;
            border-radius: 10px;
            padding: 2%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .box-number{
            font-size: 20px;
        }
        .box-text{
            font-weight: 400;
        }
        .green-color{
            background-color: #08a54f;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .yellow-color{
            background-color: #bbcf34;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .beige-color{
            background-color: #e8cf4d;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .orange-color{
            background-color: #cf810b;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .red-color{
            background-color: #a82020;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .section-tow-colors-group{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 3%;
        }
        .section-tow-circle-chart{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 75%;
            margin: 35px 5%;
        }

        .box-color{
            height: 13%;
            display: flex;
            flex-direction: row;
        }
        .text-span{
            margin-left: 7%;
            margin-top: 1.7%;
        }
        .section-three{
            border-radius: 10px;
            margin-bottom: 2%;
        }
        .section-three-container{
            padding: 1% 2%;
        }
        .container-color{
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            padding-top: 1%;
            margin-bottom: 1%;
        }
        .green-color-2{
            background-color: #08a54f;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .yellow-color-2{
            background-color: #bbcf34;
            width: 31px;
            height: 28px;
            border-radius: 5px;
        }
        .text-span-2{
            margin-left: .5%;
            margin-right: 2%;
            padding-top: 4px;
        }
        .div-table{
            border: 1px solid #d0caca;
            border-radius: 10px;
        }
        .table{
            margin-bottom: 0;
        }
        .table-header{
            text-align: center;
            background-color: #f3f3f3;
            color: #707f77;
            height: 55px !important;
            vertical-align: middle;
        }
        textarea{
            resize: none;
        }
        .group-table{
            height: 45px !important;
            background-color: #08a54f !important;
            color: white;
            vertical-align: middle;
        }
        .group-table-th{
            border: none;
            text-align: center;
        }
        .group-header{
            background-color: #bbcf34;
            color: white;
        }
        .td-style{
            text-align: center;
        }
        .text-area{
            height: 37.22px !important;
            overflow: hidden;
        }
        .group-weight{
            background-color: #ececec !important;
            height: 45px !important;
        }
        .group-weight-th{
            font-weight: 500;
        }
        .group-weight-th-number{
            font-weight: 500;
            text-align: center;
        }
        .section-four{
            display: flex;
            margin-bottom: 5%;
        }
        .btn-submit-div{
            text-align: end;
        }
        .btn-color {
            width: 142px;
            height: 39px;
            background-color: #00a34e;
            border-color: #00a34e;
        }
        #myChart{
            height: 119% !important;
            width: 119% !important;
        }
        .select-value{
            text-align: center;
        }
        td,th{
            word-break: break-word;
        }
        .container-table{
            margin-bottom: 3%;
        }
        textarea:focus{
            background-color: white;
        }
        .text-area-last{
            background-color: #eaebeb;
        }
        .group-comment{
            text-align: center;
            height: 45px !important;
            background-color: #08a54f !important;
            color: white;
            vertical-align: middle;
        }
    </style>




@endsection
{{-- Content Section --}}
@section('content')
    <div class="container-fluid">

        <livewire:tenant.admin.evaluation.report-answers :submit_id="$submit_id"/>

    </div>
@endsection

{{-- Script Section --}}
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="module">



        document.addEventListener('DOMContentLoaded', function() {

            Livewire.emit('callFunctionFromJS');

        window.addEventListener('open-modal', event => {
            document.getElementById('modal').style.display='';
            document.getElementById('dropZone').style.display='none';
        });
        window.addEventListener('close-modal', event => {
            document.getElementById('modal').style.display='none';
            document.getElementById('dropZone').style.display='';
        });
        window.addEventListener('off-checkbox', event => {

        });
        let myChart = null;
        let textValueCenter = null;
        window.addEventListener('chart', (event) => {

            const qualityPercentage = event.detail.qualityPercentage;
            const chartColor = event.detail.chartColor;
            document.getElementById('myChart').innerHTML=null;
            const ctx = document.getElementById('myChart');
            if (myChart !== null) {
                myChart.destroy(); // Destroy the chart if it exists
                myChart = null; // Reset the chart variable
            }
            textValueCenter = 'Quality Percentage  '+ qualityPercentage + '%', 'myChart';
            const data = {
                labels: [
                    'AHT',],
                datasets: [{

                    data: [qualityPercentage, 100 - qualityPercentage],
                    backgroundColor: [
                        chartColor,
                        '#b8e6ce'

                    ],
                    borderWidth: 1,
                    hoverOffset: 0
                }],


            };
            const options = {
                cutout: 90,
                responsive: true,
                aspectRatio: 1,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                        position: 'chartArea',
                        align: 'center',
                        labels: {
                            color: 'darkred',
                            font: {
                                weight: 'bold'
                            }
                        }
                    }
                }

            };
            const config = {
                type: 'doughnut',
                data: data,
                options, options,
                radius: 1
            };

            myChart = new Chart(ctx, config, options);
            textCenter('Quality Percentage  '+ qualityPercentage + '%', 'myChart');
            function textCenter(val, containerName) {

                Chart.register({
                    id: 'myGraphText',
                    beforeDraw: function (chart) {
                        if (chart.canvas.id != containerName) {
                            return 0;
                        }

                        var width = chart.width,
                            height = chart.height,
                            ctx = chart.ctx;

                        ctx.restore();
                        val = textValueCenter;
                        var fontSize = (height / 150).toFixed(2);

                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
                        // console.log(val);
                        var words = val.split(' ');
                        var textY = height / 2 - ((words.length - 1) * 10);
                        var x = 0;
                        words.forEach(function (word) {
                            var textX = Math.round((width - ctx.measureText(word).width) / 2);

                            if (x < 2) {
                                ctx.font = `20px em sans-serif`;
                                ctx.fillStyle = '#d0caca';
                                ctx.fillText(word, textX, textY);
                            } else {
                                ctx.fillStyle = 'black';
                                ctx.font = `bold ${fontSize}em sans-serif`;
                                ctx.fillText(word, textX, textY);
                            }

                            textY += 20;
                            x += 1;
                        });

                        ctx.save();
                    }
                });
            }
        });
        });
    </script>
@endsection