@extends('crm.layouts.master')
@section('title','Dashboard')
@section('page-css')
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>Dashboard</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class=" col-md-6">
            <div class="card info-card sales-card">
                <div class="card-body">
                    <h5 class="card-title">Total Jobs</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-line-chart"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{$total_jobs}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" col-md-6">
            <div class="card info-card revenue-card">
                <div class="card-body">
                    <h5 class="card-title">Completed Jobs</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-check"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{$total_complete_jobs}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" col-md-6">
            <div class="card info-card revenue-card">
                <div class="card-body">
                    <h5 class="card-title">Today's Active Jobs</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-star"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{$today_active_jobs}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" col-md-6">
            <div class="card info-card customers-card">
                <div class="card-body">
                    <h5 class="card-title">Today's InActive Jobs</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-bookmark"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{$today_inactive_jobs}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card text-center " style="height: 350px;width: 300px">
                <div class="card-body">
                    <h5 class="card-title">Calls Dispositions</h5>

                    <!-- Doughnut Chart -->
                    <canvas id="doughnutChart" style=""></canvas>
                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            new Chart(document.querySelector('#doughnutChart'), {
                                type: 'doughnut',
                                data: {
                                    labels: [
                                        'Answered',
                                        'No Answer',
                                    ],
                                    datasets: [{
                                        label: 'Calls Dispositions',
                                        data: [`{{$logs_count->answered_calls}}`, `{{$logs_count->no_answered_calls}}`],
                                        backgroundColor: [
                                            'rgb(255, 99, 132)',
                                            'rgb(54, 162, 235)',
                                        ],
                                        hoverOffset: 4
                                    }]
                                }
                            });
                        });
                    </script>
                    <!-- End Doughnut CHart -->

                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script>
        $(document).ready(function () {

            // $("#auto_dialer_dashboardli").addClass("nav-active");
            // $("#auto-dialer").addClass("active");
            // $("#auto-dialer").removeClass("collapse");
            // $("#auto-dialer_link").removeClass("collapsed");
            // $("#auto-dialer_link").addClass("active");

        });
    </script>
@endsection