@extends('tenant.layouts.ranking')

{{--Tilte Section--}}
@section('title', 'Break Distribution')

{{--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_value{
  text-align: -webkit-right;
  padding: 8px 34PX !important;
}

</style>
<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 px-5">
        <!-- Real Time Monitoring (ALL) first -->
        <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="row" >
                        <div class="col-sm-8">
                            <div class="row">
                                <div class="col-sm-12 col-md-4 col-lg-4 pb-4">
                                    <label for="exampleFormControlInput1" class="dropDownLabel" id="fontStyle">From</label>
                                    <input type="date" class="form-control  inputStyle" id="Name" min="" placeholder="" wire:model="">
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-4  pb-4">
                                    <label for="exampleFormControlInput1" class="dropDownLabel" id="fontStyle">To</label>
                                    <input type="date" class="form-control  inputStyle" id="Name" min="" placeholder="" wire:model="">
                                </div>
                            </div>
                        </div>
                        .
                        <div class="col" style="text-align: center;" >
                  <span
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-custom-class="custom-tooltip"
                      data-bs-title="Excel"
                      class="icons-2"
                      style="float: right;width: 54px;text-align: center;font-size: 15px;height: 47px;cursor: pointer;  border: 1px solid  gray; border-radius: 10px;margin-right: 18px; " >
                  <img
                      src="http://gen01.extensyaidesk-sa.com/tenancy/assets/img/table_icon.png" alt="" style="width: 65%; padding:3%; margin: 13%;" onclick="refreshPage()">
                  </span>
                        </div>
                    </div>
                    <div class="row">
                        <!-- table  -->
                        <div class="col-5 h-100">
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th scope="col" colspan="5" style="background-color: #00a34e; text-align: center; color:#ffff">Engagement</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="4">Live Agent</td>
                                    <td class="td_value" >93</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Chatbot</td>
                                    <td class="td_value" >508</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Total Users</td>
                                    <td class="td_value" >901</td>
                                </tr>
                                </tbody>
                            </table>
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th scope="col" colspan="5" style="background-color: #00a34e; text-align: center; color:#ffff">Conversation</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="4">Send Messages</td>
                                    <td class="td_value">1617</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Received Messages</td>
                                    <td class="td_value">3099</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Tatal Messages</td>
                                    <td class="td_value">4716</td>
                                </tr>
                                </tbody>
                            </table>
                            <table class="table">
                                <thead class="thead-light">
                                <tr>
                                    <th scope="col" colspan="5" style="background-color: #00a34e; text-align: center; color:#ffff">Most Used Flows</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="4">Before you join</td>
                                    <td class="td_value">69</td>
                                </tr>
                                <tr>
                                    <td colspan="4">You Payments</td>
                                    <td class="td_value">49</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Our Membership</td>
                                    <td class="td_value">46</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Our Gyms</td>
                                    <td class="td_value">46</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-7 h-100">
                            <div class="row">
                                <div class="col-sm-12 col-md-6 col-lg-6">
                                    <h6 class="mt-2">Engagement</h6>
                                    <div class="row">
                                        <div class="col-8">
                                            <div style="display: block; box-sizing: border-box; height: 214px !important; width: 214px !important;" >
                                                <canvas id="Engagement"  height="267 !important" width="267 !important" ></canvas>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <h6>   <span style="color: #20b246;">&#11044;</span> <span style="color: #000;">Chatbot</span> <br><br><span style="color: #becd5a;"> &#11044;</span> <span style="color: #000;"> Live Agent</span> </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6">
                                    <h6 class="mt-2">Conversation</h6>
                                    <div class="row">
                                        <div class="col-8">
                                            <div style="display: block; box-sizing: border-box; height: 214px !important; width: 214px !important;" >
                                                <canvas id="Conversation"  width="100px" height="100px"></canvas>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <h6><span style="color: #20b246;">&#11044;</span> <span style="color: #000;">Sent</span> <br><br><span style="color: #becd5a;"> &#11044;</span> <span style="color: #000;">Received</span> </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-12">
                                    <div style="display: block;box-sizing: border-box; height: 400px;">
                                        <canvas id="myChart_2"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Real Time Monitoring (ALL) End  -->
    </div>

@endsection

{{--Script Section--}}
@section('script')
<script>
        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: ["Befor you Join", "Your Payments", "Our Membership" ,"Our Gyms" ],

        datasets: [
            {

                categoryPercentage: 0.4,
                borderWidth: 0,
                // borderRadius: Number.MAX_VALUE,

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

        ],
    };

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

        }

    });
</script>
<script>
    function handleHover(evt, item, legend) {
        legend.chart.data.datasets[0].backgroundColor.forEach((color, index, colors) => {
            colors[index] = index === item.index || color.length === 9 ? color : color + '4D';
        });
        legend.chart.update();
    }

    // Removes the alpha channel from background colors
    function handleLeave(evt, item, legend) {
        legend.chart.data.datasets[0].backgroundColor.forEach((color, index, colors) => {
            colors[index] = color.length === 9 ? color.slice(0, -2) : color;
        });
        legend.chart.update();
    }

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

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

        var data = {
            datasets: [{
                label: '# of Votes',
                data: [0, 0],
                borderWidth: 1,
                backgroundColor: ['#20b246', '#becd5a'],
            }]
        };

        var myDoughnutChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                plugins: {
                    legend: {
                        onHover: handleHover,
                        onLeave: handleLeave
                    }
                }
            }
        });

        var ctx_2 = document.getElementById("Conversation").getContext('2d');

        var data_2 = {
            //  labels: ['Live Agent', 'Chatbot'],
            datasets: [{
                label: '# of Votes',
                data: [0, 0],
                borderWidth: 1,
                backgroundColor: ['#20b246', '#becd5a'],
            }]

        };
        var myDoughnutChart_2 = new Chart(ctx_2, {
            type: 'pie',
            data: data_2,
            options: {
                plugins: {
                    legend: {
                        onHover: handleHover,
                        onLeave: handleLeave
                    }
                }
            }
        });

    });


</script>
<script>


</script>
@endsection