https://radiosuperamor.pe/wp-content/plugins/radio-programacion/assets/js/grid.js?ver=1791409290

1function renderProgramGrid(data) {
2    const contenedor = document.getElementById("pr-program-grid");
3    if (!contenedor) return;
4
5    // Función interna para convertir a 12h (REFORZADA)
6    const t12 = (h24) => {
7        if (!h24 || h24 === "null") return "--";
8        let partes = h24.trim().split(':');
9        let hrs = parseInt(partes[0]);
10        let min = partes[1] ? partes[1].substring(0, 2) : "00";
11        const ampm = hrs >= 12 ? 'PM' : 'AM';
12        let hrs12 = hrs % 12 || 12;
13        return (min === "00") ? `${hrs12}${ampm}` : `${hrs12}:${min}${ampm}`;
14    };
15
16    const dias = {
17        lun: "Lunes",
18        mar: "Martes",
19        mie: "Miércoles",
20        jue: "Jueves",
21        vie: "Viernes",
22        sab: "Sábado",
23        dom: "Domingo"
24    };
25
26    const mapDia = {
27        1: "lun", 2: "mar", 3: "mie", 4: "jue", 5: "vie", 6: "sab", 0: "dom"
28    };
29
30    let diaActual = mapDia[new Date().getDay()];
31
32    // Crear botones filtro
33    let html = `<div class="pr-dias-filter">`;
34    Object.entries(dias).forEach(([k, v]) => {
35        html += `<button class="pr-dia-btn ${k === diaActual ? "active" : ""}" data-dia="${k}">${v}</button>`;
36    });
37    html += `</div>`;
38
39    html += `<div class="pr-grid" id="pr-grid-cards"></div>`;
40    contenedor.innerHTML = html;
41
42    const grid = document.getElementById("pr-grid-cards");
43
44    function renderCards(diaSeleccionado) {
45        const lista = data[diaSeleccionado] || [];
46        let out = "";
47
48        const ahora = new Date();
49        const horaActualStr = ahora.getHours().toString().padStart(2, '0') + ":" + ahora.getMinutes().toString().padStart(2, '0');
50        const esHoy = diaSeleccionado === diaActual;
51
52        lista.forEach(p => {
53            const inicioProg = p.start ? p.start.substring(0, 5) : "00:00";
54            const finProg = p.end ? p.end.substring(0, 5) : "00:00";
55            const estaVivo = esHoy && (horaActualStr >= inicioProg && horaActualStr <= finProg);
56
57            // Verificamos si hay descripción para mostrar el botón
58            const tieneDesc = p.description && p.description.trim() !== "";
59
60            out += `
61                <div class="pr-card ${estaVivo ? "live" : ""}">
62                    ${estaVivo ? `<div class="pr-live-tag">AL AIRE</div>` : ""}
63                    <div class="pr-card-img-wrapper">
64                        <img src="${p.image}" alt="${p.title}" class="pr-img-grid">
65                    </div>
66                    <div class="pr-card-info">
67                        <div class="pr-card-header">
68                            <div class="pr-card-title">${p.title}</div>
69                            ${tieneDesc ? `<button class="pr-info-trigger" onclick="toggleDesc('${p.id}')">i</button>` : ""}
70                        </div>
71                        
72                        ${tieneDesc ? `<div id="desc-${p.id}" class="pr-desc-box">${p.description}</div>` : ""}
73
74                        <div class="pr-card-horario">
75                            <span class="icon-clock">🕒</span> ${t12(p.start)} - ${t12(p.end)}
76                        </div>
77                    </div>
78                </div>
79            `;
80        });
81
82        grid.innerHTML = out || "<p style='text-align:center; width:100%; color:#1a237e; font-weight:bold; padding:20px;'>No hay programación disponible para este día.</p>";
83    }
84
85    renderCards(diaActual);
86
87    document.querySelectorAll(".pr-dia-btn").forEach(btn => {
88        btn.onclick = function () {
89            document.querySelectorAll(".pr-dia-btn").forEach(b => b.classList.remove("active"));
90            this.classList.add("active");
91            renderCards(this.dataset.dia);
92        };
93    });
94}