src/ApplicationBundle/Modules/BookingDemo/Resources/views/pages/book_demo.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. :root {
  5.     --n-cream:     #F7F5F0;
  6.     --n-cream-2:   #F0EDE5;
  7.     --n-cream-3:   #E8E3D9;
  8.     --n-white:     #FFFFFF;
  9.     --n-dark:      #1A1D2E;
  10.     --n-dark-2:    #252840;
  11.     --n-amber:     #C07D2A;
  12.     --n-amber-lt:  #D4954A;
  13.     --n-amber-dim: rgba(192,125,42,.10);
  14.     --n-sage:      #3D6B52;
  15.     --n-muted:     #6B6E7F;
  16.     --n-muted-2:   #9395A5;
  17.     --n-border:    rgba(26,29,46,.07);
  18.     --n-border-md: rgba(26,29,46,.12);
  19.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  20.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  21.     --n-radius:    12px;
  22.     --n-radius-sm: 8px;
  23.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  24. }
  25. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  26. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  27. a { text-decoration: none; }
  29. .navbar {
  30.     background: rgba(247,245,240,.96) !important;
  31.     backdrop-filter: blur(16px) saturate(180%);
  32.     border-bottom: 1px solid var(--n-border) !important;
  33.     box-shadow: none !important;
  34. }
  35. .navbar .nav-link       { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  36. .navbar .nav-link:hover { opacity: 1; }
  37. .navbar .login-btn      { background: var(--n-dark) !important; color: #fff !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  39. /* ── Layout ─────────────────────────────────────────── */
  40. .n-wrap    { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  41. .n-sec     { padding: 80px 0 100px; }
  43. /* ── Hero ────────────────────────────────────────────── */
  44. .bk-hero {
  45.     background: linear-gradient(135deg, var(--n-dark) 0%, var(--n-dark-2) 100%);
  46.     padding: 80px 0 60px;
  47.     text-align: center;
  48.     color: #fff;
  49. }
  50. .bk-hero__badge {
  51.     display: inline-block;
  52.     background: var(--n-amber-dim);
  53.     color: var(--n-amber-lt);
  54.     border: 1px solid rgba(192,125,42,.3);
  55.     border-radius: 20px;
  56.     padding: 5px 16px;
  57.     font-size: 12.5px;
  58.     font-weight: 600;
  59.     letter-spacing: .5px;
  60.     text-transform: uppercase;
  61.     margin-bottom: 22px;
  62. }
  63. .bk-hero h1 {
  64.     font-family: 'Montserrat', sans-serif;
  65.     font-size: clamp(30px,4vw,50px);
  66.     font-weight: 800;
  67.     line-height: 1.15;
  68.     margin-bottom: 16px;
  69. }
  70. .bk-hero h1 em { color: var(--n-amber-lt); font-style: normal; }
  71. .bk-hero p {
  72.     color: rgba(255,255,255,.7);
  73.     font-size: 16px;
  74.     max-width: 500px;
  75.     margin: 0 auto;
  76.     line-height: 1.6;
  77. }
  79. /* ── Booking card ─────────────────────────────────────── */
  80. .bk-card {
  81.     background: var(--n-white);
  82.     border-radius: var(--n-radius);
  83.     box-shadow: var(--n-shadow-md);
  84.     padding: 40px;
  85.     margin-top: -40px;
  86.     position: relative;
  87.     z-index: 10;
  88.     max-width: 820px;
  89.     margin-left: auto;
  90.     margin-right: auto;
  91. }
  93. /* ── Steps indicator ──────────────────────────────────── */
  94. .bk-steps {
  95.     display: flex;
  96.     gap: 0;
  97.     margin-bottom: 36px;
  98.     border-bottom: 1px solid var(--n-border-md);
  99.     padding-bottom: 24px;
  100. }
  101. .bk-step {
  102.     flex: 1;
  103.     display: flex;
  104.     align-items: center;
  105.     gap: 10px;
  106.     font-size: 13.5px;
  107.     font-weight: 500;
  108.     color: var(--n-muted);
  109.     padding-bottom: 16px;
  110.     border-bottom: 2px solid transparent;
  111.     margin-bottom: -25px;
  112.     transition: all .2s;
  113. }
  114. .bk-step.active { color: var(--n-amber); border-color: var(--n-amber); }
  115. .bk-step.done   { color: var(--n-sage); border-color: var(--n-sage); }
  116. .bk-step__num {
  117.     width: 26px; height: 26px;
  118.     border-radius: 50%;
  119.     background: var(--n-cream-2);
  120.     display: flex; align-items: center; justify-content: center;
  121.     font-size: 12px; font-weight: 700;
  122.     flex-shrink: 0;
  123. }
  124. .bk-step.active .bk-step__num { background: var(--n-amber); color: #fff; }
  125. .bk-step.done .bk-step__num   { background: var(--n-sage); color: #fff; }
  127. /* ── Calendar ──────────────────────────────────────────── */
  128. .bk-cal {
  129.     display: none;
  130.     flex-direction: column;
  131.     gap: 20px;
  132. }
  133. .bk-cal.active { display: flex; }
  134. .bk-cal__nav {
  135.     display: flex;
  136.     align-items: center;
  137.     justify-content: space-between;
  138.     margin-bottom: 12px;
  139. }
  140. .bk-cal__nav button {
  141.     background: none; border: 1px solid var(--n-border-md);
  142.     border-radius: var(--n-radius-sm);
  143.     padding: 6px 14px; cursor: pointer;
  144.     color: var(--n-dark); font-size: 13px;
  145.     transition: background .15s;
  146. }
  147. .bk-cal__nav button:hover { background: var(--n-cream-2); }
  148. .bk-cal__month { font-weight: 700; font-size: 15px; }
  149. .bk-cal__grid {
  150.     display: grid;
  151.     grid-template-columns: repeat(7, 1fr);
  152.     gap: 4px;
  153.     text-align: center;
  154. }
  155. .bk-cal__wd {
  156.     font-size: 11px;
  157.     font-weight: 600;
  158.     color: var(--n-muted-2);
  159.     padding: 4px 0 8px;
  160.     text-transform: uppercase;
  161.     letter-spacing: .4px;
  162. }
  163. .bk-cal__day {
  164.     padding: 9px 4px;
  165.     border-radius: var(--n-radius-sm);
  166.     font-size: 13.5px;
  167.     cursor: pointer;
  168.     transition: all .15s;
  169.     border: 1px solid transparent;
  170. }
  171. .bk-cal__day:hover:not(.past):not(.empty) { background: var(--n-amber-dim); border-color: var(--n-amber); color: var(--n-amber); }
  172. .bk-cal__day.selected { background: var(--n-amber); color: #fff !important; border-color: var(--n-amber); }
  173. .bk-cal__day.past  { color: var(--n-muted-2); cursor: default; }
  174. .bk-cal__day.empty { cursor: default; }
  175. .bk-cal__day.today { font-weight: 700; }
  177. /* ── Slots ─────────────────────────────────────────────── */
  178. .bk-slots { display: none; flex-direction: column; gap: 20px; }
  179. .bk-slots.active { display: flex; }
  180. .bk-slots__heading {
  181.     font-size: 14px;
  182.     font-weight: 600;
  183.     color: var(--n-muted);
  184.     margin-bottom: 4px;
  185. }
  186. .bk-slots__grid {
  187.     display: grid;
  188.     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  189.     gap: 8px;
  190. }
  191. .bk-slot {
  192.     padding: 10px 6px;
  193.     border: 1.5px solid var(--n-border-md);
  194.     border-radius: var(--n-radius-sm);
  195.     text-align: center;
  196.     cursor: pointer;
  197.     font-size: 13px;
  198.     font-weight: 500;
  199.     transition: all .15s;
  200.     position: relative;
  201.     user-select: none;
  202. }
  203. .bk-slot:hover:not(.unavailable):not(.selected) { border-color: var(--n-amber); color: var(--n-amber); background: var(--n-amber-dim); }
  204. .bk-slot.selected { background: var(--n-amber); color: #fff; border-color: var(--n-amber); }
  205. .bk-slot.selected .bk-slot__priority { display: inline-flex; }
  206. .bk-slot.unavailable { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
  207. .bk-slot__priority {
  208.     display: none;
  209.     position: absolute;
  210.     top: -8px; right: -8px;
  211.     width: 18px; height: 18px;
  212.     background: var(--n-dark); color: #fff;
  213.     border-radius: 50%; font-size: 10px; font-weight: 700;
  214.     align-items: center; justify-content: center;
  215. }
  216. .bk-slots__tip { font-size: 12.5px; color: var(--n-muted-2); margin-top: 8px; }
  218. /* ── Form ──────────────────────────────────────────────── */
  219. .bk-form { display: none; flex-direction: column; gap: 20px; }
  220. .bk-form.active { display: flex; }
  221. .bk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  222. .bk-form__field { display: flex; flex-direction: column; gap: 6px; }
  223. .bk-form__field label { font-size: 13px; font-weight: 600; color: var(--n-dark); }
  224. .bk-form__field input,
  225. .bk-form__field select {
  226.     height: 44px;
  227.     border: 1.5px solid var(--n-border-md);
  228.     border-radius: var(--n-radius-sm);
  229.     padding: 0 14px;
  230.     font-size: 14px;
  231.     font-family: var(--n-font);
  232.     color: var(--n-dark);
  233.     background: var(--n-cream);
  234.     outline: none;
  235.     transition: border-color .15s;
  236. }
  237. .bk-form__field input:focus,
  238. .bk-form__field select:focus { border-color: var(--n-amber); background: #fff; }
  239. .bk-form__field input.error { border-color: #e53e3e; }
  241. /* ── Buttons ───────────────────────────────────────────── */
  242. .bk-btn-row { display: flex; gap: 12px; margin-top: 12px; justify-content: flex-end; }
  243. .bk-btn {
  244.     display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  245.     padding: 12px 28px;
  246.     border-radius: var(--n-radius-sm);
  247.     font-size: 14px; font-weight: 600;
  248.     cursor: pointer; border: none;
  249.     transition: all .15s;
  250.     font-family: var(--n-font);
  251. }
  252. .bk-btn--primary { background: var(--n-amber); color: #fff; }
  253. .bk-btn--primary:hover { background: var(--n-amber-lt); }
  254. .bk-btn--secondary { background: var(--n-cream-2); color: var(--n-dark); }
  255. .bk-btn--secondary:hover { background: var(--n-cream-3); }
  256. .bk-btn:disabled { opacity: .5; cursor: not-allowed; }
  258. /* ── Selected slots summary ────────────────────────────── */
  259. .bk-summary {
  260.     background: var(--n-cream);
  261.     border-radius: var(--n-radius-sm);
  262.     padding: 16px 20px;
  263.     font-size: 13.5px;
  264.     color: var(--n-muted);
  265.     border: 1px solid var(--n-border-md);
  266. }
  267. .bk-summary__slot { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--n-dark); font-weight: 500; }
  268. .bk-summary__slot::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--n-amber); flex-shrink: 0; }
  270. /* ── Success state ─────────────────────────────────────── */
  271. .bk-success {
  272.     display: none;
  273.     flex-direction: column;
  274.     align-items: center;
  275.     text-align: center;
  276.     gap: 16px;
  277.     padding: 40px 20px;
  278. }
  279. .bk-success.show { display: flex; }
  280. .bk-success__icon { font-size: 52px; }
  281. .bk-success h2 { font-size: 22px; font-weight: 700; }
  282. .bk-success p { color: var(--n-muted); font-size: 15px; max-width: 420px; }
  284. /* ── Alert ─────────────────────────────────────────────── */
  285. .bk-alert {
  286.     padding: 12px 16px;
  287.     border-radius: var(--n-radius-sm);
  288.     font-size: 13.5px;
  289.     display: none;
  290. }
  291. .bk-alert.error   { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; }
  292. .bk-alert.success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
  293. .bk-alert.show    { display: block; }
  295. /* ── Loading spinner ───────────────────────────────────── */
  296. .bk-spinner {
  297.     display: none;
  298.     width: 20px; height: 20px;
  299.     border: 2px solid rgba(255,255,255,.4);
  300.     border-top-color: #fff;
  301.     border-radius: 50%;
  302.     animation: spin .6s linear infinite;
  303. }
  304. @keyframes spin { to { transform: rotate(360deg); } }
  306. /* ── Responsive ────────────────────────────────────────── */
  307. @media (max-width: 600px) {
  308.     .bk-card { padding: 24px 18px; }
  309.     .bk-form__row { grid-template-columns: 1fr; }
  310.     .bk-steps { gap: 4px; }
  311.     .bk-step span:not(.bk-step__num) { display: none; }
  312. }
  313. </style>
  315. <!-- Hero -->
  316. <section class="bk-hero">
  317.     <div class="n-wrap">
  318.         <div class="bk-hero__badge">20-Minute Live Demo</div>
  319.         <h1>Book Your <em>Free</em><br>HoneyBee ERP Demo</h1>
  320.         <p>See exactly how HoneyBee can transform your business — live, personalised, no sales pressure.</p>
  321.     </div>
  322. </section>
  324. <!-- Booking card -->
  325. <section class="n-sec">
  326.     <div class="n-wrap">
  327.         <div class="bk-card">
  329.             <!-- Steps -->
  330.             <div class="bk-steps">
  331.                 <div class="bk-step active" id="step-ind-1">
  332.                     <div class="bk-step__num">1</div>
  333.                     <span>Pick Date &amp; Slots</span>
  334.                 </div>
  335.                 <div class="bk-step" id="step-ind-2">
  336.                     <div class="bk-step__num">2</div>
  337.                     <span>Your Details</span>
  338.                 </div>
  339.                 <div class="bk-step" id="step-ind-3">
  340.                     <div class="bk-step__num">3</div>
  341.                     <span>Confirm</span>
  342.                 </div>
  343.             </div>
  345.             <!-- Alert -->
  346.             <div class="bk-alert" id="bk-alert"></div>
  348.             <!-- Step 1: Calendar + slots -->
  349.             <div class="bk-cal active" id="step-1">
  350.                 <div>
  351.                     <div class="bk-cal__nav">
  352.                         <button id="cal-prev">&larr;</button>
  353.                         <span class="bk-cal__month" id="cal-month-label"></span>
  354.                         <button id="cal-next">&rarr;</button>
  355.                     </div>
  356.                     <div class="bk-cal__grid" id="cal-grid"></div>
  357.                 </div>
  359.                 <!-- Time slots for selected date -->
  360.                 <div class="bk-slots active" id="slots-panel">
  361.                     <div class="bk-slots__heading" id="slots-heading">Select a date to see available slots</div>
  362.                     <div class="bk-slots__grid" id="slots-grid"></div>
  363.                     <div class="bk-slots__tip" id="slots-tip"></div>
  364.                 </div>
  366.                 <div class="bk-btn-row">
  367.                     <button class="bk-btn bk-btn--primary" id="btn-to-step2" disabled>
  368.                         Next: Your Details &rarr;
  369.                     </button>
  370.                 </div>
  371.             </div>
  373.             <!-- Step 2: Personal details form -->
  374.             <div class="bk-form" id="step-2">
  375.                 <!-- Selected slots summary -->
  376.                 <div class="bk-summary">
  377.                     <strong>Your selected slots:</strong>
  378.                     <div id="summary-slots"></div>
  379.                 </div>
  381.                 <div class="bk-form__row">
  382.                     <div class="bk-form__field">
  383.                         <label for="f-name">Full Name <span style="color:#e53e3e">*</span></label>
  384.                         <input type="text" id="f-name" placeholder="Jane Smith" required>
  385.                     </div>
  386.                     <div class="bk-form__field">
  387.                         <label for="f-email">Work Email <span style="color:#e53e3e">*</span></label>
  388.                         <input type="email" id="f-email" placeholder="jane@company.com" required>
  389.                     </div>
  390.                 </div>
  392.                 <div class="bk-form__row">
  393.                     <div class="bk-form__field">
  394.                         <label for="f-phone">Phone Number</label>
  395.                         <input type="tel" id="f-phone" placeholder="+44 7700 900000">
  396.                     </div>
  397.                     <div class="bk-form__field">
  398.                         <label for="f-company">Company Name <span style="color:#e53e3e">*</span></label>
  399.                         <input type="text" id="f-company" placeholder="Acme Ltd" required>
  400.                     </div>
  401.                 </div>
  403.                 <div class="bk-form__field">
  404.                     <label for="f-type">Business Type</label>
  405.                     <select id="f-type">
  406.                         <option value="">— Select —</option>
  407.                         <option value="retail">Retail</option>
  408.                         <option value="manufacturing">Manufacturing</option>
  409.                         <option value="services">Services</option>
  410.                         <option value="wholesale">Wholesale</option>
  411.                         <option value="construction">Construction</option>
  412.                         <option value="hospitality">Hospitality</option>
  413.                         <option value="healthcare">Healthcare</option>
  414.                         <option value="other">Other</option>
  415.                     </select>
  416.                 </div>
  418.                 <div class="bk-btn-row">
  419.                     <button class="bk-btn bk-btn--secondary" id="btn-back-step1">&larr; Back</button>
  420.                     <button class="bk-btn bk-btn--primary" id="btn-submit">
  421.                         <span id="btn-submit-text">Request Demo</span>
  422.                         <span class="bk-spinner" id="btn-submit-spinner"></span>
  423.                     </button>
  424.                 </div>
  425.             </div>
  427.             <!-- Success state -->
  428.             <div class="bk-success" id="step-success">
  429.                 <div class="bk-success__icon">🎉</div>
  430.                 <h2>Request Received!</h2>
  431.                 <p>Thank you. We've sent a confirmation to your email. Our team will confirm your preferred slot shortly.</p>
  432.                 <a href="{{ url('honeybee_about_us') }}" class="bk-btn bk-btn--primary">Back to Home</a>
  433.             </div>
  435.         </div>
  436.     </div>
  437. </section>
  439. <script>
  440. (function () {
  441.     'use strict';
  443.     // ── State ──────────────────────────────────────────────────────
  444.     const today      = new Date(); today.setHours(0,0,0,0);
  445.     let curYear      = today.getFullYear();
  446.     let curMonth     = today.getMonth();
  447.     let selectedDate = null;
  448.     let selectedSlots = []; // [{date, time, label}]
  450.     const MAX_SLOTS = 3;
  451.     const SLOTS_URL = '{{ path("book_demo_slots", {"date": "__DATE__"}) }}';
  452.     const SUBMIT_URL = '{{ path("book_demo_submit") }}';
  454.     // ── DOM refs ───────────────────────────────────────────────────
  455.     const calGrid      = document.getElementById('cal-grid');
  456.     const calLabel     = document.getElementById('cal-month-label');
  457.     const slotsPanel   = document.getElementById('slots-panel');
  458.     const slotsGrid    = document.getElementById('slots-grid');
  459.     const slotsHeading = document.getElementById('slots-heading');
  460.     const slotsTip     = document.getElementById('slots-tip');
  461.     const alertEl      = document.getElementById('bk-alert');
  462.     const step1        = document.getElementById('step-1');
  463.     const step2        = document.getElementById('step-2');
  464.     const stepSuccess  = document.getElementById('step-success');
  465.     const btnToStep2   = document.getElementById('btn-to-step2');
  466.     const btnBack      = document.getElementById('btn-back-step1');
  467.     const btnSubmit    = document.getElementById('btn-submit');
  468.     const summaryEl    = document.getElementById('summary-slots');
  470.     const MONTHS = ['January','February','March','April','May','June',
  471.                     'July','August','September','October','November','December'];
  472.     const WDS    = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  474.     // ── Calendar render ────────────────────────────────────────────
  475.     function renderCalendar() {
  476.         calLabel.textContent = MONTHS[curMonth] + ' ' + curYear;
  477.         calGrid.innerHTML    = '';
  479.         WDS.forEach(d => {
  480.             const el = document.createElement('div');
  481.             el.className   = 'bk-cal__wd';
  482.             el.textContent = d;
  483.             calGrid.appendChild(el);
  484.         });
  486.         const first = new Date(curYear, curMonth, 1).getDay();
  487.         const days  = new Date(curYear, curMonth + 1, 0).getDate();
  489.         for (let i = 0; i < first; i++) {
  490.             const el = document.createElement('div');
  491.             el.className = 'bk-cal__day empty';
  492.             calGrid.appendChild(el);
  493.         }
  495.         for (let d = 1; d <= days; d++) {
  496.             const dt  = new Date(curYear, curMonth, d);
  497.             const dow = dt.getDay();
  498.             const el  = document.createElement('div');
  499.             el.className   = 'bk-cal__day';
  500.             el.textContent = d;
  502.             if (dt < today || dow === 0 || dow === 6) {
  503.                 el.classList.add('past');
  504.             } else {
  505.                 if (dt.toDateString() === today.toDateString()) el.classList.add('today');
  506.                 const ds = fmt(dt);
  507.                 if (selectedDate === ds) el.classList.add('selected');
  508.                 el.addEventListener('click', () => selectDate(ds));
  509.             }
  510.             calGrid.appendChild(el);
  511.         }
  512.     }
  514.     function fmt(dt) {
  515.         const y = dt.getFullYear();
  516.         const m = String(dt.getMonth()+1).padStart(2,'0');
  517.         const d = String(dt.getDate()).padStart(2,'0');
  518.         return `${y}-${m}-${d}`;
  519.     }
  521.     // ── Date select ────────────────────────────────────────────────
  522.     function selectDate(dateStr) {
  523.         selectedDate = dateStr;
  524.         renderCalendar();
  525.         loadSlots(dateStr);
  526.     }
  528.     function loadSlots(dateStr) {
  529.         slotsHeading.textContent = 'Loading slots…';
  530.         slotsGrid.innerHTML      = '';
  531.         slotsTip.textContent     = '';
  533.         const url = SLOTS_URL.replace('__DATE__', dateStr);
  534.         fetch(url)
  535.             .then(r => r.json())
  536.             .then(data => renderSlots(dateStr, data.slots || []))
  537.             .catch(() => { slotsHeading.textContent = 'Error loading slots. Please try again.'; });
  538.     }
  540.     function renderSlots(dateStr, slots) {
  541.         const dt    = new Date(dateStr + 'T00:00:00');
  542.         const label = dt.toLocaleDateString('en-GB', {weekday:'long', day:'numeric', month:'long'});
  543.         slotsHeading.textContent = 'Available slots for ' + label + ':';
  545.         if (!slots.length) {
  546.             slotsGrid.innerHTML = '<p style="color:var(--n-muted-2);font-size:13px;">No slots available on this date.</p>';
  547.             return;
  548.         }
  550.         slotsGrid.innerHTML = '';
  551.         slots.forEach(slot => {
  552.             const el   = document.createElement('div');
  553.             const key  = dateStr + '|' + slot.time;
  554.             const alreadySel = selectedSlots.find(s => s.key === key);
  556.             el.className   = 'bk-slot' + (!slot.available ? ' unavailable' : '') + (alreadySel ? ' selected' : '');
  557.             el.textContent = slot.time;
  559.             const badge = document.createElement('span');
  560.             badge.className = 'bk-slot__priority';
  561.             if (alreadySel) badge.textContent = selectedSlots.indexOf(alreadySel) + 1;
  562.             el.appendChild(badge);
  564.             if (slot.available) {
  565.                 el.addEventListener('click', () => toggleSlot(dateStr, slot.time, el, badge));
  566.             }
  567.             slotsGrid.appendChild(el);
  568.         });
  570.         updateTip();
  571.     }
  573.     function toggleSlot(dateStr, time, el, badge) {
  574.         const key = dateStr + '|' + time;
  575.         const idx = selectedSlots.findIndex(s => s.key === key);
  577.         if (idx > -1) {
  578.             selectedSlots.splice(idx, 1);
  579.             el.classList.remove('selected');
  580.         } else {
  581.             if (selectedSlots.length >= MAX_SLOTS) {
  582.                 showAlert('You can select up to 3 preferred slots.', 'error');
  583.                 return;
  584.             }
  585.             const dt   = new Date(dateStr + 'T' + time + ':00');
  586.             const lbl  = dt.toLocaleDateString('en-GB', {weekday:'short', day:'numeric', month:'short'}) + ' at ' + time;
  587.             selectedSlots.push({key, date: dateStr, time, label: lbl});
  588.             el.classList.add('selected');
  589.         }
  591.         // Re-render all badges
  592.         document.querySelectorAll('.bk-slot.selected .bk-slot__priority').forEach(b => b.textContent = '');
  593.         selectedSlots.forEach((s, i) => {
  594.             const k  = s.key.replace('|', '\\|');
  595.             const sl = slotsGrid.querySelector('.bk-slot.selected');
  596.             // refresh current view
  597.         });
  598.         renderSlots(dateStr, Array.from(slotsGrid.querySelectorAll('.bk-slot')).map(el => ({
  599.             time: el.textContent.replace(/\d$/, '').trim(),
  600.             available: !el.classList.contains('unavailable'),
  601.         })));
  602.         // reload properly
  603.         loadSlots(dateStr);
  605.         btnToStep2.disabled = selectedSlots.length === 0;
  606.         updateTip();
  607.         hideAlert();
  608.     }
  610.     function updateTip() {
  611.         slotsTip.textContent = selectedSlots.length > 0
  612.             ? `${selectedSlots.length} of ${MAX_SLOTS} slots selected (priority order).`
  613.             : 'Pick up to 3 preferred time slots. First = highest priority.';
  614.     }
  616.     // ── Step navigation ────────────────────────────────────────────
  617.     btnToStep2.addEventListener('click', () => {
  618.         if (selectedSlots.length === 0) return;
  619.         step1.classList.remove('active');
  620.         step2.classList.add('active');
  621.         setStep(2);
  623.         summaryEl.innerHTML = '';
  624.         selectedSlots.forEach((s, i) => {
  625.             const el = document.createElement('div');
  626.             el.className   = 'bk-summary__slot';
  627.             el.textContent = `#${i+1} — ${s.label}`;
  628.             summaryEl.appendChild(el);
  629.         });
  630.     });
  632.     btnBack.addEventListener('click', () => {
  633.         step2.classList.remove('active');
  634.         step1.classList.add('active');
  635.         setStep(1);
  636.         hideAlert();
  637.     });
  639.     function setStep(n) {
  640.         document.querySelectorAll('.bk-step').forEach((el, i) => {
  641.             el.classList.remove('active', 'done');
  642.             if (i + 1 < n) el.classList.add('done');
  643.             if (i + 1 === n) el.classList.add('active');
  644.         });
  645.     }
  647.     // ── Submit ─────────────────────────────────────────────────────
  648.     btnSubmit.addEventListener('click', () => {
  649.         const name    = document.getElementById('f-name').value.trim();
  650.         const email   = document.getElementById('f-email').value.trim();
  651.         const company = document.getElementById('f-company').value.trim();
  653.         if (!name || !email || !company) {
  654.             showAlert('Please fill in all required fields.', 'error');
  655.             return;
  656.         }
  657.         if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
  658.             showAlert('Please enter a valid email address.', 'error');
  659.             return;
  660.         }
  662.         btnSubmit.disabled = true;
  663.         document.getElementById('btn-submit-spinner').style.display = 'inline-block';
  664.         document.getElementById('btn-submit-text').textContent = 'Sending…';
  665.         hideAlert();
  667.         const body = new URLSearchParams();
  668.         body.append('name',          name);
  669.         body.append('email',         email);
  670.         body.append('phone',         document.getElementById('f-phone').value.trim());
  671.         body.append('company_name',  company);
  672.         body.append('business_type', document.getElementById('f-type').value);
  673.         selectedSlots.forEach(s => body.append('slots[]', s.key));
  675.         fetch(SUBMIT_URL, {method: 'POST', body, headers: {'X-Requested-With': 'XMLHttpRequest'}})
  676.             .then(r => r.json())
  677.             .then(data => {
  678.                 if (data.success) {
  679.                     step2.classList.remove('active');
  680.                     stepSuccess.classList.add('show');
  681.                     document.querySelector('.bk-steps').style.display = 'none';
  682.                 } else {
  683.                     showAlert(data.message || 'Something went wrong. Please try again.', 'error');
  684.                     resetBtn();
  685.                 }
  686.             })
  687.             .catch(() => {
  688.                 showAlert('Network error. Please check your connection.', 'error');
  689.                 resetBtn();
  690.             });
  691.     });
  693.     function resetBtn() {
  694.         btnSubmit.disabled = false;
  695.         document.getElementById('btn-submit-spinner').style.display = 'none';
  696.         document.getElementById('btn-submit-text').textContent = 'Request Demo';
  697.     }
  699.     // ── Alert helpers ──────────────────────────────────────────────
  700.     function showAlert(msg, type) {
  701.         alertEl.textContent = msg;
  702.         alertEl.className   = 'bk-alert ' + type + ' show';
  703.     }
  704.     function hideAlert() {
  705.         alertEl.className = 'bk-alert';
  706.     }
  708.     // ── Month nav ──────────────────────────────────────────────────
  709.     document.getElementById('cal-prev').addEventListener('click', () => {
  710.         curMonth--;
  711.         if (curMonth < 0) { curMonth = 11; curYear--; }
  712.         renderCalendar();
  713.     });
  714.     document.getElementById('cal-next').addEventListener('click', () => {
  715.         curMonth++;
  716.         if (curMonth > 11) { curMonth = 0; curYear++; }
  717.         renderCalendar();
  718.     });
  720.     // ── Init ───────────────────────────────────────────────────────
  721.     renderCalendar();
  722.     updateTip();
  723.     slotsHeading.textContent = 'Select a date above to see available time slots.';
  724. })();
  725. </script>
  727. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}