@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

	$system_settings 		= App\Models\Setting::systemBuilder();
	$libility_card_name 	= $system_settings->allowed_entity->dashboard->finance_dashboard_liability_card_name ?	: "Liabilities Amount";
	$available_card_name 	= $system_settings->allowed_entity->dashboard->finance_dashboard_available_balance_card_name ?	: "Available Balance";
	$revenue_card_name 		= $system_settings->allowed_entity->dashboard->finance_dashboard_revenue_amount_card_name ?	: "Revenue Amount";
	$equity_card_name 		= $system_settings->allowed_entity->dashboard->finance_dashboard_equity_amount_card_name ?	: "Equity Amount";


@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.finance_dashboard')}}</h2>
                        </div>
                        <br>
                        <form class="row-rtl" action="{{ route('finance-dashboard') }}" 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::userProjects()->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>

							<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="month">
                                            <option value="">{{__('lang.select_month')}}</option>
                                            @foreach (Common::Months() as $month_number => $month)
                                                <option @if ($month_number == $dash_params->month) selected @endif
                                                    value="{{ $month_number }}">{{ $month }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label class="form-label">{{__('lang.month')}}</label>
                                    </div>
                                </div>
                            </div>

							<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="year">
                                            <option value="0">{{__('lang.select_year')}}</option>

                                            @foreach (Common::Years() as   $year)
                                                <option @if ($year == $dash_params->year) selected @endif
                                                    value="{{ $year }}">{{ $year }}
                                                </option>
                                            @endforeach

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


                            <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">

					@if(checkRolePermission("FinanceDashboardAvailableBalanceCard.Show"))
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/available-2.png",
                       
                        "label" => $available_card_name . " " . $transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->available_balance),
                        "col"=> 6,
						"show_eye_icon" => true,
                        "modal_id"  => "cash_balance",
                    ])
					@endif

					@if(checkRolePermission("FinanceDashboardRevenueAmountCard.Show"))
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/revenue-2.png",        
                        "label" => $revenue_card_name . " " . $transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->revenue_balance),
                        "col"=> 6,
						"show_eye_icon" => true,
                        "modal_id"  => "revenue_balance",
						
                    ])
					@endif

					@if(checkRolePermission("FinanceDashboardEquityAmountCard.Show"))
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/equity.png",
                        "label" => $equity_card_name . " " . $transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->equity_balance),
                        "col"=> 6,
						"show_eye_icon" => true,
                        "modal_id"  => "equity_balance",
                    ])
					@endif

					@if(checkRolePermission("FinanceDashboardLiabilitiesCard.Show"))
                    @include("admin.dashboard.partial.icon_card",[
                        "imagepath" => "asset/dashboard_icons/liability-3.png",
                        "label" => $libility_card_name . " " . $transaction->systemSettingCurrency(),
                        "value" => $transaction->addCommasFormatingNumber($label_data->liabilities_balance),
                        "col"=> 6,
						"show_eye_icon" => true,
                        "modal_id"  => "liabilities_balance",
                    ])
					@endif

					@if(checkRolePermission("FinanceDashboardMobilizationCard.Show"))
					@include("admin.dashboard.partial.icon_card",[
						"imagepath" => "asset/dashboard_icons/liability-3.png",
						"label" => 'Mobilization Advance ' . $transaction->systemSettingCurrency(),
						"value" => $transaction->addCommasFormatingNumber($label_data->mobilization_advance),
						"col"=> 6,
						// "show_eye_icon" => true,
						// "modal_id"  => "liabilities_balance",
					])
					@endif
                </div>
            </div>

		 

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

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

            <div class="row charts">

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

				{{-- <div class="col-md-6">
					<div class="header">
						<h3 class="text-center">{{__('lang.major_expenses')}} ({{__('lang.top')}} {{ count(collect($chart_data->expense_chart_data)->take(10)) }}) </h3>
					</div>
					<div class="body">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>{{__('lang.serial_no')}}</th>
									<th>{{__('lang.name')}}</th>
									<th class="text-right">{{__('lang.amount')}} {{ $transaction->systemSettingCurrency() }}</th>
								</tr>
							</thead>
							<tbody>
								 
								 @foreach (collect($chart_data->expense_chart_data)->take(10) as $head_data)

								 @php
									$balance 						= $head_data->balance;
									$subgroup_id 					= $head_data->id;
									$subgroup_name 					= $head_data->name;
									$total_revenue_balance_Amount  += $balance;
								@endphp

								 <tr>
									<td>{{ $loop->iteration }}</td>
									<td> <a href="javascript::;" onclick="openHeadsDetail('{{ $subgroup_id }}')"> {{ $subgroup_name }}</a> </td>
									<td class="text-right">{{ $transaction->addCommasFormatingNumber($balance) }}</td>
								 </tr>
									 
								 @endforeach
							</tbody>

						</table>
					</div>
				</div> --}}
                 


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


<div class="modal fade" id="cash_balance" tabindex="-1" role="dialog" aria-labelledby="Data" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="exampleModalLongTitle">{{__('lang.cash_and_bank_balances')}}</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-hover">
				<thead>
				<tr>
					<th style="text-align: left !important">#</th>
					<th style="text-align: left !important">{{__('lang.head_name')}}</th>
					<th style="text-align: left !important">{{__('lang.amount')}} {{ $transaction->systemSettingCurrency() }}</th>
				</tr>
				</thead>
				<tbody>
					@php
						$total_cash_balance_Amount = 0;
					@endphp

					@foreach($chart_data->available_balance_chart as   $head_data)
					@php
						$balance 					= $head_data->balance;
						$head_name 					= $head_data->name;
						$total_cash_balance_Amount  += $balance;
					@endphp
						<tr>
							<td>{{ $loop->iteration }}</td>
							<td>{{ $head_name }}</td>
							<td>{{ $transaction->addCommasFormatingNumber(($balance)) }}</td>
						</tr>
						 
					@endforeach
					<th>
						<td style="font-weight: bolder">{{__('lang.total')}}: </td>
						<td style="font-weight: bolder">{{ $transaction->addCommasFormatingNumber($total_cash_balance_Amount) }}</td>
					</th>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('lang.close')}}</button>
		</div>
		</div>
	</div>
</div>

<div class="modal fade" id="revenue_balance" tabindex="-1" role="dialog" aria-labelledby="Data" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="exampleModalLongTitle">{{__('lang.revenue_balances')}}</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-hover">
				<thead>
				<tr>
					<th style="text-align: left !important">#</th>
					<th style="text-align: left !important">{{__('lang.sub_group')}}</th>
					<th style="text-align: left !important">{{__('lang.amount')}}  {{ $transaction->systemSettingCurrency() }}</th>
				</tr>
				</thead>
				<tbody>
					@php
						$total_revenue_balance_Amount = 0;
					@endphp

					@foreach($chart_data->revenue_balance_chart as $head_data)
						@php
							$balance 						= $head_data->balance;
							$subgroup_id 					= $head_data->id;
							$subgroup_name 					= $head_data->name;
							$total_revenue_balance_Amount  += $balance;
						@endphp
						<tr>
							<td>{{ $loop->iteration }}</td>
							<td><a href="javascript::void(0)"  onclick="openHeadsDetail('{{ $subgroup_id }}')">{{ $subgroup_name }}</a> </td>
							<td>{{ $transaction->addCommasFormatingNumber(($balance)) }}</td>
						</tr>
						 
					@endforeach
					<th>
						<td style="font-weight: bolder">{{__('lang.total')}}: </td>
						<td style="font-weight: bolder">{{ $transaction->addCommasFormatingNumber($total_revenue_balance_Amount) }}</td>
					</th>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('lang.close')}}</button>
		</div>
		</div>
	</div>
</div>

<div class="modal fade" id="equity_balance" tabindex="-1" role="dialog" aria-labelledby="Data" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="exampleModalLongTitle">{{__('lang.equity_balances')}}</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-hover">
				<thead>
				<tr>
					<th style="text-align: left !important">#</th>
					<th style="text-align: left !important">{{__('lang.sub_group')}}</th>
					<th style="text-align: left !important">{{__('lang.amount')}}  {{ $transaction->systemSettingCurrency() }}</th>
				</tr>
				</thead>
				<tbody>
					@php
						$total_equity_balance_Amount = 0;
					@endphp

					@foreach($chart_data->equity_balance_chart as $head_data)
					@php
						$balance 						= $head_data->balance;
						$subgroup_id 					= $head_data->id;
						$subgroup_name 					= $head_data->name;
						$total_equity_balance_Amount  += $balance;
					@endphp
						<tr>
							<td>{{ $loop->iteration }}</td>
							<td><a href="javascript::void(0)"  onclick="openHeadsDetail('{{ ($subgroup_id) }}')">{{ $subgroup_name }}</a> </td>
							<td>{{ $transaction->addCommasFormatingNumber(($balance)) }}</td>
						</tr>
						 
					@endforeach
					<th>
						<td style="font-weight: bolder">{{__('lang.total')}}: </td>
						<td style="font-weight: bolder">{{ $transaction->addCommasFormatingNumber($total_equity_balance_Amount) }}</td>
					</th>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('lang.close')}}</button>
		</div>
		</div>
	</div>
</div>

<div class="modal fade" id="liabilities_balance" tabindex="-1" role="dialog" aria-labelledby="Data" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="exampleModalLongTitle">{{__('lang.liabilities_balances')}}</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-hover">
				<thead>
				<tr>
					<th style="text-align: left !important">#</th>
					<th style="text-align: left !important">{{__('lang.sub_group')}}</th>
					<th style="text-align: left !important">{{__('lang.amount')}}  {{ $transaction->systemSettingCurrency() }}</th>
				</tr>
				</thead>
				<tbody>
					@php
						$total_liabilities_balance_Amount = 0;
					@endphp

					@foreach($chart_data->liabilities_balance_chart as $head_data)
					@php
						$balance 						= $head_data->balance;
						$subgroup_id 					= $head_data->id;
						$subgroup_name 						= $head_data->name;
						$total_liabilities_balance_Amount  += $balance;
					@endphp
						<tr>
							<td>{{ $loop->iteration }}</td>
							<td><a href="javascript::void(0)"  onclick="openHeadsDetail('{{ $subgroup_id }}')">{{ $subgroup_name }}</a> </td>
							<td>{{ $transaction->addCommasFormatingNumber(($balance)) }}</td>
						</tr>
						 
					@endforeach
					<th>
						<td style="font-weight: bolder">{{__('lang.total')}}: </td>
						<td style="font-weight: bolder">{{ $transaction->addCommasFormatingNumber($total_liabilities_balance_Amount) }}</td>
					</th>
				</tbody>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('lang.close')}}</button>
		</div>
		</div>
	</div>
</div>


<div class="modal fade" id="all_head_balances" tabindex="-1" role="dialog" aria-labelledby="Data" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title text-center" id="exampleModalLongTitle">
				{{-- {{__('lang.group')}}  : <span id="head_group_name"></span> <br>
				{{__('lang.sub_group')}}  : <span id="head_subgroup_name"></span> <br> --}}
				{{__('lang.head_balances')}}
				
			</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-hover">
				<thead>
				<tr>
					<th style="text-align: left !important">#</th>
					<th style="text-align: left !important">{{__('lang.head_name')}}</th>
					<th class="text-right" >{{__('lang.amount')}} {{ $transaction->systemSettingCurrency() }}</th>
				</tr>
				</thead>
				<tbody id="all_heads_data">
					
					
				</tbody>

				<tfoot>
					<th>
						<td style="font-weight: bolder">{{__('lang.total')}}: </td>
						<td class="text-right" style="font-weight: bolder"> <span id="head_total_balance"></span> </td>
					</th>
				</tfoot>
			</table>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('lang.close')}}</button>
		</div>
		</div>
	</div>
</div>

@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 openHeadsDetail(subgroup_id){


			let branch_id 	= "{{ $dash_params->branch_id }}";
			let last_date 	= "{{ $dash_params->lastDate }}";

			$('#all_heads_data').empty();

			$.ajax({
				url 		: "{{ route('finance_dashboard_head_data') }}",
				type 		: "POST",
				data 		: {branch_id , last_date , subgroup_id},
				dataTyoe	:'json',
				headers		: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success : function(response) {
				 
					if(response.status == true){

						let tr_html = ``;
						let counter = 0;
						let total_amount = 0;
						$.each(response.heads,function(head_name,value){

							let amount 			=  	Number(value);
								total_amount 	+=  amount;

							tr_html += `
							<tr>
								<td>${++counter}</td>	
								<td>${escapeHtml(head_name)}</td>	
								<td class="text-right">${addCommas(amount)}</td>	
							</tr>
							`

						})

						$('#head_group_name').text(response?.group?.name)
						$('#head_subgroup_name').text(response?.sub_group?.name)

						$('#all_heads_data').html(tr_html);
						$('#head_total_balance').text(addCommas(total_amount));

						$('#all_head_balances').modal('show');
					}

				}
			})


		}


		function mapDashboardCharts(){
			mapAssetsCurrentChart();
			mapFixedAssetChart();
			mapNonCurrentLiabilitiesChart();
			mapCurrentLiabilitiesChart();
			majorExpensesChart();
		}

		function mapAssetsCurrentChart(){
			const chart_data = @json($chart_data->current_asset_chart_data);
			const group_id = @json($group_ids->current_assets_group_id);
			// generatePieChart(chart_data,'#assets_current_chart')
			generateVerticalBarChart(chart_data,'#assets_current_chart',group_id)
		}

		function mapNonCurrentLiabilitiesChart(){
			const chart_data = @json($chart_data->non_current_liabilities_chart_data);
			const group_id = @json($group_ids->non_current_liabliites_group_id);

			// generatePieChart(chart_data,'#non_current_liabilities_chart')
			generateVerticalBarChart(chart_data,'#non_current_liabilities_chart',group_id)
		}
		
		function mapCurrentLiabilitiesChart(){
			const chart_data = @json($chart_data->current_liabilities_chart_data);
			const group_id = @json($group_ids->current_liabliites_group_id);

			// generatePieChart(chart_data,'#current_liabilities_chart')
			generateDonutChart(chart_data,'#current_liabilities_chart',group_id)
		}

		function mapFixedAssetChart() {
			const chart_data = @json($chart_data->fixed_asset_chart_data);
			const group_id = @json($group_ids->fixed_assets_group_id);

			generateHorizontalBarChart(chart_data,'#fixed_assets_chart',group_id)
		}

		function majorExpensesChart(){
			const chart_data = @json($chart_data->expense_chart_data->take(10));
			const group_id = @json($group_ids->expense_chart_data);

			// generatePieChart(chart_data,'#non_current_liabilities_chart')
			generateVerticalBarChart(chart_data,'#major_expense_chart',group_id)
		}

		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: '300px',
					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: 450,
					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 generateDonutChart(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 combinedLabels 	= labels.map((label, index) => label + ': ' + addCommas(mixed_amounts[index],max_value));


                var optionPie = {
                    series: amounts,
                    chart: {
                        height: '450px',
                        type: 'donut',
                        offsetX: -10,
                        offsetY: 10,
                        toolbar: {
                            show: false
                        },
                        events: {
                            dataPointSelection: function(event, chartContext, config) {
								let labelIndex 	= config.dataPointIndex;
								let subgroupId 	= subgroup_ids[labelIndex];
								openHeadsDetail(subgroupId);
                            }
                        }
                    },
					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: ['#87CEEB','#FF6347','#DAA520','#3CB371','#6A5ACD'],
                    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 generateVerticalBarChart(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(mixed_amounts[index], max_value));

			let options = {
				series: [{ name: 'Amount', data: amounts }],
				chart: {
					type: 'bar',
					height: 450,
					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,
					formatter: function(value, { dataPointIndex }) {
						let amount = mixed_amounts[dataPointIndex];
							return addCommas(amount);

					},
					style: { colors: ['#000000'] },
				},
				xaxis: {
					categories: labels,
                    labels: {
                        formatter: function(value) {
                            return value;
                        }
                    }
				},
				yaxis: {
                    labels: {
                        formatter: function(value) {
                            return addCommas(value,max_value);
                        },
                    }
				},
				legend: {
					show: false,
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return addCommas(val);
						},
						title: {
							formatter: function(_, { dataPointIndex }) {
								return combinedLabels[dataPointIndex]; 
							}
						}
					}
				}
			};

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