{
    "success": true,
    "date": {
        "gregorian": {
            "date": "2026-11-01",
            "day": 1,
            "month": 11,
            "month_name": "Noyabr",
            "year": 2026,
            "weekday": "Bazar",
            "weekday_short": "B",
            "formatted": "1 Noyabr 2026"
        },
        "hijri": {
            "day": 21,
            "month": 5,
            "month_name_az": "Cəmadiül-əvvəl",
            "month_name_ar": "جمادى الأولى",
            "year": 1448,
            "formatted": "21 Cəmadiül-əvvəl 1448",
            "formatted_ar": "21 جمادى الأولى 1448"
        }
    },
    "location": {
        "city_key": "babek",
        "city_name": "Babək",
        "lat": 39.1508,
        "lng": 45.4486,
        "timezone": "Asia\/Baku (UTC+4)"
    },
    "prayer_times": {
        "subh": "05:59",
        "gunes": "07:28",
        "zohr": "12:42",
        "esr": "15:50",
        "maghrib": "18:16",
        "gecayari": "00:07"
    },
    "current_prayer": {
        "name": "Əsr",
        "status": "active"
    },
    "next_prayer": {
        "name": "Məğrib",
        "time": "18:16",
        "remaining_formatted": "01:53:32",
        "remaining_seconds": 6812,
        "remaining_minutes": 114
    },
    "today_events": [],
    "today_zikr": {
        "name": "Ya Zəl Cəlali vəl İkram",
        "arabic": "يَا ذَا الْجَلالِ وَالإِكْرامِ",
        "day": "Bazar",
        "count": 100
    },
    "source": "SonÜmid TV (https:\/\/sonumidtv.az)"
}<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dini Təqvim & Namaz Vaxtları - SonÜmid TV Vidcet</title>
    <!-- Tailwind CSS CDN for Standalone Widget -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Amiri:wght@700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background: transparent;
            margin: 0;
            padding: 8px;
        }
        .font-arabic { font-family: 'Amiri', serif; }
        .active-prayer-card {
            border-color: #10b981 !important;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 78, 59, 0.4)) !important;
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
        }
    </style>
</head>
<body class="p-1 sm:p-2">

<div class="max-w-md mx-auto bg-gradient-to-br from-slate-950 via-teal-950 to-slate-900 rounded-2xl border-2 border-emerald-600/80 shadow-2xl text-white overflow-hidden p-4 sm:p-5 space-y-4">
    
    <!-- Header: Logo, Title & City Selector -->
    <div class="flex items-center justify-between border-b border-emerald-800/80 pb-3 gap-2">
        <a href="https://sonumidtv.az/namaz-vaxtlari.php" target="_blank" class="flex items-center gap-2 group">
            <div class="w-8 h-8 rounded-xl bg-emerald-500 text-slate-950 flex items-center justify-center font-black text-sm shadow group-hover:scale-105 transition-transform">
                <i class="fa-solid fa-kaaba"></i>
            </div>
            <div>
                <h1 class="text-xs font-black tracking-wide uppercase text-white flex items-center gap-1.5">
                    <span>SonÜmid TV</span>
                    <span class="text-[9px] px-1.5 py-0.2 bg-amber-400 text-slate-950 font-bold rounded-full">Təqvim</span>
                </h1>
                <p class="text-[10px] text-emerald-300 font-medium">Şiə Namaz Vaxtları</p>
            </div>
        </a>

        <!-- City Selector -->
        <div>
            <select id="widgetCitySelect" onchange="changeWidgetCity(this.value)" class="bg-slate-900/90 text-white text-[11px] font-bold py-1.5 px-2.5 rounded-xl border border-emerald-700/80 focus:outline-none focus:border-emerald-400 cursor-pointer">
                                    <option value="baku" >Bakı</option>
                                    <option value="gence" >Gəncə</option>
                                    <option value="sumqayit" >Sumqayıt</option>
                                    <option value="xirdalan" >Xırdalan (Abşeron)</option>
                                    <option value="naxcivan" >Naxçıvan</option>
                                    <option value="seki" >Şəki</option>
                                    <option value="lenkeran" >Lənkəran</option>
                                    <option value="naftalan" >Naftalan</option>
                                    <option value="susa" >Şuşa</option>
                                    <option value="xankendi" >Xankəndi</option>
                                    <option value="lacin" >Laçın</option>
                                    <option value="kelbecer" >Kəlbəcər</option>
                                    <option value="agdam" >Ağdam</option>
                                    <option value="fizuli" >Füzuli</option>
                                    <option value="cebrayil" >Cəbrayıl</option>
                                    <option value="zengilan" >Zəngilan</option>
                                    <option value="qubadli" >Qubadlı</option>
                                    <option value="berde" >Bərdə</option>
                                    <option value="mingecevir" >Mingəçevir</option>
                                    <option value="xocali" >Xocalı</option>
                                    <option value="quba" >Quba</option>
                                    <option value="xocavend" >Xocavənd</option>
                                    <option value="agdere" >Ağdərə</option>
                                    <option value="sirvan" >Şirvan</option>
                                    <option value="xachmaz" >Xaçmaz</option>
                                    <option value="babek" selected>Babək</option>
                                    <option value="shamaxi" >Şamaxı</option>
                                    <option value="culfa" >Culfa</option>
                                    <option value="qazax" >Qazax</option>
                                    <option value="ordubad" >Ordubad</option>
                                    <option value="sederek" >Sədərək</option>
                                    <option value="sahbuz" >Şahbuz</option>
                                    <option value="serur" >Şərur</option>
                                    <option value="kengerli" >Kəngərli (Qıvraqlı)</option>
                                    <option value="qusar" >Qusar</option>
                                    <option value="xudat" >Xudat</option>
                                    <option value="sabran" >Şabran</option>
                                    <option value="siyezen" >Siyəzən</option>
                                    <option value="xizi" >Xızı</option>
                                    <option value="zaqatala" >Zaqatala</option>
                                    <option value="balaken" >Balakən</option>
                                    <option value="qax" >Qax</option>
                                    <option value="oguz" >Oğuz</option>
                                    <option value="qebele" >Qəbələ</option>
                                    <option value="astara" >Astara</option>
                                    <option value="masalli" >Masallı</option>
                                    <option value="lerik" >Lerik</option>
                                    <option value="yardimli" >Yardımlı</option>
                                    <option value="celilabad" >Cəlilabad</option>
                                    <option value="bilesuvar" >Biləsuvar</option>
                                    <option value="agstafa" >Ağstafa</option>
                                    <option value="tovuz" >Tovuz</option>
                                    <option value="semkir" >Şəmkir</option>
                                    <option value="gedebey" >Gədəbəy</option>
                                    <option value="daskesen" >Daşkəsən</option>
                                    <option value="goygol" >Göygöl</option>
                                    <option value="samux" >Samux</option>
                                    <option value="goranboy" >Goranboy</option>
                                    <option value="terter" >Tərtər</option>
                                    <option value="agcabedi" >Ağcabədi</option>
                                    <option value="beyleqan" >Beyləqan</option>
                                    <option value="imisli" >İmişli</option>
                                    <option value="saatli" >Saatlı</option>
                                    <option value="sabirabad" >Sabirabad</option>
                                    <option value="salyan" >Salyan</option>
                                    <option value="neftcala" >Neftçala</option>
                                    <option value="kurdemir" >Kürdəmir</option>
                                    <option value="zerdab" >Zərdab</option>
                                    <option value="ucar" >Ucar</option>
                                    <option value="goycay" >Göyçay</option>
                                    <option value="agdas" >Ağdaş</option>
                                    <option value="yevlax" >Yevlax</option>
                                    <option value="ismayilli" >İsmayıllı</option>
                                    <option value="agsu" >Ağsu</option>
                                    <option value="qobustan" >Qobustan</option>
                                    <option value="haciqabul" >Hacıqabul</option>
                            </select>
        </div>
    </div>

    <!-- Date Card (Gregorian + Hijri) -->
    <div class="bg-white/5 border border-emerald-700/40 rounded-xl p-3 flex items-center justify-between text-center gap-2">
        <div class="text-left">
            <span class="text-[10px] uppercase font-bold text-slate-400 block">Miladi Tarix</span>
            <span id="widgetGregorian" class="text-xs sm:text-sm font-extrabold text-white">...</span>
        </div>
        <div class="h-8 w-px bg-emerald-700/50"></div>
        <div class="text-right">
            <span class="text-[10px] uppercase font-bold text-amber-300 block">Hicri-Qəməri</span>
            <span id="widgetHijri" class="text-xs sm:text-sm font-extrabold text-amber-400">...</span>
        </div>
    </div>

    <!-- Today's Religious Event (If Any) -->
    <div id="widgetEventContainer" class="hidden"></div>

    <!-- Next Prayer Countdown Banner -->
    <div class="bg-gradient-to-r from-emerald-900/60 to-teal-900/60 border border-emerald-500/50 rounded-xl p-2.5 px-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></div>
            <span class="text-xs text-slate-300 font-medium">Növbəti: <strong id="widgetNextPrayerName" class="text-emerald-300 font-bold">...</strong></span>
        </div>
        <div class="font-mono font-bold text-xs sm:text-sm text-amber-300 flex items-center gap-1.5">
            <i class="fa-regular fa-clock text-[10px]"></i>
            <span id="widgetCountdown">--:--:--</span>
        </div>
    </div>

    <!-- Prayer Times Grid (6 Times) -->
    <div class="grid grid-cols-3 gap-2">
        <div id="card_subh" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Sübh</span>
            <span id="time_subh" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
        <div id="card_gunes" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Gün çıxır</span>
            <span id="time_gunes" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
        <div id="card_zohr" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Zöhr</span>
            <span id="time_zohr" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
        <div id="card_esr" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Əsr</span>
            <span id="time_esr" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
        <div id="card_maghrib" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Məğrib</span>
            <span id="time_maghrib" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
        <div id="card_gecayari" class="bg-slate-900/80 border border-slate-700/80 rounded-xl p-2 text-center transition-all">
            <span class="text-[10px] text-slate-400 block font-semibold">Gecəyarı</span>
            <span id="time_gecayari" class="text-sm font-black font-mono text-white block mt-0.5">--:--</span>
        </div>
    </div>

    <!-- Daily Dhikr -->
    <div id="widgetZikrBox" class="bg-slate-900/90 border border-amber-500/40 rounded-xl p-2.5 text-center space-y-1">
        <span class="text-[10px] font-bold text-amber-300 block">GÜNÜN ZİKRİ (100 DƏFƏ)</span>
        <div id="widgetZikrArabic" class="font-arabic text-sm text-white font-bold leading-relaxed">...</div>
        <div id="widgetZikrName" class="text-[11px] text-slate-300 font-semibold">...</div>
    </div>

    <!-- Footer: Link to SonUmid TV -->
    <div class="pt-2 border-t border-emerald-900/80 flex items-center justify-between text-[10px] text-slate-400">
        <span class="flex items-center gap-1">
            <i class="fa-solid fa-code text-emerald-400"></i>
            <span>SonÜmid TV Açıq API</span>
        </span>
        <a href="https://sonumidtv.az/namaz-vaxtlari.php" target="_blank" class="text-emerald-400 hover:text-emerald-300 font-bold flex items-center gap-1 transition-colors">
            <span>Aylıq Cədvəl & PDF</span>
            <i class="fa-solid fa-arrow-up-right-from-square text-[9px]"></i>
        </a>
    </div>

</div>

<script>
    let currentCity = 'babek';
    let prayerData = null;
    let timerInterval = null;

    async function loadWidgetData(city) {
        try {
            const res = await fetch(`teqvim.php?city=${encodeURIComponent(city)}`);
            const data = await res.json();
            if (!data.success) return;
            prayerData = data;
            renderWidgetUI(data);
        } catch(e) {
            console.error('Təqvim API yüklənmə xətası', e);
        }
    }

    function renderWidgetUI(data) {
        // Date
        document.getElementById('widgetGregorian').textContent = `${data.date.gregorian.day} ${data.date.gregorian.month_name} (${data.date.gregorian.weekday_short})`;
        document.getElementById('widgetHijri').textContent = data.date.hijri.formatted;

        // Times
        document.getElementById('time_subh').textContent = data.prayer_times.subh;
        document.getElementById('time_gunes').textContent = data.prayer_times.gunes;
        document.getElementById('time_zohr').textContent = data.prayer_times.zohr;
        document.getElementById('time_esr').textContent = data.prayer_times.esr;
        document.getElementById('time_maghrib').textContent = data.prayer_times.maghrib;
        document.getElementById('time_gecayari').textContent = data.prayer_times.gecayari;

        // Reset highlights
        ['subh', 'gunes', 'zohr', 'esr', 'maghrib', 'gecayari'].forEach(key => {
            const card = document.getElementById('card_' + key);
            if (card) card.classList.remove('active-prayer-card');
        });

        // Event
        const evBox = document.getElementById('widgetEventContainer');
        if (data.today_events && data.today_events.length > 0) {
            const ev = data.today_events[0];
            const isMourning = ev.color === 4;
            evBox.innerHTML = `
                <div class="p-2 rounded-xl text-xs font-bold text-center border shadow-sm ${isMourning ? 'bg-rose-950/70 text-rose-300 border-rose-700/60' : 'bg-emerald-950/70 text-emerald-300 border-emerald-700/60'}">
                    <i class="fa-solid ${isMourning ? 'fa-droplet' : 'fa-star text-amber-400'} mr-1"></i>
                    <span>Bugün: ${ev.title}</span>
                </div>
            `;
            evBox.classList.remove('hidden');
        } else {
            evBox.classList.add('hidden');
            evBox.innerHTML = '';
        }

        // Zikr
        if (data.today_zikr) {
            document.getElementById('widgetZikrArabic').textContent = data.today_zikr.arabic;
            document.getElementById('widgetZikrName').textContent = data.today_zikr.name;
        }

        startCountdown(data);
    }

    function startCountdown(data) {
        if (timerInterval) clearInterval(timerInterval);

        function update() {
            const now = new Date();
            const nowSec = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();

            const parseSec = (tStr) => {
                const parts = tStr.split(':');
                return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60;
            };

            const s_subh = parseSec(data.prayer_times.subh);
            const s_gunes = parseSec(data.prayer_times.gunes);
            const s_zohr = parseSec(data.prayer_times.zohr);
            const s_esr = parseSec(data.prayer_times.esr);
            const s_maghrib = parseSec(data.prayer_times.maghrib);
            const s_gecayari = parseSec(data.prayer_times.gecayari);

            let nextName = 'Sübh';
            let activeCard = 'card_maghrib';
            let remSec = 0;

            if (nowSec < s_subh) {
                activeCard = 'card_gecayari';
                nextName = 'Sübh';
                remSec = s_subh - nowSec;
            } else if (nowSec < s_gunes) {
                activeCard = 'card_subh';
                nextName = 'Gün çıxır';
                remSec = s_gunes - nowSec;
            } else if (nowSec < s_zohr) {
                activeCard = 'card_gunes';
                nextName = 'Zöhr';
                remSec = s_zohr - nowSec;
            } else if (nowSec < s_esr) {
                activeCard = 'card_zohr';
                nextName = 'Əsr';
                remSec = s_esr - nowSec;
            } else if (nowSec < s_maghrib) {
                activeCard = 'card_esr';
                nextName = 'Məğrib';
                remSec = s_maghrib - nowSec;
            } else {
                activeCard = 'card_maghrib';
                nextName = 'Sübh';
                remSec = (86400 - nowSec) + s_subh;
            }

            // Highlight active prayer card
            ['subh', 'gunes', 'zohr', 'esr', 'maghrib', 'gecayari'].forEach(key => {
                const card = document.getElementById('card_' + key);
                if (card) {
                    if ('card_' + key === activeCard) {
                        card.classList.add('active-prayer-card');
                    } else {
                        card.classList.remove('active-prayer-card');
                    }
                }
            });

            document.getElementById('widgetNextPrayerName').textContent = nextName;

            const h = Math.floor(remSec / 3600);
            const m = Math.floor((remSec % 3600) / 60);
            const s = remSec % 60;
            const pad = (n) => (n < 10 ? '0' + n : n);
            document.getElementById('widgetCountdown').textContent = `${pad(h)}:${pad(m)}:${pad(s)}`;
        }

        update();
        timerInterval = setInterval(update, 1000);
    }

    function changeWidgetCity(city) {
        currentCity = city;
        loadWidgetData(city);
    }

    // Init
    loadWidgetData(currentCity);
</script>

</body>
</html>
