@extends('admin.layout.main')

@push('custom-resource')
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
@endpush


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

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

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

            <!-- Chart Jarak di Kiri -->
            @if (!empty($distanceData))
            <div class="col-lg-6">
                <div class="card flex-fill w-100">
                    <div class="card-body">
                        <h5 class="card-title">
                            Distance
                        </h5>
                        <p class="text-muted small">
                            Data terakhir: 
                            @if ($latestDistanceDate)
                                {{ $latestDistanceDate->translatedFormat('d M Y, H:i') }}
                            @else
                                Belum ada data
                            @endif
                        </p>
                        <div class="d-flex justify-content-end align-items-center">
                            <a href="{{ route('admin.pages.dataprint', ['deviceName' => $deviceName]) }}"
                                class="btn btn-link p-0 mx-2" data-toggle="tooltip" data-placement="top"
                                title="Download Data {{ $deviceName }}">
                                <i class="bi bi-file-earmark-arrow-down" style="font-size: 24px; color: #007bff;"></i>
                            </a>
                        </div>
                        <div>
                            <div id="line-chart" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Chart Gauge Tekanan di Kanan -->
            @if ($pressureLatest !== null)
            <div class="col-lg-6">
                <div class="card flex-fill w-100">
                    <div class="card-body">
                        <h5 class="card-title"> 
                            Pressure
                        </h5>
                        <p class="text-muted small">
                            Data terakhir: 
                            @if ($pressureLatestDate)
                                {{ $pressureLatestDate->translatedFormat('d M Y, H:i') }}
                            @else
                                Belum ada data
                            @endif
                        </p>
                        <div id="gauge-chart" style="height: 400px"></div>
                    </div>
                </div>
            </div>
            @endif

        </div>
    </section>
</main>
@endsection


@section('js')
@if (!empty($distanceData))
<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 },
        },
        tooltip: {
            enable: true,
            shared: false,
            format: '${point.x}: ${point.y}',
        },
        series: [{
            dataSource: JSON.parse(@json($distanceData)),
            xName: 'day',
            yName: 'value',
            type: 'Line',
            width: 4,
            marker: {
                visible: true,
                width: 10,
                height: 10
            },
        }],
    });
    chart.appendTo('#line-chart');
</script>
@endif

@if ($pressureLatest !== null)
<script>
    var circulargauge = new ej.circulargauge.CircularGauge({
        axes: [{
            minimum: 0,
            maximum: 20,
            startAngle: 225,
            endAngle: 135,
            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