<?php
// views/dashboard/_widget_cuaca.php
// Widget cuaca mini card — klik untuk dropdown prakiraan
?>
<style>
#wWrap {
    position: relative;
    flex-shrink: 0;
    font-family: inherit;
    z-index: 100;
    /* Desktop: fixed width di sebelah sapaan */
    width: 260px;
}

/* ── Card utama ── */
#wCard {
    background: linear-gradient(135deg, #0b5a52 0%, #0b7a6e 60%, #0d9488 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 10px 13px 9px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(13,148,136,.28);
    transition: box-shadow .2s, transform .15s;
    user-select: none;
    position: relative;
    overflow: hidden;
}
#wCard:hover  { box-shadow: 0 6px 22px rgba(13,148,136,.38); transform: translateY(-1px); }
#wCard:active { transform: scale(.98); }

/* Dekorasi lingkaran */
#wCard::before {
    content: '';
    position: absolute; top: -25px; right: -25px;
    width: 90px; height: 90px; border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}

/* Baris atas: ikon + suhu + deskripsi + arrow */
.wc-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.wc-lokasi {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    opacity: .75;
    font-weight: 500;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-lokasi i { font-size: .58rem; flex-shrink: 0; opacity: .8; }
.wc-ikon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.wc-suhu {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
}
.wc-satuan { font-size: .72rem; font-weight: 600; opacity: .75; }
.wc-desc {
    font-size: .65rem;
    font-weight: 600;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 2px 7px;
    white-space: nowrap;
}
.wc-arrow {
    margin-left: auto;
    font-size: .6rem;
    opacity: .55;
    transition: transform .25s ease;
    flex-shrink: 0;
}
#wCard.open .wc-arrow { transform: rotate(180deg); }

/* 3 detail mini */
.wc-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.wc-d {
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    padding: 5px 4px;
    text-align: center;
}
.wc-d-lbl { font-size: .53rem; opacity: .65; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px; white-space: nowrap; }
.wc-d-val { font-size: .75rem; font-weight: 800; }

/* Loading state */
#wCardLoading {
    background: linear-gradient(135deg, #0b5a52, #0d9488);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: .73rem;
}
.w-dot-spin {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.8);
    border-radius: 50%;
    animation: wSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes wSpin { to { transform: rotate(360deg); } }

/* ── Dropdown prakiraan ── */
#wDropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0; left: 0;
    background: linear-gradient(160deg, #0b5a52 0%, #0b7a6e 55%, #0d9488 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 10px 32px rgba(0,0,0,.22), 0 3px 10px rgba(13,148,136,.20);
    overflow: hidden;
    padding: 10px 12px 12px;

    opacity: 0;
    transform: translateY(-5px) scale(.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
#wDropdown.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wd-fc-label {
    font-size: .54rem;
    opacity: .55;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wd-fc-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.12); }

.wd-fc-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
    padding-bottom: 1px;
}
.wd-fc-scroll::-webkit-scrollbar { height: 2px; }
.wd-fc-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 99px; }

.wd-fc-item {
    flex-shrink: 0;
    text-align: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    padding: 5px 7px;
    min-width: 40px;
    transition: background .15s, transform .15s;
}
.wd-fc-item:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.wd-fc-jam  { font-size: .55rem; opacity: .65; margin-bottom: 2px; }
.wd-fc-ikon { font-size: .85rem; line-height: 1; margin: 1px 0; }
.wd-fc-suhu { font-size: .67rem; font-weight: 800; }
.wd-fc-hj   { font-size: .52rem; opacity: .6; margin-top: 1px; }

/* ── Responsive ── */
@media (max-width: 767px) {
    #wWrap  { width: 100%; margin-bottom: 10px; }
    #wCard  { border-radius: 12px; }
    #wDropdown { border-radius: 12px; }
    .wc-suhu { font-size: 1.2rem !important; }
    .wc-ikon { font-size: 1.4rem !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    #wWrap { width: 240px; }
}
@media (min-width: 1200px) {
    #wWrap { width: 270px; }
}
</style>

<div id="wWrap">

    <!-- Loading -->
    <div id="wCardLoading">
        <div class="w-dot-spin"></div>
        Memuat cuaca...
    </div>

    <!-- Card utama -->
    <div id="wCard" style="display:none;" onclick="wToggle()">
        <!-- Baris atas -->
        <div class="wc-top">
            <span id="wIkon" class="wc-ikon">🌤️</span>
            <span id="wSuhu" class="wc-suhu">--</span>
            <span class="wc-satuan">°C</span>
            <span id="wDesc" class="wc-desc">--</span>
            <i id="wArrow" class="bi bi-chevron-down wc-arrow"></i>
        </div>
        <!-- Lokasi -->
        <div class="wc-lokasi"><i class="bi bi-geo-alt-fill"></i><span id="wKota">--</span></div>
        <!-- 3 detail -->
        <div class="wc-details">
            <div class="wc-d">
                <div class="wc-d-lbl">💧 Lembap</div>
                <div id="wLembap" class="wc-d-val">--%</div>
            </div>
            <div class="wc-d">
                <div class="wc-d-lbl">💨 Angin</div>
                <div id="wAngin" class="wc-d-val">--</div>
            </div>
            <div class="wc-d">
                <div class="wc-d-lbl">🌧️ Hujan</div>
                <div id="wHujan" class="wc-d-val">--</div>
            </div>
        </div>
    </div>

    <!-- Dropdown prakiraan -->
    <div id="wDropdown">
        <div class="wd-fc-label">Prakiraan Hari Ini</div>
        <div id="wPrakiraan" class="wd-fc-scroll"></div>
    </div>
</div>

<script>
(function() {
    var _open = false;

    window.wToggle = function() {
        _open = !_open;
        document.getElementById('wCard').classList.toggle('open', _open);
        document.getElementById('wDropdown').classList.toggle('open', _open);
    };

    document.addEventListener('click', function(e) {
        if (!document.getElementById('wWrap').contains(e.target) && _open) {
            _open = false;
            document.getElementById('wCard').classList.remove('open');
            document.getElementById('wDropdown').classList.remove('open');
        }
    });

    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 '🌡️';
    }

    function wmoGrad(c) {
        if (c === 0) return 'linear-gradient(135deg,#0b5a52,#b45309)';
        if (c <= 2)  return 'linear-gradient(135deg,#0b5a52,#0d9488)';
        if (c <= 3)  return 'linear-gradient(135deg,#1e3a5f,#475569)';
        if (c <= 65) return 'linear-gradient(135deg,#0b3d52,#0369a1)';
        if (c <= 99) return 'linear-gradient(135deg,#2d1b69,#7c3aed)';
        return 'linear-gradient(135deg,#0b5a52,#0d9488)';
    }

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

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

            if (data.error) {
                var c = document.getElementById('wCard');
                c.style.display = 'block';
                document.getElementById('wIkon').textContent = '🌐';
                document.getElementById('wSuhu').textContent = '--';
                document.getElementById('wDesc').textContent = 'Belum diatur';
                return;
            }

            var ikon = wmoIkon(data.kode_cuaca);
            document.getElementById('wIkon').textContent   = ikon;
            document.getElementById('wSuhu').textContent   = Math.round(data.suhu);
            document.getElementById('wDesc').textContent   = data.deskripsi;
            document.getElementById('wLembap').textContent = data.kelembapan + '%';
            document.getElementById('wAngin').textContent  = data.angin + ' km/j';
            document.getElementById('wHujan').textContent  = data.hujan + ' mm';
            document.getElementById('wKota').textContent  = (data.kota || '').split(',').slice(0,3).join(', ').trim();

            document.getElementById('wCard').style.background = wmoGrad(data.kode_cuaca);
            document.getElementById('wCard').style.display    = 'block';

            // Prakiraan
            document.getElementById('wPrakiraan').innerHTML =
                (data.prakiraan || []).map(function(p) {
                    return '<div class="wd-fc-item">'
                        + '<div class="wd-fc-jam">'  + p.jam + '</div>'
                        + '<div class="wd-fc-ikon">' + wmoIkon(p.kode) + '</div>'
                        + '<div class="wd-fc-suhu">' + Math.round(p.suhu) + '°</div>'
                        + '<div class="wd-fc-hj">💧'  + p.hujan + '%</div>'
                        + '</div>';
                }).join('');

        } catch(e) {
            document.getElementById('wCardLoading').style.display = 'none';
            document.getElementById('wCard').style.display = 'block';
            document.getElementById('wIkon').textContent = '🌐';
            document.getElementById('wSuhu').textContent = '--';
            document.getElementById('wDesc').textContent = 'Error';
        }
    }

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