<style>
  .pp-schedule-page {
    --pp-primary: #3E1E5E;
    --pp-purple: #6A4C8E;
    --pp-gold: #C59F4E;
    --pp-white: #FFFFFF;
    --pp-text: #333333;
    --pp-soft: #F8F5FA;
    --pp-border: #E9E1EF;
    color: var(--pp-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
  }

.pp-schedule-page * {
    box-sizing: border-box;
  }

.pp-schedule-container {
    width: min(1120px, calc(100% - 40px));
    margin: auto;
  }

/* Header */
  .pp-schedule-hero {
    position: relative;
    overflow: hidden;
    padding: 85px 0 115px;
    text-align: center;
    color: var(--pp-white);
    background:
      radial-gradient(circle at 85% 18%, rgba(197, 159, 78, .2), transparent 23%),
      radial-gradient(circle at 12% 80%, rgba(106, 76, 142, .65), transparent 30%),
      linear-gradient(135deg, #3E1E5E, #2B1042);
  }

.pp-schedule-hero:before {
    position: absolute;
    top: -130px;
    right: 8%;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(197, 159, 78, .42);
    border-radius: 50%;
    content: "";
  }

.pp-schedule-hero-content {
    position: relative;
    z-index: 1;
    max-width: 770px;
  }

.pp-schedule-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--pp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
  }

.pp-schedule-label:before,
  .pp-schedule-label:after {
    width: 28px;
    height: 1px;
    background: var(--pp-gold);
    content: "";
  }

.pp-schedule-hero h1 {
    margin: 0;
    color: var(--pp-white);
    font-size: clamp(37px, 6vw, 60px);
    font-weight: 800;
    line-height: 1.15;
  }

.pp-schedule-hero h1 span {
    display: block;
    color: var(--pp-gold);
  }

.pp-schedule-hero p {
    max-width: 680px;
    margin: 20px auto 0;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.85;
  }

.pp-schedule-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
  }

.pp-schedule-wave svg {
    display: block;
    width: 100%;
    height: 80px;
  }

/* Widget jadwal */
  .pp-schedule-section {
    padding: 62px 0 80px;
    background: var(--pp-white);
  }

.pp-schedule-widget {
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 25px;
    background: var(--pp-soft);
    box-shadow: 0 18px 50px rgba(62, 30, 94, .08);
  }

.pp-schedule-widget-head {
    position: relative;
    overflow: hidden;
    padding: 34px 38px;
    color: var(--pp-white);
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-purple));
  }

.pp-schedule-widget-head:before {
    position: absolute;
    top: -125px;
    right: -45px;
    width: 245px;
    height: 245px;
    border: 1px solid rgba(197, 159, 78, .5);
    border-radius: 50%;
    content: "";
  }

.pp-schedule-widget-head-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
  }

.pp-schedule-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(197, 159, 78, .45);
    border-radius: 30px;
    color: var(--pp-gold);
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
  }

.pp-schedule-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-gold);
    animation: pp-pulse 1.5s infinite;
  }

@keyframes pp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.7); }
  }

.pp-schedule-widget-head h2 {
    margin: 0 0 7px;
    color: var(--pp-white);
    font-size: clamp(25px, 4vw, 34px);
  }

.pp-schedule-widget-head p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    line-height: 1.7;
  }

.pp-schedule-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 13px 17px;
    border-radius: 9px;
    color: var(--pp-white) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: var(--pp-gold);
    transition: .25s ease;
  }

.pp-schedule-wa:hover {
    color: var(--pp-primary) !important;
    background: var(--pp-white);
    transform: translateY(-2px);
  }

.pp-schedule-wa svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.pp-schedule-body {
    padding: 28px;
  }

.pp-schedule-filters {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 12px;
    margin-bottom: 30px;
    padding: 8px;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    background: var(--pp-white);
  }

.pp-schedule-search-wrap {
    position: relative;
  }

.pp-schedule-search-wrap svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--pp-purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.pp-schedule-filters input,
  .pp-schedule-filters select {
    width: 100%;
    height: 43px;
    outline: none;
    border: 0;
    border-radius: 10px;
    color: var(--pp-text);
    font-family: inherit;
    font-size: 14px;
    background: transparent;
  }

.pp-schedule-filters input {
    padding: 0 13px 0 43px;
  }

.pp-schedule-filters select {
    padding: 0 11px;
    border-left: 1px solid var(--pp-border);
    cursor: pointer;
  }

.pp-schedule-loading,
  .pp-schedule-empty,
  .pp-schedule-error {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    padding: 30px;
    color: #77707C;
    text-align: center;
  }

.pp-schedule-loading p,
  .pp-schedule-empty p,
  .pp-schedule-error p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
  }

.pp-schedule-loader {
    width: 33px;
    height: 33px;
    border: 3px solid #E9E1EF;
    border-top-color: var(--pp-gold);
    border-radius: 50%;
    animation: pp-spin 1s linear infinite;
  }

@keyframes pp-spin {
    to { transform: rotate(360deg); }
  }

.pp-schedule-error {
    margin: 0;
    border: 1px solid #F1CDCD;
    border-radius: 15px;
    color: #A64141;
    background: #FFF6F6;
  }

.pp-schedule-list {
    display: grid;
    gap: 30px;
  }

.pp-schedule-date-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pp-border);
    color: var(--pp-primary);
    font-size: 20px;
  }

.pp-schedule-date-group h3 svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--pp-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.pp-schedule-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

.pp-schedule-card {
    display: flex;
    min-height: 155px;
    padding: 20px;
    flex-direction: column;
    border: 1px solid #E7DFEC;
    border-radius: 17px;
    background: var(--pp-white);
    transition: .25s ease;
  }

.pp-schedule-card:hover {
    border-color: var(--pp-gold);
    box-shadow: 0 10px 27px rgba(62, 30, 94, .09);
    transform: translateY(-3px);
  }

.pp-schedule-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
  }

.pp-schedule-time {
    color: var(--pp-primary);
    font-size: 21px;
    font-weight: 800;
  }

.pp-schedule-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

.pp-status-available {
    color: var(--pp-white);
    background: var(--pp-gold);
  }

.pp-status-booked {
    color: #76717C;
    background: #F0EDF2;
  }

.pp-status-break {
    color: #9A721F;
    background: #FDF5E4;
  }

.pp-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

.pp-status-available .pp-status-dot {
    background: var(--pp-white);
  }

.pp-schedule-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
  }

.pp-schedule-initial {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 41px;
    border-radius: 50%;
    color: var(--pp-primary);
    background: #EEE7F4;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
  }

.pp-schedule-name {
    margin: 0 0 4px;
    color: var(--pp-text);
    font-size: 15px;
    font-weight: 700;
  }

.pp-schedule-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-purple);
    font-size: 11px;
    font-weight: 700;
  }

.pp-schedule-location svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--pp-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.pp-schedule-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 29px;
    padding-top: 17px;
    border-top: 1px solid var(--pp-border);
  }

.pp-schedule-legend,
  .pp-schedule-sync {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #817A87;
    font-size: 12px;
  }

.pp-schedule-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

.pp-schedule-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

.pp-schedule-legend .available {
    background: var(--pp-gold);
  }

.pp-schedule-legend .booked {
    background: #C8C1CD;
  }

.pp-schedule-sync svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--pp-purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

/* CTA */
  .pp-schedule-cta {
    margin-top: 40px;
    padding: 31px;
    border-radius: 20px;
    text-align: center;
    color: var(--pp-white);
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-purple));
  }

.pp-schedule-cta h2 {
    margin: 0;
    color: var(--pp-white);
    font-size: 25px;
  }

.pp-schedule-cta p {
    margin: 11px auto 20px;
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    line-height: 1.7;
  }

.pp-schedule-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    color: var(--pp-white) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: var(--pp-gold);
    transition: .25s ease;
  }

.pp-schedule-cta a:hover {
    color: var(--pp-primary) !important;
    background: var(--pp-white);
  }

@media (max-width: 700px) {
    .pp-schedule-widget-head {
      padding: 28px 23px;
    }

.pp-schedule-widget-head-inner {
      align-items: flex-start;
      flex-direction: column;
    }

.pp-schedule-body {
      padding: 20px 15px;
    }

.pp-schedule-filters {
      grid-template-columns: 1fr;
    }

.pp-schedule-filters select {
      border-top: 1px solid var(--pp-border);
      border-left: 0;
    }

.pp-schedule-cards {
      grid-template-columns: 1fr;
    }

.pp-schedule-footer {
      align-items: flex-start;
      flex-direction: column;
    }
  }

@media (max-width: 480px) {
    .pp-schedule-container {
      width: min(100% - 30px, 1120px);
    }

.pp-schedule-hero {
      padding: 68px 0 100px;
    }

.pp-schedule-hero h1 {
      font-size: 36px;
    }
  }
</style>

<section class="pp-schedule-hero">
    <div class="pp-schedule-container pp-schedule-hero-content">
      <p class="pp-schedule-label">JADWAL PRAKTIK</p>
      <h1>Temukan Waktu yang<span>Sesuai untuk Anda</span></h1>
      <p>
        Lihat jadwal pelayanan yang tersedia, kemudian hubungi customer service
        untuk membuat perjanjian konsultasi atau asesmen.
      </p>
    </div>

<section class="pp-schedule-section">
    <div class="pp-schedule-container">

<div class="pp-schedule-widget">
        <div class="pp-schedule-widget-head">
          <div class="pp-schedule-widget-head-inner">
            <div>
              <div class="pp-schedule-live"><i></i> PEMBARUAN JADWAL</div>
              <h2>Jadwal Praktik Psikolog</h2>
              <p>Gunakan pencarian atau filter untuk menemukan jadwal berdasarkan lokasi, psikolog, atau tanggal.</p>
            </div>

<a class="pp-schedule-wa" href="https://wa.me/6285101403939?text=Halo%20AMG%20clinic%2C%0A%0ASaya%20ingin%20membuat%20reservasi%20jadwal.%0A%0ANama%20saya%3A%0ATanggal%20yang%20diinginkan%3A%0ALokasi%3A" rel="noopener" target="_blank">
              <svg viewBox="0 0 24 24">
                <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.6 9.6 0 0 1-4.2-1.1L3 20l1.3-4A8.3 8.3 0 0 1 3 11.5a8.5 8.5 0 0 1 9-8.5 8.5 8.5 0 0 1 9 8.5Z"></path>
                <path d="M8 12h.01M12 12h.01M16 12h.01"></path>
              </svg>
              Reservasi via WhatsApp
            </a>
          </div>
        </div>

<select id="ppScheduleFilter">
              <option value="Semua">Tampilkan Semua</option>
              <option value="Kosong">Hanya Tersedia</option>
            </select>
          </div>

<div id="ppScheduleLoading" class="pp-schedule-loading">
            <div class="pp-schedule-loader"></div>
            <p>Memuat jadwal terbaru...</p>
          </div>

<div id="ppScheduleError" class="pp-schedule-error" style="display:none;">
            <strong>Jadwal belum dapat dimuat.</strong>
            <p>Silakan coba kembali beberapa saat lagi atau hubungi customer service kami.</p>
          </div>

<div class="pp-schedule-footer">
            <div class="pp-schedule-legend">
              <span><i class="available"></i>Tersedia</span>
              <span><i class="booked"></i>Terisi</span>
            </div>

<div class="pp-schedule-cta">
        <h2>Sudah Menemukan Jadwal yang Sesuai?</h2>
        <p>Hubungi customer service untuk mengonfirmasi ketersediaan dan membuat perjanjian layanan.</p>
        <a href="https://wa.me/6285101403939?text=Halo%20AMG%20clinic%2C%0A%0ASaya%20ingin%20membuat%20reservasi%20jadwal.%0A%0ANama%20saya%3A%0ATanggal%20yang%20diinginkan%3A%0AJam%3A%0ALokasi%3A" rel="noopener" target="_blank">
          Buat Janji Konsultasi →
        </a>
      </div>

</div>
  </section>
</div>

var data = [];
    var searchInput = document.getElementById("ppScheduleSearch");
    var statusFilter = document.getElementById("ppScheduleFilter");
    var loading = document.getElementById("ppScheduleLoading");
    var errorBox = document.getElementById("ppScheduleError");
    var list = document.getElementById("ppScheduleList");
    var sync = document.getElementById("ppScheduleSync");

function createElement(tag, className, text) {
      var element = document.createElement(tag);
      if (className) element.className = className;
      if (text !== undefined) element.textContent = text;
      return element;
    }

function iconCalendar() {
      return '<svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"></rect><path d="M8 3v4M16 3v4M8 11h8"></path></svg>';
    }

function iconLocation() {
      return '<svg viewBox="0 0 24 24"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"></path><circle cx="12" cy="10" r="2.5"></circle></svg>';
    }

function parseCSVRow(row) {
      var columns = [];
      var current = "";
      var inQuotes = false;

for (var i = 0; i < row.length; i++) {
        var character = row[i];

if (character === '"' && row[i + 1] === '"') {
          current += '"';
          i++;
        } else if (character === '"') {
          inQuotes = !inQuotes;
        } else if (character === "," && !inQuotes) {
          columns.push(current.trim());
          current = "";
        } else {
          current += character;
        }
      }

columns.push(current.trim());
      return columns;
    }

function statusInfo(status) {
      var value = (status || "").toLowerCase();

if (value.indexOf("kosong") > -1 || value.indexOf("available") > -1 || value.indexOf("tersedia") > -1) {
        return { label: "Tersedia", className: "pp-status-available" };
      }

if (value.indexOf("terisi") > -1 || value.indexOf("booked") > -1 || value.indexOf("penuh") > -1) {
        return { label: "Terisi", className: "pp-status-booked" };
      }

return { label: status || "Istirahat", className: "pp-status-break" };
    }

function drawSchedule() {
      var keyword = searchInput.value.toLowerCase();
      var filter = statusFilter.value;
      var grouped = {};
      var dates = [];

list.innerHTML = "";

data.forEach(function (item) {
        if (!item.tanggal || !item.psikolog) return;

var searchable = (
          item.tanggal + " " +
          item.waktu + " " +
          item.psikolog + " " +
          item.lokasi + " " +
          item.status
        ).toLowerCase();

if (searchable.indexOf(keyword) === -1) return;

var available =
          item.status.toLowerCase().indexOf("kosong") > -1 ||
          item.status.toLowerCase().indexOf("available") > -1 ||
          item.status.toLowerCase().indexOf("tersedia") > -1;

if (filter === "Kosong" && !available) return;

if (!grouped[item.tanggal]) {
          grouped[item.tanggal] = [];
          dates.push(item.tanggal);
        }

grouped[item.tanggal].push(item);
      });

if (!dates.length) {
        var empty = createElement("div", "pp-schedule-empty");
        empty.innerHTML = iconCalendar();
        empty.querySelector("svg").style.width = "45px";
        empty.querySelector("svg").style.height = "45px";
        empty.querySelector("svg").style.fill = "none";
        empty.querySelector("svg").style.stroke = "#C59F4E";
        empty.querySelector("svg").style.strokeWidth = "1.5";
        empty.appendChild(createElement("p", "", "Tidak ada jadwal yang sesuai dengan pencarian Anda."));
        list.appendChild(empty);
        return;
      }

dates.forEach(function (date) {
        var group = createElement("div", "pp-schedule-date-group");
        var title = createElement("h3");
        title.innerHTML = iconCalendar() + "<span></span>";
        title.querySelector("span").textContent = date;
        group.appendChild(title);

var cards = createElement("div", "pp-schedule-cards");

grouped[date].forEach(function (item) {
          var card = createElement("div", "pp-schedule-card");
          var cardTop = createElement("div", "pp-schedule-card-top");
          var time = createElement("div", "pp-schedule-time", item.waktu || "-");
          var status = statusInfo(item.status);
          var statusBadge = createElement("span", "pp-schedule-status " + status.className);
          statusBadge.appendChild(createElement("i", "pp-status-dot"));
          statusBadge.appendChild(document.createTextNode(status.label));

cardTop.appendChild(time);
          cardTop.appendChild(statusBadge);

var profile = createElement("div", "pp-schedule-profile");
          var initial = createElement(
            "div",
            "pp-schedule-initial",
            (item.psikolog || "?").charAt(0)
          );

var details = createElement("div");
          details.appendChild(createElement("p", "pp-schedule-name", item.psikolog || "-"));

var location = createElement("span", "pp-schedule-location");
          location.innerHTML = iconLocation();
          location.appendChild(document.createTextNode(item.lokasi || "Lokasi belum tersedia"));

details.appendChild(location);
          profile.appendChild(initial);
          profile.appendChild(details);

card.appendChild(cardTop);
          card.appendChild(profile);
          cards.appendChild(card);
        });

group.appendChild(cards);
        list.appendChild(group);
      });
    }

function setLastSync() {
      var now = new Date();
      var hours = String(now.getHours()).padStart(2, "0");
      var minutes = String(now.getMinutes()).padStart(2, "0");

sync.innerHTML =
        '<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path><path d="M3 21v-5h5"></path></svg>' +
        "<span>Tersinkronisasi: " + hours + ":" + minutes + "</span>";
    }

searchInput.addEventListener("input", drawSchedule);
    statusFilter.addEventListener("change", drawSchedule);

fetch(sheetUrl)
      .then(function (response) {
        if (!response.ok) throw new Error("Gagal mengambil data.");
        return response.text();
      })
      .then(function (csv) {
        if (csv.trim().toLowerCase().indexOf("<!doctype html") === 0) {
          throw new Error("Akses spreadsheet tidak tersedia.");
        }

var rows = csv.split(/\r?\n/).filter(function (row) {
          return row.trim() !== "";
        });

rows.shift();

rows.forEach(function (row) {
          var columns = parseCSVRow(row);

data.push({
            tanggal: columns[0] || "",
            waktu: columns[1] || "",
            psikolog: columns[2] || "",
            lokasi: columns[3] || "",
            status: columns[4] || ""
          });
        });

loading.style.display = "none";
        list.style.display = "grid";
        setLastSync();
        drawSchedule();
      })
      .catch(function () {
        loading.style.display = "none";
        errorBox.style.display = "flex";
      });
  })();
</script>

JADWAL PRAKTIK

Temukan Waktu yangSesuai untuk Anda

Lihat jadwal pelayanan yang tersedia, kemudian hubungi customer service untuk membuat perjanjian konsultasi atau asesmen.

Memuat jadwal terbaru...

Sudah Menemukan Jadwal yang Sesuai?

Hubungi customer service untuk mengonfirmasi ketersediaan dan membuat perjanjian layanan.

Buat Janji Konsultasi →