@extends('layouts.master')

@section('header-title')
	<span class="font-weight-semibold">Supplier Quality - QPRs Charts</span>
@endsection

@section('content')

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">QPRs Total Charges Data {{$year}}</h4>
			<div class="header-elements">
				<div class="list-icons">
					<a class="btn btn-outline-primary rounded-round" data-toggle="collapse" href="#info_collapse"><i class="icon-info22 mr-2"></i>More Info</a>
            	</div>
        	</div>					
		</div>
		<div class="card-body">
			<p>Here you can see the charges applied due to QPRs that are not cancelled and are open, only suppliers who had QPRs are displayed.</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• Total: Total Charges<br>
					• Paid: Charges Paid<br>
					• Pend: Charges Pending
				</p>	
			</div>
			<form id="search_data_form">
				<div class="row">
					<div class="col-md-3 my-2">
						<label class="col-form-label">Plant</label>
	                    <select data-selected="{{$plant_id}}" required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>
					<div class="col-md-3 my-2">
						<label class="col-form-label">Year:</label>
						<div class="input-group">
							<span class="input-group-prepend">
								<span class="input-group-text"><i class="icon-calendar2"></i></span>
							</span>
							<select data-selected="{{$year}}" name="year" class="form-control"></select> 
						</div>	
					</div>
					<div class="col-md-2 my-2">
						<label class="col-form-label">&nbsp;&nbsp;</label>
						<div>
							<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner"><i class="icon-search4 mr-2"></i> Search</button>
						</div>
					</div>
				</div>
			</form>	
		</div>

		<div class="table-responsive border-0">
			<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic text-center">
				<thead class="table-bordered">
					<tr>
						<th rowspan="2">Supplier</th>
						<th colspan="3">January</th>
						<th colspan="3">February</th>
						<th colspan="3">March</th>
						<th colspan="3">April</th>
						<th colspan="3">May</th>
						<th colspan="3">June</th>
						<th colspan="3">July</th>
						<th colspan="3">August</th>
						<th colspan="3">September</th>
						<th colspan="3">October</th>
						<th colspan="3">November</th>
						<th colspan="3">December</th>
						<th colspan="3" class="alpha-primary">YTD</th>
					</tr>
					<tr>
						@for($i=1; $i<=12; $i++)
							<th>Total</th>
							<th>Paid</th>
							<th>Pend</th>
						@endfor
						<th class="alpha-primary" >Total</th>
						<th class="alpha-primary" >Paid</th>
						<th class="alpha-primary" >Pend</th>																															
					</tr>									
				</thead>
				<tbody>
					@foreach($suppliers as $supp)
					<tr>
						<td class="text-left">{{$supp->name}}</td>
						@foreach($supp->months as $month)
							@isset ($month->ytd)
								<td class="alpha-primary">{{$month['charges']}}</td>
								<td class="alpha-primary">{{$month['paid']}}</td>
								<td class="alpha-primary">{{$month['pending']}}</td>
							@else
								<td>{{$month['charges']}}</td>
								<td>{{$month['paid']}}</td>
								<td>{{$month['pending']}}</td>
							@endisset

						@endforeach
										
					</tr>
					@endforeach
				</tbody>
{{-- 				<tfoot>
					<tr>
						<th></th>
					@for($i=1; $i<=12; $i++)
						<th>{{$plant_month_charges[$i]}}</th>
						<th>{{$plant_month_paid[$i]}}</th>
						<th>{{$plant_month_pending[$i]}}</th>
					@endfor
						<th class="alpha-primary" >{{$plant_month_charges[13]}}</th>
						<th class="alpha-primary" >{{$plant_month_paid[13]}}</th>
						<th class="alpha-primary" >{{$plant_month_pending[13]}}</th>						
					</tr>
				</tfoot> --}}

			</table>
		</div>
	</div>


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Chart {{$year}}</h4>
			<div class="header-elements">
				<div class="list-icons">
            		<a class="list-icons-item" data-action="collapse"></a>
            	</div>
        	</div>
		</div>
		<div class="card-body">
			<div class="d-flex">
				<div class="ml-auto">
					<label class="col-form-label">Supplier</label>
		            <select name="supplier_plant_index" class="form-control select" data-fouc>
		            	@foreach($suppliers as $key=>$supp)
		            		<option value="{{$key}}">{{$supp->name}}</option>
		            	@endforeach
		            </select>
				</div>
			</div>
			<div class="chart-container">
				<div class="chart has-fixed-height" id="chart" style="height: 440px;"></div>
			</div>
		</div>
	</div>

@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')
	<script src="{{asset('js/plugins/visualization/echarts/echarts.min.js')}}"></script>

@endsection


@section('app-scripts')

	<script type="text/javascript">
		const SUPPLIERS = {!! $suppliers->toJSON() !!};
	</script>
	<script src="{{mix('js/supplierquality/qpr_charts.js')}}"></script>
@endsection