@extends('callcenter.layout.default')

@section('content')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">
                    Call Center Dashboard
                </h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content dashboard-widget">
        <!--Begin::Section-->
		<div class="row">
			<div class="col-lg-6 col-md-6">
				<!--begin::Portlet-->
				<div class="m-portlet m-portlet--tab" id="circle-chart-content">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon m--hide">
									<i class="la la-gear"></i>
								</span>
								<h3 class="m-portlet__head-text">
									Delivery Orders
								</h3>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div id="m_flotchart" style="height: 300px;"></div>
					</div>					
				</div>
				<div class="content-btn">
					<button type="button" class="btn btn-primary" onclick="downloadPdf( 'circle-chart-content' )">Download</button>
				</div>
				<!--end::Portlet-->
			</div>
			<div class="col-lg-6 col-md-6">
				<!--begin::Portlet-->
				<div class="m-portlet m-portlet--tab" id="bar-chart-content">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon m--hide">
									<i class="la la-gear"></i>
								</span>
								<h3 class="m-portlet__head-text">
									Delivery Orders Hourly
								</h3>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div id="m_flotcharts_6" style="height: 300px;"></div>
					</div>
				</div>
				<div class="content-btn">
					<button type="button" class="btn btn-primary" onclick="downloadPdf( 'bar-chart-content' )">Download</button>
				</div>
				<!--end::Portlet-->
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="m-portlet m--bg-danger m-portlet--skin-dark">
					<div class="m-portlet__body">
						<div class="table-responsive">
							<table class="table pinkTable" id="dataTable" width="100%">
								<tbody id="branch-dynamic-data">
									<pre></pre>***************************************************************************<pre></pre>									<tr>
										<td><strong>Total Order(s) - {{ $TotalOrders }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delivery Order(s) - {{ $TotalDelivered }}</strong></td>
									</tr>
									<tr>
										<td><strong>Takeaway Order(s) - {{ $TotalTakeAway }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delay in Kitchen (>15) - {{ $DelayInKitchen }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delay in Delivery(>25) - NA</strong></td>
									</tr>
									<tr>
										<td><strong>Not Received in Restaurant(s) - {{ $NotReceivedInRestaurant }}</strong></td>
									</tr>
									<tr>
										<td><strong>Total Cancelled - {{ $TotalCancelled }}</strong></td>
									</tr>
									<tr>
										<td><strong>Orders in Kitchen - {{ $TotalInKitchen }}</strong></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="m-portlet">
					<div class="m-portlet__body">
						<div class="table-responsive">
							<!--begin: Datatable -->
							<table class="table table-hover dashboardTable" id="html_table" width="100%">
								<thead>
									<tr>
										<th title="Field #1">
											Restaurant Name
										</th>
										<th title="Field #2">
											Total Orders
										</th>
										<th title="Field #3">
											Delivery
										</th>
										<th title="Field #4">
											Takeaway
										</th>
										<th title="Field #5">
											Not Received in Restaurant
										</th>
										<th title="Field #6">
											Delay in Kitchen
										</th>
										<th title="Field #7">
											Delay in Delivery
										</th>
										<th title="Field #8">
											Cancelled
										</th>
										<th title="Field #9">
											Order(s) in Kitchen
										</th>
										<th title="Field #10">
											Order(s) in Delivery
										</th>
									</tr>
								</thead>
								<tbody>
									@foreach( $branches_data_table as $table_data )
									<tr id="{{ $table_data->BranchId }}">
										<td>{{ $table_data->BranchName }}</td>
										<td>{{ $table_data->TotalOrders }}</td>
										<td>{{ $table_data->TotalDelivered }}</td>
										<td>{{ $table_data->TotalTakeAway }}</td>
										<td>{{ $table_data->NotReceivedInRestaurant }}</td>
										<td>{{ $table_data->DelayInKitchen }}</td>
										<td>NA</td>
										<td>{{ $table_data->TotalCancelled }}</td>
										<td>{{ $table_data->TotalInKitchen }}</td>
										<td>{{ $table_data->TotalInDelivery }}</td>
									</tr>
									@endforeach
								</tbody>
							</table>
							<!--end: Datatable -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{ URL::to('callcenter/callcenter-orders') }}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info() }}</h3>
												<a href="{{ URL::to('callcenter/callcenter-orders') }}"><h4 class="text-muted">Total No of orders</h4></a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-shopping-cart float-right fs-50 m--font-info"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=4')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_delivered' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=4')}}">
												<h4 class="text-muted">Total no of delivered orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa  fa-plane float-right fs-50 m--font-danger"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=5')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_cancel' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=5')}}">
													<h4 class="text-muted">Total no of cancel orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-taxi float-right fs-50 m--font-warning"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=8')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_delay' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=8')}}">
													<h4 class="text-muted">Total no of delay orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-shopping-basket float-right fs-50 m--font-primary"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
        <!--End::Section-->
    </div>
</div>

@endsection
@section('js')

<script type="text/javascript">

    $( '#html_table tr' ).click( function ( e ) {
        $( '#html_table tr' ).removeClass( 'table-active' );
        $( this ).addClass( 'table-active' );
		
		var branch_id = $(this).attr('id');
		console.log('Branch ID:', branch_id);
		
		$.ajax( {
			url: "{{ route('get_branch_data') }}",
			type: "POST",
			data: { "_token": "{{ csrf_token() }}", 'branch_id': branch_id },
			success: function ( result ) {
				$('#branch-dynamic-data').html( result );
			},
			error: function ( XMLHttpRequest, textStatus, errorThrown ) {
				alert( "Status: " + textStatus );
				alert( "Error: " + errorThrown );
			}
		} );
    } );

    var FlotchartsDemo = function () {

        var demo6 = function () {
            // bar chart:
            var data = GenerateSeries( 0 );
            function GenerateSeries( added ) {
				
				/*
                var data = [ ];
                var start = 100 + added;
                var end = 200 + added;

                for ( i = 1; i <= 24; i++ ) {
                    var d = Math.floor( Math.random() * ( end - start + 1 ) + start );
                    data.push( [ i, d ] );
                    start++;
                    end++;
                }
				*/
			   
				var j = 0
				var new_data = [ ];
				var branch_statictics = ``;
				$.each( JSON.parse( branch_statictics ), function ( key, value ) {
					new_data.push( [ key, value ] );
					j++;
				} );
								
                return new_data;
            }

            var options = {
                series: {
                    bars: {
                        show: true
                    }
                },
                bars: {
                    barWidth: 0.8,
                    lineWidth: 0, // in pixels
                    shadowSize: 0,
                    align: 'left',
                    fill       : 1,
            fillColor  : null
                },

                grid: {
                    tickColor: "#eee",
                    borderColor: "#eee",
                    borderWidth: 1
                }
            };

			$.plot( $( "#m_flotcharts_6" ), [ {
                    data: data,
                    color:'#cc0000',
                    lines: {
                        lineWidth: 1,
                    },
                    shadowSize: 0
                } ], options );
        }

        var demo8 = function () {

            var branch_statictics = ``;
            var i = 0
            var colors=["#00695c","#CC0000","#9933CC","#3F729B","#5d4037","#007E33","#0d47a1","#FF8800","#c2185b"]
            var new_data = [ ];
            $.each( JSON.parse( branch_statictics ), function ( key, value ) {
                new_data[i] = {
                    label: key + ' - ' + value,
                    data: value,
                    color:colors[i]
                };
                i++;
            } );

            $.plot( $( "#m_flotchart" ), new_data, {
                series: {
                    pie: {
                        show: true,
                        label: {
                            innerRadius: 0.5,
                            show: true,
                            radius: 1,
                            formatter: function ( label, series ) {
                                return '<div style="font-size:8pt;text-align:center;padding:2px;color:black;font-weight:bold;">' + Math.round( series.percent ) + '%</div>';
                            },
                            background: {
                                opacity: 0.0
                            }
                        }
                    }
                }
            } );
        }
        return {
            // public functions
            init: function () {
                demo6();
                demo8();
            }
        };
    }();

    jQuery( document ).ready( function () {
        FlotchartsDemo.init();
    } );
	
	function downloadPdf( div_id ){
		
		html2canvas(document.getElementById( div_id ), {
			
			onrendered: function( canvas ) {

				var imgData = canvas.toDataURL( 'image/png' );

				var doc = new jsPDF('p', 'mm', 'a4');

				doc.addImage(imgData, 'PNG', 10, 10);
				
				doc.save('dashboard.pdf');
			}
		});
	}

</script>

@endsection