@extends('admin.layout.main')

@push('custom-resource')
    <link href="{{ asset('/') }}syncfusion/material.css" rel="stylesheet">
    <script src="{{ asset('/') }}syncfusion/ej2.min.js" type="text/javascript"></script>
    <script src="{{ asset('/') }}syncfusion/syncfusion-helper.js" type="text/javascript"></script>
@endpush

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Bak {{ $deviceName }}</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Halaman Utama</a></li>
                    <li class="breadcrumb-item">{{ $deviceName }}</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section">
            <div class="row">

                <!-- Chart Jarak di Kiri -->
                @if (!!$latest->distance)
                    <div class="col-lg-6">
                        <div class="card flex-fill w-100">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Distance
                                </h5>
				<a href="{{ url('/sensor-data/' . $deviceName) }}" class="float-right" data-toggle="tooltip" data-placement="top" title="Lihat Selengkapnya">
    <i class="bi bi-box-arrow-up-right"></i>
</a>
<a href="{{ route('admin.pages.cobahabib', ['device_name' => $deviceName]) }}" class="float-right" data-toggle="tooltip" data-placement="top" title="Download File">
    <i class="file-earmark-arrow-down"></i>
</a>

                                <div>
                                    <div id="line-chart" style="height: 400px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <!-- Chart Gauge Tekanan di Kanan -->
                @if (!!$latest->pressure)
                    <div class="col-lg-6">
                        <div class="card flex-fill w-100">
                            <div class="card-body">
                                <h5 class="card-title">
                                    Pressure
                                </h5>
                                <div id="gauge-chart" style="height: 400px"></div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </main>
@endsection


@section('js')
    @if (!!$latest->distance)
        <script>
            var chart = new ej.charts.Chart({
                primaryXAxis: {
                    majorGridLines: {
                        width: 0
                    },
                    valueType: 'Category'
                },
                primaryYAxis: {
                    majorGridLines: {
                        width: 1,
                        color: '#ededed'
                    },
                    minimum: 0,
                },
                chartArea: {
                    border: {
                        width: 0,
                    },
                },
                series: [{
                    // dataSource for chart series
                    dataSource: JSON.parse('<?= $distanceLastWeek ?>'),
                    xName: 'day',
                    yName: 'value',
                    type: 'Line',
                    width: 4,
                }],
            });
            chart.appendTo('#line-chart');
        </script>
    @endif

    @if (!!$latest->pressure)
        <script>
            var circulargauge = new ej.circulargauge.CircularGauge({
                axes: [{
                    minimum: 0,
                    maximum: 20,
                    startAngle: 270 - 45,
                    endAngle: 90 + 45,
                    ranges: [{
                        start: 0,
                        end: 10,
                        color: '#3cb449'
                    }, {
                        start: 10,
                        end: 14,
                        color: '#f2e715'
                    }, {
                        start: 14,
                        end: 20,
                        color: '#e52128'
                    }, ],
                    majorTicks: {
                        width: 0,
                    },
                    minorTicks: {
                        width: 0,
                    },
                    pointers: [{
                        value: '{{ $pressureLatest }}'
                    }]
                }]
            });
            circulargauge.appendTo('#gauge-chart');
        </script>
    @endif
@endsection