@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Dashboard Monitoring Suhu & Humidity</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-12">
                            <div class="chart" id="chart"></div>
                        </div>
                    </div>

                    {{-- <livewire:real-time-chart :wire:poll="1000" /> --}}

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

        <div class="col-md-12 mt-4">
            <div class="card">
                <div class="card-header">Dashboard Monitoring PPM</div>

                <div class="card-body">
                   

                  

                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="chart" id="chart_ppm"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('AddCSS')
    <link href="{{asset('assets')}}/plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
@endpush
@push('AddJS')
<script src="{{asset('assets')}}/plugins/apex/apexcharts.min.js"></script>
<script src="{{asset('assets')}}/plugins/apex/custom-apexcharts.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var options = {
            chart: {
                height: 350,
                type: 'line',
                stacked: false,
            },
            series: [{
                name: 'Temperature',
                data: {!! json_encode(array_column($data, 'data_suhu')) !!}
            }, {
                name: 'Humidity',
                data: {!! json_encode(array_column($data, 'data_humid')) !!}
            }],
            xaxis: {
                categories: {!! json_encode(array_column($data, 'date')) !!}
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }]
        };
    
        var chart = new ApexCharts(document.querySelector("#chart"), options);
    
        chart.render();
    });
    </script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var options = {
            chart: {
                height: 350,
                type: 'line',
                stacked: false,
            },
            series: [  {
                name: 'PPM',
                data: {!! json_encode(array_column($data, 'data_ppm')) !!}
            }],
            xaxis: {
                categories: {!! json_encode(array_column($data, 'date')) !!}
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }]
        };
    
        var chart = new ApexCharts(document.querySelector("#chart_ppm"), options);
    
        chart.render();
    });
    </script>
@endpush