<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Title</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    <style>
        body {
            font-family: 'Roboto';
            background-color: #f0f0f0;
            color: #4D869C;
            margin: 0;
            padding: 0;
        }

        .sidebar {
            height: 100%;
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #EEF7FF;
            overflow-x: hidden;
            padding-top: 20px;
            z-index: 1;
            text-align: justify;
            transition: all 0.3s ease;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Menambahkan efek bayangan */
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar li {
            margin-bottom: 10px;
        }

        .sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 18px;
            color: #0f0c0c;
            display: block;
            transition: all 0.3s ease;
        }

        .sidebar a:hover, .sidebar .active {
            background-color: #7AB2B2;
            color: #fff;
            border-radius: 10px;
            box-shadow: 2px 2px 2px #888888;
        }

        .content {
            margin-left: 250px;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }

        .navbar {
            background-color: #ffffff;
            color: #0f0c0c;
            border-bottom: 1px solid #ddd;
        }

        .navbar-brand {
            color: #970767;
        }

        .navbar-nav .nav-link {
            color: #970767;
        }

        .navbar-nav .nav-link:hover {
            color: #ccc;
        }

        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        #content {
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .btn-custom {
            background-color: #7AB2B2;
            color: #fff;
            border: none;
        }

        .btn-custom:hover {
            background-color: #4D869C;
            color: #fff;
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }

            .sidebar ul {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }

            .sidebar li {
                margin-bottom: 0;
            }

            .content {
                margin-left: 0;
            }

            .footer {
                position: relative;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="sidebar">
        <div class="user-info text-center mb-4">
            @if (Auth::check())
                <p class="text-black">Selamat datang, {{ Auth::user()->name }}!</p>
            @endif
        </div>
        <ul>
            <li><a href="#" id="ui"><i class="fas fa-eye"></i>Live Monitoring</a></li>
            <li><a href="#" id="kontrol"><i class="fas fa-cogs"></i> Kontrol</a></li>
            <li><a href="#" id="monitoring"><i class="fas fa-chart-line"></i>Monitoring Data</a></li>
            <li><a href="#" id="blog"><i class="fas fa-newspaper"></i> Daftar Katalog</a></li>
            {{-- <li><a href="#" id="riwayat"><i class="fas fa-history"></i> Riwayat Data</a></li> --}}
        </ul>
    </div>

    <!-- Content -->
    <div class="content">
        <div class="container">
            <div class="row mb-4">
                <div class="col-md-12">
                    @if (Auth::check())
                        <!-- Removed user info from here -->
                    @endif
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8" id="content" style="text-align: center;">
                    <h2 style="margin-bottom: 20px;">Selamat datang di halaman utama dari aplikasi website monitoring dan kontrol Mesin Nutrisi</h2>
                    <p>Pilih menu sesuai kebutuhan anda. Menu terletak di sebelah kiri.</p>

                    <div style="margin-top: 20px;">
                        <button class="btn btn-custom" onclick="getLocation()">
                            <i class="fas fa-map-marker-alt"></i> Tampilkan Lokasi Hidroponik
                        </button>
                    </div>

                    <div id="lokasi-terpilih" style="margin-top: 20px;">
                        <!-- Informasi lokasi akan ditampilkan di sini -->
                    </div>
                    <img src="/images/hidro.png" alt="Tanaman Hidroponik" style="margin-top: 20px; width: 100%; max-width: 400px;">
                </div>

                <script>
                function getLocation() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(showPosition, showError);
                    } else {
                        document.getElementById("lokasi-terpilih").innerHTML = "Geolokasi tidak didukung oleh browser ini.";
                    }
                }

                function showPosition(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;

                    // Gunakan layanan geocoding untuk mengonversi koordinat ke alamat
                    fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=id`)
                        .then(response => response.json())
                        .then(data => {
                            var address = data.localityInfo.administrative[3].name + ", " + // Desa
                                          data.localityInfo.administrative[2].name + ", " + // Kecamatan
                                          data.localityInfo.administrative[1].name + ", " + // Kabupaten
                                          data.localityInfo.administrative[0].name;          // Kota
                            var fullAddress = "Lokasi Hidroponik Anda: " + address;
                            var coordinates = "Koordinat: " + latitude + ", " + longitude;
                            document.getElementById("lokasi-terpilih").innerHTML = "<p>" + fullAddress + "</p>" +
                                                                                  "<p>" + coordinates + "</p>";
                        })
                        .catch(error => {
                            document.getElementById("lokasi-terpilih").innerHTML = "<p>Tidak dapat mendapatkan alamat lokasi.</p>";
                        });
                }

                function showError(error) {
                    switch(error.code) {
                        case error.PERMISSION_DENIED:
                            document.getElementById("lokasi-terpilih").innerHTML = "Pengguna menolak permintaan geolokasi."
                            break;
                        case error.POSITION_UNAVAILABLE:
                            document.getElementById("lokasi-terpilih").innerHTML = "Informasi lokasi tidak tersedia."
                            break;
                        case error.TIMEOUT:
                            document.getElementById("lokasi-terpilih").innerHTML = "Permintaan untuk mendapatkan lokasi pengguna habis."
                            break;
                        case error.UNKNOWN_ERROR:
                            document.getElementById("lokasi-terpilih").innerHTML = "Terjadi kesalahan yang tidak diketahui."
                            break;
                    }
                }
                </script>
            </div>
        </div>
    </div>

    <!-- External JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#monitoring").click(function(e) {
                e.preventDefault();
                $(".sidebar a").removeClass("active");
                $(this).addClass("active");
                // Menggunakan AJAX untuk memuat data monitoring
                $.get("/monitoring", function(data) {
                    $(".content").html(data);
                });
            });

            $("#kontrol").click(function(e) {
                e.preventDefault();
                $(".sidebar a").removeClass("active");
                $(this).addClass("active");
                // Menggunakan AJAX untuk memuat UI dari alamat lokal
                $(".content").html('<iframe src="http://localhost:1880/ui/#!/0?socketid=ghkc4MLjCQ4dDomWAAAF" style="width:100%; height:100vh;" frameborder="0"></iframe>');
            });

            $("#ui").click(function(e) {
                e.preventDefault();
                $(".sidebar a").removeClass("active");
                $(this).addClass("active");
                // Menggunakan AJAX untuk memuat UI dari alamat lokal
                $(".content").html('<iframe src="http://localhost:1880/ui/#!/1?socketid=ghkc4MLjCQ4dDomWAAAF" style="width:100%; height:100vh;" frameborder="0"></iframe>');
            });

            $("#blog").click(function(e) {
                e.preventDefault();
                $(".sidebar a").removeClass("active");
                $(this).addClass("active");
                // Ganti dengan URL yang benar untuk tampilan blog
                $.get("/blogs", function(data) {
                    $(".content").html(data);
                });
            });

            $("#riwayat").click(function(e) {
                e.preventDefault();
                $(".sidebar a").removeClass("active");
                $(this).addClass("active");
                // Menggunakan AJAX untuk memuat data riwayat
                $.get("/riwayat", function(data) {
                    $(".content").html(data);
                });
            });
        });
    </script>
</body>
</html>
