



<style>
#wDeskTop {
    display: none; /* sembunyi di mobile */
}
@media (min-width: 768px) {
    #wDeskTop {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .82rem;
        color: var(--slate-600, #475569);
        font-weight: 500;
        white-space: nowrap;
    }
}
#wDeskTop .wd-ikon  { font-size: 1.2rem; line-height: 1; }
#wDeskTop .wd-suhu  { font-size: .95rem; font-weight: 800; color: var(--slate-800, #1e293b); }
#wDeskTop .wd-sep   { opacity: .3; margin: 0 2px; }
#wDeskTop .wd-kota  { color: var(--slate-400, #94a3b8); font-size: .75rem; }
@keyframes wDSpin2  { to { transform: rotate(360deg); } }
</style>

<div id="wDeskTop">
    <!-- Loading -->
    <div id="wDTLoading" style="display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:.75rem;">
        <div style="width:12px;height:12px;border:2px solid #e2e8f0;border-top-color:#0d9488;
            border-radius:50%;animation:wDSpin2 .7s linear infinite;"></div>
        Memuat cuaca...
    </div>

    <!-- Isi -->
    <div id="wDTIsi" style="display:none; align-items:center; gap:6px;">
        <span id="wDTIkon" class="wd-ikon">🌤️</span>
        <span id="wDTSuhu" class="wd-suhu">--°C</span>
        <span class="wd-sep">·</span>
        <span id="wDTDesc" style="color:var(--slate-500,#64748b);">--</span>
        <span class="wd-sep">·</span>
        <span id="wDTKota" class="wd-kota">--</span>
    </div>
</div>

<script>
(function() {
    function wmoIkon(c) {
        if (c===0) return '☀️'; if (c<=2) return '🌤️'; if (c===3) return '☁️';
        if (c<=48) return '🌫️'; if (c<=55) return '🌦️'; if (c<=65) return '🌧️';
        if (c<=77) return '❄️'; if (c<=82) return '🌧️'; if (c<=99) return '⛈️';
        return '🌡️';
    }

    async function loadCuacaDesktop() {
        try {
            var res  = await fetch('<?php echo base_url("pengaturan/get_cuaca"); ?>');
            var data = await res.json();

            document.getElementById('wDTLoading').style.display = 'none';

            if (data.error) {
                document.getElementById('wDTIsi').style.display  = 'flex';
                document.getElementById('wDTIkon').textContent   = '🌐';
                document.getElementById('wDTSuhu').textContent   = '--°C';
                document.getElementById('wDTDesc').textContent   = 'Belum diatur';
                document.getElementById('wDTKota').textContent   = '';
                return;
            }

            document.getElementById('wDTIkon').textContent  = wmoIkon(data.kode_cuaca);
            document.getElementById('wDTSuhu').textContent  = Math.round(data.suhu) + '°C';
            document.getElementById('wDTDesc').textContent  = data.deskripsi;

            var kParts = (data.kota || '').split(',');
            document.getElementById('wDTKota').textContent  = kParts.slice(0, 2).join(', ').trim();

            document.getElementById('wDTIsi').style.display = 'flex';

        } catch(e) {
            document.getElementById('wDTLoading').style.display = 'none';
            document.getElementById('wDTIsi').style.display     = 'flex';
            document.getElementById('wDTIkon').textContent      = '🌐';
            document.getElementById('wDTSuhu').textContent      = '--°C';
            document.getElementById('wDTDesc').textContent      = 'Error';
        }
    }

    loadCuacaDesktop();
    setInterval(loadCuacaDesktop, 30 * 60 * 1000);
})();
</script>


  <!-- Kanan: Cuaca + Info RT inline -->
    <div class="d-flex align-items-center gap-3 flex-wrap">

      <!-- Widget cuaca inline (teks saja, tanpa card) -->
      <?php $this->load->view('dashboard/_widget_cuaca_desktop'); ?>