<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ asset(mix('css/core.css')) }}" />


    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        * {
            margin: 0 !important;
        }

        .non {
            overflow: hidden;
        }

        .card_grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 20px !important;
        }



        .kotaks {
            display: grid;
            grid-template-columns: repeat(1, 50px) repeat(1, 1fr);
        }

        body {
            width: 100%;
            height: 100%;

            overflow: hidden;
            font-size: 10px !important;
            font-family: 'Montserrat', sans-serif !important;
        }

        table thead tr th {
            font-size: 9px !important;
            padding: 5px !important;
        }

        table tbody tr td {
            padding: 5px !important;
            font-size: 10px !important;
        }

        .containers {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* grid-template-rows: repeat(2, 1fr); */
            height: 100% !important;

        }

        .iframe-wrapper {
            position: relative;
            width: auto;
            border: 0.5px solid rgb(212, 200, 200);

            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
        }

        small {
            font-size: 10px !important;
        }

        .cols {
            margin-top: 8px !important;
        }


        .apexcharts-legend-text {
            font-size: 10px !important;
            margin-left: -15px !important;
            margin-right: 15px !important;
        }


        .respon_grif {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            height: 300px;
            /* margin-top: 10px !important; */
            width: 100% !important;
        }
        
        .res {
            width: 100% !important;
            height: 300px;
            margin-top: -35px !important;

        }
        .cols_satu {
            width: 100% !important;
            height: 100% !important;

        }

        canvas {
            width: 100% !important;
            height: 100% !important;
            /* display: block !important; */
        }

        @media screen and (max-width:1300px) {
            .containers {
                grid-template-columns: repeat(1,1fr) !important;
            }

            .atas {
                margin-top: 20px !important;
                margin-bottom: 20px !important;
            }

            .kl {
                margin-bottom: 10px !important;
            }

            .iframe-wrapper {
                border: 0px;
            }

        }


        @media screen and (max-width:700px) {
            .card_grid {
                grid-template-columns: repeat(1,1fr) !important;
                gap: 5px !important;
            }

            .mnl {
                margin-top: 5px !important;
            }

            body {
                overflow: scroll !important;
            }

            
            body::-webkit-scrollbar {
                width: 4px;
            }

            body::-webkit-scrollbar-thumb {
                background-color: #a39e9e;
            }

            body::-webkit-scrollbar-track {
                background-color: #f0f0f0;
            }
        }


    </style>
    <title>Selamat Datang Pada Dashboard EWS - Ketinggian Permukaan Air Kabupaten Tangerang
    </title>
</head>

<body>

    <div class="containers">
        <!-- Kolom 1, Baris 1 -->
        <div class="iframe-wrapper ">
            <div class="card-body atas" style="margin-left: 5px !important;margin-right: 5px !important;">
                <h6 style="font-size: 13px !important" class="text-center">Jumlah Keselurahan Status Dan Pemberitahuan
                    Bantaran Sungai </h6>
                <div class="card_grid">
                    <div class="cols">
                        <div class="card card-border-shadow-primary bg-danger">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-warning"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-house-flood-water-circle-arrow-right "></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($meluap) ? $meluap : 0 }}</small>
                                </div>
                                <small class=" text-white">Bantaran Sungai Meluap
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="cols">
                        <div class="card card-border-shadow-primary bg-warning">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-info"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-person-circle-exclamation"></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($waspada) ? $waspada : 0 }}</small>
                                </div>
                                <small class=" text-white">Bantaran Sungai Waspada
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="cols">
                        <div class="card  card-border-shadow-primary bg-success">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-primary"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-water"></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($normal) ? $normal : 0 }}</small>
                                </div>

                                <small class=" text-white">Bantaran Sungai Normal
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card_grid mnl">
                    <div class="cols ">
                        <div class="card  card-border-shadow-primary bg-primary">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-danger"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-sliders"></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($jumlah_bantaran_tanpa_pengaturan) ? $jumlah_bantaran_tanpa_pengaturan : 0 }}</small>
                                </div>

                                <small class=" text-white">Bantaran Sungai Belum Lengkap
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="cols">
                        <div class="card  card-border-shadow-primary bg-dark">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-success"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-microchip"></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($alat_tidak_aktif) ? $alat_tidak_aktif : 0 }}</small>
                                </div>

                                <small class=" text-white">Perangkat Hulu Sungai Yang Mati
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="cols">
                        <div class="card  card-border-shadow-primary bg-info">
                            <div class="card-body" style="padding: 13px !important">
                                <div class="d-flex align-items-center ">
                                    <div class="avatar " style="padding: 0px !important">
                                        <small class="avatar-initial rounded bg-secondary"><i style="padding: 10px"
                                                class="fa-solid  text-white  fa-bridge-water"></i></small>
                                    </div>
                                    <small class="mb-0 text-white"
                                        style="padding-left: 5px">{{ isset($bantaran) ? $bantaran : 0 }}</small>
                                </div>

                                <small class=" text-white">Jumlah Bantaran Sungai
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="" style="margin-top: 5px !important;">
                    <ul class="list-group">
                        @if ($count_status)
                            @foreach ($result_status as $selesai)
                                <li class="list-group-item" style="padding: 5px !important">
                                    - Bantaran Sungai {{ $selesai->pengaturan_bantaran_sungai->bantaran_sungai->nama }}
                                    Kecamatan
                                    {{ $selesai->pengaturan_bantaran_sungai->bantaran_sungai->kecamatan->nama }}
                                    Bersetatus
                                    @if ($selesai->status_bantaran_sungai == 'Meluap')
                                        <span
                                            class="badge badge-pill bg-danger">{{ $selesai->status_bantaran_sungai }}</span>
                                    @elseif($selesai->status_bantaran_sungai == 'Waspada')
                                        <span
                                            class="badge badge-pill bg-warning">{{ $selesai->status_bantaran_sungai }}</span>
                                    @else
                                        <span
                                            class="badge badge-pill bg-success">{{ $selesai->status_bantaran_sungai }}</span>
                                    @endif
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>

        <!-- Kolom 2, Baris 1 -->
        <div class="iframe-wrapper">
            @if ($count_device)
            <div class="atas">
                <h6 style="font-size: 13px !important" class="text-center kl">Hasil Perkiraan Ketinggian Hulu Sungai</h6>
                <div class="respon_grif " style="margin-left: 5px !important;margin-right: 15px !important;">
                    @foreach ($device as $room)
                        @php
                            $one = Illuminate\Support\Facades\DB::table('device_results')
                                ->where('uuid_device', $room->no)
                                ->OrderBy('uuid', 'desc')
                                ->first();
                            if ($one) {
                                if ($one->status_siaga == 'Siaga 1') {
                                    $warna = '#DC3545';
                                }
                                if ($one->status_siaga == 'Siaga 2') {
                                    $warna = 'orange';
                                }
                                if ($one->status_siaga == 'Siaga 3') {
                                    $warna = '#FFC107';
                                }
                                if ($one->status_siaga == 'Siaga 4') {
                                    $warna = '#007BFF';
                                }
                                if ($one->status_siaga == 'Normal') {
                                    if ($one->depth_average == '0') {
                                        $warna = 'black';
                                    } else {
                                        $warna = '#28A745';
                                    }
                                }
                            } else {
                                $warna = 'black';
                            }

                        @endphp
                        <div class="cols_satu card shadow   " style="border-radius: 5px;height: auto !important;width: auto !important;">
                            <div class="colom" style="margin-top: 10px !important;">
                                <h6 style="font-size: 11px !important;margin-top: 10px; !important" class="text-center ">{{ !empty($room->nama_device) ? $room->nama_device : '' }}
                                </h6>
                                <div class="flexs">
                                    <div style="display: grid !important;justify-items: center !important;"
                                        class="res">
                                        <div class="cards">
                                            <canvas id="canvas-untuk-menggambar-grafik{{ $room->no }}"  style="padding-left: 10px !important;padding-right: 10px !important;"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center " style="margin-top: -15px !important;margin-bottom: 5px !important;">
                                    <h6 class="text-center  " style="color: {{ $warna ? $warna : 'black' }};font-size:13px !important">
                                        @if (!empty($one->status_siaga))
                                            <b>{{ $one->status_siaga }} </b>
                                        @else
                                        @endif
                                    </h6>
                                    @if (!empty($one->datetime_calculate))
                                        <small style="font-size: 10px !important" class="text-center"><b>Data Terbaru
                                                {{ date('d-m-Y H:i', strtotime($one->datetime_calculate)) }}
                                                WIB</b> </small>
                                    @else
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            @endif
        </div>

        <!-- Kolom 1, Baris 2 -->   
        <div class="iframe-wrapper">
            @if ($count_device)
                <div class="atas">
                    <div style="margin-top: 5px !important;">
                        <div class="card-body">
                            <h6 style="font-size: 13px !important" class="text-center">Grafik Permukaan Air Selama 7 Hari
                                Terakhir</h6>
                            <section class="grafiks">
    
                                <div id="col" style="width: 100% !important;height:360px !important"></div>
                            </section>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <div class="iframe-wrapper">
            <div class="atas">
                <div class="table-responsive ">
                    <h6 style="font-size: 13px !important;margin-bottom: 5px !important;" class="text-center">Hasil
                        Perkiraan Ketinggian Bantaran Sungai</h6>
                    <div class="non">
                        <table class=" table-hover table-bordered  table-striped  table tables-responsive"
                        style="width:100% !important;margin-left: 5px !important;margin-right: 5px !important;"
                        id="tables" border="1">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="bor text-center" colspan="4">Bantaran Sungai</th>
                                <th class="bor text-center" colspan="4">Hulu Sungai</th>
                            </tr>
                            <tr>
                                <th></th>
                                <th class="text-center">Nama</th>
                                <th class="text-center">Kecamatan</th>
                                <th class="text-center">Ketinggian Air</th>
                                <th class="text-center">Status</th>
    
                                {{-- hulu --}}
                                <th class="text-center">Nama</th>
                                <th class="text-center">Ketinggian Air</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Waktu</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($main_table as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->nama }}</td>
                                    <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->kecamatan->nama }}</td>
                                    <td>{{ $row->ketinggian_air_bantaran_sungai . ' CM' }}</td>
                                    <td>
                                        @php
                                            if ($row) {
                                                $tinggi = $row->status_bantaran_sungai;
                                                if ($row->status_bantaran_sungai == 'Normal') {
                                                    $namaio = "<span class='badge badge-pill badge-success bg-success'>
                        $tinggi
                        </span>";
                                                } elseif ($row->status_bantaran_sungai == 'Waspada') {
                                                    $namaio = "<span class='badge badge-pill badge-warning bg-warning'>
                        $tinggi
                        </span>";
                                                } elseif ($row->status_bantaran_sungai == 'Meluap') {
                                                    $namaio = "<span class='badge badge-pill badge-danger bg-danger'>
                        $tinggi
                        </span>";
                                                } else {
                                                    $namaio = '-';
                                                }
                                            } else {
                                                $namaio = '-';
                                            }
                                            echo $namaio;
                                        @endphp
                                    </td>
                                    <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->device->nama_device }}</td>
                                    <td>
                                        {{ $row->ketinggian_air_perangkat . ' CM' }}
                                    </td>
                                    <td>
                                        @php
                                            if ($row) {
                                                $jk = $row->status_perangkat;
                                                if ($jk == 'Normal') {
                                                    $span = "<span class='badge badge-pill badge-success bg-success'>
                        $jk
                        </span>";
                                                } elseif ($jk == 'Siaga 4') {
                                                    $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                                } elseif ($jk == 'Siaga 3') {
                                                    $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                                } elseif ($jk == 'Siaga 2') {
                                                    $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                                } elseif ($jk == 'Siaga 1') {
                                                    $span = "<span class='badge badge-pill badge-danger bg-danger'>
                        $jk
                        </span>";
                                                } else {
                                                    $span = '';
                                                }
                                            } else {
                                                $span = '-';
                                            }
                                            echo $span;
                                        @endphp
                                    </td>
                                    <td>
                                        {{ date('d M Y H:i:s', strtotime($row->datetime_calculate)) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{{ asset('js/charts/chart.min.js') }}"></script>
    @foreach ($device as $rooms)
        <script>
            @php
                $device_results = Illuminate\Support\Facades\DB::table('device_results')
                    ->where('uuid_device', $rooms->no)
                    ->OrderBy('uuid', 'desc')
                    ->first();

                $pengaturan_alat = App\Models\SettingSiagaModel::where('uuid_device', $rooms->no)
                    ->where('active', '1')
                    ->first();

                if ($device_results) {
                    if ($device_results->status_siaga == 'Siaga 1') {
                        $warna = '#DC3545';
                    }
                    if ($device_results->status_siaga == 'Siaga 2') {
                        $warna = 'orange';
                    }
                    if ($device_results->status_siaga == 'Siaga 3') {
                        $warna = '#FFC107';
                    }
                    if ($device_results->status_siaga == 'Siaga 4') {
                        $warna = '#007BFF';
                    }
                    if ($device_results->status_siaga == 'Normal') {
                        if ($device_results->depth_average == '0') {
                            $warna = 'black';
                        } else {
                            $warna = '#28A745';
                        }
                    }
                } else {
                    $warna = 'black';
                }
            @endphp


            function buatDataUntukGrafik{{ $rooms->no }}(dataPenduduk{{ $rooms->no }}) {
                var normal{{ $rooms->no }} = dataPenduduk{{ $rooms->no }}.nilai_per_wilayah.map(function(satuanData) {
                    return {{ isset($pengaturan_alat->min_normal) ? $pengaturan_alat->min_normal : 0 }};
                });

                var siaga_empat{{ $rooms->no }} = dataPenduduk{{ $rooms->no }}.nilai_per_wilayah.map(function(
                    satuanData) {
                    return {{ isset($pengaturan_alat->min_siaga_4) ? $pengaturan_alat->min_siaga_4 : 0 }};
                });

                var siaga_tiga{{ $rooms->no }} = dataPenduduk{{ $rooms->no }}.nilai_per_wilayah.map(function(
                    satuanData) {
                    return {{ isset($pengaturan_alat->min_siaga_3) ? $pengaturan_alat->min_siaga_3 : 0 }};
                });

                var siaga_dua{{ $rooms->no }} = dataPenduduk{{ $rooms->no }}.nilai_per_wilayah.map(function(
                    satuanData) {
                    return {{ isset($pengaturan_alat->min_siaga_2) ? $pengaturan_alat->min_siaga_2 : 0 }};
                });

                var siaga_satu{{ $rooms->no }} = dataPenduduk{{ $rooms->no }}.nilai_per_wilayah.map(function(
                    satuanData) {
                    return {{ isset($pengaturan_alat->min_siaga_1) ? $pengaturan_alat->min_siaga_1 : 0 }};
                });

                var dataUntukGrafik{{ $rooms->no }} = {
                    labels: [''],
                    datasets: [{
                            label: "Normal",
                            borderColor: "#28A745",
                            borderWidth: 3,
                            backgroundColor: 'transparent',
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: normal{{ $rooms->no }},
                            type: 'line',
                        }, {
                            label: "Siaga 4",
                            borderColor: "#007BFF",
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_empat{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 3",
                            borderColor: "#FFC107",
                            borderWidth: 3,
                            backgroundColor: 'transparent',
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_tiga{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 2",
                            borderColor: "orange",
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_dua{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 1",
                            borderColor: "#DC3545",
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_satu{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Ketinggian Air",
                            backgroundColor: "{{ $warna }}",
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: [{{ isset($device_results->depth_average) ? $device_results->depth_average : 0 }}]
                        }
                    ]
                };

                return dataUntukGrafik{{ $rooms->no }};

            }

            function buatGrafik{{ $rooms->no }}(dataPenduduk{{ $rooms->no }}) {

                var elemenCanvas{{ $rooms->no }} = document.getElementById(
                    "canvas-untuk-menggambar-grafik{{ $rooms->no }}");
                var penggambarCanvas{{ $rooms->no }} = elemenCanvas{{ $rooms->no }}.getContext("2d");

                var judulGrafik{{ $rooms->no }} = "";
                var dataUntukGrafik{{ $rooms->no }} = buatDataUntukGrafik{{ $rooms->no }}(
                    dataPenduduk{{ $rooms->no }});

                var konfigurasiChartJS{{ $rooms->no }} = {
                    type: 'bar',
                    data: dataUntukGrafik{{ $rooms->no }},
                    options: {
                        maintainAspectRatio: false,
                        responsive: true,
                        

                        title: {
                            display: true,
                            text: judulGrafik{{ $rooms->no }}
                        },
                        scales: {
                            yAxes: [{
                                display: true,
                                position: 'right',
                                ticks: {
                                    min: 0
                                },
                                id: 'sumbu-y-kanan{{ $rooms->no }}'
                            }, ]
                        },
                        legend: {
                            labels: {
                                fontSize: 9, // Atur ukuran font legenda di sini
                            }
                        }
                    }
                }

                var grafik{{ $rooms->no }} = new Chart(penggambarCanvas{{ $rooms->no }},
                    konfigurasiChartJS{{ $rooms->no }});

            }
            var dataPenduduk{{ $rooms->no }};

            var namadevice = {
                'nama_device': "{{ $rooms->nama_device }}",
                'nilai_per_wilayah': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
                    25, 26, 27, 28, 29, 30
                ]
            };
            dataPenduduk{{ $rooms->no }} = namadevice;
            buatGrafik{{ $rooms->no }}(dataPenduduk{{ $rooms->no }})
        </script>
    @endforeach
    <script>
        var data = [
            @foreach ($result_device as $satu)
                @php
                    $one = App\Models\DeviceResultModel::where('uuid_device', $satu->no)
                        ->whereBetween('created', [$awal_waktu, $now])
                        ->orderby('uuid', 'desc')
                        ->get()
                        ->unique('created');
                    $satus = $one->sortBy('created');

                @endphp {
                    name: "{{ !empty($satu) ? $satu->nama_device : '' }}",
                    values: [
                        @foreach ($satus as $item)
                            @if (!empty($one))
                                @php
                                    $rtime = date('d-m-Y', strtotime($item->created));
                                @endphp {
                                    date: "{{ !empty($item->created) ? $item->created : '' }}",
                                    value: {{ !empty($item->depth_average) ? $item->depth_average : '' }}
                                },
                            @endif
                        @endforeach
                    ]
                },
            @endforeach
        ];


        var series = data.map(function(item) {
            if (item.values && item.values.length > 0) {
                return {
                    name: item.name,
                    data: item.values.map(function(value) {
                        return [value.date, value.value];
                    })
                };
            } else {
                return {
                    name: item.name,
                    data: []
                };
            }
        });

        var options = {
            legend: {
                position: "top",
            },
            markers: {
                size: 5, // Ukuran titik dalam piksel
                colors: ['#008ffb', '#00e396',
                    '#feb019'
                ], // Warna titik, dapat disesuaikan dengan jumlah seri pada grafik
                strokeColors: '#fff', // Warna border titik
                strokeWidth: 1, // Lebar border titik dalam piksel
                strokeOpacity: 0.3, // Opasitas border titik
                hover: {
                    size: 7, // Ukuran titik saat di-hover
                }
            },
            series: series,
            chart: {
                height: "100%",
                type: 'line',
                zoom: {
                    enabled: false
                },
                animations: {
                    enabled: false
                }
            },
            stroke: {
                width: [3, 3, 3],
                curve: 'smooth'
            },
            title: {
                text: '',
            },
            xaxis: {
                type: 'datetime',
            },
            yaxis: {
                min: 0,
                max: 1000
            },
            tooltip: {
                enabled: false, // Tampilkan tooltip secara default
                onDatasetHover: {
                    enabled: false // Menonaktifkan tooltip saat di hover
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#col"), options);
        chart.render();
        setInterval(function() {
            location.reload();
        }, 300000);
    </script>
</body>

</html>
