@extends('layouts.dashboard')
@section('content')
<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>
@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