@extends('tenant.layouts.supervisor')

{{--Tilte Section--}}
@section('title', 'Performance Scorecards')

{{--Style Section--}}
@section('style')
    <!-- Css file for summernote js plugins  -->
<style>
.btn-success {

    --bs-btn-bg: #00a34e;}


.centered{
  position: absolute;
    top: 50%;
    left: 50%;
    right: 0%;
}



.av_btn {
  justify-content: center;
  align-content: center;
  display: inline-flex;
  border-radius: 50%;
  padding: 8px;
  font-size: 20px;
  line-height: 1.7em;
  width: 50px;
  height: 50px;
  background-color:#bbbdc9;
  font-weight: bold;
  color:white;
  border: 1px #bbbdc9 solid;
}
.av_btn_Week {
  justify-content: center;
  align-content: center;
  display: inline-flex;
  border-radius: 50%;
  margin-left: 3px;
  padding: 8px;
  font-size: 18px;
  line-height: 1.7em;
  width: 40px;
  height: 40px;
  background-color:#bbbdc9;
  font-weight: bold;
  color:white;
  border: 1px #bbbdc9 solid;
}
.td-custome{
    /* display: flex;
    flex-direction: row; */
    /* justify-content: space-evenly;     */
    /* padding-left: 33% !important;
    padding-right: 22% !important; */
    text-align: center;
}
</style>
    <link rel="stylesheet" href="{{asset('css/wfm.css')}}">
    <link rel="stylesheet" href="{{asset('css/ranking.css')}}">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script>


</script>

@endsection

{{--Content Section--}}
@section('content')

<div class="container-fluid">
    <livewire:tenant.ranking.supervisor-dashboard />

          <!-- Real Time Monitoring (ALL) End  -->
          <!-- Disciplinary Action data start  -->
{{--      <div class="container-fluid mt-5 mb-4">--}}
{{--          <div class="card shadow py-2   rounded border border-0 px-4 ">--}}
{{--            <div class="card-body">--}}
{{--                  <div class="col-12 col-sm-auto">--}}
{{--                    <h5>--}}
{{--                      <span>    <img src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/RankAssets/rank_icon.png" alt="" style="width: 2%; margin-bottom:1%;" > </span> Disciplinary Action data--}}
{{--                    </h5>--}}
{{--                  </div>--}}
{{--                <table class="table table-bordered mt-3 shadow p-3">--}}
{{--                    <thead class="table-light" style="text-align: center;">--}}
{{--                    <tr style="height: 55px;">--}}

{{--                      <td id="headTablefontStyle" style="background-color: #00A34E !important;color: white;" scope="col">DATE</td>--}}
{{--                      <td id="headTablefontStyle" style="background-color: #00A34E !important;color: white;" scope="col">TYPE</td>--}}
{{--                      <td id="headTablefontStyle" style="background-color:  #00A34E !important;color: white;" scope="col">SUBJECT</td>--}}
{{--                    </tr>--}}
{{--                  </thead>--}}
{{--                  <tbody>--}}
{{--                    <tr>--}}

{{--                      <td id="bodyTablefontStyle">2023-01-8</td>--}}
{{--                      <td id="bodyTablefontStyle"><img style="width: 15px;" src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/RankAssets/exclamation 1.png" alt=""><span> 1st Warning</span></td>--}}
{{--                      <td id="bodyTablefontStyle"> Performance</td>--}}
{{--                    </tr>--}}
{{--                    <tr>--}}

{{--                      <td id="bodyTablefontStyle">2023-01-8</td>--}}
{{--                      <td id="bodyTablefontStyle"><img style="width: 15px;" src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/RankAssets/warning.png" alt=""><span> 2st Warning</td>--}}
{{--                      <td id="bodyTablefontStyle">Performance</td>--}}
{{--                    </tr>--}}
{{--                    <tr>--}}
{{--                      <td id="bodyTablefontStyle" >2023-01-8</td>--}}
{{--                      <td id="bodyTablefontStyle" ><img style="width: 15px;" src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/RankAssets/warning.png" alt=""><span> 2st Warning</span></td>--}}
{{--                      <td id="bodyTablefontStyle" >Performance</td>--}}
{{--                    </tr>--}}
{{--                  </tbody>--}}
{{--                </table>--}}
{{--              </div>--}}
{{--          </div>--}}
{{--      </div>--}}

</div>

@endsection

{{--Script Section--}}
@section('script')
<script>
    document.addEventListener('CustomDateOpen', function(event) {
        document.getElementById("CustomDate").click();

    });

    document.addEventListener('close-modal0', function(event) {
        document.getElementById("closeModal1").click();
        document.getElementById("closeModal").click();

    });
        window.addEventListener('close-modal', event => {
            document.getElementById('closeButton').click();
        });



</script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>





var ctx_3 = document.getElementById("myChart_2").getContext("2d");
var data_3 = {
    labels: ["AHT", "FRT", "ACW" ,"Resolution within SLA" ,"Avg Hold"],

    datasets: [
        {

          categoryPercentage: 0.4,
          borderWidth: 2,
          borderRadius: Number.MAX_VALUE,

            label: "test 1",
            backgroundColor: "#20b246",
            data: [3,7,4,8,2]
        },
        {

          borderRadius: Number.MAX_VALUE,
          categoryPercentage: 0.4,
            label: "test 2",
            backgroundColor: "#becd5a",
            data: [4,3,5,9,4]
        },
    ],
};

var myBarChart = new Chart(ctx_3, {
    type: 'bar',
    data: data_3,
    options: {
      responsive: true,
            scales: {
            y: {
                beginAtZero: true,
                max: 14
                }
            }

    }

});
</script>
<script>

          $(function () {/*from   w ww .  ja va2 s  . c o  m*/


            var ctx = document.getElementById("AHT").getContext('2d');

            var data = {
                datasets: [{
                    data: [10, 20, ],
                    weight:0.4,
                    backgroundColor: [
                        '#f0f0f0',
                        '#00a34e',

                    ],
                },{}],

            };

            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 80
                        }
                    }

                },


            });



            var ctx_2 = document.getElementById("FRT").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    weight:0.4,
                    backgroundColor: [
                        '#f0f0f0',
                        '#00a34e',
                        '#becd5a',
                    ],
                },{}],

            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("ACW").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    weight:0.4,
                    backgroundColor: [
                        '#f0f0f0',
                        '#00a34e',
                        '#becd5a',
                    ],
                },{}],

            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
            var ctx_2 = document.getElementById("SLA").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    weight:0.4,
                    backgroundColor: [
                        '#f0f0f0',
                        '#00a34e',
                        '#becd5a',
                    ],
                },{}],

            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
            var ctx_2 = document.getElementById("AVG").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    weight:0.4,
                    backgroundColor: [
                        '#f0f0f0',
                        '#00a34e',
                        '#becd5a',
                    ],
                },{}],

            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });


</script>
<script>
Chart.types.Doughnut.extend({
    name: "DoughnutTextInside",
    showTooltip: function() {
        this.chart.ctx.save();
        Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
        this.chart.ctx.restore();
    },
    draw: function() {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

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

        var fontSize = (height / 114).toFixed(2);
        this.chart.ctx.font = fontSize + "em Verdana";
        this.chart.ctx.textBaseline = "middle";

        var text = "82%",
            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
            textY = height / 2;

        this.chart.ctx.fillText(text, textX, textY);
    }
});

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}];

var DoughnutTextInsideChart = new Chart($('#myChart555')[0].getContext('2d')).DoughnutTextInside(data, {
    responsive: true
});

</script>
@endsection