

<?php $__env->startSection('title', 'Dashboard'); ?>

<?php $__env->startSection('vendor-style'); ?>
    <!-- vendor css files -->
    <link rel="stylesheet" href="<?php echo e(asset(mix('vendors/css/charts/apexcharts.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('vendors/css/extensions/toastr.min.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('vendors/css/forms/select/select2.min.css'))); ?>">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('page-style'); ?>
    <!-- Page css files -->
    <link rel="stylesheet" href="<?php echo e(asset(mix('css/base/plugins/charts/chart-apex.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('css/base/plugins/extensions/ext-component-toastr.css'))); ?>">
    <link rel="stylesheet" href="<?php echo e(asset(mix('css/base/pages/app-invoice-list.css'))); ?>">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>

    <style>
        .dashboard_home {
            margin-top: 30px;
        }

        .imgs {
            width: 220px;
            height: 38px;
        }

        .imgs img {
            width: 100%;
            height: 100%;
        }

        .apexcharts-datalabel-value:last-child {
            display: none !important;
        }

        @media screen and (max-width:1460px) {
            .dashboard_home {
                margin-left: 20px;
                margin-right: 20px;
            }
        }

        @media screen and (max-with:767px) {
            .dashboard_home {
                margin-left: 0px;
                margin-right: 0px;
                margin-top: -130px !important;
            }

            .app-content {
                margin-top: 0px !important;
            }

            .contents {
                /* margin: 0px !important; */
                padding: 0px !important
            }
        }


        .grif {
            display: grid;
            grid-template-columns: repeat(1, 1fr) repeat(1, 200px);
            gap: 20px;
        }

        @media screen and (max-width:760px) {
            .grif {
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
            }
        }

        .apexcharts-toolbar {
            display: none !important;
        }


        .respon_grif {
            display: grid;
            grid-template-columns: repeat(1, 373px) repeat(1, 1fr);
            gap: 20px;
        }

        @media screen and (max-width:1200px) {
            .respon_grif {
                grid-template-columns: repeat(2, 1fr);
            }


        }

        @media screen and (max-width:900px) {
            .respon_grif {
                grid-template-columns: repeat(1, 1fr);
            }


        }

        .apexcharts-yaxis-annotations rect {
            display: none !important;
        }

        .flexs {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
        }

        .flexs .cards {
            width: 80% !important;
        }

        .apexcharts-data-labels text {
            color: white !important;
            font-weight: bold !important;
        }

        .apexcharts-data-labels .apexcharts-datalabel {
            color: white !important;
            font-weight: bold !important;
        }

        .apexcharts-yaxis-annotations text {
            font-weight: bold !important;
            color: black !important;
            position: relative !important;
            right: 200px !important;
            text-shadow: 1px 1px 1px solid white;
        }

        .apexcharts-series path {
            height: 500px !important;
        }

        .res {
            width: 100% !important;
            height: 600px !important;
        }


        @media screen and (max-width:450px) {

            .flexs .cards {
                width: 100% !important;
            }
        }

        .apexcharts-legend-text {
            transform: translateX(-20px);
        }
    </style>


    <section id="dashboard-analytic" class="dashboard_home container">
        <div class="card">
            <div class="card-body">
                <div class="navbar-header">
                    <ul class="nav navbar-nav flex-row">
                        <li class="nav-item me-auto d-flex">
                            <a class="navbar-brands" href="#">
                                <div class="d-flex">
                                    
                                    <img src="<?php echo e(asset('6.png')); ?>" alt="" style="width: 70px">
                                    <img src="<?php echo e(asset('3.jpeg')); ?>" alt="" style="width: 70px;margin-left: 20px;">
                                    <img src="<?php echo e(asset('4.jpeg')); ?>" alt="" style="width: 70px;margin-left: 20px;">
                                    <img src="<?php echo e(asset('7.png')); ?>" alt="" style="width: 70px;margin-left: 20px;">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="mb-2">
            <h4 class="text-center  text-primary">Selamat Datang Pada Dashboard EWS - Pondok Bentung Siaga</h4>
        </div>
        <div class="card">
            <div class="card-body">
                <?php if($count_device): ?>
                    <div class="centers ">
                        <div class="respon_grif">
                            <?php $__currentLoopData = $device; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?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';
                                    }
                                    
                                ?>
                                <div class="cols_satu shadow p-3" style="border-radius: 5px;">
                                    <div class="colom">
                                        <h5 class="text-center ">
                                            <?php echo e(!empty($room->nama_device) ? $room->nama_device : ''); ?></h5>
                                        <div class="flexs">
                                            <div style="display: grid !important;justify-items: center !important;"
                                                class="res">
                                                <div class="cards">
                                                    <canvas style="width: 100% !important;height:100% !important"
                                                        id="canvas-untuk-menggambar-grafik<?php echo e($room->no); ?>"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center mb-3">
                                            <h4 class="text-center  " style="color: <?php echo e($warna ? $warna : 'black'); ?>">
                                                <?php if(!empty($one->status_siaga)): ?>
                                                    <b><?php echo e($one->status_siaga); ?> </b>
                                                <?php else: ?>
                                                <?php endif; ?>
                                            </h4>
                                            <?php if(!empty($one->datetime_calculate)): ?>
                                                <small class="text-center"><b>Data Terbaru
                                                        <?php echo e(date('d-m-Y H:i', strtotime($one->datetime_calculate))); ?>

                                                        WIB</b> </small>
                                            <?php else: ?>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <div class="card">
                                <div class="shadow">
                                    <h5 class="mt-2 ml-2 text-center">Pengiriman Data Dari Alat</h5>
                                    <div id="bali">
                                    </div>
                                    <div class="table-responsive m-2">
                                        <h5>Table Pengiriman Data Permukaan Air</h4>
                                            <table class="table table-hover table-striped table-border">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Ketinggian Air (CM)</th>
                                                        <th>Tanggal</th>
                                                        <th>Jam</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php $__currentLoopData = $segin; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bantu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <tr>
                                                        <td><?php echo e($loop->iteration); ?></td>
                                                        <td><span class="badge badge-pill bg-success"><?php echo e($bantu->depth); ?> CM</span></td>
                                                        <td><?php echo e(date("d, F Y", strtotime($bantu->date_report))); ?></td>
                                                        <td><?php echo e(date("H:i", strtotime($bantu->time_report))); ?></td>
                                                    </tr>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </tbody>
                                            </table>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                            </div>
                        </div>
                <?php endif; ?>
                <?php if($count_device): ?>
                    <section class="grafiks">
                        <div class="mt-5 grif mb-3 kiri">
                            <div class="texts">
                                <h4 class="card-title mb-25">Grafik Permukaan Air Selama 7 Hari Terakhir</h4>
                            </div>
                        </div>
                        <div id="col" style="width: 100% !important;height:500px !important"></div>
                    </section>
                <?php endif; ?>
                <section class="maps mt-5">
                    <h4 class="card-title">Titik Lokasi Sensor Pendeteksi Ketinggian Permukaan Air</h4>
                    <div class="leaflet-map" style="height: 500px" id="map"></div>
                </section>
            </div>
        </div>
        <footer>
            <center>
                2025 Copyright  Pondok Bentung Siaga
            </center>
            <br>
        </footer>
    </section>

<br>
<br>
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
        crossorigin="anonymous"></script>

    <script src="<?php echo e(asset('js/charts/chart.min.js')); ?>"></script>

    <?php $__currentLoopData = $device; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rooms): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <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';
                }
            ?>


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

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

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

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

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

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

                return dataUntukGrafik<?php echo e($rooms->no); ?>;

            }

            function buatGrafik<?php echo e($rooms->no); ?>(dataPenduduk<?php echo e($rooms->no); ?>) {

                var elemenCanvas<?php echo e($rooms->no); ?> = document.getElementById(
                    "canvas-untuk-menggambar-grafik<?php echo e($rooms->no); ?>");
                var penggambarCanvas<?php echo e($rooms->no); ?> = elemenCanvas<?php echo e($rooms->no); ?>.getContext("2d");

                var judulGrafik<?php echo e($rooms->no); ?> = "";
                var dataUntukGrafik<?php echo e($rooms->no); ?> = buatDataUntukGrafik<?php echo e($rooms->no); ?>(
                    dataPenduduk<?php echo e($rooms->no); ?>);

                var konfigurasiChartJS<?php echo e($rooms->no); ?> = {
                    type: 'bar',
                    data: dataUntukGrafik<?php echo e($rooms->no); ?>,
                    options: {
                        maintainAspectRatio: false,
                        responsive: true,
                        title: {
                            display: true,
                            text: judulGrafik<?php echo e($rooms->no); ?>

                        },
                        scales: {
                            yAxes: [{
                                display: true,
                                position: 'right',
                                ticks: {
                                    min: 0
                                },
                                id: 'sumbu-y-kanan<?php echo e($rooms->no); ?>'
                            }, ]
                        }
                    }
                }

                var grafik<?php echo e($rooms->no); ?> = new Chart(penggambarCanvas<?php echo e($rooms->no); ?>,
                    konfigurasiChartJS<?php echo e($rooms->no); ?>);

            }
            var dataPenduduk<?php echo e($rooms->no); ?>;

            var namadevice = {
                'nama_device': "<?php echo e($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<?php echo e($rooms->no); ?> = namadevice;
            buatGrafik<?php echo e($rooms->no); ?>(dataPenduduk<?php echo e($rooms->no); ?>)
        </script>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    <script>
            var satelite = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlza29taW5mby1rYWItdGFuZyIsImEiOiJjazhhenVlaGowM205M2VvMnNmbnVmaDJqIn0.y6_wv_iwv8nyF0m55vFycQ', {
        	attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        		'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        		'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        	// id: 'mapbox/streets-v11'
        });
        // var satelite = L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=fUxODUXeLHdE745dEVmA', {
        //     attribution: 'Peta oleh <a href="https://www.maptiler.com/">MapTiler</a>',
        // });
        // var street = L.tileLayer('https://api.maptiler.com/maps/basic/{z}/{x}/{y}.png?key=fUxODUXeLHdE745dEVmA', {
        //     attribution: 'Peta oleh <a href="https://www.maptiler.com/">MapTiler</a>',
        // });


        var Streets = L.tileLayer(
            'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlza29taW5mby1rYWItdGFuZyIsImEiOiJjazhhenVlaGowM205M2VvMnNmbnVmaDJqIn0.y6_wv_iwv8nyF0m55vFycQ', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                id: 'mapbox/streets-v11'
            });

        var openstreets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '<a href="https://www.openstreetmap.org/copyright"></a> '
        });
        var map = L.map('map', {
            center: [-6.317651, 106.541674],
            zoom: 13,
            layers: [openstreets]
        });

        var baseMaps = {
            "OpenStreetMap": openstreets,
            // "Streets": Streets,
            // "Satelite": satelite,
        };

        <?php foreach($device as $main_row) : ?>
        L.marker([<?= $main_row->lat ?>, <?= $main_row->lng ?>]).addTo(map)
            .bindPopup(
                "<p><b><?= $main_row->nama_device ?></b></p><p>IMEI : <?= $main_row->imei ?></p><p>Lokasi : <?= $main_row->location ?></p><p>Kedalaman Sensor : <?= $main_row->depth ?> CM</p><p>Latitude : <?= $main_row->lat ?></p><p>Longitude : <?= $main_row->lng ?></p><img src='<?= asset('upload/' . $main_row->photo_device) ?>' class='img-fluid img-thumbnail' style='width:100px;height:100px;'>"
            )
            .openPopup();

        <?php endforeach; ?>


        var layerControl = L.control.layers(baseMaps).addTo(map);
    </script>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var data = [
            <?php $__currentLoopData = $device; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $satu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?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');
                    
                ?> {
                    name: "<?php echo e(!empty($satu) ? $satu->nama_device : ''); ?>",
                    values: [
                        <?php $__currentLoopData = $satus; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php if(!empty($one)): ?>
                                <?php
                                    $rtime = date('d-m-Y', strtotime($item->created));
                                ?> {
                                    date: "<?php echo e(!empty($item->created) ? $item->created : ''); ?>",
                                    value: <?php echo e(!empty($item->depth_average) ? $item->depth_average : ''); ?>

                                },
                            <?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    ]
                },
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        ];


        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: 2, // Lebar border titik dalam piksel
                strokeOpacity: 0.9, // Opasitas border titik
                hover: {
                    size: 7, // Ukuran titik saat di-hover
                }
            },
            series: series,
            chart: {
                height: 500,
                type: 'line',
                zoom: {
                    enabled: false
                },
                animations: {
                    enabled: false
                }
            },
            stroke: {
                width: [5, 5, 4],
                curve: 'smooth'
            },
            title: {
                text: '',
            },
            xaxis: {
                type: 'datetime',
                // labels: {
                //     formatter: function(value) {
                //         var date = new Date(value);
                //         var month = date.getMonth() + 1;
                //         var day = date.getDate();
                //         var year = date.getFullYear();
                //         return year + '-' + month + '-' + day;
                //     }
                // }
            },
            yaxis: {
                min: 0,
                max: 1000
            },
        };

        var chart = new ApexCharts(document.querySelector("#col"), options);
        chart.render();
        setInterval(function() {
            location.reload();
        }, 300000);
    </script>
    <script>
        var options = {
            series: [<?php echo e($mili->depth); ?>],
            chart: {
                height: 350,
                type: 'radialBar',
                offsetY: -10
            },
            plotOptions: {
                radialBar: {
                    startAngle: -135,
                    endAngle: 135,
                    dataLabels: {
                        name: {
                            fontSize: '16px',
                            color: undefined,
                            offsetY: 120
                        },
                        value: {
                            offsetY: 76,
                            fontSize: '22px',
                            color: undefined,
                            formatter: function(val) {
                                return val + "%";
                            }
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    shadeIntensity: 0.15,
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 65, 91]
                },
            },
            stroke: {
                dashArray: 4
            },
            labels: ['Alat Pondok Betung'],
        };

        var chart = new ApexCharts(document.querySelector("#bali"), options);
        chart.render();
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts/contentLayoutMasterBeranda', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\project\project_ews_clone\resources\views/content/home/index.blade.php ENDPATH**/ ?>