<script type="text/javascript">
(function ($) {
    $.fn.ideaboxWeather = function (settings) {
        var defaults = {
            location: 'Merauke',
            themecolor: '#2f7091',
            todaytext: 'Hari Ini',
            imgpath: 'https://openweathermap.org/img/wn/', // Icon dari OpenWeather
            template: 'vertical',
            lang: 'id',
            metric: 'C',
            days: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]
        };
        var settings = $.extend(defaults, settings);

        return this.each(function () {
            var $container = $(this);
            var modulid = "#" + $container.attr("id");

            // Tambahkan class agar sesuai dengan CSS Anda
            $container.addClass("ideaboxWeather ow-border");
            $container.css("background", settings.themecolor);

            function getWeather() {
                var apiKey = "b318ee3082fcae85097e680e36b9c749";
                // API 2.5 Forecast (JSON lebih stabil)
                var apiUrl = "https://api.openweathermap.org/data/2.5/forecast?q=" + settings.location + "&units=metric&lang=" + settings.lang + "&appid=" + apiKey;

                $.getJSON(apiUrl, function (data) {
                    var sstr = "";
                    var locationName = data.city.name;
                    
                    // Filter: Ambil data jam 12 siang untuk setiap hari
                    var dailyData = data.list.filter(function(item) {
                        return item.dt_txt.includes("12:00:00");
                    });

                    $.each(dailyData, function (index, val) {
                        var d = new Date(val.dt * 1000);
                        var n = d.getDay();
                        var temp = Math.round(val.main.temp) + "&deg;" + settings.metric;
                        var desc = ucFirst(val.weather[0].description);
                        var iconCode = val.weather[0].icon;
                        var iconUrl = settings.imgpath + iconCode + "@2x.png";

                        if (index == 0) {
                            // Struktur HTML sesuai CSS .ow-today
                            sstr += '<div class="ow-today">' +
                                '<span><img src="' + iconUrl + '"/></span>' +
                                '<h2>' + temp + '<span>' + desc + '</span><b>' + locationName + ' - ' + settings.todaytext + '</b></h2>' +
                                '</div>';
                        } else {
                            // Struktur HTML sesuai CSS .ow-days
                            sstr += '<div class="ow-days">' +
                                '<span>' + settings.days[n] + '</span>' +
                                '<p><img src="' + iconUrl + '" title="' + desc + '"> <b>' + temp + '</b></p>' +
                                '</div>';
                        }
                    });

                    $container.html(sstr);
                }).fail(function() {
                    $container.html("<div style='padding:20px;'>Gagal memuat data cuaca.</div>");
                });
            }

            function ucFirst(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            getWeather();
        });
    };
})(jQuery);

$(document).ready(function () {
    // Jalankan plugin untuk Sagu89 News
    $('#example1').ideaboxWeather({
        location: 'Merauke',
        themecolor: '#2f7091' // Menyesuaikan warna di CSS Anda
    });
});
</script>

<div id="example1"></div>