@extends('tenant.layouts.ranking')

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

{{--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;
    }
</style>

@endsection

{{--Content Section--}}
@section('content')
    <livewire:tenant.ranking.dashboard />
@endsection

{{--Script Section--}}
@section('script')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    document.addEventListener('CustomDateOpen', function(event) {

        document.getElementById("CustomDate").click();

    });

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

    });
    const ctx = document.getElementById('myChart');

    const data = {
      labels: ['SAT', 'SUN', 'MON', 'THE', 'WED', 'THU', 'FRI'],
      datasets: [{
        label: 'Try hiding me',
        data: [5, 25, 40, 50, 60, 00 , 70],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
      }]
    };
    new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        responsive: true,
                scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                    }
                }
      }
    });
</script>
@endsection