@extends('layouts/contentLayoutMasterBeranda')

@section('title', 'Dashboard')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection
@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-invoice-list.css')) }}">
@endsection
@section('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="{{ asset('6.png') }}" alt="" style="width: 70px">
                                    <img src="{{ asset('3.jpeg') }}" alt="" style="width: 70px;margin-left: 20px;">
                                    <img src="{{ asset('4.jpeg') }}" alt="" style="width: 70px;margin-left: 20px;">
                                    <img src="{{ 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">
                @if ($count_device)
                    <div class="centers ">
                        <div class="respon_grif">
                            @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 shadow p-3" style="border-radius: 5px;">
                                    <div class="colom">
                                        <h5 class="text-center ">
                                            {{ !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{{ $room->no }}"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center mb-3">
                                            <h4 class="text-center  " style="color: {{ $warna ? $warna : 'black' }}">
                                                @if (!empty($one->status_siaga))
                                                    <b>{{ $one->status_siaga }} </b>
                                                @else
                                                @endif
                                            </h4>
                                            @if (!empty($one->datetime_calculate))
                                                <small 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 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>
                                                    @foreach ($segin as $bantu)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td><span class="badge badge-pill bg-success">{{ $bantu->depth }} CM</span></td>
                                                        <td>{{ date("d, F Y", strtotime($bantu->date_report)) }}</td>
                                                        <td>{{ date("H:i", strtotime($bantu->time_report)) }}</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                            </div>
                        </div>
                @endif
                @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>
                @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="{{ 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 }}'
                            }, ]
                        }
                    }
                }

                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


    <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,
        };

        

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


    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var data = [
            @foreach ($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: 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: [{{ $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>
@endsection