@extends('partials.main')
@section('title')
Community Request
@endsection

@section('content')



<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
    .page-item.next a {
        width: 64px;
    }
    .page-item.prev a {
        width: 64px;
    }

</style>

@php
    $login_user = auth()->user();
    $now = Carbon\Carbon::now();
    $daily= $now->startOfmonth()->format('Y-m-d H:i');

    $weekStartWeek= $now->startOfWeek()->format('Y-m-d H:i');
    $weekEndWeek = $now->endOfWeek()->format('Y-m-d H:i');

    $startmonth= $now->startOfmonth()->format('Y-m-d H:i');
    $endmonth = $now->endOfmonth()->format('Y-m-d H:i');
    $form_campaign = App\Models\Form_Campaign::query();

    $formslist = Form::get();

    if($login_user->roles[0]->name == 'Client')
    {
        $today= $form_campaign->where('client_id',$login_user->id)->whereDate('created_at', '>=', $daily)
        ->count();

        $weekly= $form_campaign->where('client_id',$login_user->id)->whereDate('created_at', '>=', $weekStartWeek)
        ->whereDate('created_at', '<=', $weekEndWeek)->count();

        $monthly= $form_campaign->where('client_id',$login_user->id)->whereDate('created_at', '>=', $startmonth)
        ->whereDate('created_at', '<=', $endmonth)->count();

        $open = $form_campaign->where('client_id',$login_user->id)->where('status','1')->count();
        $pending = $form_campaign->where('client_id',$login_user->id)->where('status','0')->count();
        $complete = $form_campaign->where('client_id',$login_user->id)->where('status','2')->count();
    }
    else
    {
        $today= $form_campaign->whereDate('created_at', '>=', $daily)
        ->count();

        $weekly= $form_campaign->whereDate('created_at', '>=', $weekStartWeek)
        ->whereDate('created_at', '<=', $weekEndWeek)->count();

        $monthly= $form_campaign->whereDate('created_at', '>=', $startmonth)
        ->whereDate('created_at', '<=', $endmonth)->count();

        $open = $form_campaign->where('status','1')->count();
        $pending = $form_campaign->where('status','0')->count();
        $complete = $form_campaign->where('status','2')->count();
    }

@endphp

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">community Request</li>
        </ol>
    </nav>
</div>
<!-- breadcrumb -->

<div class="panel panel-primary tabs-style-2">
        <div class=" tab-menu-heading">
            <div class="tabs-menu1">
                <!-- Tabs -->
                <ul class="nav panel-tabs main-nav-line">
                    <li><a href="#requests-tab" class="nav-link active bg-white" data-bs-toggle="tab"><i class="bx bx-user-voice"></i> Community Requests</a></li>
                    <li><a href="#analytics-tab" class="nav-link bg-white" data-bs-toggle="tab"><i class="bx bx-bar-chart"></i> Request Analytics</a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body tabs-menu-body bg-white main-content-body-right border">
            <div class="tab-content">
                <div class="tab-pane active" id="requests-tab">
                    <br>
                    <!-- filters -->
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="container">
                                <div class="row ">
                                    <input type="hidden" name="filterLength" id="filterLength" value="6">
                                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2">
                                        <input type="search" name="filterName" id="filterName" class=" form-control "
                                            placeholder="Search by name...">
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2">
                                        <select name="filterForm" id="filterForm" required class="form-control SlectBox">
                                            <option value="all">Show All Requests</option>
                                            @foreach($formslist as $form)
                                            <option value="{{$form->id}}">{{$form->name}} </option>
                                            @endforeach

                                        </select>
                                    </div>

                                    <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2">
                                        <select name="filterStatus" id="filterStatus" required class="form-control SlectBox">
                                            <option value="all">Show All Status</option>
                                            <option value="0">Pending </option>
                                            <option value="1">Open </option>
                                            <option value="2">Complete </option>
                                        </select>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2">
                                        <button id="btnFilter"  class="btn custom-button-outline btn-block "><i class="fe fe-search"></i>
                                            Filter</button>
                                    </div>
                                    <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-xs-6 mb-2">
                                        <button id="btnReset"  class="btn custom-button btn-block"><i class="fe fe-search"></i>
                                            Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- row opened cards-->
                    <div class="row row-sm" id="divData">


                    </div>
                    <!-- row closed -->

                    <!-- row opened cards-->
                    <div class="row row-sm text-center pt-5" id="divLoader" style="display:block;height:300px;">
                        <span>
                            <i class="fas fa-spinner fa-spin"></i> Requests are being loading..
                        </span>
                    </div>
                    <!-- row closed -->

                    <!-- row opened cards-->
                    <div class="row row-sm text-center pt-5 text-danger" id="divDefault" style="display:block;height:300px;">
                        <span>
                            <i class="fas fa-exclamation"></i> No requests are found!
                        </span>
                    </div>
                    <!-- row closed -->


                    <!-- row opened -->
                    <!-- pagination -->
                    <div class="row">
                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
                        <div class="col-xl-12 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2" id="divPagination">
                            <ul class="pagination mb-3 flex-wrap" id="content-pagination" style="display:none; float:right">

                            </ul>
                        </div>

                    </div>
                    <!-- /row -->
                </div>
                <div class="tab-pane" id="analytics-tab">
                    <br>
                    <!-- analytics -->
                    <div class="row row-cards row-deck">
                        <div class="col-sm-12 col-lg-6">
                            <div class="card shadow-sm">
                                <div class="card-header pb-0">
                                    <div class="card-title pb-0  mb-2">Requests
                                        <sup>
                                            <i class="fas fa-question text-muted" data-bs-toggle="tooltip" data-bs-placement="right"
                                                title="One month request that are submited by follower."></i>
                                        </sup>
                                    </div>
                                    <p class="tx-12 tx-gray-500 mb-3">One month request that are submited by follower.</p>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                                                                <div class="col text-center">
                                            <label class="tx-12">Today</label>
                                            <p class="fw-bold tx-20">{{$today}}</p>
                                        </div><!-- col -->
                                        <div class="col border-start text-center">
                                            <label class="tx-12">This Week</label>
                                            <p class="fw-bold tx-20">{{$weekly}}</p>
                                        </div><!-- col -->
                                        <div class="col border-start text-center">
                                            <label class="tx-12">This Month</label>
                                            <p class="fw-bold tx-20">{{$monthly}}</p>
                                        </div><!-- col -->
                                    </div><!-- row -->
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-lg-6">
                            <div class="card shadow-sm">
                                <div class="card-header pb-0">
                                    <div class="card-title pb-0  mb-2">Request status
                                        <sup>
                                            <i class="fas fa-question text-muted" data-bs-toggle="tooltip" data-bs-placement="right"
                                                title="Overall request status which are pending, close and complete."></i>
                                        </sup>
                                    </div>
                                    <p class="tx-12 tx-gray-500 mb-3">Overall request status which are pending, close and complete. </p>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col text-center ">
                                            <label class="tx-12 text-primary fw-bold"><i class="fas fa-folder-open"></i> Open</label>
                                            <p class="fw-bold tx-20">{{$open}}</p>
                                        </div><!-- col -->
                                        <div class="col border-start text-center ">
                                            <label class="tx-12 text-warning fw-bold"> <i class="fas fa-hourglass-start"></i> Pending</label>
                                            <p class="fw-bold tx-20">{{$pending}}</p>
                                        </div><!-- col -->
                                        <div class="col border-start text-center ">
                                            <label class="tx-12 text-success fw-bold"><i class="fas fa-check-square"></i> Complete</label>
                                            <p class="fw-bold tx-20">{{$complete}}</p>
                                        </div><!-- col -->
                                    </div><!-- row -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- charts -->
                    <div class="row row-sm">
                        <div class="col-lg-12">
                            <div class="card shadow-sm overflow-hidden">
                                <div class="card-body">
                                    <div class="row main-content-label mg-b-5 pt-2 pb-4">
                                        <div class="col-lg-2 pt-3">Request Chart</div>
                                        <div class="col-lg-4">
                                            <!-- <input type="checkbox" class="" name="filterCheck" id="filterCheck" onclick="valueChanged()" value="" checked style="margin-bottom:15px " />Show All Dates -->
                                            <input type="text" class="form-control mb-4" name="filterDate" id="filterDate" value="" />
                                            <input type="hidden" name="filterFromDate" id="filterFromDate" value="">
                                            <input type="hidden" name="filterToDate" id="filterToDate">
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <a href="javascript:;" class=" btn custom-button-outline btn-block btnFilter " style="font-size: 16px"><i
                                                        class="fa fa-search fa-sm fa-spin fa-spinner" style="display:none"></i> Filter</a>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <a href="javascript:;" id="reset" class=" btn custom-button btn-block"
                                                    style="font-size: 16px"><i class="fa fa-search fa-sm"></i> Reset</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chartjs-wrapper-demo" id="divAreaChart">
                                        <canvas id="chartLine1"></canvas>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div><!-- col-6 -->
                </div>
            </div>
        </div>
    </div>


<div class="modal-footer"></div>







<!-- Edit Request Modal -->
<div class="modal" id="editRequestModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-body pd-20 pd-sm-40">
                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title mg-b-5">Edit Request</h5>
                <p class="mg-b-20">Please fill given form.</p>
                <form action="" id='editrequest' class='mt-3'>
                    <div class="form-group">
                        <input type="text" class="form-control" name='subject' placeholder="Enter subject" required>
                    </div><!-- form-group -->
                    <div class="form-group">
                    <select name="" id="" required class="form-control SlectBox">
                        <option value="" selected disabled>Select Status</option>
                        <option value="">Pending </option>
                        <option value="">Open </option>
                        <option value="">Complete </option>
                    </select>
                </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name='phone_number' placeholder="Phone number" required>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <input type="email" class="form-control" name='email' placeholder="Email" required>
                    </div>
                    <button class="btn custom-button btn-block" id="btnSubmit"> <i class="fa fa-spinner editspin"
                            style="display:none;"></i>Edit request</button>
                </form>
            </div><!-- modal-body -->
        </div>
    </div>
</div><!-- modal -->


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">

    //$(document).ready(function(e){
        var filterLength=1;
        var filterName = 'all';
        var filterForm = 'all'
        var filterStatus = 'all'
      var contentPagination=$("#content-pagination")

      $("#btnFilter").on('click',function(e){
        qrCount()
      })

      $("#btnReset").on('click',function(e){
        // filterLength=1;
        filterName = 'all';
        filterForm = 'all'
        filterStatus = 'all'

        $("#filterName").val('')
        $("#filterForm").val('all')
        $("#filterStatus").val('all')

        qrCount()
      })

      function setFilters(){
            filterLength = $("#filterLength").val()
            filterName = $("#filterName").val() == '' ? 'all' :  $("#filterName").val()
            filterForm = $("#filterForm").val()
            filterStatus = $("#filterStatus").val()
        }

      qrCount()
      function initPagination(totalPages){
                if(totalPages > 0){
                    contentPagination.show();
                    contentPagination.twbsPagination({
                        totalPages: totalPages,
                        visiblePages: 4,
                        onPageClick: function (event, page) {
                            requests((page === 1 ? page - 1 : ((page - 1) * filterLength)),filterLength);
                        },
                        // prev:'<i class="fa fa-arrow-left"></i>',
                        // next:'<i class="fa fa-arrow-right"></i>',
                    });
                }else{
                    contentPagination.hide();
                    $("#divData").css('display','none');
                    $("#divLoader").css('display','none');
                    $("#divDefault").css('display','block');

                }
            }


            function qrCount(){
                setFilters()
                contentPagination.twbsPagination('destroy');
                $("#divData").css('display','none');
                $("#divLoader").css('display','block');
                $("#divDefault").css('display','none');
                // filterStatus = $("#filterStatus").val()
                // filterForm = $("#filterForm").val()
                $.ajax({
                    url: '/api/request/count/',
                    type: "get",
                    data:{filterLength:filterLength,filterName:filterName,filterForm:filterForm,filterStatus:filterStatus},
                    dataType: "JSON",
                    cache: false,
                    beforeSend: function () {
                    },
                    complete: function () {
                    },
                    success: function (response) {

                        if (response["status"] == "success") {
                            total = response["data"];
                            initPagination(Math.ceil(total/filterLength));
                        }else if (response["status"] == "fail") {
                            // $("#divNotFound").css('display','block')
                            // $("#divLoader").css('display','none')
                            // $("#divData").css('display','none')
                        }
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            }
        function requests(offset,limit){
            $("#divLoader").css('display', 'block');
            // datatable('');
            $("#divData").html('')

            $.ajax({
                url: '/api/request/get',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                data: {offset:offset,limit:limit,filterName:filterName,filterForm:filterForm,filterStatus:filterStatus},
                beforeSend: function () {

                },
                complete: function () {
                    $("#divLoader").css('display','none')
                },
                success: function (response) {

                    if (response["status"] == "fail") {
                        $("#divDefault").css('display','block');
                    } else if (response["status"] == "success") {

                        $("#load").css('display','none')
                        $("#divData").css('display','flex')
                        $(".fa-spin").css('display','inline-block')


                        $("#divData").html(response["html"]);


                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    //})

        $(document).on('click', '.btnDelete', function (e) {

            var id = $(this).attr('id');

            Swal.fire({

                title: "Are you sure?",

                text: "You will not be able to recover this Request!",

                type: "warning",

                buttons: true,

                confirmButtonColor: "#ff5e5e",

                confirmButtonText: "Yes, delete it!",

                closeOnConfirm: false,

                dangerMode: true,

                showCancelButton: true

            })

                .then((deleteThis) => {

                    if (deleteThis.isConfirmed) {

                        $.ajax({

                            url: '/api/deletereq/'+id,

                            type: "GET",

                            dataType: "JSON",



                            success: function (response) {



                                if (response["status"] == "fail") {

                                    Swal.fire("Failed!", "Failed to delete Order.", "error");

                                } else if (response["status"] == "success") {

                                    Swal.fire("Deleted!", "Request has been deleted.",

                                        "success");



                                    qrCount()

                                }

                            },

                            error: function (error) {

                                console.log(error);

                            },

                            async: false

                        });

                    } else {

                        Swal.close();

                    }

                });

        });

    </script>





<script type="text/javascript">
    // Delete


    //  ADD team
    $("#addteam").on('submit', (function (e) {
        // alert('asd');
        e.preventDefault();
        $.ajax({
            url: "",
            type: "post",
            data: new FormData(this),
            dataType: "JSON",
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function () {
                $("#btnSubmit").attr('disabled', true);
                $(".teamspin").css('display', 'inline-block');
            },
            complete: function () {
                $("#btnSubmit").attr('disabled', false);
                $(".teamspin").css('display', 'none');
            },
            success: function (response) {

                if (response["status"] == "fail") {
                    toastr.error('Not Found', response["msg"])
                } else if (response["status"] == "success") {
                    toastr.success('Found', response["msg"])
                    $("#addteam")[0].reset();
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }));

    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }

    // edit team
    $("#editrequest").on('submit', (function (e) {
        // alert('asd');
        e.preventDefault();
        $.ajax({
            url: "",
            type: "post",
            data: new FormData(this),
            dataType: "JSON",
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function () {
                $("#btnSubmit").attr('disabled', true);
                $(".editspin").css('display', 'inline-block');
            },
            complete: function () {
                $("#btnSubmit").attr('disabled', false);
                $(".editspin").css('display', 'none');
            },
            success: function (response) {

                if (response["status"] == "fail") {
                    toastr.error('Not Found', response["msg"])
                } else if (response["status"] == "success") {
                    toastr.success('Found', response["msg"])
                    $("#editrequest")[0].reset();
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }));

    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }

    $(document).ready(function(e){
        refreshChart()
    })
        var filterFromDate = $("#filterFromDate").val();
        var filterToDate = $("#filterToDate").val();
        var filterDate = $("#filterDate").val();
        var filterCheckBox = 1;
    // Date Filter
        var start = moment().subtract(29, 'days');
        var end = moment();
        function cb(start, end) {
            $('#filterDate span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
            filterFromDate = start.format('YYYY-MM-DD');
            filterToDate = end.format('YYYY-MM-DD');
            $("#filterFromDate").val(filterFromDate)
            $("#filterToDate").val(filterToDate)
        }
        $('#filterDate').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb );
        cb(start, end);
        function valueChanged()
        {
            if($('#filterCheck').is(":checked"))
                $('#filterDate').attr('disabled',true);
            else
                $('#filterDate').attr('disabled',false);
        }

        $("#reset").click(function (){
            filterFromDate = '';
            filterToDate = '';
            filterDate = '';
            $("#filterCheck").prop('checked', true);
            cb(start, end);
            if($("#filterCheck").is(':checked')){
                filterCheckBox = 1;
            }else {
                filterCheckBox = 0;
            }

            $("#filterCheck").val(filterCheckBox)
            refreshChart()
        });
        function setFiltersChart(){
            filterFromDate = $("#filterFromDate").val();
            filterToDate = $("#filterToDate").val();
            filterDate = $("#filterDate").val();
            if($("#filterCheck").is(':checked')){
                filterCheckBox = 1;
            }else {
                filterCheckBox = 0;
            }
        }

        refreshChart()
        function refreshChart(){
            setFiltersChart();
            $.ajax({
                url: '/countrequest',
                type: "POST",
                data: {
                    filterFromDate: filterFromDate,
                    filterToDate: filterToDate
                },
                dataType: "JSON",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                beforeSend: function () {
                    $(".btnFilter").attr('disabled', true);
                    $(".fa-spin").css('display','inline-block');
                },
                complete: function () {
                    $(".btnFilter").attr('disabled', true);
                    $(".fa-spin").css('display','none');
                },
                success: function(response) {
                    if(response["status"] == "success"){
                        //$("#orderCount").value(response["data"])
                        $("#orderCount").val(response["data"])
                        lineChart(response["data"])
                        $(".fa-spin").css('display','none');
                    }else{

                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        $(document).on('click','.btnFilter',function(){
            refreshChart()
        });

        function lineChart(data){
            $("#chartLine1").remove()
            $("#divAreaChart").empty()
            $("#divAreaChart").append('<canvas id="chartLine1"></canvas>')

            // Set new default font family and font color to mimic Bootstrap's default styling
            // Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            // Chart.defaults.global.defaultFontColor = '#858796';

            function number_format(number, decimals, dec_point, thousands_sep) {
            // *     example: number_format(1234.56, 2, ',', ' ');
            // *     return: '1 234,56'
            number = (number + '').replace(',', '').replace(' ', '');
            // alert(number);
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function(n, prec) {
                var k = Math.pow(10, prec);
                // alert(k);
                return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
            }

            // Area Chart Example
            var ctx = document.getElementById("chartLine1");
            var xLabels = []
            var labelsData = []

            $.each(data.xLabels,(i,v)=>{
                xLabels.push(v)
                labelsData.push(data[v].count)
            })


        new Chart(ctx, {
            type: 'line',
            data: {
                labels: xLabels,
                datasets: [{
                    label: "requests",
                    data: labelsData,
                    borderColor: '#007bff',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    labels: {
                        display: false
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontSize: 10,
                            max: 80,
                            fontColor: "rgba(171, 167, 167,0.9)",
                        },
                        gridLines: {
                            display: true,
                            color: 'rgba(171, 167, 167,0.2)',
                            drawBorder: false
                        },
                    }],
                }
            }
        });

        }
</script>
@endsection