@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Real Time Dashboard')

{{-- Style Section --}}
@section('style')
    <style>
        .content{
            padding: 24px 63px !important;
        }
        .but{
            padding-left: 50px;
            padding-right: 50px;
            border-radius: 5px;
            border-color: #e0f4ea;
            background-color: #e0f4ea;
            border: 2px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: auto;
        }
        .headColor{
            background-color: #f8f9fa !important;
        }
        #app > main > div > div:nth-child(1) > div.row.mb-3.mt-35.m-0 > div.col-sm-9 > div > div > table > thead > tr > th:nth-child(2) > ul{
            transform: translate(366.111px, 273.333px) !important;
        }
         .table-body-color {
            color: #6b6b6b;
        }

        .table-header-color {
            color: #929e98;
        }

        .padding-left-1 {
            padding-left: 1% !important;
        }

        .padding-right-1 {
            padding-right: 1% !important;
        }

        .head-seperator {
            color: #00a34e59;
        }
        th {
            background: #fbfbfb !important;
        }

        .icons {
            /*position: relative;*/
            background: green;
            color: white;
            border-radius: 25%;
            opacity: .4;
            padding: 5px;
            display: inline-block;
        }

        .icons-2 {
            background: white;
            color: #818181;
            border: solid 1px black;
            border-radius: 25%;
            padding: 5px;
            display: inline-block;
        }

        .icons.active {
            opacity: 1;
        }

        .list-filter {
            overflow-x: auto;
            white-space: nowrap;
        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .w-95 {
            width: 95% !important;
        }

        .mt-10 {
            margin-top: 10px;
        }

        .w-px-200 {
            width: 200px !important;
        }

        .mt-35 {
            margin-top: 35px;
        }

        .md-header {
            background: background: rgb(5, 177, 48);
            background: linear-gradient(90deg, rgba(5, 177, 48, 1) 0%, rgba(3, 153, 39, 1) 57%, rgba(195, 223, 0, 1) 100%);
            color: white;
        }

        .rounded-top-4 {
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;

        }

        .md-header_delete {
            background: rgb(254, 0, 0);
            background: -moz-linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            background: linear-gradient(90deg, rgba(254, 0, 0, 1) 0%, rgba(255, 63, 63, 1) 32%, rgba(247, 75, 75, 1) 53%, rgba(255, 85, 85, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fe0000", endColorstr="#ff5555", GradientType=1);

        }

        .but {
            padding-left: 50px;
            padding-right: 50px;
            border-radius: 5px;
            border-color: #e0f4ea;
            background-color: #e0f4ea;
            border: 2px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: auto;
        }

        .form-check-input:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .md-top-mar {
            --bs-modal-margin: 11.75rem;
        }
        .status-holder{
            white-space: nowrap !important;
        }
    </style>
@endsection

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

    <livewire:tenant.supervisor.monitoring.index />

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function convertToTextInput() {
            document.getElementById('textDiv').style.display='none';
            document.getElementById('searchDiv').style.display='inline-flex';
        }
        function reset() {
            document.getElementById('textDiv').style.display='block';
            document.getElementById('searchDiv').style.display='none';
        }
    </script>
    <script>
        const ctx = document.getElementById('myChart');
        const data = {
                labels: [
                    'AHT',],
                datasets: [{

                    data: [{{$availabel2}}, {{$availabel}}],
                    backgroundColor: [
                        '#00a34e',
                        '#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
                };


                new Chart(ctx, config, options);
                textCenter('{{$users}}', '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();
      var fontSize = (height / 150).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";

      var text = val,
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;

      ctx.fillText(text, textX, textY);
      ctx.save();
    }
  });
}
    </script>





@endsection