{"id":15316,"date":"2025-09-10T07:43:00","date_gmt":"2025-09-10T07:43:00","guid":{"rendered":"https:\/\/jewelsbygalla.com\/ae\/?page_id=15316"},"modified":"2025-12-08T17:26:35","modified_gmt":"2025-12-08T13:26:35","slug":"appointments","status":"publish","type":"page","link":"https:\/\/jewelsbygalla.com\/ae\/en\/appointments\/","title":{"rendered":"Appointments"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15316\" class=\"elementor elementor-15316\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"e-con-top elementor-element elementor-element-bfd2c08 e-flex e-con-boxed e-con e-parent\" data-id=\"bfd2c08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe2d0da elementor-widget elementor-widget-heading\" data-id=\"fe2d0da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Choose Your Appointment<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con-top elementor-element elementor-element-c5b096b e-flex e-con-boxed e-con e-parent\" data-id=\"c5b096b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-953eac3 elementor-widget elementor-widget-html\" data-id=\"953eac3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n\r\n\r\n<div id=\"appointment-section\">\r\n  <div id=\"preloaderSpinner\" class=\"hiddenSpinner\"><div class=\"spinnerAppointment\"><\/div><\/div>\r\n\r\n  <div class=\"date-time-container\">\r\n    <div id=\"date-picker\">\r\n      <h4>Select Date<\/h4>\r\n      <input type=\"text\" id=\"calendar\" placeholder=\"Select Date\" readonly>\r\n    <\/div>\r\n    <div id=\"time-picker\">\r\n      <h4>Select Time<\/h4>\r\n      <div id=\"time-slots\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <button id=\"book-appointment\" disabled>Proceed to Checkout \u2192<\/button>\r\n<\/div>\r\n\r\n<div id=\"selected-products\">\r\n  <h4 class=\"appointmentsSubtitle\">Selected Products<\/h4>\r\n  <p id=\"appointment-location-label\"><\/p>\r\n  <ul id=\"product-list\"><\/ul>\r\n<\/div>\r\n\r\n<script>\r\n(async function () {\r\n  const api = 'https:\/\/jewelgalla-backend.vercel.app\/api\/available_slots';\r\n  const tryAtHomeList = JSON.parse(localStorage.getItem('tryAtHomeList') || '[]');\r\n  const productList = document.getElementById('product-list');\r\n  const timeSlotsContainer = document.getElementById('time-slots');\r\n  const bookButton = document.getElementById('book-appointment');\r\n  \r\n  const mode = localStorage.getItem('tahMode') || 'home';\r\n\r\n  \/\/ text you want to show in summary & cart\r\n  const appointmentLocation =\r\n    mode === 'kulture'\r\n      ? 'Kulture House \u2013 106 Jumeira St - Jumeirah - Jumeira First - Dubai - United Arab Emirates'\r\n      : 'View at Home';\r\n\r\n  localStorage.setItem('appointmentLocation', appointmentLocation);\r\n  \r\n  const locLabel = document.getElementById('appointment-location-label');\r\n  if (locLabel) locLabel.textContent = appointmentLocation;\r\n\r\n  \/\/ show selected products\r\n  productList.innerHTML = tryAtHomeList.map(p => `\r\n  <li>\r\n    <div class=\"product-item\">\r\n      ${p.img ? `<img decoding=\"async\" src=\"${p.img}\" alt=\"${p.title}\" width=\"100\">` : ''}\r\n      <div class=\"title-quantity-container\"><h5>${p.title}<\/h5><\/div>\r\n      <p>${p.priceText || (p.priceValue ? `AED ${p.priceValue.toLocaleString()}` : '')}<\/p>\r\n    <\/div>\r\n  <\/li>`).join('');\r\n\r\n\r\n  \/\/ calendar\r\n  flatpickr(\"#calendar\", {\r\n    inline: true,\r\n    minDate: \"today\",\r\n    onChange: async function (selectedDates, dateStr) {\r\n      if (!selectedDates.length) return;\r\n      localStorage.setItem('appointmentDate', dateStr);\r\n      document.getElementById('preloaderSpinner').classList.remove('hiddenSpinner');\r\n      const slots = await fetch(`${api}?date=${dateStr}`).then(r=>r.json()).catch(()=>({slots:[]}));\r\n      updateTimeSlots(slots.slots || [], dateStr);\r\n      document.getElementById('preloaderSpinner').classList.add('hiddenSpinner');\r\n      bookButton.disabled = true;\r\n    }\r\n  });\r\n\r\n  function updateTimeSlots(slots, selectedDate){\r\n    timeSlotsContainer.innerHTML = '';\r\n    const now = new Date();\r\n    const isToday = selectedDate === now.toISOString().split('T')[0];\r\n    const sixHoursLater = new Date(now.getTime() + 6*60*60*1000);\r\n\r\n    (slots||[]).forEach(slot=>{\r\n      const btn = document.createElement('button');\r\n      btn.textContent = `${slot.startTime} - ${slot.endTime}`;\r\n      btn.className = 'time-slot';\r\n\r\n      const toDate = (t)=>{\r\n        const m=t.match(\/(\\d+):(\\d+)\\s*(AM|PM)\/); if(!m) return null;\r\n        let h = (+m[1])%12; if(m[3]==='PM') h+=12;\r\n        const d=new Date(selectedDate+'T00:00:00'); d.setHours(h,+m[2],0,0); return d;\r\n      };\r\n\r\n      const start = toDate(slot.startTime);\r\n      if ((isToday && start<=sixHoursLater) || !slot.available) {\r\n        btn.disabled = true; btn.classList.add('disabled');\r\n      }\r\n\r\n      btn.onclick = ()=>{\r\n        if(btn.disabled) return;\r\n        document.querySelectorAll('.time-slot').forEach(b=>b.classList.remove('selected'));\r\n        btn.classList.add('selected');\r\n        localStorage.setItem('appointmentTime', `${slot.startTime} - ${slot.endTime}`);\r\n        bookButton.disabled = false;\r\n      };\r\n\r\n      timeSlotsContainer.appendChild(btn);\r\n    });\r\n\r\n    if (!slots || !slots.length) timeSlotsContainer.innerHTML = '<p>No available slots for this date.<\/p>';\r\n  }\r\n\r\n  document.getElementById('book-appointment').addEventListener('click', function(){\r\n    window.location.href = \"\/ae\/en\/checkout-summary\"; \/\/ your next page slug\r\n  });\r\n})();\r\n<\/script>\r\n\r\n<style>\r\n\/* ---------- Base \/ tokens ---------- *\/\r\n:root{\r\n  --brand:#194761;          \/* main brand (CTA \/ selected) *\/\r\n  --brand-ink:#fff;\r\n  --ink:#1e2a32;            \/* headings\/text *\/\r\n  --muted:#6b7a86;          \/* secondary text *\/\r\n  --line:#e6eaee;           \/* borders *\/\r\n  --bg:#ffffff;             \/* panels *\/\r\n  --chip:#f7f9fb;           \/* light surfaces *\/\r\n  --radius:12px;\r\n  --shadow:0 6px 20px rgba(0,0,0,.06);\r\n}\r\n\r\n\/* ---------- Page heading ---------- *\/\r\n.appointmentsTitle{\r\n  margin:72px auto 24px;\r\n  text-align:center;\r\n  font-size: clamp(28px, 3vw, 40px);\r\n  font-weight:700;\r\n  letter-spacing:.02em;\r\n  color:var(--ink);\r\n}\r\n\r\n\/* ---------- Panel ---------- *\/\r\n#appointment-section,\r\n#selected-products{\r\n  width:min(1120px, 92vw);\r\n  margin:0 auto 28px;\r\n  background:var(--bg);\r\n  border-radius:var(--radius);\r\n  box-shadow:var(--shadow);\r\n  padding:20px;\r\n}\r\n\r\n\/* ---------- Layout ---------- *\/\r\n.date-time-container{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:28px;\r\n}\r\n#date-picker h4,#time-picker h4,\r\n.appointmentsSubtitle{\r\n  margin:0 0 12px;\r\n  font-size:18px;\r\n  font-weight:700;\r\n  color:var(--ink);\r\n}\r\n\r\n\/* ---------- Flatpickr cleanup (Shopify-ish) ---------- *\/\r\n.flatpickr-calendar{\r\n  box-shadow:none!important;\r\n  border:1px solid var(--line)!important;\r\n  border-radius:var(--radius)!important;\r\n}\r\n.flatpickr-day{\r\n  border-radius:10px!important;\r\n}\r\n.flatpickr-day.today{\r\n  border:1px solid var(--brand)!important;\r\n  color:var(--brand)!important;\r\n}\r\n.flatpickr-day.selected,\r\n.flatpickr-day.startRange,\r\n.flatpickr-day.endRange{\r\n  background:var(--brand)!important;\r\n  color:var(--brand-ink)!important;\r\n}\r\n\r\n\/* ---------- Time slots ---------- *\/\r\n#time-slots{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:12px;\r\n}\r\n.time-slot{\r\n  appearance:none;\r\n  border:1px solid var(--line);\r\n  border-radius:999px;\r\n  background:#fff;\r\n  color:var(--ink);\r\n  padding:14px 16px;\r\n  font-size:14px;\r\n  line-height:1;\r\n  cursor:pointer;\r\n  transition:.18s ease;\r\n}\r\n.time-slot:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); }\r\n.time-slot.selected{\r\n  background:var(--brand);\r\n  border-color:var(--brand);\r\n  color:var(--brand-ink);\r\n}\r\n.time-slot:disabled{\r\n  background:#f3f6f8;\r\n  color:#a1adb7;\r\n  border-color:#edf1f4;\r\n  cursor:not-allowed;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* ---------- CTA button ---------- *\/\r\n#book-appointment{\r\n  width:100%;\r\n  margin-top:22px;\r\n  border:0;\r\n  border-radius:999px;\r\n  padding:16px 18px;\r\n  background:var(--brand);\r\n  color:var(--brand-ink);\r\n  font-weight:700;\r\n  letter-spacing:.02em;\r\n  box-shadow:0 10px 24px rgba(25,71,97,.18);\r\n  transition:transform .08s ease, box-shadow .18s ease, opacity .18s ease;\r\n}\r\n#book-appointment:hover{ transform:translateY(-1px); }\r\n#book-appointment:disabled{\r\n  opacity:.55;\r\n  box-shadow:none;\r\n  cursor:not-allowed;\r\n}\r\n\r\n\/* ---------- Selected products list ---------- *\/\r\n#product-list{\r\n  list-style:none; margin:0; padding:0;\r\n  display:grid; gap:14px;\r\n  grid-template-columns:repeat(4,minmax(0,1fr));\r\n}\r\n#product-list li{\r\n  background:var(--chip);\r\n  border:1px solid var(--line);\r\n  border-radius:14px;\r\n  padding:5px;\r\n  display:grid; gap:10px;\r\n}\r\n.product-item{ display:grid; gap:8px; }\r\n.product-item img{\r\n  width:100%; aspect-ratio:1\/1; object-fit:contain;\r\n  border-radius:10px; background:#fff;\r\n}\r\n.product-item h5{\r\n  margin:0; font-size:14px; font-weight:600; color:var(--ink);\r\n}\r\n.product-item p{\r\n  margin:0; font-weight:700; color:var(--brand);\r\n}\r\n\r\n\/* ---------- Preloader ---------- *\/\r\n#preloaderSpinner{\r\n  position:fixed; inset:0; background:rgba(255,255,255,.75);\r\n  display:flex; align-items:center; justify-content:center; z-index:9999;\r\n}\r\n#preloaderSpinner.hiddenSpinner{ display:none; }\r\n.spinnerAppointment{\r\n  width:56px; height:56px; border-radius:50%;\r\n  border:6px solid #e9eef2; border-top-color:var(--brand);\r\n  animation:spin 1s linear infinite;\r\n}\r\n@keyframes spin{ to{ transform:rotate(360deg) } }\r\n\r\n\/* ---------- Responsive ---------- *\/\r\n@media (max-width: 900px){\r\n  .date-time-container{ grid-template-columns:1fr; }\r\n  #time-slots{ grid-template-columns:repeat(2,1fr); }\r\n  #product-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }\r\n}\r\n@media (max-width: 520px){\r\n  #product-list{ grid-template-columns:repeat(2,1fr); }\r\n}\r\n.flatpickr-current-month {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\nselect.flatpickr-monthDropdown-months {\r\n    font-size: 14px !important;\r\n    padding-left: 0 !important;\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Choose Your Appointment Select Date Select Time Proceed to Checkout \u2192 Selected Products<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15316","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/pages\/15316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/comments?post=15316"}],"version-history":[{"count":62,"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/pages\/15316\/revisions"}],"predecessor-version":[{"id":17397,"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/pages\/15316\/revisions\/17397"}],"wp:attachment":[{"href":"https:\/\/jewelsbygalla.com\/ae\/en\/wp-json\/wp\/v2\/media?parent=15316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}