@extends('layouts/layout_comand_center')

@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>
        body,html {
            overflow: hidden !important;
            zoom: 0.8;
            margin-left: 10px;
            
            margin-right: 10px;
            font-size:18px;
            
        }

        .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(3, 1fr);
            gap: 20px;
            height: 100vh;
            margin-top: 10px;
        }

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

        .flexs {
            display: flex !important;
            justify-content: center !important;
            /* width: 100% !important; */
            margin-top: -30px !important;
        }

        .flexs .cards {
            width: 100% !important;
            height: 100% !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;
        }


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

         .cols_satu {
            width: 100% !important;
            /* height: 100% !important; */
            
            margin-bottom: 20px !important;
        } 

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




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

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

        .apexcharts-legend-text {
            transform: translateX(-20px);
        }

      
    </style>


    <section id="" class="mt-1">
        <div >
            <div>
                @if ($count_device)
                    <div>
                        <h3 class="text-center ">Hasil Perkiraan Ketinggian Hulu Sungai</h3>
                        <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-2 " 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 id="canvas-untuk-menggambar-grafik{{ $room->no }}"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center ">
                                            <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>
                        
                @endif
            </div>
        </div>
    </section>

    <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 }}'
                            }, ]
                        },
                         legend: {
                labels: {
                    fontSize: 17, // 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>
    setInterval(function() {
            location.reload();
        }, 300000);
</script>


@endsection