.elementor-1449 .elementor-element.elementor-element-5d02cfc9{--display:flex;}.elementor-1449 .elementor-element.elementor-element-18d6650{column-gap:0px;}.elementor-1449 .elementor-element.elementor-element-c7321bf{--display:flex;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .elementor-repeater-item-dc4156c .swiper-slide-bg{background-color:#833ca3;background-image:url(https://umbilithailand.com/wp-content/uploads/2025/11/082725_Cover-page.png);background-size:cover;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .elementor-repeater-item-dc4156c .elementor-background-overlay{background-color:rgba(0,0,0,0.5);}.elementor-1449 .elementor-element.elementor-element-7bab9ae .elementor-repeater-item-1e4d237 .swiper-slide-bg{background-color:#4054b2;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .elementor-repeater-item-490b291 .swiper-slide-bg{background-color:#1abc9c;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .swiper-slide{transition-duration:calc(5000ms*1.2);height:400px;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .swiper-slide-contents{max-width:66%;}.elementor-1449 .elementor-element.elementor-element-7bab9ae .swiper-slide-inner{text-align:center;}/* Start custom CSS */<main class="page"></main>

<div class="container">
  <h1>ค้นหาอัมบิลี่ใกล้ฉัน</h1>
  <p class="subtitle">เลือกจังหวัดและอำเภอเพื่อค้นหาจุดจำหน่าย 🎯</p>

  <!-- ฟิลเตอร์จังหวัด / อำเภอ -->
  <section class="filter-card">
    <div class="filter-row">
      <span class="filter-label">จังหวัด</span>
      <select id="province">
        <option value="">ทุกจังหวัด</option>
      </select>
    </div>

    <div class="filter-row">
      <span class="filter-label">อำเภอ</span>
      <select id="district" disabled>
        <option value="">ทุกอำเภอ</option>
      </select>
    </div>
  </section>

  <div id="loading" class="loading">
    <span id="loadingText">กำลังโหลดข้อมูลร้านค้า... กรุณารอสักครู่</span>
  </div>

  <!-- ⭐⭐⭐ เลื่อน Pagination ขึ้นก่อน results ⭐⭐⭐ -->
  <div id="resultsInfo" class="results-info"></div>
  <div id="paginationBar" class="pagination"></div>
  <div id="results" class="results"></div>

  <div id="noResults" class="no-results" style="display:none;">
    ไม่พบบันทึกร้านค้าตามเงื่อนไข ลองเลือกจังหวัด/อำเภออื่นนะคะ 🙂
  </div>
</div>

<style>
/* --------- UMBILI STYLE --------- */
body {
  font-family: "Prompt", "Kanit", sans-serif;
  background: #f9fff4;
  color: #333;
  margin: 0;
}
.container {
  max-width: 900px;
  margin: auto;
  padding: 24px 16px 40px;
}
h1 {
  text-align: center;
  color: #7fb800;
  font-size: 26px;
  margin-bottom: 4px;
}
.subtitle {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}

/* ฟิลเตอร์ */
.filter-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(130,180,20,.15);
  margin-bottom: 20px;
}
.filter-row { margin-bottom: 12px; }
.filter-label {
  color: #4a7d00;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 600;
}
select {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #d3e6b1;
  background: #fafff4;
}
select:focus {
  outline: none;
  border-color: #8ccc00;
  box-shadow: 0 0 0 3px rgba(184,230,70,.3);
}

/* การ์ดร้านค้า */
.store-card {
  background: white;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid #e4f1d1;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(120,160,40,.12);
}
.store-name {
  color: #6fa000;
  font-weight: 700;
  font-size: 18px;
}
.store-meta { color: #555; margin-bottom: 8px; }
.store-tag {
  background: #eaffc8;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #4a7d00;
  display: inline-block;
  margin-bottom: 10px;
}
.store-contact { margin-bottom: 8px; }
.store-contact a { color: #2b7a0b; font-weight: 600; }

/* ปุ่มแผนที่ */
.map-btn {
  background: linear-gradient(135deg,#a6e24f,#8ccc00);
  color: #fff;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.page-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #d3e6b1;
  background: white;
  cursor: pointer;
  color: #4a7d00;
}
.page-btn.active {
  background: #8ccc00;
  color: white;
  border-color: #7fb800;
}
.page-ellipsis { padding: 4px 6px; color:#777; }

.no-results {
  padding: 14px;
  border-radius: 14px;
  background: #fff4c4;
  border: 1px solid #ffd86d;
  text-align: center;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>

<script>
/* ---- ตั้งค่า ---- */
const CSV_URL =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vQJCaHwT1c0GxjVKPL_ifabaxRaLlttk5G3rtSAUIjZXS2likqtTuQtB8cjO8V9Xi88ss5kpIPrhHHJ/pub?gid=0&single=true&output=csv"
  + "&v=" + Date.now();

let STORES = [];
let filtered = [];
let currentPage = 1;
const pageSize = 5;

/* ---- DOM ---- */
const provinceSel = document.getElementById("province");
const districtSel = document.getElementById("district");
const results = document.getElementById("results");
const resultsInfo = document.getElementById("resultsInfo");
const paginationBar = document.getElementById("paginationBar");
const noResults = document.getElementById("noResults");
const loadingEl = document.getElementById("loading");

/* ---- โหลดข้อมูล ---- */
Papa.parse(CSV_URL, {
  download: true,
  skipEmptyLines: true,
  complete: (res) => {
    const rows = res.data.slice(1);

    STORES = rows.map(r => ({
      name: r[0]?.trim() || "",
      province: r[1]?.trim() || "",
      district: r[2]?.trim() || "",
      address: r[3]?.trim() || "",
      phone: r[4]?.trim() || "",
      type: r[5]?.trim() || "",
      map: r[6]?.trim() || ""
    }));

    initProvinceOptions();
    filtered = STORES;
    loadingEl.style.display = "none";
    renderStores();
  }
});

/* ---- โหลดจังหวัด ---- */
function initProvinceOptions() {
  const all = [...new Set(STORES.map(s => s.province).filter(Boolean))].sort();
  all.forEach(p => {
    const opt = document.createElement("option");
    opt.value = p;
    opt.textContent = p;
    provinceSel.appendChild(opt);
  });
}

/* ---- ฟิลเตอร์ ---- */
provinceSel.addEventListener("change", () => {
  const p = provinceSel.value;
  districtSel.innerHTML = `<option value="">ทุกอำเภอ</option>`;

  if (p) {
    const d = [
      ...new Set(STORES.filter(s => s.province === p).map(s => s.district))
    ].sort();

    d.forEach(dd => {
      const opt = document.createElement("option");
      opt.value = dd;
      opt.textContent = dd;
      districtSel.appendChild(opt);
    });

    districtSel.disabled = false;
  } else {
    districtSel.disabled = true;
  }

  applyFilter();
});

districtSel.addEventListener("change", applyFilter);

function applyFilter() {
  const p = provinceSel.value;
  const d = districtSel.value;

  filtered = STORES.filter(s => {
    if (p && s.province !== p) return false;
    if (d && s.district !== d) return false;
    return true;
  });

  currentPage = 1;
  renderStores();
}

/* ---- แสดงผลร้านค้า + Pagination ---- */
function renderStores() {
  results.innerHTML = "";

  if (filtered.length === 0) {
    noResults.style.display = "block";
    resultsInfo.textContent = "";
    paginationBar.innerHTML = "";
    return;
  }

  noResults.style.display = "none";
  resultsInfo.textContent = `ทั้งหมด ${filtered.length} ร้านค้า`;

  const totalPages = Math.ceil(filtered.length / pageSize);
  if (currentPage > totalPages) currentPage = totalPages;

  const start = (currentPage - 1) * pageSize;
  const items = filtered.slice(start, start + pageSize);

  items.forEach(store => {
    const mapUrl = store.map || "https://www.google.com/maps?q=" + encodeURIComponent(store.address);
    const card = document.createElement("div");
    card.className = "store-card";

    card.innerHTML = `
      <div class="store-name">${store.province}</div>
      <div class="store-meta">${store.address}</div>
      <div class="store-tag">จังหวัด • ${store.province}${store.district ? " • "+store.district : ""}</div>
      <div class="store-contact">📞 <a href="tel:${store.phone}">${store.phone}</a></div>
      <button class="map-btn">เปิดแผนที่</button>
    `;

    card.querySelector(".map-btn").addEventListener("click", () => {
      window.open(mapUrl, "_blank", "noopener");
    });

    results.appendChild(card);
  });

  renderPagination(totalPages);
}

/* ---- Pagination ---- */
function renderPagination(total) {
  paginationBar.innerHTML = "";

  if (total <= 1) return;

  const addBtn = (page, text = page, active = false) => {
    const b = document.createElement("button");
    b.className = "page-btn" + (active ? " active" : "");
    b.textContent = text;
    b.addEventListener("click", () => {
      currentPage = page;
      renderStores();
    });
    paginationBar.appendChild(b);
  };

  const addEllipsis = () => {
    const e = document.createElement("span");
    e.className = "page-ellipsis";
    e.textContent = "…";
    paginationBar.appendChild(e);
  };

  addBtn(Math.max(1, currentPage - 1), "‹");

  if (total <= 7) {
    for (let i = 1; i <= total; i++) addBtn(i, i, i===currentPage);
  } else {
    addBtn(1, 1, currentPage===1);

    let start = Math.max(2, currentPage - 1);
    let end = Math.min(total - 1, currentPage + 1);

    if (start > 2) addEllipsis();
    for (let i = start; i <= end; i++) addBtn(i, i, i===currentPage);
    if (end < total - 1) addEllipsis();

    addBtn(total, total, currentPage===total);
  }

  addBtn(Math.min(total, currentPage + 1), "›");
}
</script>/* End custom CSS */