@extends('layouts')
@section('main')
    @if(auth()->user()->role == 'mr')
        <div class="container-fluid">
            <div class="row pt-3">
                <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                    <div class="white_shadow_rs">
                        <span>Total Enrolled Doctor</span>
                        <div class="doctor">
                            <div class="left">
                                <span><img src="{{asset('/assets/images/doctor.png')}}"></span>
                                <h3 id="total_enroll_doctor">0</h3>
                            </div>
                            <div class="right">
                                <img src="{{asset('/assets/images/chart_rs.png')}}" class="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-lg-8">
                    <div class="white_shadow_rs1">
                        <h4 class="title_red">Total Video Uploaded</h4>
                        <div class="chart_rs">
                            <canvas id="chLine"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="container-fluid">
            <div class="row pt-3">
                <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                    <div class="white_shadow_rs">
                        <span>Total Registered Doctors</span>
                        <div class="doctor">
                            <div class="left"><span class="grey__bg"><img src="{{asset('/assets/images/doctor.png')}}"></span>
                                <h3 id="ho_registered_dr_count">0</h3>
                            </div>
                            <div class="right">
                                <img src="{{asset('/assets/images/chart_rs.png')}}" class="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                    <div class="white_shadow_rs">
                        <span>Total Uploaded Video (MR)</span>
                        <div class="doctor">
                            <div class="left">
                                <span class="orange"><img src="{{asset('/assets/images/orange_play.png')}}"></span>
                                <h3 id="ho_total_upload_video">0</h3>
                            </div>
                            <div class="right">
                                <img src="{{asset('/assets/images/orange_chart.png')}}" class="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                    <div class="white_shadow_rs">
                        <span>Total Scanned QR</span>
                        <div class="doctor">
                            <div class="left">
                                <span class="pink"><img src="{{asset('/assets/images/pink_sca.png')}}"> </span>
                                <h3 id="ho_total_scan_qr">0</h3>
                            </div>
                            <div class="right">
                                <img src="{{asset('/assets/images/pink_chart.png')}}" class="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-lg-8">
                    <div class="white_shadow_rs1">
                        <h4 class="title_red">Total Video Uploaded (MR)</h4>
                        <div class="chart_rs">
                            <canvas id="chLine"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('scripts')

    <script>
        $(function () {
            $.ajax({
                url: "{{ route('get-dashboard-counts') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function (response) {
                    if (response.type == 'mr') {
                        if (response.result) {
                            $('#total_enroll_doctor').text(response.result.total_enroll_doctor)
                            if (response.labels && response.gdata) {
                                updateChart1(response);
                            }
                        }
                    } else {
                        if (response.result) {
                            $('#ho_registered_dr_count').text(response.result.total_enroll_doctor)
                            $('#ho_total_upload_video').text(response.result.total_video_upload)
                            $('#ho_total_scan_qr').text(response.result.total_qr_scan)
                            if (response.labels && response.gdata) {
                                updateChart1(response);
                            }
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#dataTable').DataTable().ajax.reload();
                    if (jqXHR.status == 419) {
                        $.notify("Please refresh the Page", "error");
                    } else if (jqXHR.status == 500) {
                        $.notify("Please try after a few minutes", "error");
                    } else {
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                }
            });
        });


        function updateChart1(chartData) {
            var chartData = {
                labels: chartData.labels,
                datasets: [{
                    data: chartData.gdata,
                    backgroundColor: 'transparent',
                    borderColor: colors[0],
                    borderWidth: 4,
                    pointBackgroundColor: colors[0]
                }]
            };
            if (chLine) {
                new Chart(chLine, {
                    type: 'line',
                    data: chartData,
                    options: {
                        scales: {
                            xAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: '(Month)'
                                },
                                ticks: {
                                    beginAtZero: false
                                }
                            }],
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: '(Videos)'
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        responsive: true
                    }
                });
            }
        }

    </script>

@endsection