@extends('staff::layouts.default')
@section('title',trans('admin_default.dashboard'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.dashboard')}}</a></li>
@endsection

@section('content')


<div class="content-wrapper">

    <div class="panel panel-white border-top-success">
        <div class="panel-heading">
            <h5 class="panel-title text-bold">{{trans('admin_default.dashboard')}}</h5>
        </div>

        <div class="panel-body">
			<div class="row">
				<div class="col-lg-12">

					<div class="col-lg-3">
						<div class="panel bg-pink-400">
							<div class="panel-body">
								<h3 class="no-margin">{{number_format($today_transaction)}}</h3>
								{{trans('admin_default.today_transaction')}}
							</div>
						</div>
					</div>

					<div class="col-lg-3">
						<div class="panel bg-indigo-400">
							<div class="panel-body">
								<h3 class="no-margin">{{$currency_sign . " " . number_format($today_revenue, 2)}}</h3>
								{{trans('admin_default.today_revenue')}}
							</div>

							<div id="today-revenue"></div>
						</div>
					</div>

					<div class="col-lg-3">
						<div class="panel bg-blue-400">
							<div class="panel-body">
								<h3 class="no-margin">{{$currency_sign . " " . number_format($this_month_revenue, 2)}}</h3>
								{{trans('admin_default.this_month_revenue')}}
							</div>

							<div id="today-revenue"></div>
						</div>
					</div>

					<div class="col-lg-3">
						<div class="panel bg-success-400">
							<div class="panel-body">
								<h3 class="no-margin">{{$currency_sign . " " . number_format($this_year_revenue, 2)}}</h3>
								{{trans('admin_default.this_year_revenue')}}
							</div>

							<div id="today-revenue"></div>
						</div>
					</div>

					<!-- <div class="col-lg-3">
						<div class="panel bg-violet">
							<div class="panel-body">
								<h3 class="no-margin">{{number_format($today_order)}}</h3>
								{{trans('admin_default.today_order')}}
							</div>
						</div>
					</div> -->

					<div class="col-lg-3">
						<div class="panel bg-warning-400">
							<div class="panel-body">
								<h3 class="no-margin">{{number_format($new_customer)}}</h3>
								{{trans('admin_default.today_customer')}}
							</div>
						</div>
					</div>

					<div class="col-lg-3">
						<div class="panel bg-brown-400">
							<div class="panel-body">
								<h3 class="no-margin">{{number_format($total_customer)}}</h3>
								{{trans('admin_default.total_customer')}}
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="row">
				<div class="col-lg-6">
					<div class="panel panel-flat">
						<div class="panel-heading">
							<h6 class="panel-title">{{trans('admin_default.today_revenue_by_branch')}}</h6>
						</div>
						<div id="revenue-today-by-branch" class="chart-medium-width"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="panel panel-flat">
						<div class="panel-heading">
							<h6 class="panel-title">{{trans('admin_default.this_week_revenue_by_branch')}}</h6>
						</div>
						<div id="revenue-this-week-chart" class="chart-medium-width"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="panel panel-flat">
						<div class="panel-heading">
							<h6 class="panel-title">{{trans('admin_default.current_and_last_year_revenue')}}</h6>
						</div>
						<div id="revenue-current-and-last-year" class="chart-medium-width"></div>
					</div>
				</div>
			</div>
			<!-- user calendar -->
			@if($in_app_reservation_yes)
	        	<div class="row">
	        		<div class="col-lg-12">
	        			<!-- Basic view -->
						<div class="panel panel-flat">
							<div class="panel-heading">
								<h5 class="panel-title">{{trans('admin_default.customer_booking')}}</h5>
								<div class="heading-elements">
									<ul class="icons-list">
				                		<li><a data-action="collapse"></a></li>
				                		<li><a data-action="close"></a></li>
				                	</ul>
			                	</div>
							</div>
							
							<div class="panel-body">
								<div class="fullcalendar-basic"></div>
							</div>
						</div>
						<!-- /basic view -->
	        		</div>
	        	</div>
        	@endif
		</div>

    </div>

</div>
<style type="text/css">
.revenue-today-container
{
	padding: 0 20px;
}
.revenue-today-container table
{
	margin-bottom: 20px;
}
.chart-medium-width
{
	width: 96%;
	height: 250px;
}
h6
{
	font-weight: bold;
}
</style>

@endsection

@section('script')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

var arr_colors = ['#29B6F6', '#4CAF50', '#FF7043', '#7E57C2', '#607D8B', '#26A69A', '#F44336', '#66BB6A','#7E57C2'];
var json_today_revenue_by_branch = {!! $json_today_revenue_by_branch !!};
var json_this_week_revenue_by_branch = {!! $json_this_week_revenue_by_branch !!};
var json_revenue_current_and_last_year = {!! $json_revenue_current_and_last_year !!};

var events = {!! $json_event !!};
// console.log(events);

// calendar
// Default events
// var events = [
//     {
//         title: 'Meeting',
//         start: '2020-01-30 10:30:00',
//         end: '2020-01-30 11:30:00',
//         url: 'http://google.com/'
//     }
// ];

// Initialization
// ------------------------------

// Basic view
$('.fullcalendar-basic').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    defaultDate: '{{$default_date}}',
    editable: false,
    events: events
});

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawRevenueThisWeekChart);
google.charts.setOnLoadCallback(drawRevenueTodayByBranchChart);
google.charts.setOnLoadCallback(drawRevenueCurrentAndLastYearChart);

function drawRevenueThisWeekChart() {
	var data = google.visualization.arrayToDataTable(json_this_week_revenue_by_branch);

	var options = {
	  	title: '',
        legend: { position: "top" },
        chartArea: {'width': '80%', 'height': '80%', 'left': '15%'},
	  	pointSize: 3,
	  	vAxis: { gridlines: { count: 6 }, format: '#,##0.00', viewWindow:{ min: 0 } },
        // colors: arr_colors,
	  	curveType: 'function'
	};

	var chart = new google.visualization.LineChart(document.getElementById('revenue-this-week-chart'));

	chart.draw(data, options);
}

function drawRevenueCurrentAndLastYearChart() {
	var data = google.visualization.arrayToDataTable(json_revenue_current_and_last_year);

	var options = {
	  	title: '',
        legend: { position: "top" },
        chartArea: {'width': '80%', 'height': '80%', 'left': '15%'},
	  	pointSize: 3,
	  	vAxis: { gridlines: { count: 6 }, format: '#,##0.00', viewWindow:{ min: 0 } },
        colors: arr_colors,
	  	curveType: 'function'
	};

	var chart = new google.visualization.LineChart(document.getElementById('revenue-current-and-last-year'));

	chart.draw(data, options);
}

function drawRevenueTodayByBranchChart() {
	var data = google.visualization.arrayToDataTable(json_today_revenue_by_branch);

	var options = {
	  	title: '',
        chartArea: {'width': '80%', 'height': '80%', 'left': '15%'},
        // colors: arr_colors,
	  	pieHole: 0.4,
	};

	var chart = new google.visualization.PieChart(document.getElementById('revenue-today-by-branch'));
	chart.draw(data, options);
}

</script>
@parent

@endsection