@extends('layouts.app')

@section('center')
<style>
	.wb{
		border-left:1px solid white !important;
	}
	.bb{
		border-left:1px solid lightgray !important;
	}
	.rbg{
		border-right:1px solid lightgray !important;
	}
	.rb{
		background-color: lightgrey;
	}
</style>
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
				<link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />
			<div class="row gutters">
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
				<form action="{{route('reading-list')}}">
				<div class="row gutters">
			<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2">

				<div class="form-group">
					<label class="label">Device ID</label>
					<select class="form-control selectpicker" data-live-search="true" class="form-control " name="DeviceId">
						<option value=''>Select Device ID</option>
						@foreach($tr_data as $k => $row)
						<option value="{{$row->global_device_id}}" @isset($_GET["DeviceId"])
															@if($_GET["DeviceId"]==$row->global_device_id) {{'selected'}}
															@endif
														@endisset>{{$row->global_device_id}}</option>
						@endforeach

					</select>
				</div>



			</div>


			<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

				<div class="form-group">
					<label class="label">From Date</label>
					<input type="text" class="form-control datepicker" name="from" placeholder="From"
															@isset($_GET["from"])
																 value="{{$_GET['from']}}"
															@endisset >
				</div>

			</div>

			<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

				<div class="form-group">
					<label class="label">To Date</label>
					<input type="text" class="form-control datepicker" name="to" placeholder="To"
					@isset($_GET["to"])
																 value="{{$_GET['to']}}"
															@endisset
					>
				</div>

			</div>

			<div class="col-xl-2 col-lg col-md-2 col-sm-2 col-12 ">
			<div class="form-group">
					<label class="label">&nbsp;</label>
					<button type="submit" class="form-control btn btn-primary generate">Generate</button>
				</div>

			</div>
				</div>
			</form>
			</div>

				<div class="col-xl-12 col-lg-12 col-md-12 col-sm-2 col-12">
					<div class="table-responsive">
							<div class="table-container">
									<div class="table-responsive" style="max-height: 800px; overflow-y: auto;">
									<table class="table m-0 table-hover" style="font-size: 10px !important;">
										<thead style="position: sticky; top: 0;  z-index: 1;">
											<tr>
												<th rowspan="3" >Reading Date</th> 
												<th rowspan="3">GlobalID</th>
												<!-- <th rowspan="2">isRv</th> -->
												<th colspan="9" class="wb text-center"  >Voltages</th>
												<th colspan="9" class="wb text-center">Currents</th>
												<th colspan="9" class="wb text-center">Power Factors</th>
											</tr>
											<tr>
												<!-- Voltages -->
												<th class="wb" colspan="3">v1</th>
												<th colspan="3">v2</th>
												<th colspan="3">v3</th>
												<!-- Currents -->
												<th class="wb" colspan="3">i1</th>
												<th colspan="3">i2</th>
												<th colspan="3">i3</th>
												<!-- Power Factors -->
												<th class="wb" colspan="3">pf1</th>
												<th colspan="3">pf2</th>
												<th colspan="3">pf3</th>

											</tr>
											<tr>
												<!-- Voltages -->
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>

												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>

												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>


												<!-- Currents -->
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>


												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th  >Diff</th>
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>
												<th class="wb">Pesco</th>
												<th>Cinsr</th>
												<th >Diff</th>



											</tr>
										</thead>
										<tbody class="recent-record-row">
											@if($data && (!$data->isEmpty()))
												@foreach($data as $row)
												@if($row->dmdt_phase==1) 
													<tr >
														<td>{{$row->rdate}}</td>
														<td style="color:blue;" class="bb "> {{$row->global_device_id}}</td>
														<!-- <td>{{$row->isRv}}</td> -->
														<!-- Voltages -->
														<td class="bb " colspan="3">{{$row->v1}}</td>
														<!-- Currents -->
														<td class="bb " colspan="3">{{$row->i1}}</td>
														
														<!-- Power Factors -->
														<td class="bb " colspan="3">{{$row->pf1}}</td>
														
													</tr>
													@else
													<tr > 
														<td>{{date('d-m-Y H:i:s',strtotime($row->created_at))}}</td>
														<td class="bb "  > {{$row->global_device_id}}</td>
														<!-- <td>{{$row->isRv}}</td> -->
														<!-- Voltages -->
														<td class="bb">{{$row->pv1}}</td>
														<td >{{$row->cv1}}</td>
														<td class="rb">{{abs($row->pv1-$row->cv1)}}</td>

														<td class="bb">{{$row->pv2}}</td>
														<td >{{$row->cv2}}</td>
														<td class="rb">{{abs($row->pv2-$row->cv2)}}</td>

														<td class="bb">{{$row->pv3}}</td>
														<td >{{$row->cv3}}</td>
														<td class="rb">{{abs($row->pv3-$row->cv3)}}</td>


														<td class="bb">{{$row->pi1}}</td>
														<td >{{$row->ci1}}</td>
														<td class="rb">{{abs($row->pi1-$row->ci1)}}</td>

														<td class="bb">{{$row->pi2}}</td>
														<td >{{$row->ci2}}</td>
														<td class="rb">{{abs($row->pi2-$row->ci2)}}</td>

														<td class="bb">{{$row->pi3}}</td>
														<td >{{$row->ci3}}</td>
														<td class="rb">{{abs($row->pi3-$row->ci3)}}</td>


														<td class="bb">{{$row->ppf1}}</td>
														<td >{{$row->cpf1}}</td>
														<td class="rb">{{abs($row->ppf1-$row->cpf1)}}</td>

														<td class="bb">{{$row->ppf2}}</td>
														<td >{{$row->cpf2}}</td>
														<td class="rb">{{abs($row->ppf2-$row->cpf2)}}</td>

														<td class="bb">{{$row->ppf3}}</td>
														<td >{{$row->cpf3}}</td>
														<td class="rb">{{abs($row->ppf3-$row->cpf3)}}</td>



														
														
													</tr>
													@endif
												@endforeach
											@else
												<tr>
													<td colspan="25" class="text-danger">Record Not Found</td>
												</tr>
											@endif
										</tbody>
									</table>
									</div>
									<div class="d-flex  mt-3">
									{{ $data->appends(request()->query())->links('pagination::bootstrap-4') }} <!-- You can change the pagination view style -->
								</div>
							</div>
					</div>
				</div>
			</div>

		@push('scripts')
		<script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
		<script src="{{asset('assets')}}/vendor/datepicker/js/picker.date.js"></script>
		<script src="{{asset('assets')}}/vendor/datepicker/js/custom-picker.js"></script>
		<script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
		<script src="{{asset('assets')}}/js/main.js"></script>
		@endpush

@endsection