@extends('layouts.app')
<!--departments_gauges/show.blade.php-->

@section('content')

<div class="col-xl-4 float-right">		
	<div id="panel-1" class="panel">
		<div class="panel-hdr">
			<div class="panel-content table-responsive">
				<h5>Data Totals</h5>
			</div>
		</div><!--end panel-hdr-->
    
    
    	
		<div class="panel-container show">
			<div class="panel-content">
				<table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
					<tr>
						<td>Total Contract Devices:
						</td>
                    <td><a href="{{route('show_contract_devices', 'contract')}}">@if(isset($contract_devices_count)) {{$contract_devices_count}} @endif</a>
						</td>
					</tr>
					<tr>
						<td>Contract Devices Reporting: 
						</td>
						<td><a href="{{route('show_reporting_devices', 'reporting_devices')}}">@if(isset($devices_reporting_count)) {{$devices_reporting_count}} @endif</a>
						</td>
					</tr>
					<tr>
						<td>Devices Not Reporting<span style="color:red;">*</span>:
						</td>
						<td><a href="{{route('show_not_reporting_devices', 'not_reporting')}}">@if(isset($not_reporting_count)) {{$not_reporting_count}} @endif</a>
						</td>
                </tr>
					<tr>
						<td>Devices W/Toner Alert:
						</td>
						<td><a href="{{route('show_toner_data', 'toner')}}">@if(isset($toner_alert_count)) {{$toner_alert_count}} @endif</a>
						</td>
					</tr>
					<tr>
						<td>Devices W/Service Needed:
						</td>
						<td><a href="{{route('show_service_data', 'service_needed')}}">@if(isset($service_needed_count)) {{$service_needed_count}} @endif </a>
						</td>
					</tr>
					<tr>
						<td>Non-Contracted Devices:
						</td>
						<td><a href="{{route('show_non_contract_devices', 'non_contract')}}">@if(isset($non_contract_devices_count)) {{$non_contract_devices_count}} @endif </a>
						</td>
					</tr>
					<tr>
						<td>Last Sync Date:
						</td>
						<td>@if(isset($last_sync_date)) {{$last_sync_date->dt}} @endif</td>
					</tr>
				</table>
				
				<div style="color:red;">
					*Not reporting for 15 days.
				</div>
				
				<div class="btn-group my-2">
					<a href="index" class="btn btn-sm btn-primary center">View Device Listing</a>
				</div>
				
			</div><!--end panel-content-->
		</div><!--endpanel-container show-->		
	</div><!--end panel-1-->route
</div><!--end col-xl-4-->


<div style="float-left">
	<div class="row col-xl-8">
		<div class="col-xl-3">
        	
			<form action="" method="get" enctype="multipart/form-data"> <!--enctype needed for image upload-->
			@csrf
				<div class="container-fluid">
					<div class="d-flex my-3">
                    
						<div class="form-group">
							<label for="orgSel">Select an Organization</label>					

							<select name="orgSel" id="orgSel" class="form-control mb-2" onchange="page_direct('departments_gauges.show_by_param', 'org__' + this.value)">
							<!--<select name="orgSel" id="orgSel" class="form-control mb-2" onchange="page_direct_multi_params('departments_gauges.show_by_org', this.value, 'org')"> -->
								<option>Select an Organization</option>
								<!--Display all orgs from the resultset.-->						
								@if(isset($orgs))
									@foreach($orgs as $row)
										<option value="{{$row->org_id}}"
											@if(isset($org_id))
												@if($row->org_id == $org_id)
													selected
												@endif
											@endif
										>{{$row->org_name}}</option>
									@endforeach
								@endif
									
							</select>
						</div><!--end form-group-->						
					</div><!--end d-flex-->
				</div><!--container-fluid-->			
		</div><!--end col-xl-3-->


		<div class="col-xl-3">			
				<div class="container-fluid">
					<div class="d-flex my-3">
						<div class="form-group">
							<label for="colSel">Select a Color</label>					

							<select name="colSel" id="colSel" class="form-control mb-2" onchange="page_direct('departments_gauges.show_by_param', 'color__' + this.value)">
								<option value="">Select a Color</option>
								<option value="both" @if(isset($color))
                                        				@if($color == 'both')
															selected
														@endif
                                        			@endif>Both</option>
								<option value="black" @if(isset($color))
                                        				@if($color == 'black')
															selected
														@endif
                                        			@endif>Black</option>
								<option value="color" @if(isset($color))
                                        				@if($color == 'color')
															selected
														@endif
                                        			@endif>Color</option>							
							</select>
						</div><!--end form-group-->						
					</div><!--end d-flex-->
				</div><!--container-fluid-->			
		</div><!--end col-xl-3-->
    
    	<div class="col-xl-3">
				<div class="container-fluid">
					<div class="d-flex my-3">
						<div class="form-group">
							<label for="yearSel">Select a Year</label>					

							<select name="yearSel" id="yearSel" class="form-control mb-2" onchange="page_direct('departments_gauges.show_by_param', 'year__' + this.value)">
								<option value="">Select a Year</option>
                            	<!--Display all years from the resultset.-->						
								@if(isset($years))
									@foreach($years as $row)
										@if($row->year_id >= (22 - 7))
										<option value="{{$row->year_id}}"
											@if(isset($year))
												@if($row->year_id == $year)
													selected
												@endif
											@endif
										>{{$row->school_year}}</option>
										@endif
									@endforeach
								@endif                            
                            							
							</select>
						</div><!--end form-group-->						
					</div><!--end d-flex-->
				</div><!--container-fluid-->			
		</div><!--end col-xl-3-->
    
	
		<div class="col-xl-3">		
				<div class="container-fluid">
					<div class="d-flex my-3">
						<div class="form-group">
							<label for="timeline_datepick">Select Timeline Date</label>
							<input type="text" id="timeline_datepick" name="timeline_datepick" class="form-control mb-2" value="@if(isset($timeline_date)){{$timeline_date}}@endif"
							    onchange="page_direct('departments_gauges.show_by_param', 'timeline__' + this.value)"/>

						</div><!--end form-group-->						
					</div><!--end d-flex-->
				</div><!--container-fluid-->
			</form>
		</div><!--end col-xl-3-->
	</div><!--end row-->

	
	<div class="row col-xl-8">
		<div class="col-xl-4">		
			<div id="panel-1" class="panel">
				<div class="panel-hdr">
					<div class="panel-content">
						<h5>Annual Black</h5>
					</div>
				</div>
				
				<div class="panel-container show">
					<div class="panel-content table-responsive">
						<table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
							
							<tr>
								<td>Consumed:
								</td>
								<td id="consBlk" name="consBlk">@if(isset($year_totals_array['consumed_black_year'])) {{number_format($year_totals_array['consumed_black_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
							<tr>
								<td>Budgeted:
								</td>
								<td id="bgtBlk">@if(isset($year_totals_array['budgeted_black_year'])) {{number_format($year_totals_array['budgeted_black_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
							<tr>
								<td>Projected:
								</td>
								<td id="projBlk">@if(isset($year_totals_array['projected_black_year'])) {{number_format($year_totals_array['projected_black_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
							
						</table>
					</div>
				</div>				
			</div><!--end panel-1-->
		</div><!--end col-xl-4-->
		
		<div class="col-xl-4">		
			<div id="panel-1" class="panel">
				<div class="panel-hdr">
					<div class="panel-content table-responsive">
						<h5>Annual Color</h5>
					</div>
				</div>
				
				<div class="panel-container show">
					<div class="panel-content table-responsive">
						<table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
							<tr>
								<td>Consumed:
								</td>
								<td>@if(isset($year_totals_array['consumed_color_year'])) {{number_format($year_totals_array['consumed_color_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
							<tr>
								<td>Budgeted:
								</td>
								<td>@if(isset($year_totals_array['budgeted_color_year'])) {{number_format($year_totals_array['budgeted_color_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
							<tr>
								<td>Projected:
								</td>
								<td>@if(isset($year_totals_array['projected_color_year'])) {{number_format($year_totals_array['projected_color_year'],0 ,0, ',')}} @endif
								</td>
							</tr>
						</table>
					</div>
				</div>			
			</div><!--end panel-1-->
		</div><!--end col-xl-4-->


		<div class="col-xl-4">		
			<div id="panel-1" class="panel">
				<div class="panel-hdr">
					<div class="panel-content">
						<h5>Request History</h5>
					</div>
				</div>
				<div class="panel-container show">
					<div class="panel-content">
						<p class="my-1">
							When was the last time you had a vendor do a service history on your account?
						</p>
						<div class="btn-group my-1">
							<a href="{{route('request_org_service_history')}}" class="btn btn-sm btn-primary center">Request Org Service History</a>
						</div>
						<div class="btn-group my-1">
						    @if(isset($history_report_path))
						        <a href={{asset($history_report_path)}} class="btn btn-sm btn-primary center">View Latest Report</a>
						    @endif
						</div>
					</div>
				</div>			
			</div><!--end panel-1-->
		</div><!--end col-xl-4-->
	</div><!--end row col-xl-8-->
<main id="js-page-content" >


@if(!empty($over_under_budget_dept_array) && $display_meter_data == 'Y')
    		
    	{{--Count the gauges because only 4 will fit in each row--}}
    	@php
    		$gaugeCount = 0;
    	@endphp
    	
    	<div class="container-responsive gaugeDiv row col-xl-8">
    		<div class="row gaugeRow col-xl-12 mb-4">
    		
             @foreach ($over_under_budget_dept_array as $key => $value)
                
                	@php
                    	$gaugeCount += 1;
                	@endphp
    			
    				@foreach ($value as $row_key => $val)
        				<div class="gaugeBox " style="width:25%; text-align:center; float:left;">
                    		<div style="height:35px; text-align:center;">{{$key}}
                    		</div><!--end div $key-->
        					
    						<canvas id ="dept_gauge"
    							data-type="radial-gauge"
    							data-width="175"
    							data-height="175"
    							
    							data-units="%"
    							data-title={{$row_key}}
    							data-value={{$val}}
    							data-value-format="3.0"	
    							data-min-value="0"
    							data-max-value="200"
    							data-major-ticks="0,20,40,60,80,100,120,140,160,180,200"
    							data-minor-ticks="2"
    							data-stroke-ticks="false"						
    							
    							data-highlights='[
    								{ "from": 0, "to": 50, "color": "rgba(0,255,0,.50)" },
    								{ "from": 50, "to": 100, "color": "rgba(255,255,0,.50)" },
    								{ "from": 100, "to": 150, "color": "rgba(255,30,0,.50)" },
    								{ "from": 150, "to": 200, "color": "rgba(255,0,225,.50)" },
    								{ "from": 200, "to": 220, "color": "rgba(0,0,255,.50)" }
    							]'
    							data-color-plate="#000099"
    							data-color-major-ticks="#f5f5f5"
    							data-color-minor-ticks="#ddd"
    							data-color-title="#fff"
    							data-color-units="#ccc"
    							data-color-numbers="#eee"
    							data-color-needle-start="rgba(240, 128, 128, 1)"
    							data-color-needle-end="rgba(255, 160, 122, .9)"
    							data-value-box="true"
    							data-animation-rule="bounce"
    							data-animation-duration="1500"
    							data-font-value="Led"
    							data-animated-value="true"		
    						></canvas>
        				
    				    </div><!--end gaugeBox-->
    	            @endforeach
    	            
        			@if($gaugeCount == 4)
        				@php
        					$gaugeCount = 0;
        				@endphp
                
                		<!--Add an empty div for horiz spacing-->
                		<div style="width:100%; height:2%;"><br></div>
        				<div class="row gaugeRow col-xl-12 mb-4 pt4"></div>
                        	                	
        			@endif
    	
    		@endforeach
    		</div><!--end gaugeRow-->
    	</div><!--end gaugeDiv-->
    		
    
    
     @else
    	<div style="height:35px; text-align:center;">
    		There is no data to show based on the selected criteria. 
        </div><!--end div $key-->
    @endif
    	
</main>

@endsection