@extends('layouts.master')

@section('title', 'Dashboard')

@section('content')
<div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor">Dashboard</h4>
                    </div>
                </div>
                @if(\Gate::allows('Show Dashboard Albazai'))
                <div class="row">
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3 col-xlg-2">
                        <div class="card">
                            <div class="box bg-info text-center">
                                <h1 class="font-light text-white">{{ $countOfAdmin ?? 0 }}</h1>
                                <h6 class="text-white">Admins</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3 col-xlg-2">
                        <div class="card">
                            <div class="box bg-primary text-center">
                                <h1 class="font-light text-white">{{ $countOfCategory ?? 0 }}</h1>
                                <h6 class="text-white">Category</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3 col-xlg-2">
                        <div class="card">
                            <div class="box bg-success text-center">
                                <h1 class="font-light text-white">{{ $countOfSubCategory ?? 0 }}</h1>
                                <h6 class="text-white">Sub Category</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3 col-xlg-2">
                        <div class="card">
                            <div class="box bg-dark text-center">
                                <h1 class="font-light text-white">{{ $countOfService ?? 0 }}</h1>
                                <h6 class="text-white">Service</h6>
                            </div>
                        </div>
                    </div>
                </div>
				<div class="row">
                    <!-- Column -->
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="row col-md-12">
                                        <h5 class="card-title">Statistics Leads Of Booking</h5>
											<div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
												<div class="chart easy-pie-chart-1" data-percent="{{ $equationBookingPending }}"> <span class="percent">{{ $equationBookingPending }}</span>
													<br>
													<h4>Pending Offer Booking</h4>
												<canvas height="100" width="100"></canvas></div>
											</div>
                                            <div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
                                                <div class="chart easy-pie-chart-2" data-percent="{{ $equationBookingContacted }}"> <span class="percent">{{ $equationBookingContacted }}</span>
                                                    <br>
                                                    <h4>Confirmed Offer Booking</h4>
                                                <canvas height="100" width="100"></canvas></div>
                                            </div>
                                            <div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
                                                <div class="chart easy-pie-chart-3" data-percent="{{ $equationBookingNotContacted }}"> <span class="percent">{{ $equationBookingNotContacted }}</span>
                                                    <br>
                                                    <h4>Not Confirmed Offer Booking</h4>
                                                <canvas height="100" width="100"></canvas></div>
                                            </div>

											<div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
                                                <div class="chart easy-pie-chart-4" data-percent="{{ $equationContactPending }}"> <span class="percent">{{ $equationContactPending }}</span>
                                                    <br>
                                                    <h4>Pending Service Booking</h4>
                                                <canvas height="100" width="100"></canvas></div>
                                            </div>

											<div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
                                                <div class="chart easy-pie-chart-5" data-percent="{{ $equationContactContacted }}"> <span class="percent">{{ $equationContactContacted }}</span>
                                                    <br>
                                                    <h4>Confirmed Service Booking</h4>
                                                <canvas height="100" width="100"></canvas></div>
                                            </div>

											<div class="col-md-4 col-sm-4 col-xs-12 m-t-20 text-center">
                                                <div class="chart easy-pie-chart-6" data-percent="{{ $equationContactNotContacted }}"> <span class="percent">{{ $equationContactNotContacted }}</span>
                                                    <br>
                                                    <h4>Not Confirmed Service Booking</h4>
                                                <canvas height="100" width="100"></canvas></div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="col-md-12">
						<div class="card">
							<div class="card-body">
								<h4 class="card-title">Doughnut Chart to leads of Shopping Tools</h4>
								<div id="doughnut-chart" style="width:100%; height:400px;"></div>
							</div>
						</div>
					</div>
                    <!-- Column -->
                </div>
                @endif
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
        </div>
@endsection

@push('js')

<script>
!function($) {
    "use strict";

    var EasyPieChart = function() {};

    EasyPieChart.prototype.init = function() {
    	//initializing various types of easy pie charts
    	$('.easy-pie-chart-1').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#343a40',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		$('.easy-pie-chart-2').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#99d683',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		$('.easy-pie-chart-3').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#e46a76',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		$('.easy-pie-chart-4').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#343a40',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		$('.easy-pie-chart-5').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#99d683',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		$('.easy-pie-chart-6').easyPieChart({
			easing: 'easeOutBounce',
			barColor : '#e46a76',
			lineWidth: 3,
			animate: 1000,
            lineCap: 'square',
            trackColor: '#e5e5e5',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
    },
    //init
    $.EasyPieChart = new EasyPieChart, $.EasyPieChart.Constructor = EasyPieChart
}(window.jQuery),

//initializing
function($) {
    "use strict";
    $.EasyPieChart.init()
}(window.jQuery);

</script>

<script src="/backEnd/dist/assets/node_modules/echarts/echarts-all.js"></script>

<script>
var doughnutChart = echarts.init(document.getElementById('doughnut-chart'));

// specify chart configuration item and data

option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['Request Brochure Form','TEST DRIVE Form','GET A QUOTE Form','CALL BACK Form']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: false, readOnly: false},
            magicType : {
                show: false, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    color: ["#f62d51", "#009efb", "#55ce63", "#ffbc34"],
    calculable : true,
    series : [
        {
            name:'Source',
            type:'pie',
            radius : ['80%', '90%'],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '20',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:{{$countBrochure}}, name:'Request Brochure Form'},
                {value:{{$countDrive}}, name:'TEST DRIVE Form'},
                {value:{{$countQuota}}, name:'GET A QUOTE Form'},
                {value:{{$countCallBack}}, name:'CALL BACK Form'}
            ]
        }
    ]
};
                                    
                    

// use configuration item and data specified to show chart
doughnutChart.setOption(option, true), $(function() {
            function resize() {
                setTimeout(function() {
                    doughnutChart.resize()
                }, 100)
            }
            $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
        });

</script>
@endpush