@extends('incharge.layout.page-app')
@section('page_title', __('label.dashboard'))
@section('tab_title', __('label.dashboard'))

@section('content')
    @include('incharge.layout.sidebar')

    <div class="right-content">
        @include('incharge.layout.header')

        <div class="body-content">
            <!-- mobile title -->
            <h1 class="page-title-sm">{{__('label.dashboard')}}</h1>

            <div class="row counter-row">
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-shapes fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($ServiceCount ?? 0) }}</h3>
                                <span>{{__('label.service')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-address-card fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($SubInChargeCount ?? 0) }}</h3>
                                <span>{{__('label.sub_in_charge')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-user-slash fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($InActiveSubInChargeCount ?? 0) }}</h3>
                                <span>{{__('label.inactive_sub_incharge')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-bullhorn fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($TotalComplaints ?? 0) }}</h3>
                                <span>{{__('label.total')}} {{__('label.requests')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row counter-row">
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-bullhorn fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($OpenComplaints ?? 0) }}</h3>
                                <span>{{__('label.open')}} {{__('label.requests')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-bullhorn fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($InProgressComplaints ?? 0) }}</h3>
                                <span>{{__('label.in_progress')}} {{__('label.requests')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-bullhorn fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($CaneclComplaints ?? 0) }}</h3>
                                <span>{{__('label.archived')}} {{__('label.requests')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 col-12">
                    <div class="card custom-card card-color-primary">
                        <div class="card-body">
                            <div class="card-icon-primary card-color-primary">
                                <i class="fa-solid fa-bullhorn fa-2x"></i>
                            </div>
                            <div class="text-right">
                                <h3>{{ No_Format($CompletComplaints ?? 0) }}</h3>
                                <span>{{__('label.completed')}} {{__('label.requests')}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Join User && Provider && Service Man Statistice -->
            <div class="row">
                <div class="col-12 col-xl-12 cart-bg">
                    <div class="box-title">
                        <h2 class="title">{{__('label.join_request_statistice')}}</h2>
                    </div>
                    <div class="row mt-2 mb-2">
                        <div class="col-12 col-sm-12">
                            <Button id="year" class="btn btn-default mr-3">{{__('label.this_year')}}</Button>
                            <Button id="month" class="btn btn-default">{{__('label.this_month')}}</Button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-12">
                            <canvas id="UserChart" width="100%" height="35px"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('pagescript')
   <!-- chart -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

    <script>
            var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            // User & Provider & Service Man Statistice
            var cData_op = JSON.parse(`<?php echo $open_year; ?>`);
            var cData_in = JSON.parse(`<?php echo $inprogress_year; ?>`);
            var cData_ar = JSON.parse(`<?php echo $archived_year; ?>`);
            var cData_cmp = JSON.parse(`<?php echo $complete_year; ?>`);
            var ctx = $("#UserChart");

            var data = {
                labels: month,
                datasets: [{
                    label: "{{__('label.open')}}",
                    data: cData_op['sum'],
                    backgroundColor: 'red',
                }, {
                    label: "{{__('label.in_progress')}}",
                    data: cData_in['sum'],
                    backgroundColor: 'yellow',
                }, {
                    label: "{{__('label.archived')}}",
                    data: cData_ar['sum'],
                    backgroundColor: 'gray',
                }, {
                    label: "{{__('label.completed')}}",
                    data: cData_cmp['sum'],
                    backgroundColor: 'green',
                }],
            };
            var options = {
                responsive: true,
                legend: {
                    title: "text",
                    display: true,
                    position: 'top',
                    labels: {
                        fontSize: 16,
                        fontColor: "#000000",
                    }
                },
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: '{{__("label.total_requests")}}',
                            fontSize: 16,
                            fontColor: "#000000",
                        },
                    }],
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: '{{__("label.month")}}',
                            fontSize: 16,
                            fontColor: "#000000",
                        }
                    }]
                }
            };
            var chart1 = new Chart(ctx, {
                type: "bar",
                data: data,
                options: options
            });

            $("#year").on("click", function() {
                chart1.destroy();

                chart1 = new Chart(ctx, {
                    type: "bar",
                    data: data,
                    options: options

                });
            });
            $("#month").on("click", function() {

                var date = new Date();
                var currentYear = date.getFullYear();
                var currentMonth = date.getMonth() + 1;
                const getDays = (year, month) => new Date(year, month, 0).getDate();
                const days = getDays(currentYear, currentMonth);

                var all1 = [];
                for (let i = 0; i < days; i++) {
                    all1.push(i + 1);
                }

                chart1.destroy();
                var cData_op = JSON.parse(`<?php echo $open_month ?>`);
                var cData_in = JSON.parse(`<?php echo $inprogress_month; ?>`);
                var cData_ar = JSON.parse(`<?php echo $archived_month; ?>`);
                var cData_cmp = JSON.parse(`<?php echo $complete_month; ?>`);

                var data = {
                    labels: all1,
                    datasets: [{
                        label: "{{__('label.open')}}",
                        data: cData_op['sum'],
                        backgroundColor: 'red',
                    }, {
                        label: "{{__('label.in_progress')}}",
                        data: cData_in['sum'],
                        backgroundColor: 'yellow',
                    }, {
                        label: "{{__('label.archived')}}",
                        data: cData_ar['sum'],
                        backgroundColor: 'gray',
                    }, {
                        label: "{{__('label.completed')}}",
                        data: cData_cmp['sum'],
                        backgroundColor: 'green',
                    }],
                };
                chart1 = new Chart(ctx, {
                    type: "bar",
                    data: data,
                    options: options,
                });
            });
    </script>
@endsection