@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;
	} */
</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('technicalReportForm')}}">
				<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">
				@if(!empty($graph_data) && count($graph_data) > 0)
					<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="2" >STime<br>DTime</th> 
												<th rowspan="2">Parent GlobalID</th>
												<th rowspan="2">Child GlobalID</th>
												<!-- <th rowspan="2">isRv</th> -->
												<th colspan="3" class="wb text-center"  >Voltages</th>
												<!-- <th colspan="6" class="wb text-center">Energy (kWh)</th> -->
												<!-- <th colspan="6" class="wb text-center">Energy (rkWh)</th> -->
											</tr>
											<tr>
												<!-- Voltages -->
												<th class="wb">v1</th>
												<th>v2</th>
												<th>v3</th>
												<!-- Currents -->
												<!-- <th class="wb">i1</th>
												<th>i2</th>
												<th>i3</th> -->
												<!-- Power Factors -->
												

												<!-- <th class="wb">i1</th>
												<th>i2</th>
												<th>i3</th> -->
											</tr>
										</thead>
										<tbody class="recent-record-row">
										<!-- foreach($data as $row) -->
											@if($data )
											@php
												$logs=$data['logs'];
											@endphp
													<!-- <tr > 
														<td>{{$row->stime}}<br>{{$logs->dtime}}</td>
														<td class="bb "  > {{$logs->global_device_id}}</td>
														<td class="bb "  > </td>
														<td class="bb">{{$logs->v1}}</td>
														<td>{{$logs->v2}}</td>
														<td>{{$logs->v3}}</td>
													</tr> -->
											@endif	
											@if($data && $data['children'] )
												@foreach($data['children'] as $row)
													@if($row && $row['children'] )
														@foreach($row['children'] as $childrow)
															@php
																$logs2=$childrow['logs'];
															@endphp
																	<tr > 
																		<td>{{$logs2->stime}}</td>
																		<td class="bb "  > {{$logs->global_device_id}}</td>
																		<td class="bb "  > {{$logs2->global_device_id}}</td>
																		<td class="bb">{{$logs2->v1.' - '.$logs->v1.'='.$logs2->v1-$logs->v1}}</td>
																		<td>{{$logs2->v2.' - '.$logs->v2.'='.$logs2->v2-$logs->v2}}</td>
																		<td>{{$logs2->v3.' - '.$logs->v3.'='.$logs2->v3-$logs->v3}}</td>
																	</tr>
																	@endforeach	
													@endif


													
													@endforeach	
													@endif


													

										</tbody>
									</table>
									</div>
									<div class="d-flex  mt-3">
								</div>
							</div>
					</div>
				@endif	
				</div>
				<div class="col-xl-12 col-lg-12 col-md-12 col-sm-2 col-12">
				@if(!empty($graph_data) && count($graph_data) > 0)
    
				<div style="width: 1200px;">
						<canvas id="voltageDifferenceChart"></canvas>
					</div>
				</div>
				@endif

			</div>

		@push('scripts')
		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
		<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>

		<script>
    const colors = [
  'rgba(255, 99, 132, 0.6)',
  'rgba(54, 162, 235, 0.6)',
  'rgba(255, 206, 86, 0.6)',
  'rgba(75, 192, 192, 0.6)',
  'rgba(153, 102, 255, 0.6)',
  'rgba(255, 159, 64, 0.6)',
];

const borderColors = colors.map(color => color.replace('0.6', '1'));

const datasets = [
    @foreach ($graph_data as $index => $diff)
    {
        label: '{{$diff["child_id"]}}',
        data: [
            {{ $diff['v1_difference'] }},
            {{ $diff['v2_difference'] }},
            {{ $diff['v3_difference'] }}
        ],
        backgroundColor: colors[{{$index}} % colors.length],
        borderColor: borderColors[{{$index}} % borderColors.length],
        borderWidth: 1
    },
    @endforeach
];

const ctx = document.getElementById('voltageDifferenceChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['V1 Difference', 'V2 Difference', 'V3 Difference'],
        datasets: datasets
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Voltage Difference (V)'
                }
            }
        }
    }
});
</script>


		@endpush

@endsection