@extends('layouts.app')

@section('center')
<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">
			<!-- <label class="label">Total Technical Loss </label> -->
			</div>
				{{--  
                <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" 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-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 style="width: 100%; overflow-x: auto;height:400px;">
            <canvas id="voltageDifferenceChart"></canvas>
        </div>
        @endif
		<hr/>
    </div>
    --}}
	
	<div class="col-xl-12 col-lg-12 col-md-12 col-sm-2 col-12">
        @if(!empty($graph_data2) && count($graph_data2) > 0)
        <div style="width: 100%; overflow-x: auto;height:800px;">
            <canvas id="voltageDifferenceChart2"></canvas>
        </div>
        @endif
    </div>
</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>



@if(!empty($graph_data2) && count($graph_data2) > 0)
<script>
const labels2 = [
    @foreach ($graph_data2 as $device)
        "{{$device->global_device_id}}",
    @endforeach
];

const v1Data2 = [
    @foreach ($graph_data2 as $device)
        {{$device->i1}},
    @endforeach
];
const v2Data2 = [
    @foreach ($graph_data2 as $device)
        {{$device->i2}},
    @endforeach
];
const v3Data3 = [
    @foreach ($graph_data2 as $device)
        {{$device->i3}},
    @endforeach
];

const ctx2 = document.getElementById('voltageDifferenceChart2').getContext('2d');
const chart2 = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: labels2,
        datasets: [
            {
                label: 'R',
                data: v1Data2,
                backgroundColor: 'rgba(214, 30, 24, 0.6)',
                borderColor: 'rgba(214, 30, 24, 0.6)',
                borderWidth: 1
            },
            {
                label: 'Y',
                data: v2Data2,
                backgroundColor: 'rgba(228, 231, 29, 0.6)',
                borderColor: 'rgba(228, 231, 29, 0.6)',
                borderWidth: 1
            },
            {
                label: 'B',
                data: v3Data3,
                backgroundColor: 'rgba(33, 142, 206, 0.6)',
                borderColor: 'rgba(33, 142, 206, 0.6)',
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Commercial Loss'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Current Difference (I)'
                }
            },
            x: {
                title: {
                    display: true,
                    text: 'Device'
                }
            }
        }
    }
});
</script>
@endif
@endpush

@endsection