@extends('layouts/contentLayoutMaster')

@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')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/maps/leaflet.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/maps/map-leaflet.css')) }}">
@endsection
@section('content')

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

        .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 {
                padding: 0px !important
            }
        }

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

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

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

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

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

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


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

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

        .flexs .cards {
            width: 70% !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: 600px !important;
        }

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

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

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

        @media screen and (max-width:500px) {
            .card_grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>

    <section id="dashboard-analytic">
        <div class="mb-2">
            <h4 class="text-center  text-primary">Selamat Datang Pada Dashboard EWS - Ketinggian Permukaan Air Kabupaten
                Tangerang</h4>
        </div>
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Dashboard</h4>
            </div>
            <div class="container">
                @if (session()->get('success'))
                    <div class="alert alert-success p-2">
                        {{ session()->get('success') }}
                    </div>
                @endif
                @if (session()->get('error'))
                    <div class="alert alert-danger p-2">
                        {{ session()->get('error') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert m-2 p-1 alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <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';
                                    }
                                    $sekarang_now = date('Y-m-d H:i:s');
                                    $lima_belas = date('Y-m-d H:i:s', strtotime('-15 minutes'));

                                    $report_satut = App\Models\DeviceReportModel::where('status', 'aktif')
                                        ->where('uuid_device', $room->no)
                                        ->orderby('uuid', 'desc')
                                        ->first();
                                    $check_report = Illuminate\Support\Facades\DB::table('device_reports')
                                        ->where('status', 'aktif')
                                        ->where('uuid_device', $room->no)
                                        ->whereBetween('date_time_report', [$lima_belas, $sekarang_now])
                                        ->count();
                                @endphp
                                <div class="cols_satu shadow pt-3" style="border-radius: 5px;">
                                    <div class="colom">
                                        <h5 class="text-center ">
                                            {{ !empty($room->nama_device) ? $room->nama_device : '' }}</h5>
                                        @if (empty($report_satut))
                                            <div class="alert text-white p-1 m-2 bg-danger ">Perangkat tidak mengirimkan
                                                data!</div>
                                        @elseif(empty($check_report))
                                            <div class="alert text-white p-1 m-2 bg-danger ">Perangkat tidak mengirimkan
                                                data!</div>
                                        @endif
                                        <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>
                    </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

            </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,

                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: normal{{ $rooms->no }},
                            backgroundColor: 'transparent',
                            type: 'line'
                        }, {
                            label: "Siaga 4",
                            borderColor: "#007BFF",
                            borderWidth: 3,
                            backgroundColor: 'transparent',

                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_empat{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 3",
                            borderColor: "#FFC107",
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            width: 100,
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_tiga{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 2",
                            backgroundColor: 'transparent',
                            borderColor: "orange",
                            borderWidth: 3,
                            yAxisID: "sumbu-y-kanan{{ $rooms->no }}",
                            data: siaga_dua{{ $rooms->no }},
                            type: 'line'
                        },
                        {
                            label: "Siaga 1",
                            borderColor: "#DC3545",
                            borderWidth: 3,
                            backgroundColor: 'transparent',
                            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: [{
                                type: 'linear',
                                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 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)
                            @php
                                $rtime = date('d-m-Y', strtotime($item->created));
                            @endphp {
                                date: "{{ $item->created }}",
                                value: {{ $item->depth_average }}
                            },
                        @endforeach
                    ]
                },
            @endforeach
        ];


        var series = data.map(function(item) {
            return {
                name: item.name,
                data: item.values.map(function(value) {
                    return [value.date, value.value];
                })
            };
        });

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

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>

    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection
@section('page-script')

    <script src="{{ asset(mix('js/scripts/pages/app-invoice-list.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>


@endsection