{"id":304,"date":"2026-04-24T06:06:17","date_gmt":"2026-04-24T06:06:17","guid":{"rendered":"https:\/\/dev.dankdesigns.com\/tyre\/?page_id=304"},"modified":"2026-04-29T05:52:47","modified_gmt":"2026-04-29T05:52:47","slug":"appointment","status":"publish","type":"page","link":"https:\/\/dev.dankdesigns.com\/tyre\/appointment\/","title":{"rendered":"Appointment"},"content":{"rendered":"<section class=\"l-section wpb_row height_medium\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_grid cols_1 laptops-cols_inherit tablets-cols_inherit mobiles-cols_1 valign_top type_default stacking_default\"><div class=\"wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"w-html\"><style>\n  \/* Global Resets & Typography *\/\n  :root {\n    --tp-green: #158b46;\n    --tp-green-light: #52a832;\n    --tp-yellow: #FBEE2B; \n    --tp-text: #333333;\n    --tp-border: #e0e0e0;\n  }\n  \n  * {\n    box-sizing: border-box;\n    font-family: Arial, Helvetica, sans-serif;\n  }\n\n  .tp-container {\n    max-width: 1200px;\n    margin: 40px auto;\n    padding: 20px;\n    color: var(--tp-text);\n  }\n\n  \/* Header Section *\/\n  .tp-header h1 {\n    font-size: 38px;\n    font-weight: 800;\n    margin: 0 0 10px 0;\n  }\n  .tp-header p {\n    font-size: 22px;\n    margin: 0 0 30px 0;\n    color: #444;\n  }\n\n  \/* Progress Bar (3 Steps) *\/\n  .tp-progress-container {\n    position: relative;\n    margin-bottom: 50px;\n    padding: 0 5%;\n  }\n  .tp-progress-track {\n    position: absolute;\n    top: 18px; \n    left: 0;\n    width: 100%;\n    height: 6px;\n    background-color: #eeeeee;\n    z-index: 1;\n    border-radius: 3px;\n  }\n  .tp-progress-fill {\n    position: absolute;\n    top: 18px;\n    left: 0;\n    height: 6px;\n    background-color: var(--tp-green);\n    z-index: 2;\n    transition: width 0.4s ease-in-out;\n    width: 15%; \n    border-radius: 3px;\n  }\n  .tp-progress-steps {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    z-index: 3;\n  }\n  .tp-step-indicator {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 30%;\n  }\n  .tp-step-circle {\n    width: 40px;\n    height: 40px;\n    background-color: #eeeeee;\n    color: #333;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    font-weight: bold;\n    margin-bottom: 12px;\n    transition: background-color 0.4s ease, color 0.4s ease;\n    border: 4px solid white; \n  }\n  .tp-step-indicator.active .tp-step-circle, \n  .tp-step-indicator.completed .tp-step-circle {\n    background-color: var(--tp-green);\n    color: white;\n  }\n  .tp-step-title {\n    font-size: 13px;\n    font-weight: bold;\n    color: #000000;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    text-align: center;\n  }\n\n  \/* Main Layout: Form + Summary *\/\n  .tp-layout {\n    display: flex;\n    gap: 40px;\n  }\n  .tp-main-content {\n    flex: 2.5;\n  }\n  .tp-sidebar {\n    flex: 1;\n  }\n\n  \/* Step Visibility *\/\n  .tp-step-content {\n    display: none;\n  }\n  .tp-step-content.active {\n    display: block;\n    animation: fadeIn 0.4s ease-in-out;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(5px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* Step 1: Services Grid *\/\n  .tp-services-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 30px;\n  }\n  .tp-service-column h3 {\n    font-size: 16px;\n    font-weight: bold;\n    margin-bottom: 15px;\n    color: var(--tp-green);\n    border-bottom: 2px solid var(--tp-border);\n    padding-bottom: 5px;\n  }\n  .tp-service-item {\n    display: flex;\n    align-items: center;\n    padding: 10px 12px;\n    border: 1px solid var(--tp-border);\n    margin-bottom: 6px;\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: bold;\n    border-radius: 4px;\n    transition: background-color 0.2s;\n  }\n  .tp-service-item:hover {\n    background-color: #f9f9f9;\n  }\n  .tp-service-item input {\n    margin-right: 15px;\n    accent-color: var(--tp-green);\n  }\n\n  \/* Step 2: Calendar Grid *\/\n  .tp-calendar-wrapper {\n    border: 1px solid var(--tp-border);\n    padding: 20px;\n    border-radius: 4px;\n    overflow-x: auto;\n  }\n  .tp-calendar-inner {\n    min-width: 300px;\n  }\n  .tp-calendar-header {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    text-align: center;\n    font-size: 13px;\n    font-weight: bold;\n    margin-bottom: 15px;\n  }\n  .tp-calendar-grid {\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    gap: 5px;\n    text-align: center;\n  }\n  .tp-time-slot {\n    padding: 10px 0;\n    border: 1px solid var(--tp-border);\n    font-size: 13px;\n    cursor: pointer;\n    border-radius: 3px;\n  }\n  .tp-time-slot:hover {\n    background-color: #f5f5f5;\n  }\n  .tp-custom-date-container {\n    display: none; \n    text-align: center; \n    margin-top: 15px;\n    padding-top: 15px;\n    border-top: 1px dashed var(--tp-border);\n  }\n  .tp-custom-date-container input {\n    padding: 10px;\n    border: 1px solid var(--tp-border);\n    border-radius: 4px;\n    font-size: 14px;\n    width: 80%;\n    max-width: 300px;\n    cursor: pointer;\n  }\n\n  \/* Step 3: User Info *\/\n  .tp-form-row {\n    display: flex;\n    gap: 20px;\n    margin-bottom: 20px;\n  }\n  .tp-form-group {\n    flex: 1;\n  }\n  .tp-form-group label {\n    display: block;\n    font-size: 13px;\n    font-weight: bold;\n    margin-bottom: 8px;\n  }\n  .tp-form-group label span {\n    color: red;\n  }\n  .tp-form-group input {\n    width: 100%;\n    padding: 12px;\n    border: 1px solid var(--tp-border);\n    border-radius: 4px;\n  }\n\n  \/* Summary Sidebar *\/\n  .tp-summary-box {\n    border: 1px solid #f0f0f0;\n    background-color: #fafafa;\n    border-top: 4px solid var(--tp-green);\n    padding: 20px;\n    position: sticky;\n    top: 20px;\n    border-radius: 4px;\n  }\n  .tp-summary-box h3 {\n    margin-top: 0;\n    font-size: 18px;\n    padding-bottom: 15px;\n    border-bottom: 1px solid var(--tp-border);\n  }\n  .tp-summary-section {\n    padding: 15px 0;\n    border-bottom: 1px solid var(--tp-border);\n  }\n  .tp-summary-heading {\n    display: flex;\n    justify-content: space-between;\n    font-weight: bold;\n    font-size: 14px;\n    margin-bottom: 10px;\n    cursor: pointer;\n  }\n  .tp-summary-data {\n    font-size: 13px;\n    color: #555;\n    line-height: 1.6;\n  }\n  .tp-summary-data div {\n    margin-bottom: 5px;\n  }\n\n  \/* Buttons *\/\n  .tp-btn {\n    background-color: var(--tp-yellow);\n    border: none;\n    color: #086967 !important; \n    font-weight: bold;\n    padding: 12px 24px;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 14px;\n    display: inline-block;\n    text-align: center;\n    transition: background-color 0.2s ease;\n  }\n  .tp-btn:hover {\n    background-color: #e5d825; \n    color: #086967 !important; \n  }\n  .tp-btn:disabled {\n    background-color: #cccccc;\n    color: #666666 !important;\n    cursor: not-allowed;\n  }\n  .tp-btn-block {\n    width: 100%;\n    margin-top: 20px;\n  }\n  .tp-nav-buttons {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 20px;\n  }\n  .tp-back-link {\n    background: none;\n    border: none;\n    color: var(--tp-text);\n    font-weight: bold;\n    cursor: pointer;\n    font-size: 14px;\n  }\n\n  \/* In-Page Success Message Design *\/\n  #success-message-container {\n    display: none;\n    text-align: center;\n    padding: 60px 20px;\n    background-color: #fafafa;\n    border-top: 4px solid var(--tp-green);\n    border-radius: 8px;\n    border-left: 1px solid var(--tp-border);\n    border-right: 1px solid var(--tp-border);\n    border-bottom: 1px solid var(--tp-border);\n    margin-top: 20px;\n    animation: fadeIn 0.5s ease-in-out;\n  }\n  #success-message-container h2 {\n    font-size: 32px;\n    color: #111;\n    margin-bottom: 15px;\n  }\n  #success-message-container p {\n    font-size: 16px;\n    color: #555;\n    line-height: 1.6;\n    margin-bottom: 30px;\n  }\n\n  \/* --- MOBILE RESPONSIVE QUERIES --- *\/\n  @media (max-width: 768px) {\n    .tp-header h1 {\n      font-size: 28px;\n    }\n    .tp-header p {\n      font-size: 18px;\n    }\n    .tp-layout {\n      flex-direction: column;\n      gap: 20px;\n    }\n    .tp-services-grid {\n      grid-template-columns: 1fr;\n    }\n    .tp-form-row {\n      flex-direction: column;\n      gap: 0;\n    }\n    .tp-summary-box {\n      position: static;\n      margin-top: 20px;\n    }\n    .tp-progress-container {\n      padding: 0;\n    }\n    .tp-step-circle {\n      width: 32px;\n      height: 32px;\n      font-size: 14px;\n      margin-bottom: 8px;\n      border-width: 3px;\n    }\n    .tp-progress-track, .tp-progress-fill {\n      top: 14px;\n    }\n    .tp-step-title {\n      font-size: 10px;\n      line-height: 1.2;\n    }\n    .tp-calendar-header {\n      font-size: 11px;\n    }\n    .tp-time-slot {\n      font-size: 11px;\n      padding: 8px 0;\n    }\n    .tp-custom-date-container input {\n      width: 100%;\n    }\n  }\n<\/style>\n\n<div class=\"tp-container\">\n  \n  <div class=\"tp-header\">\n    <h1>Schedule Your Service.<\/h1>\n    <p>Quick, convenient booking - no waiting, no stress.<\/p>\n  <\/div>\n\n  <div id=\"form-wrapper\">\n    \n    <div class=\"tp-progress-container\">\n      <div class=\"tp-progress-track\"><\/div>\n      <div class=\"tp-progress-fill\" id=\"progress-fill\"><\/div>\n      <div class=\"tp-progress-steps\">\n        <div class=\"tp-step-indicator active\" id=\"indicator-1\">\n          <div class=\"tp-step-circle\">1<\/div>\n          <div class=\"tp-step-title\">SELECT A SERVICE<\/div>\n        <\/div>\n        <div class=\"tp-step-indicator\" id=\"indicator-2\">\n          <div class=\"tp-step-circle\">2<\/div>\n          <div class=\"tp-step-title\">SELECT PREFERRED DATE<\/div>\n        <\/div>\n        <div class=\"tp-step-indicator\" id=\"indicator-3\">\n          <div class=\"tp-step-circle\">3<\/div>\n          <div class=\"tp-step-title\">YOUR INFORMATION<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"tp-layout\">\n      <div class=\"tp-main-content\">\n        \n        <div id=\"step-1\" class=\"tp-step-content active\">\n          <div class=\"tp-services-grid\">\n            <div class=\"tp-service-column\">\n              <h3>Tyre Services<\/h3>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Tyre Purchase\" class=\"service-check\"> Tyre Purchase<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Tyre Replacement and Balancing\" class=\"service-check\"> Tyre Replacement & Balancing<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Alloy Wheel Installation\" class=\"service-check\"> Alloy Wheel Installation<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"TPMS calibration\" class=\"service-check\"> TPMS calibration<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Tyre Rotation\" class=\"service-check\"> Tyre Rotation<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Wheel Alignment Services\" class=\"service-check\"> Wheel Alignment Services<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Wheel & Tyre Balancing Services\" class=\"service-check\"> Wheel & Tyre Balancing Services<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Tyre Repair : Process, Safety & TYREPLUS Service\" class=\"service-check\"> Tyre Repair : Process & Safety<\/label>\n            <\/div>\n            <div class=\"tp-service-column\">\n              <h3>Car Maintenance Services<\/h3>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Car Battery Replacement\" class=\"service-check\"> Car Battery Replacement<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Brake Servicing\" class=\"service-check\"> Brake Servicing<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Pre-Technical Check\" class=\"service-check\"> Pre-Technical Check<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Oil Change\" class=\"service-check\"> Oil Change<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Shock Absorbers\" class=\"service-check\"> Shock Absorbers<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Windscreen Wipers\" class=\"service-check\"> Windscreen Wipers<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Vehicle Servicing\" class=\"service-check\"> Vehicle Servicing<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Coolant\" class=\"service-check\"> Coolant<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"FREE Tyre Safety Check\" class=\"service-check\"> FREE Tyre Safety Check<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Lights Servicing\" class=\"service-check\"> Lights Servicing<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Log Book Servicing\" class=\"service-check\"> Log Book Servicing<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Wheel Repairs\" class=\"service-check\"> Wheel Repairs<\/label>\n              <label class=\"tp-service-item\"><input type=\"checkbox\" value=\"Emission Controls\" class=\"service-check\"> Emission Controls<\/label>\n            <\/div>\n          <\/div>\n          <div class=\"tp-nav-buttons\">\n              <div><\/div> \n              <button class=\"tp-btn\" onclick=\"goToStep(2)\">Next Step ><\/button>\n          <\/div>\n        <\/div>\n\n        <div id=\"step-2\" class=\"tp-step-content\">\n          <div class=\"tp-calendar-wrapper\">\n            <div class=\"tp-calendar-inner\">\n              <div class=\"tp-calendar-header\">\n                <div>Mon<br>27 Apr<\/div>\n                <div>Tue<br>28 Apr<\/div>\n                <div>Wed<br>29 Apr<\/div>\n                <div>Thu<br>30 Apr<\/div>\n                <div>Fri<br>01 May<\/div>\n                <div>Sat<br>02 May<\/div>\n              <\/div>\n              <div class=\"tp-calendar-grid\">\n                <div class=\"tp-time-slot time-select\" data-date=\"Mon, 27 Apr\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Tue, 28 Apr\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Wed, 29 Apr\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Thu, 30 Apr\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Fri, 01 May\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Sat, 02 May\">08:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Mon, 27 Apr\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Tue, 28 Apr\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Wed, 29 Apr\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Thu, 30 Apr\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Fri, 01 May\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Sat, 02 May\">09:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Mon, 27 Apr\">10:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Tue, 28 Apr\">10:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Wed, 29 Apr\">10:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Thu, 30 Apr\">10:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Fri, 01 May\">10:00<\/div>\n                <div class=\"tp-time-slot time-select\" data-date=\"Sat, 02 May\">10:00<\/div>\n              <\/div>\n            <\/div>\n            \n            <div id=\"more-options-btn\" style=\"text-align:center; margin-top:15px; font-size:13px; text-decoration:underline; cursor:pointer;\" onclick=\"toggleCustomDate()\">More options<\/div>\n            \n            <div id=\"custom-date-container\" class=\"tp-custom-date-container\">\n              <label style=\"font-size:13px; font-weight:bold; display:block; margin-bottom: 10px;\">Select a specific date and time:<\/label>\n              <input type=\"datetime-local\" id=\"custom-date-input\" onclick=\"if(this.showPicker) this.showPicker();\">\n            <\/div>\n\n          <\/div>\n          <div class=\"tp-nav-buttons\">\n            <button class=\"tp-back-link\" onclick=\"goToStep(1)\">< Return to services<\/button>\n            <button class=\"tp-btn\" onclick=\"goToStep(3)\">Next Step ><\/button>\n          <\/div>\n        <\/div>\n\n        <div id=\"step-3\" class=\"tp-step-content\">\n          <div class=\"tp-form-row\">\n            <div class=\"tp-form-group\">\n              <label>Full name <span>*<\/span><\/label>\n              <input type=\"text\" id=\"input-name\" placeholder=\"John Doe\" required>\n            <\/div>\n            <div class=\"tp-form-group\">\n              <label>Registration number<\/label>\n              <input type=\"text\" id=\"input-reg\" placeholder=\"AB12 CDE\">\n            <\/div>\n          <\/div>\n          <div class=\"tp-form-row\">\n            <div class=\"tp-form-group\">\n              <label>Email <span>*<\/span><\/label>\n              <input type=\"email\" id=\"input-email\" placeholder=\"john@example.com\" required>\n            <\/div>\n            <div class=\"tp-form-group\">\n              <label>Telephone number <span>*<\/span><\/label>\n              <input type=\"tel\" id=\"input-tel\" placeholder=\"0400 000 000\" required>\n            <\/div>\n          <\/div>\n          \n          <div class=\"tp-nav-buttons\">\n            <button class=\"tp-back-link\" onclick=\"goToStep(2)\">< Return to calendar<\/button>\n            <button class=\"tp-btn\" id=\"main-submit-btn\" onclick=\"submitToEmail()\">Submit Request<\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"tp-sidebar\">\n        <div class=\"tp-summary-box\">\n          <h3>SUMMARY<\/h3>\n          \n          <div class=\"tp-summary-section\">\n            <div class=\"tp-summary-heading\" onclick=\"goToStep(1)\">Service <span>\u2304<\/span><\/div>\n            <div class=\"tp-summary-data\" id=\"sum-services\">\n               <\/div>\n          <\/div>\n\n          <div class=\"tp-summary-section\" id=\"section-date\">\n            <div class=\"tp-summary-heading\" onclick=\"goToStep(2)\">Your appointment <span>><\/span><\/div>\n            <div class=\"tp-summary-data\" id=\"sum-date\">\n               <\/div>\n          <\/div>\n\n          <button class=\"tp-btn tp-btn-block\" id=\"summary-action-btn\" onclick=\"handleActionClick()\">Next Step<\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <div id=\"success-message-container\">\n    <svg width=\"72\" height=\"72\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--tp-green)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-bottom: 20px;\">\n        <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path>\n        <polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline>\n    <\/svg>\n    <h2>Thank You!<\/h2>\n    <p>Your booking request has been securely sent.<br>Our service team will reach out to you shortly to confirm your appointment details.<\/p>\n    <button class=\"tp-btn\" onclick=\"window.location.reload()\">Book Another Service<\/button>\n  <\/div>\n\n<\/div>\n\n<script>\n  let currentStep = 1;\n\n  \/\/ ICON MAPPING FUNCTION: Automatically assigns the correct icon based on the service name\n  function getServiceIcon(serviceName) {\n    const name = serviceName.toLowerCase();\n    \n    \/\/ Tyre \/ Wheel Services\n    if (name.includes('tyre') || name.includes('tpms') || name.includes('wheel') || name.includes('nitrogen')) {\n      return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"4\"><\/circle><\/svg>`;\n    }\n    \/\/ Brake Services\n    if (name.includes('brake')) {\n      return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 2v4\"><\/path><path d=\"M12 18v4\"><\/path><\/svg>`;\n    }\n    \/\/ Oil \/ Fluids\n    if (name.includes('oil') || name.includes('coolant')) {\n      return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z\"><\/path><\/svg>`;\n    }\n    \/\/ Battery \/ Electrical\n    if (name.includes('battery') || name.includes('light')) {\n      return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><rect x=\"2\" y=\"7\" width=\"16\" height=\"10\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"22\" y1=\"11\" x2=\"22\" y2=\"13\"><\/line><\/svg>`;\n    }\n    \/\/ AC \/ Windscreen \/ Windows\n    if (name.includes('air') || name.includes('windscreen') || name.includes('window')) {\n      return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><path d=\"M12 2v20\"><\/path><path d=\"M2 12h20\"><\/path><path d=\"M4.93 4.93l14.14 14.14\"><\/path><path d=\"M4.93 19.07L19.07 4.93\"><\/path><\/svg>`;\n    }\n    \/\/ Default Icon (Wrench\/Tool)\n    return `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"><\/path><\/svg>`;\n  }\n\n  \/\/ Initialize UI\n  updateSummaryUI();\n\n  \/\/ Event Listeners for Checkboxes\n  document.querySelectorAll('.service-check').forEach(item => {\n    item.addEventListener('change', updateSummaryUI);\n  });\n\n  \/\/ Event Listeners for Grid Time Slots\n  document.querySelectorAll('.time-select').forEach(item => {\n    item.addEventListener('click', (e) => {\n      document.querySelectorAll('.time-select').forEach(el => {\n        el.style.background = '';\n        el.style.fontWeight = 'normal';\n      });\n      document.getElementById('custom-date-input').value = '';\n      \n      e.target.style.background = '#eee';\n      e.target.style.fontWeight = 'bold';\n      \n      let dateText = e.target.getAttribute('data-date');\n      let timeText = e.target.innerText;\n      \n      document.getElementById('sum-date').innerText = `${dateText}\\n${timeText}`;\n      updateSummaryUI();\n    });\n  });\n\n  \/\/ Function to reveal custom date picker\n  function toggleCustomDate() {\n    document.getElementById('custom-date-container').style.display = 'block';\n    document.getElementById('more-options-btn').style.display = 'none';\n  }\n\n  \/\/ Event Listener for Custom Date Picker\n  document.getElementById('custom-date-input').addEventListener('change', function(e) {\n    if(e.target.value) {\n      document.querySelectorAll('.time-select').forEach(el => {\n        el.style.background = '';\n        el.style.fontWeight = 'normal';\n      });\n\n      let d = new Date(e.target.value);\n      let dateString = d.toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' });\n      let timeString = d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });\n      \n      document.getElementById('sum-date').innerText = `${dateString}\\n${timeString}`;\n      updateSummaryUI();\n    }\n  });\n\n\n  function updateSummaryUI() {\n    let servicesHtml = '';\n    let checkedServices = document.querySelectorAll('.service-check:checked');\n    if (checkedServices.length > 0) {\n      checkedServices.forEach(checked => {\n        \/\/ Injecting the custom SVG icon here based on service name\n        let iconSvg = getServiceIcon(checked.value);\n        servicesHtml += `<div style=\"display:flex; align-items:center; gap:8px; margin-bottom:8px;\">${iconSvg} <span style=\"line-height:1.3;\">${checked.value}<\/span><\/div>`;\n      });\n      document.getElementById('sum-services').innerHTML = servicesHtml;\n    } else {\n      document.getElementById('sum-services').innerHTML = ''; \n    }\n\n    let actionBtn = document.getElementById('summary-action-btn');\n    if (currentStep === 1) {\n      actionBtn.innerText = \"Confirm Services\"; \n    } else if (currentStep === 2) {\n      actionBtn.innerText = \"Confirm Date\";\n    } else if (currentStep === 3) {\n      actionBtn.innerText = \"Submit Request\";\n    }\n  }\n\n  function handleActionClick() {\n    if (currentStep < 3) {\n      goToStep(currentStep + 1);\n    } else {\n      submitToEmail();\n    }\n  }\n\n  function goToStep(stepNum) {\n    currentStep = stepNum;\n\n    let fillWidths = ['15%', '50%', '100%'];\n    document.getElementById('progress-fill').style.width = fillWidths[stepNum - 1];\n\n    document.querySelectorAll('.tp-step-content').forEach(el => el.classList.remove('active'));\n    document.getElementById('step-' + stepNum).classList.add('active');\n\n    document.querySelectorAll('.tp-step-indicator').forEach((el, index) => {\n      if(index + 1 === stepNum) {\n        el.classList.add('active');\n        el.classList.remove('completed');\n      } else if (index + 1 < stepNum) {\n        el.classList.add('completed');\n        el.classList.remove('active');\n      } else {\n        el.classList.remove('active');\n        el.classList.remove('completed');\n      }\n    });\n\n    updateSummaryUI();\n  }\n\n  function submitToEmail() {\n    let servicesSelected = Array.from(document.querySelectorAll('.service-check:checked')).map(el => el.value);\n    let dateSelected = document.getElementById('sum-date').innerText.replace(\/\\n\/g, ' at '); \n    \n    let name = document.getElementById('input-name').value.trim();\n    let reg = document.getElementById('input-reg').value.trim();\n    let email = document.getElementById('input-email').value.trim();\n    let tel = document.getElementById('input-tel').value.trim();\n\n    if(!name || !email || !tel) {\n        alert(\"Please fill in your Full Name, Email, and Telephone number before submitting.\");\n        return;\n    }\n\n    let servicesText = servicesSelected.length > 0 ? servicesSelected.join(', ') : 'None Selected';\n\n    let submitBtnSidebar = document.getElementById('summary-action-btn');\n    let submitBtnMain = document.getElementById('main-submit-btn');\n    let originalText = submitBtnSidebar.innerText;\n    \n    submitBtnSidebar.innerText = \"Sending...\";\n    submitBtnSidebar.disabled = true;\n    submitBtnMain.innerText = \"Sending...\";\n    submitBtnMain.disabled = true;\n\n    let formData = new FormData();\n    formData.append('action', 'submit_tyreplus_form'); \n    formData.append('name', name);\n    formData.append('reg', reg);\n    formData.append('email', email);\n    formData.append('tel', tel);\n    formData.append('date', dateSelected);\n    formData.append('services', servicesText);\n\n    fetch('\/tyre\/wp-admin\/admin-ajax.php', {\n        method: 'POST',\n        body: formData\n    })\n    .then(response => response.json())\n    .then(data => {\n        if(data.success) {\n            document.getElementById('form-wrapper').style.display = 'none';\n            document.getElementById('success-message-container').style.display = 'block';\n            window.scrollTo({top: 0, behavior: 'smooth'});\n        } else {\n            alert(\"Oops! Something went wrong. Please check your connection and try again.\");\n            submitBtnSidebar.innerText = originalText;\n            submitBtnSidebar.disabled = false;\n            submitBtnMain.innerText = \"Submit Request\";\n            submitBtnMain.disabled = false;\n        }\n    })\n    .catch(error => {\n        console.error('Error:', error);\n        alert(\"Server error. Please try again later.\");\n        submitBtnSidebar.innerText = originalText;\n        submitBtnSidebar.disabled = false;\n        submitBtnMain.innerText = \"Submit Request\";\n        submitBtnMain.disabled = false;\n    });\n  }\n<\/script><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Schedule Your Service. Quick, convenient booking - no waiting, no stress. 1 SELECT A SERVICE 2 SELECT PREFERRED DATE 3 YOUR INFORMATION Tyre Services Tyre Purchase Tyre Replacement & Balancing Alloy Wheel Installation TPMS calibration Tyre Rotation Wheel Alignment Services Wheel & Tyre Balancing Services Tyre Repair : Process & Safety Car Maintenance Services Car...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-304","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/pages\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":13,"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/pages\/304\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/pages\/304\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/dev.dankdesigns.com\/tyre\/wp-json\/wp\/v2\/media?parent=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}