AMG clinic

<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jadwal Psikolog Premium</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  <script type="text/javascript">
  /* <![CDATA[ */
    tailwind.config = {
      corePlugins: { preflight: false },
      theme: { extend: { colors: { brand: { 50: '#f0fdfa', 100: '#ccfbf1', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a' } } } }
    }
  /* ]]> */
  </script>
  
  <style type="text/css">
  /* <![CDATA[ */
    #amg-premium-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #334155; }
    #amg-premium-widget * { box-sizing: border-box; }
    .loader-premium { border: 3px solid #f1f5f9; border-top: 3px solid #0d9488; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .glass-effect { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
  /* ]]> */
  </style>
</head>
<body>

<div id="amg-premium-widget" class="max-w-4xl mx-auto my-10 bg-slate-50/50 rounded-[2rem] shadow-[0_20px_50px_rgb(0,0,0,0.05)] border border-slate-100 overflow-hidden">
  
  <div class="bg-brand-900 p-8 md:p-10 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
    <div class="absolute bottom-0 left-0 w-48 h-48 bg-brand-400/20 rounded-full blur-2xl translate-y-1/3 -translate-x-1/4"></div>
    
    <div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
      <div>
        <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 rounded-full text-brand-100 text-xs font-semibold uppercase tracking-wider mb-3 backdrop-blur-sm border border-white/10">
          <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> Live Update
        </div>
        <h2 class="text-3xl md:text-4xl font-extrabold text-white tracking-tight m-0 mb-2">
          Jadwal Praktik Psikolog
        </h2>
        <p class="text-brand-100/80 text-sm md:text-base m-0 max-w-lg">Temukan jadwal yang sesuai dan segera lakukan reservasi. Slot terbatas setiap harinya.</p>
      </div>
      
      <a class="shrink-0 inline-flex items-center gap-2 px-6 py-3.5 bg-white text-brand-900 hover:bg-brand-50 rounded-2xl font-bold text-sm transition-all shadow-xl hover:-translate-y-1 no-underline group" href="https://api.whatsapp.com/send?autoload=1&app_absent=0&phone=6285101403939&text=Halo+amgclinic%0A%0ASaya+mau+reservasi...+..." target="_blank">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="group-hover:scale-110 transition-transform"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        Reservasi via WA
      </a>
    </div>
  </div>

<div class="p-6 md:p-8">
    <div class="mb-8 flex flex-col md:flex-row gap-4 items-center bg-white p-2 rounded-2xl shadow-sm border border-slate-100">
      <div class="relative w-full md:flex-1">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" id="amgSearchInput" placeholder="Cari lokasi, psikolog, atau tanggal..." class="w-full pl-12 pr-4 py-3 bg-transparent text-sm focus:outline-none text-slate-700 m-0 font-medium placeholder:font-normal">
      </div>
      <div class="w-full md:w-px h-px md:h-8 bg-slate-200"></div>
      <select id="amgStatusFilter" class="w-full md:w-48 px-4 py-3 bg-transparent text-sm focus:outline-none text-slate-700 font-bold m-0 cursor-pointer appearance-none">
        <option value="Semua">Tampilkan Semua</option>
        <option value="Kosong">Hanya Tersedia</option>
      </select>
    </div>

<div id="amgLoadingState" class="flex flex-col items-center justify-center py-16 gap-4">
      <div class="loader-premium"></div>
      <p class="text-sm font-semibold text-slate-400 m-0 tracking-wide uppercase">Sinkronisasi Data...</p>
    </div>

<div id="amgListContainer" class="hidden">
      <div id="amgJadwalList" class="flex flex-col gap-8">
        </div>
    </div>
    
    <div class="mt-8 flex justify-between items-center border-t border-slate-200 pt-4">
      <div class="flex gap-3 text-[10px] sm:text-xs font-semibold text-slate-400">
        <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-brand-500"></span> Tersedia</span>
        <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-slate-300"></span> Terisi</span>
      </div>
      <div class="text-xs font-medium text-slate-400 flex items-center gap-1" id="amgLastSync"></div>
    </div>
  </div>
</div>

function drawCards() {
    var sVal = sInput.value.toLowerCase();
    var stVal = stFilter.value;
    listContainer.innerHTML = "";
    var count = 0;
    
    // Grouping Data berdasarkan Tanggal
    var groupedData = {};
    var dateOrder = [];

for (var i = 0; i < data.length; i++) {
      var itm = data[i];
      if (!itm.tanggal || !itm.psikolog) continue;
      
      var text = (itm.lokasi + " " + itm.psikolog + " " + itm.tanggal).toLowerCase();
      if (text.indexOf(sVal) === -1) continue;
      
      var stL = itm.status.toLowerCase();
      if (stVal === "Kosong" && stL.indexOf("kosong") === -1 && stL.indexOf("available") === -1) continue;

if (!groupedData[itm.tanggal]) {
          groupedData[itm.tanggal] = [];
          dateOrder.push(itm.tanggal);
      }
      groupedData[itm.tanggal].push(itm);
      count++;
    }

if (count === 0) {
      listContainer.innerHTML = "<div class='py-12 text-center text-slate-400 bg-white rounded-2xl border border-dashed border-slate-300'><svg width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='mx-auto mb-4 opacity-30'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='10' y1='14' x2='14' y2='18'/><line x1='14' y1='14' x2='10' y2='18'/></svg><p class='font-medium'>Tidak ada jadwal yang sesuai pencarian.</p></div>";
      return;
    }

// Render per Kelompok Tanggal
    for (var d = 0; d < dateOrder.length; d++) {
        var tgl = dateOrder[d];
        var items = groupedData[tgl];
        
        var groupDiv = document.createElement("div");
        groupDiv.className = "relative";
        
        // Judul Tanggal
        var dateHeader = document.createElement("h3");
        dateHeader.className = "text-lg md:text-xl font-extrabold text-brand-900 mb-4 pb-2 border-b-2 border-slate-100 flex items-center gap-2";
        dateHeader.innerHTML = "<svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='text-brand-500'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg> " + tgl;
        groupDiv.appendChild(dateHeader);

var cardsWrapper = document.createElement("div");
        cardsWrapper.className = "grid grid-cols-1 md:grid-cols-2 gap-4";

for (var j = 0; j < items.length; j++) {
            var itm = items[j];
            var stL = itm.status.toLowerCase();
            
            var card = document.createElement("div");
            card.className = "bg-white p-5 rounded-2xl border border-slate-200 hover:border-brand-300 hover:shadow-[0_8px_30px_rgb(20,184,166,0.1)] transition-all flex flex-col justify-between group";

// Atur warna aksen berdasarkan lokasi
            var locBadgeClass = "bg-slate-100 text-slate-600";
            var locL = itm.lokasi.toLowerCase();
            if(locL.indexOf("cimanggu") > -1) locBadgeClass = "bg-blue-50 text-blue-600";
            else if(locL.indexOf("cawang") > -1) locBadgeClass = "bg-purple-50 text-purple-600";
            else if(locL.indexOf("tajur") > -1) locBadgeClass = "bg-emerald-50 text-emerald-600";
            else if(locL.indexOf("depok") > -1) locBadgeClass = "bg-orange-50 text-orange-600";

card.innerHTML = `
              <div class="flex justify-between items-start mb-4">
                <div class="font-black text-xl text-slate-800 tracking-tight group-hover:text-brand-600 transition-colors">` + itm.waktu + `</div>
                ` + stHtm + `
              </div>
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-brand-100 text-brand-700 flex items-center justify-center font-black text-lg uppercase shrink-0">
                  ` + itm.psikolog.charAt(0) + `
                </div>
                <div>
                  <div class="font-bold text-slate-800 text-base">` + itm.psikolog + `</div>
                  <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-bold mt-1 uppercase tracking-wide ` + locBadgeClass + `">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    ` + itm.lokasi + `
                  </div>
                </div>
              </div>
            `;
            cardsWrapper.appendChild(card);
        }
        groupDiv.appendChild(cardsWrapper);
        listContainer.appendChild(groupDiv);
    }
  }

sInput.addEventListener('input', drawCards);
  stFilter.addEventListener('change', drawCards);

fetch(url).then(function(res){
     if(!res.ok) throw new Error("Gagal terhubung.");
     return res.text();
  }).then(function(txt){
     if (txt.trim().toLowerCase().indexOf("<!doctype html>") === 0) throw new Error("Akses Ditolak.");
     var rows = txt.split(/\r?\n/);
     var filtered = [];
     for(var k=0; k<rows.length; k++) { if(rows[k].trim()!=="") filtered.push(rows[k]); }
     if(filtered.length > 0) filtered.shift();
     for(var j=0; j<filtered.length; j++){
        var row = filtered[j];
        var cols = []; var inQ = false; var cur = "";
        for (var i = 0; i < row.length; i++) {
           var char = row[i];
           if (char === '"' && row[i+1] === '"') { cur += '"'; i++; }
           else if (char === '"') { inQ = !inQ; }
           else if (char === ',' && !inQ) { cols.push(cur.trim()); cur = ""; }
           else { cur += char; }
        }
        cols.push(cur.trim());
        data.push({ tanggal: cols[0]||"", waktu: cols[1]||"", psikolog: cols[2]||"", lokasi: cols[3]||"", status: cols[4]||"" });
     }
     document.getElementById("amgLoadingState").style.display = "none";
     document.getElementById("amgListContainer").classList.remove("hidden");
     var now = new Date();
     var mins = String(now.getMinutes()); if(mins.length === 1) mins = "0" + mins;
     document.getElementById("amgLastSync").innerHTML = "<svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><polyline points='23 20 23 14 17 14'/><path d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'/></svg> Tersinkronisasi: " + now.getHours() + ":" + mins;
     drawCards();
  }).catch(function(err){
     document.getElementById("amgLoadingState").innerHTML = "<div class='text-rose-500 font-medium text-center bg-rose-50 p-4 rounded-xl border border-rose-100 max-w-lg'><p class='font-bold'>Gagal Memuat Jadwal</p><p class='text-xs text-rose-400 mt-2'>Koneksi ke Google Sheets terputus atau diblokir.</p></div>";
  });
});
/* ]]> */
</script>

</body>
</html>

Jadwal Psikolog Premium

Live Update

Jadwal Praktik Psikolog

Temukan jadwal yang sesuai dan segera lakukan reservasi. Slot terbatas setiap harinya.

Reservasi via WA

Sinkronisasi Data...

Tersedia Terisi