@extends('layouts/contentLayoutMasterBeranda')

@section('title', 'Dashboard')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .swiper {
            width: auto;
        }

        body,
        html {
            overflow: hidden;
            height: 100vh;
        }

        iframe {
            overflow: hidden;
        }

        .tit {
            font-size: 30px
        }

        .mati {
            box-shadow: 0px 0px 0px white;
        }

        .swiper-slide-active {
            display: none !important;
        }

        .atas {
            margin-bottom: 5px;
        }

        .smalls {
            font-size: 17px;
        }

        .colom_dua {
            display: grid;
            grid-template-columns: repeat(2, 1fr);

        }

        .lis {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 5px;
        }

    </style>
    

    <div class="mt-1" style="margin-left: 0px !important;margin-right: 0px !important;">
        <div class="row ">
            <div class="mb-1">
                <h3 class="text-center">Dashboard Perkiraan Cuaca Dan Informasi Gempa Bumi</h3>
                <h6 class="text-center" id="waktuIndonesiaBarat"></h6>
            </div>
            <div class="col-md-8 " style="cursor: pointer">
                <h6  class="mb-1 text-center">Perkiraan Cuaca</h6>
                <div id="weatherContainer" class="swiper">
                    <div class="swiper-wrapper"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div style="padding: 10px">
                        <h5 class="mb-1 text-center">Gempa Terkini</h5>
                        <div class="colom_dua">
                            <div class="colt">
                                <div style="width: 100%;height: 100%;">
                                    <img src="https://data.bmkg.go.id/DataMKG/TEWS/{{ $gempa['Shakemap'] }}" alt=""
                                        class="img-fluid w-100 h-100">
                                </div>
                            </div>
                            <div class="colt">
                                <h6 class="mb-2"><i class="fa-solid fa-calendar-days"></i>
                                    {{ $gempa['Tanggal'] . ' ' . $gempa['Jam'] }}</h6>
                                <h6 class="mb-2">
                                    <i class="fa-solid fa-arrow-trend-up"></i>
                                    Maknitudo {{ $gempa['Magnitude'] }}
                                </h6>
                                <h6 class="mb-2">
                                    <i class="fa-solid fa-arrow-up-from-ground-water"></i>
                                    Kedalaman {{ $gempa['Kedalaman'] }}
                                </h6>
                                <h6 class="mb-2">
                                    <i class="fa-solid fa-location-dot"></i>
                                    Lokasi {{ $gempa['Lintang'] . ' - ' . $gempa['Bujur'] }}
                                </h6>
                                <h6 class="mb-2">Wilayah {{ $gempa['Wilayah'] }}</h6>
                                <h6 class="mb-2">{{ $gempa['Potensi'] }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lis">
            <div class="ls">
                <iframe src="https://peta-maritim.bmkg.go.id/ofs/" sandbox="allow-same-origin allow-scripts" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <div class="ls">
                <div class="table-responsive   ">
                    <h6 class="text-center mb-1">Daftar Gempa Bumi</h6>
                    <table class=" table-hover table-bordered  table-striped  table tables-responsive"
                        style="width:100% !important" id="tables" border="1">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="text-center">Waktu Gempa</th>
                                <th class="text-center">Lintang - Bujur</th>
                                <th class="text-center">Magnitudo</th>
                                <th class="text-center">Kedalaman</th>
                                <th class="text-center">Wilayah</th>
                                <th class="text-center">Dirasakan</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($result_gempa as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row['Tanggal'] . ' ' . $row['Jam'] }}</td>
                                    <td>{{ $row['Lintang'] . ' - ' . $row['Bujur'] }}</td>
                                    <td>{{ $row['Magnitude'] }}</td>
                                    <td>{{ $row['Kedalaman'] }}</td>
                                    <td>{{ $row['Wilayah'] }}</td>
                                    <td>{{ $row['Dirasakan'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Tambahkan script untuk library Swiper -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- Script untuk inisialisasi Swiper -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inisialisasi Swiper
            const swiper = new Swiper('.swiper', {
                direction: 'horizontal',
                loop: false,
                slidesPerView: 3,
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

            });
        });
        function updateWaktu() {
            var waktuIndonesiaBaratElement = document.getElementById("waktuIndonesiaBarat");

            // Mendapatkan tanggal dan jam sekarang dalam zona waktu WIB (UTC+7)
            var waktuSekarang = new Date();
            waktuSekarang.setHours(waktuSekarang.getHours() );

            // Mendapatkan hari dalam bentuk teks
            var hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'][waktuSekarang.getDay()];

            // Format tanggal
            var tanggal = waktuSekarang.getDate().toString().padStart(2, '0');
            var bulan = (waktuSekarang.getMonth() + 1).toString().padStart(2, '0'); // Perlu ditambah 1 karena Januari dimulai dari 0
            var tahun = waktuSekarang.getFullYear();

            // Format waktu
            var jam = waktuSekarang.getHours().toString().padStart(2, '0');
            var menit = waktuSekarang.getMinutes().toString().padStart(2, '0');
            var detik = waktuSekarang.getSeconds().toString().padStart(2, '0');

            // Menampilkan hasil
            waktuIndonesiaBaratElement.textContent = hari + ", " + tanggal + "-" + bulan + "-" + tahun + " " + jam + ":" + menit + ":" + detik + " WIB";

            // Mengupdate setiap detik
            setTimeout(updateWaktu, 1000);
        }

        // Memanggil fungsi untuk pertama kali
        updateWaktu();

    </script>


    <script>
        fetch("https://data.bmkg.go.id/DataMKG/MEWS/DigitalForecast/DigitalForecast-Banten.xml")
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.text();
            })
            .then(xmlString => {
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlString, "text/xml");

                const areas = xmlDoc.querySelectorAll("area");
                const waktu = xmlDoc.querySelector("forecast");
                const jam = waktu.querySelector("hour")?.textContent;
                const menit = waktu.querySelector("minute")?.textContent;

                const weatherContainer = document.getElementById("weatherContainer");
                const swiperWrapper = weatherContainer.querySelector(".swiper-wrapper");

                areas.forEach(area => {
                    try {
                        // Check if any of the values are empty, and skip creating the HTML if they are

                        const namaDaerah = area.querySelector("name")?.textContent || 'N/A';
                        const humidityParameter = area.querySelector("parameter[description='Humidity']");
                        const lastHumidityValue = humidityParameter.querySelector("timerange:last-child");
                        const kelembaban = lastHumidityValue?.textContent || 'N/A';

                        const speed_angin = area.querySelector("parameter[description='Wind speed']");
                        const anak = speed_angin.querySelector("timerange:last-child");
                        const selesai = anak.querySelector("value[unit='KPH']");
                        const main = Math.round(selesai?.textContent);
                        const kecepatanAngin = main || 'N/A';

                        const suhu = area.querySelector("parameter[description='Temperature']");
                        const result_suhu = suhu.querySelector("timerange:last-child");
                        const selsius = result_suhu.querySelector("value[unit='C']");
                        const oke_suhu = Math.round(selsius?.textContent);
                        const hasil_suhu = oke_suhu || "N/A";

                        const arahAngin = area.querySelector("parameter[description='Wind direction']");
                        const berhembus = arahAngin.querySelector("timerange:last-child");
                        const kemana_angin = berhembus.querySelector("value[unit='CARD']");
                        const kembali_angin = kemana_angin?.textContent;
                        let angin_berhembus;

                        switch (kembali_angin) {
                            case "N":
                                angin_berhembus = "Utara";
                                break;
                            case "NNE":
                                angin_berhembus = "Utara - timur laut";
                                break;
                            case "NE":
                                angin_berhembus = "Timur laut";
                                break;
                            case "ENE":
                                angin_berhembus = "Timur-Timur Laut";
                                break;
                            case "E":
                                angin_berhembus = "Timur";
                                break;
                            case "ESE":
                                angin_berhembus = "Timur-Tenggara";
                                break;
                            case "SE":
                                angin_berhembus = "Tenggara";
                                break;
                            case "SSE":
                                angin_berhembus = "Selatan-Tenggara";
                                break;
                            case "S":
                                angin_berhembus = "Selatan";
                                break;
                            case "SSW":
                                angin_berhembus = "Selatan-Barat Daya";
                                break;
                            case "SW":
                                angin_berhembus = "Barat daya";
                                break;
                            case "WSW":
                                angin_berhembus = "Barat-Barat Daya";
                                break;
                            case "W":
                                angin_berhembus = "Barat";
                                break;
                            case "WNW":
                                angin_berhembus = "Barat-Barat Laut";
                                break;
                            case "NW":
                                angin_berhembus = "Barat laut";
                                break;
                            case "NNW":
                                angin_berhembus = "Utara-Barat Laut";
                                break;
                            case "VARIABLE":
                                angin_berhembus = "Berubah-ubah";
                                break;
                            default:
                                angin_berhembus = "Tidak Diketahui";
                        }


                        const cuacaHariIni = area.querySelector("parameter[description='Weather']");
                        const cuaca_result = cuacaHariIni.querySelector("timerange:last-child");
                        const cuaca = cuaca_result.querySelector("value[unit='icon']");
                        const lap_cuaca = cuaca?.textContent;
                        let cuaca_hari_ini;
                        let main_link;
                        switch (lap_cuaca) {
                            case "0":
                                cuaca_hari_ini = "Cerah";
                                main_link = "cerah.png";
                                break;
                            case "1":
                                cuaca_hari_ini = "Cerah Berawan";
                                main_link = "cerah_berawan.jpg";
                                break;
                            case "2":
                                cuaca_hari_ini = "Cerah Berawan";
                                main_link = "cerah_berawan.jpg";
                                break;
                            case "3":
                                cuaca_hari_ini = "Berawan";
                                main_link = "berawan-pm.png";
                                break;
                            case "4":
                                cuaca_hari_ini = "Berawan Tebal";
                                main_link = "berawan tebal-pm.png";
                                break;
                            case "5":
                                cuaca_hari_ini = "Udara Kabur";
                                main_link = "berawan tebal-pm.png";
                                break;
                            case "10":
                                cuaca_hari_ini = "Asap";
                                main_link = "berawan tebal-pm.png";
                                break;
                            case "45":
                                cuaca_hari_ini = "Kabut";
                                main_link = "berawan tebal-pm.png";
                                break;
                            case "60":
                                cuaca_hari_ini = "Hujan Ringan";
                                main_link = "hujan ringan-pm.png";
                                break;
                            case "61":
                                cuaca_hari_ini = "Hujan Sedang";
                                main_link = "hujan sedang-pm.png";
                                break;
                            case "63":
                                cuaca_hari_ini = " Hujan Lebat";
                                main_link = "hujan petir-pm.png";
                                break;
                            case "80":
                                cuaca_hari_ini = " Hujan Lokal";
                                main_link = "hujan ringan-pm.png";
                                break;
                            case "95":
                                cuaca_hari_ini = " Hujan Petir";
                                main_link = "hujan petir-pm.png";
                                break;
                            case "97":
                                cuaca_hari_ini = " Hujan Petir";
                                main_link = "hujan petir-pm.png";
                                break;

                            default:
                                cuaca_hari_ini = "Not Found"
                                main_link = "cerah.png";
                                break;
                        }





                        if (namaDaerah && jam && menit && cuaca_hari_ini && hasil_suhu && kecepatanAngin &&
                            kelembaban && angin_berhembus) {
                            const link = "{{ asset('upload/') }}/" + main_link;
                            const weatherCard = document.createElement("div");
                            weatherCard.className = "swiper-slide";
                            weatherCard.innerHTML = `
                              <div class=''>
                                  <div class="card mati " style="color: #4B515D; border-radius: 10px;height:100%;background-color:white !important;">
                                      <div class="card-body p-2">
                                          <div class="d-flex">
                                              <h6 class="flex-grow-1">${namaDaerah}</h6>
                                              <h6>${jam}:${menit}</h6>
                                          </div>
                                          <div class="d-flex mt-2 flex-column text-center">
                                              <h6 class="tit mb-0 font-weight-bold" style="color: #1C2331;">${cuaca_hari_ini}</h6>
                                              <span class="smalls" style="color: #868B94">${hasil_suhu}°C</span>
                                          </div>
                                          <div class="d-flex align-items-center mt-3">
                                              <div class="flex-grow-1" style="font-size: 1rem;">
                                                  <div class='atas'><i class="fas fa-wind fa-fw" style="color: #868B94;"></i> <span class="ms-1">${kecepatanAngin} km/h</span></div>
                                                  <div class='atas'><i class="fas fa-tint fa-fw" style="color: #868B94;"></i> <span class="ms-1">${kelembaban}%</span></div>
                                                  <div class='atas'><i class="fas fa-location-arrow fa-fw" style="color: #868B94;"></i> <span class="ms-1">${angin_berhembus}</span></div>
                                              </div>
                                              <div>
                                                  <img src="${link}" width="50px">
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          `;

                            // Tambahkan elemen HTML ke dalam swiper wrapper
                            swiperWrapper.appendChild(weatherCard);
                        }
                    } catch (error) {
                        console.error("Error parsing XML content:", error);
                    }
                });

            })
            .catch(error => {
                console.error("Error fetching XML:", error);
            });
    </script>
    <script>
        setInterval(function() {
            location.reload();
        }, 300000);
    </script>
@endsection