@extends('layouts.app')

@section('title')
    {{ config('settings.company_name') }} -> Dashboard
@stop

@section('top-bar')
    @include('includes.top-bar')
@stop

@section('left-sidebar')
    @include('includes.left-sidebar')
@stop

@php


@endphp

@section('content')
<section class="content">

    <style type="text/css">
        
        #properties_pie_chart{
            margin-top:7rem;
            height: auto !important;
            width:100% !important;
    }

    .headers_card {
            height: 100px !important;
        }

	.charts{
		margin-bottom: 4rem; 
	}
    </style>

    <div class="container-fluid">    
        <div class="card p-b-10">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <br>
                    <div class="body">
                        <div class="block-header">
                            <h2>{{__('lang.leasing_dashboard')}}</h2>
                        </div>
                        <br>
                        <form class="row-rtl"   method="get" id="dashboard_form">
							{{-- @csrf --}}
                            <div class="col-md-3">
                                <div class="form-group form-float">
                                    <div class="form-line focused">
                                        <select data-live-search="true"
                                            class="form-control show-tick"name="branch_id">
                                            <option value="0">{{__('lang.select_project_name')}}</option>

                                            @foreach (App\Models\Branch::whereHas('leases')->userProjects()->leasing()->get() as $branch_data)
                                                <option @if ($branch_data->id == $dash_params->branch_id) selected @endif
                                                    value="{{ $branch_data->id }}">{{ $branch_data->name }}
                                                </option>
                                            @endforeach

                                        </select>
                                        <label class="form-label">{{__('lang.project')}}</label>
                                    </div>
                                </div>
                            </div>

							@include('layouts.components.date_field', [
								'col'   => 3,
								"name"  => "from",
								"label" => __('lang.from'),
								"id"    => "bs_datepicker_container",
								"value" => date('d/m/Y', strtotime($dash_params->from))
							])

							@include('layouts.components.date_field', [
								'col'   => 3,
								"name"  => "to",
								"label" => __('lang.to'),
								"id"    => "bs_datepicker_container",
								"value" => date('d/m/Y', strtotime($dash_params->to))                                    ])

 

                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                <div class="form-line text-left">
                                    <button type="submit" class="btn btn-primary waves-effect"   >{{__('lang.generate')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
				<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">

                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/leasae.png",
						"route"=> "leasing-dashboard-report-redirection",
						"parameters" => ['branch_id' => $dash_params->branch_id, 'from' =>  $dash_params->from , 'to' =>  $dash_params->to , 'redirect_type' => 'total_lease'],
						"target" => "_blank",
						"value" => $label_data->total_leases,
                        "label" => 'Total Leases',
                        "col"=> 6,
						 
                        
                    ])

                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/amount.png",
						"route"=> "leasing-dashboard-report-redirection",
						"parameters" => ['branch_id' => $dash_params->branch_id , 'from' =>  $dash_params->from , 'to' =>  $dash_params->to , 'redirect_type' => 'lease_amount'],
						"target" => "_blank",
                        "label" => 'Lease Amount '.$transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->lease_amount),
                        "col"=> 6,
						 
						
                    ])
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/liability-3.png",
						"route"=> "leasing-dashboard-report-redirection",
						"parameters" => ['branch_id' => $dash_params->branch_id , 'from' =>  $dash_params->from , 'to' =>  $dash_params->to , 'redirect_type' => 'collected_amount'],
						"target" => "_blank",
                        "label" => 'Collected Amount '.$transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->collected_amount),
                        "col"=> 6,
						 
                    ])
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/balance_amount.png",
						"route"=> "leasing-dashboard-report-redirection",
						"parameters" => ['branch_id' => $dash_params->branch_id , 'from' =>  $dash_params->from , 'to' =>  $dash_params->to , 'redirect_type' => 'balance_amount'],
						"target" => "_blank",
                        "label" => 'Balance Amount '.$transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->balance_amount),
                        "col"=> 6,
                    ])
                </div>
            </div>

		 

            <div class="row charts">
				
                 
				<div class="col-md-6">
					<div class="header">
						<h3 class="text-center">{{__('lang.properties_unit')}}</h3>
					</div>
					<div id="property_chart_data"></div>
				</div>

				<div class="col-md-6">
					<div class="header">
						<h3 class="text-center">{{__('lang.leases_per_month')}}</h3>
					</div>
					<div id="leases_per_month"></div>
				</div>
                 
            </div>

		 

            <div class="row charts">

				<div class="col-md-6">
					<div class="header">
						<h3 class="text-center">{{__('lang.last_10_receipts')}}</h3>
					</div>
 
					<div class="body">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>{{__('lang.serial_no')}}</th>
									<th>{{__('lang.voucher_no')}}</th>
									<th>{{__('lang.bank')}}</th>
									<th>{{__('lang.account')}}</th>
									<th class="text-right">{{__('lang.amount')}} {{ $transaction->systemSettingCurrency() }}</th>
								</tr>
							</thead>
							<tbody>
								
								@foreach ($chart_data->last_receipts_data->last_receipts as $receipt_data)
								@php
									$bank 		= $receipt_data->transaction_dr->pluck('IncomeExpenseHead.name')->unique()->implode(', ');
									$account 	= $receipt_data->transaction_cr->pluck('IncomeExpenseHead.name')->unique()->implode(', ');

								@endphp
									<tr>
										<td>{{ $loop->iteration }}</td>
										<td><a href="{{ route('leasing.lease_receipt_voucher.edit',$receipt_data->id) }}" target="_blank">{{ $receipt_data->voucher_no}}</a></td>
										<td>{{ $bank ?? '-'}}</td>
										<td>{{ $account}}</td>
										<td class="text-right">{{ $transaction->convert_money_format($receipt_data->amount)}}</td>
									</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				 
					 
				</div>

				<div class="col-md-6">
					<div class="header">
						<h3 class="text-center">{{__('lang.last_10_leases')}} </h3>
					</div>

					<div class="body">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>{{__('lang.serial_no')}}</th>
									<th>{{__('lang.lease_no')}}</th>
									<th>{{__('lang.customer')}}</th>
									<th>{{__('lang.contract')}}</th>
									<th class="text-right">{{__('lang.amount')}} {{ $transaction->systemSettingCurrency() }}</th>
								</tr>
							</thead>
							<tbody>
								@foreach ($chart_data->last_leases_data->leases as $lease)
								<tr>
									<td>{{ $loop->iteration }}</td>
									<td><a href="{{ route('leasing.lease.edit',$lease->id) }}" target="_blank">{{ $lease->lease_no}}</a></td>
									<td>{{ $lease->customer->name}}</td>
									<td>{{  $transaction->date_format($lease->contract_from) . ' - ' . ( $transaction->date_format($lease->contract_to)) }}</td>
									<td class="text-right">{{ $transaction->convert_money_format($lease->amount)}}</td>
								</tr>
							@endforeach
								  
							</tbody>

						</table>
					</div>
					 

				</div>
                 
            </div>
        </div>
    </div>
</section>



@stop


@push('include-css')
	<link href="{{ loadAsset('asset/plugins/waitme/waitMe.css') }}" rel="stylesheet" />
	<link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />
	<link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
	<link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">
	<link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">
	<link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">
	<link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />
	<link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}" rel="stylesheet" />
	<link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />
	<link href="{{ loadAsset('asset/css/apexcharts.css') }}" rel="stylesheet" />
@endpush

@push('include-js')
	<script src="{{ loadAsset('asset/plugins/jquery-countto/jquery.countTo.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/raphael/raphael.min.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/morrisjs/morris.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/chartjs/Chart.bundle.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.resize.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.pie.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.categories.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.time.js') }}"></script>
	<script src="{{ loadAsset('asset/js/pages/index.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/jquery-sparkline/jquery.sparkline.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>
	<script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>
	<script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
	<script src="{{ loadAsset('asset/js/dataTable.js') }}"></script>
	<script src="{{ loadAsset('asset/dashboard/chart.min.js') }}"></script>
	<script src="{{ loadAsset('asset/dashboard/utils.js') }}"></script>
	<script src="{{ loadAsset('asset/dashboard/plotly.js') }}"></script>
	<script src="{{ loadAsset('asset/js/apexcharts.min.js') }}"></script>
	<script>
		@if (Session::has('success'))
			toastr["success"]('{{ Session::get('success') }}');
		@endif
		@if (Session::has('error'))
			toastr["error"]('{{ Session::get('error') }}');
		@endif
		@if ($errors->any())
			@foreach ($errors->all() as $error)  
				toastr["error"]('{{ $error }}');
			@endforeach
		@endif
	</script>

	<script>
		BaseController.init();
	</script>

	<script>
        let currency_symbol = "{{$transaction->systemSettingCurrency()}}";

		$(document).ready(function() {
			mapDashboardCharts();

		});

	 
		function mapDashboardCharts(){
			mapPropertyUnitChartData();
			mapLeasePerMonthChartsData();
			// mapNonCurrentLiabilitiesChart();
			// mapCurrentLiabilitiesChart();
			// majorExpensesChart();
		}

		function mapPropertyUnitChartData(){

			const chart_data = @json($chart_data->property_charts_data);
			const data_set = [
				{ name: 'Opened Properties', id: 'opened', balance: chart_data.opened },
				{ name: 'Leased Properties', id: 'leased', balance: chart_data.leased }
			];
			generateDonutChart(data_set, '#property_chart_data');

		}

		function mapLeasePerMonthChartsData() {
			const chart_data = @json($chart_data->leases_per_month_chart);

			const months 		= Object.keys(chart_data.leases);  
			const lease_counts 	= Object.values(chart_data.leases);

			const data_set = months.map((month, index) => ({
				name: month,       
				balance: lease_counts[index],
			}));

			generateVerticalBarChart(data_set, '#leases_per_month');
		}


		function generateDonutChart(data_set, container_id){

			let labels  		= data_set.map(item => item.name);
			let subgroup_ids	= data_set.map(item => item.id);
			let amounts 		= data_set.map(item => Math.abs(item.balance));
			let mixed_amounts   = data_set.map(item =>item.balance);

			let totalShades 	= labels.length;
			let max_value 		= Math.max(...amounts);
			let combinedLabels 	= labels.map((label, index) => label + ': ' + (amounts[index]));
			
			var optionPie = {
				series: amounts,
				chart: {
					height: 350,
					type: 'donut',
					offsetX: -10,
					offsetY: 10,
					toolbar: {
						show: false
					},
					events: {
						dataPointSelection: function(event, chartContext, config) {
							let labelIndex 	= config.dataPointIndex;
						}
					}
				},
				plotOptions: {
					pie: {
						donut: {
							size: '50%',
							labels: {
								show: false,                
								total: {
									show: true,
									showAlways: true,
									label: 'Total',
									formatter: function (w) {
									const total = w.globals.seriesTotals.reduce((a, b) => {
										return a + b;
									}, 0);
									return total.toLocaleString();
								}
								},
							}                   
						}
					}
				}, 
				colors: generateColorShades(totalShades,210),
				labels: combinedLabels,
				dataLabels: {
					enabled: true,
					formatter: function(val, opts) {
						return opts.w.config.labels[opts.seriesIndex];
					},
					textAnchor:'middle',
					style: {
						fontSize: '12px',
						fontFamily: 'Arial',
						colors: ['#000000'],

					},
					dropShadow: {
						enabled: false
					}
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return ''
						},
						title: {
							formatter: function(combinedLabels) {
								return combinedLabels
							}
						}
					}
				},
				legend: {
					offsetX: 40,
					show: false,
				},
				responsive: [{
					options: {
						plotOptions: {
							legend: {
								position: 'bottom',
								show: false
							}
						}
					}
				}]
			};

			return apexChartRender(container_id,optionPie);

		}

		function generatePieChart(data_set,container_id,group_id=[]){

			let labels  		= 	data_set.map(item => item.name);
			let subgroup_ids	= 	data_set.map(item => item.id);
			let amounts 		= 	data_set.map(item => Math.abs(item.balance));
			let mixed_amounts   = 	data_set.map(item =>item.balance);
			let totalShades 	= 	labels.length;

			var optionPie = {
				series: amounts,
				chart: {
					height: 350,
					type: 'pie',
					offsetY: 20,
					toolbar: {
						show: false
					},
					events: {
						dataPointSelection: function(event, chartContext, config) {
						    let labelIndex 	= config.dataPointIndex;
							let subgroupId 	= subgroup_ids[labelIndex];
						    openHeadsDetail(subgroupId);
						}
					}
				},
				colors: generateColorShades(totalShades,210),
				labels: labels,
				dataLabels: {
					enabled: true,
					formatter: function(val, opts) {
						return opts.w.config.labels[opts.seriesIndex];
					},
					textAnchor:'middle',
					style: {
						fontSize: '12px',
						fontFamily: 'Arial',

					},
					dropShadow: {
						enabled: true
					}
				},
				legend: {
					show: false,
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return addCommas(val)
						},
						title: {
							formatter: function(combinedcustomeLabels) {
								return combinedcustomeLabels
							}
						}
					}
				},

				responsive: [{
					// breakpoint: 1000,
					options: {
						dataLabels: {
							enabled: true,
						},
						plotOptions: {
							chart: {

							},
							legend: {
								position: 'bottom'
							}
						}
					}
				}]
			};

			var chartPie = new ApexCharts(document.querySelector(container_id), optionPie);
			chartPie.render();
		}

		function generateHorizontalBarChart(data_set, container_id , group_id =[]) {
			let labels  		= data_set.map(item => item.name);
			let subgroup_ids	= 	data_set.map(item => item.id);
			let amounts 		= data_set.map(item => Math.abs(item.balance));
			let mixed_amounts   = data_set.map(item =>item.balance);
			let totalShades 	= labels.length;
			let max_value 		= Math.max(...amounts);

			
			let colors 			= generateColorShades(totalShades,210);
			let combinedLabels 	= labels.map((label, index) => label + ': ' + addCommas(amounts[index]));

			var options = {
				series: [
					{
						name: 'Amount',
						data: amounts  
					}
				],
				chart: {
					type: 'bar',
					height: 350,
					width: '98%',
					toolbar: {
						show: false
					},
					events: {
                            dataPointSelection: function(event, chartContext, config) {
								let labelIndex 	= config.dataPointIndex;
								let subgroupId 	= subgroup_ids[labelIndex];
								openHeadsDetail(subgroupId);
                            }
                }
				},
				colors: colors, 
				plotOptions: {
					bar: {
						distributed:true,
						horizontal: true,
						columnWidth: '40%',
						barHeight: '50%',
					},
				},
				dataLabels: {
					enabled: true,
					formatter: function(value) {
						return addCommas(value, max_value) + currency_symbol;
					},
					style: {
						colors: ['#000000']
					},
					offsetX: 30,
				},
				xaxis: {
					categories: labels,  
					labels: {
						formatter: function(value) {
							return addCommas(value, max_value);
						}
					}
				},
				yaxis: {},
				fill: {
					opacity: 1
				},
				legend: {
					show: false,
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return addCommas(val);
						},
						title: {
							formatter: function(_, { dataPointIndex }) {
								return combinedLabels[dataPointIndex]; 
							}
						}
					}
				},
				
			};

			return apexChartRender(container_id, options);
		}



		function generateVerticalBarChart(data_set, container_id ) {
			 
			let labels  		= data_set.map(item => item.name);
			let subgroup_ids	= data_set.map(item => item.id);
			let amounts 		= data_set.map(item => Math.abs(item.balance));
			let mixed_amounts   = data_set.map(item =>item.balance);
			let totalShades 	= labels.length;

			let max_value = Math.max(...amounts);

			let colors = generateColorShades(totalShades,210);
			let combinedLabels = labels.map((label, index) => label + ': ' + addCommas(mixed_amounts[index], max_value));

			let options = {
				series: [{ name: 'Lease', data: amounts }],
				chart: {
					type: 'bar',
					height: 350,
					width: '98%',
					toolbar: { show: false },
					events: {
						dataPointSelection: function(event, chartContext, config) {
							let labelIndex 	= config.dataPointIndex;
							let subgroupId 	= subgroup_ids[labelIndex];
							openHeadsDetail(subgroupId);
						}
					}
				},
				colors: colors,
				labels: combinedLabels,
				plotOptions: {
					bar: {
						distributed: true,
						horizontal: false,
						columnWidth: '40%',
						barHeight: '50%'
					}
				},
				dataLabels: {
					enabled: true,
					style: { colors: ['#000000'] },
				},
				xaxis: {
					categories: labels,
                    labels: {
                        formatter: function(value) {
                            return value;
                        }
                    }
				},
				yaxis: {
                    labels: {
                        formatter: function(value) {
                            return (value);
                        },
                    }
				},
				legend: {
					show: false,
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return (val);
						},
					}
				}
			};

			return apexChartRender(container_id , options);
		}
		
	</script>
		
@endpush