{"id":8140,"date":"2025-09-20T04:18:34","date_gmt":"2025-09-20T04:18:34","guid":{"rendered":"https:\/\/powerfitksa.com\/%d8%a7%d8%b4%d8%aa%d8%b1%d9%83\/"},"modified":"2025-10-17T22:18:08","modified_gmt":"2025-10-17T22:18:08","slug":"%d8%a7%d8%b4%d8%aa%d8%b1%d9%83","status":"publish","type":"page","link":"https:\/\/powerfitksa.com\/ar\/%d8%a7%d8%b4%d8%aa%d8%b1%d9%83\/","title":{"rendered":"\u0627\u0634\u062a\u0631\u0643"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8140\" class=\"elementor elementor-8140 elementor-7894\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b8cf4f7 e-flex e-con-boxed e-con e-parent \" data-id=\"b8cf4f7\" data-element_type=\"container\" data-e-type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-32cb734 elementor-widget elementor-widget-html\" data-id=\"32cb734\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n  \n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u062d\u062c\u0632 \u0635\u0627\u0644\u0629 \u0628\u0627\u0648\u0631 \u0641\u064a\u062a<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      body {\n        color: #333;\n        line-height: 1.6;\n        padding: 20px;\n      }\n\n      .booking-container {\n        max-width: 1000px;\n        margin: 0 auto;\n        background: white;\n        border-radius: 12px;\n        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);\n        overflow: hidden;\n      }\n\n      .header {\n        background: linear-gradient(135deg, #2c3e50, #1a2530);\n        color: white;\n        padding: 25px 30px;\n        text-align: center;\n      }\n\n      .header h1 {\n        font-weight: 700;\n        font-size: 28px;\n        margin-bottom: 5px;\n      }\n\n      .header p {\n        opacity: 0.9;\n      }\n\n      .booking-steps {\n        display: flex;\n        justify-content: space-between;\n        padding: 20px 40px;\n        background: #f8f9fa;\n        position: relative;\n      }\n\n      .booking-steps::before {\n        content: \"\";\n        position: absolute;\n        top: 40px;\n        left: 80px;\n        right: 80px;\n        height: 4px;\n        background: #e0e0e0;\n        z-index: 1;\n      }\n\n      .step {\n        text-align: center;\n        position: relative;\n        z-index: 2;\n        flex: 1;\n      }\n\n      .step-number {\n        width: 50px;\n        height: 50px;\n        background: #e0e0e0;\n        color: #777;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0 auto 10px;\n        font-weight: bold;\n        font-size: 18px;\n        transition: all 0.3s ease;\n      }\n\n      .step.active .step-number {\n        background: #3498db;\n        color: white;\n        transform: scale(1.1);\n      }\n\n      .step.completed .step-number {\n        background: #2ecc71;\n        color: white;\n      }\n\n      .step-label {\n        font-size: 14px;\n        color: #777;\n        font-weight: 500;\n      }\n\n      .step.active .step-label {\n        color: #3498db;\n        font-weight: 600;\n      }\n\n      .step-content {\n        display: none;\n        padding: 30px;\n      }\n\n      .step-content.active {\n        display: block;\n        animation: fadeIn 0.5s ease;\n      }\n\n      @keyframes fadeIn {\n        from {\n          opacity: 0;\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      h2 {\n        color: #2c3e50;\n        margin-bottom: 20px;\n        padding-bottom: 10px;\n        border-bottom: 2px solid #f0f0f0;\n      }\n\n      .service-options {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 20px;\n        margin-bottom: 30px;\n      }\n\n      .service-option {\n        border: 2px solid #e0e0e0;\n        border-radius: 10px;\n        padding: 25px 20px;\n        text-align: center;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        background: white;\n      }\n\n      .service-option:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n      }\n\n      .service-option.selected {\n        border-color: #3498db;\n        background-color: #f0f8ff;\n      }\n\n      .service-icon {\n        font-size: 50px;\n        margin-bottom: 15px;\n        color: #3498db;\n      }\n\n      .service-name {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 10px;\n      }\n\n      .service-description {\n        color: #777;\n        font-size: 14px;\n      }\n\n      .package-options {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n        gap: 20px;\n        margin-bottom: 30px;\n      }\n\n      .package-option {\n        border: 2px solid #e0e0e0;\n        border-radius: 10px;\n        padding: 20px;\n        text-align: center;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        background: white;\n      }\n\n      .package-option:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n      }\n\n      .package-option.selected {\n        border-color: #2ecc71;\n        background-color: #f0fff4;\n      }\n\n      .package-name {\n        font-size: 18px;\n        font-weight: 600;\n        margin-bottom: 10px;\n      }\n\n      .package-price {\n        color: #2ecc71;\n        font-weight: 700;\n        font-size: 22px;\n        margin-bottom: 5px;\n      }\n\n      .package-sessions {\n        color: #7f8c8d;\n        font-size: 14px;\n      }\n\n      .calendar-container {\n        background: white;\n        border-radius: 10px;\n        padding: 20px;\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n        margin-bottom: 25px;\n      }\n\n      .calendar-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n        position: relative;\n      }\n\n      .calendar-title {\n        font-size: 20px;\n        font-weight: 600;\n        color: #2c3e50;\n      }\n\n      .calendar-nav {\n        display: flex;\n        gap: 10px;\n      }\n\n      .calendar-nav button {\n        background: #3498db;\n        color: white;\n        border: none;\n        border-radius: 5px;\n        padding: 8px 15px;\n        cursor: pointer;\n        transition: background 0.3s;\n      }\n\n      .calendar-nav button:hover {\n        background: #2980b9;\n      }\n\n      .calendar-grid {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: 8px;\n      }\n\n      .calendar-day-header {\n        text-align: center;\n        font-weight: 600;\n        padding: 15px 10px;\n        background: #f8f9fa;\n        border-radius: 8px;\n        color: #2c3e50;\n      }\n\n      .calendar-day {\n        text-align: center;\n        padding: 12px 8px;\n        border: 2px solid #e9ecef;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        background: white;\n        position: relative;\n      }\n\n      .calendar-day:hover {\n        background: #e8f4ff;\n        border-color: #3498db;\n      }\n\n      .calendar-day.selected {\n        background: #3498db;\n        color: white;\n        border-color: #3498db;\n      }\n\n      .calendar-day.disabled {\n        color: #ced4da;\n        cursor: not-allowed;\n        background: #f8f9fa;\n      }\n\n      .calendar-day.has-sessions {\n        border-color: #2ecc71;\n        background: #f0fff4;\n      }\n\n      .calendar-day.today {\n        border-color: #e74c3c;\n        background: #ffebee;\n      }\n\n      .calendar-day.has-sessions::after {\n        content: \"\";\n        position: absolute;\n        bottom: 5px;\n        right: 5px;\n        width: 8px;\n        height: 8px;\n        background: #2ecc71;\n        border-radius: 50%;\n      }\n\n      .time-slots-container {\n        background: white;\n        border-radius: 10px;\n        padding: 20px;\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n        margin-bottom: 25px;\n      }\n\n      .time-slots-container h3 {\n        color: 1a2530;\n      }\n\n      .time-slots {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n        gap: 12px;\n        margin-top: 15px;\n      }\n\n      .time-slot {\n        padding: 12px 10px;\n        text-align: center;\n        border: 2px solid #e9ecef;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        background: white;\n      }\n\n      .time-slot:hover {\n        background: #e8f4ff;\n        border-color: #3498db;\n      }\n\n      .time-slot.selected {\n        background: #3498db;\n        color: white;\n        border-color: #3498db;\n      }\n\n      .time-slot.disabled {\n        color: #ced4da;\n        cursor: not-allowed;\n        background: #f8f9fa;\n      }\n\n      .selected-sessions {\n        background: white;\n        border-radius: 10px;\n        padding: 20px;\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n        margin-bottom: 25px;\n      }\n\n      .session-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 12px 15px;\n        border-bottom: 1px solid #e9ecef;\n        background: #f8f9fa;\n        border-radius: 6px;\n        margin-bottom: 10px;\n      }\n\n      .session-item:last-child {\n        margin-bottom: 0;\n      }\n\n      .session-details {\n        flex: 1;\n      }\n\n      .session-date {\n        font-weight: 600;\n        color: #2c3e50;\n      }\n\n      .session-time {\n        color: #7f8c8d;\n        font-size: 14px;\n      }\n\n      .remove-session {\n        color: #e74c3c;\n        cursor: pointer;\n        padding: 8px;\n        border-radius: 50%;\n        transition: background 0.3s;\n      }\n\n      .remove-session:hover {\n        background: #ffebee;\n      }\n\n      .navigation-buttons {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 20px;\n      }\n\n      .btn {\n        padding: 14px 30px;\n        border: none;\n        border-radius: 8px;\n        cursor: pointer;\n        font-weight: 600;\n        transition: all 0.3s ease;\n        font-size: 16px;\n      }\n\n      .btn-prev {\n        background: #e0e0e0;\n        color: #333;\n      }\n\n      .btn-prev:hover {\n        background: #d0d0d0;\n      }\n\n      .btn-next {\n        background: #3498db;\n        color: white;\n      }\n\n      .btn-next:hover {\n        background: #2980b9;\n      }\n\n      .btn-confirm {\n        background: #2ecc71;\n        color: white;\n        padding: 16px 40px;\n        font-size: 18px;\n      }\n\n      .btn-confirm:hover {\n        background: #27ae60;\n      }\n\n      .summary-container {\n        background: white;\n        border-radius: 10px;\n        padding: 25px;\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n        margin-bottom: 25px;\n      }\n\n      .summary-item {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 15px;\n        padding-bottom: 15px;\n        border-bottom: 1px solid #f0f0f0;\n      }\n\n      .summary-label {\n        font-weight: 600;\n        color: #2c3e50;\n      }\n\n      .summary-value {\n        color: #2c3e50;\n      }\n\n      .summary-total {\n        font-size: 22px;\n        font-weight: 700;\n        color: #2ecc71;\n        border-top: 2px solid #e0e0e0;\n        padding-top: 15px;\n        margin-top: 10px;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .instructions {\n        background: #e8f4ff;\n        border-left: 4px solid #3498db;\n        padding: 15px 20px;\n        margin-bottom: 20px;\n        border-radius: 4px;\n        font-size: 14px;\n      }\n\n      .current-selection {\n        background: #f0fff4;\n        border-left: 4px solid #2ecc71;\n        padding: 12px 20px;\n        margin-bottom: 20px;\n        border-radius: 4px;\n        font-size: 15px;\n      }\n\n      .loading {\n        display: inline-block;\n        width: 20px;\n        height: 20px;\n        border: 3px solid rgba(255, 255, 255, 0.3);\n        border-radius: 50%;\n        border-top-color: #fff;\n        animation: spin 1s ease-in-out infinite;\n      }\n\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      @media (max-width: 768px) {\n        .booking-steps {\n          flex-direction: column;\n          align-items: center;\n          gap: 25px;\n          padding: 20px;\n        }\n\n        .booking-steps::before {\n          display: none;\n        }\n\n        .service-options,\n        .package-options {\n          grid-template-columns: 1fr;\n        }\n\n        .calendar-grid {\n          grid-template-columns: repeat(7, 1fr);\n          gap: 5px;\n        }\n\n        .calendar-day-header,\n        .calendar-day {\n          padding: 8px 5px;\n          font-size: 14px;\n        }\n\n        .btn {\n          padding: 12px 20px;\n          font-size: 14px;\n        }\n\n        .btn-confirm {\n          padding: 14px 25px;\n        }\n      }\n    <\/style>\n  \n  \n    <div class=\"booking-container\">\n      <div class=\"header\">\n        <h1>\u062d\u062c\u0632 \u0635\u0627\u0644\u0629 \u0628\u0627\u0648\u0631 \u0641\u064a\u062a<\/h1>\n        <p>\u0627\u062d\u062c\u0632 \u062c\u0644\u0633\u0627\u062a \u062a\u062f\u0631\u064a\u0628\u0643 \u0641\u064a \u062e\u0637\u0648\u0627\u062a \u0628\u0633\u064a\u0637\u0629 \u0641\u0642\u0637<\/p>\n      <\/div>\n\n      <div class=\"booking-steps\">\n        <div class=\"step active\" id=\"step-1\">\n          <div class=\"step-number\">1<\/div>\n          <div class=\"step-label\">\u0627\u062e\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/div>\n        <\/div>\n        <div class=\"step\" id=\"step-2\">\n          <div class=\"step-number\">2<\/div>\n          <div class=\"step-label\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629<\/div>\n        <\/div>\n        <div class=\"step\" id=\"step-3\">\n          <div class=\"step-number\">3<\/div>\n          <div class=\"step-label\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062c\u0644\u0633\u0627\u062a<\/div>\n        <\/div>\n        <div class=\"step\" id=\"step-4\">\n          <div class=\"step-number\">4<\/div>\n          <div class=\"step-label\">\u0627\u0644\u062a\u0623\u0643\u064a\u062f<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Step 1: Service Selection -->\n      <div class=\"step-content active\" id=\"service-selection\">\n        <h2>\u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/h2>\n        <div class=\"instructions\">\n \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0630\u064a \u062a\u0647\u062a\u0645 \u0628\u0647\n        <\/div>\n\n        <div class=\"service-options\">\n          <div class=\"service-option\" data-service=\"club\">\n            <div class=\"service-icon\"><i class=\"fas fa-dumbbell\"><\/i><\/div>\n            <div class=\"service-name\">\u0639\u0636\u0648\u064a\u0629 \u0627\u0644\u0646\u0627\u062f\u064a<\/div>\n            <div class=\"service-description\">\n \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u062c\u0645\u064a\u0639 \u0645\u0631\u0627\u0641\u0642 \u0627\u0644\u0635\u0627\u0644\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 \u0648\u0627\u0644\u0633\u064a\u0634\u0646\u0632 \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629\n            <\/div>\n          <\/div>\n          <div class=\"service-option\" data-service=\"personal\">\n            <div class=\"service-icon\"><i class=\"fas fa-user\"><\/i><\/div>\n            <div class=\"service-name\">\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0634\u062e\u0635\u064a<\/div>\n            <div class=\"service-description\">\n \u062a\u062f\u0631\u064a\u0628 \u0641\u0631\u062f\u064a \u0645\u0639 \u0645\u062a\u062e\u0635\u0635\u064a\u0646 \u0645\u0639\u062a\u0645\u062f\u064a\u0646\n            <\/div>\n          <\/div>\n          <div class=\"service-option\" data-service=\"ems\">\n            <div class=\"service-icon\"><i class=\"fas fa-bolt\"><\/i><\/div>\n            <div class=\"service-name\">\u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0639\u0636\u0644\u0627\u062a \u0628\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621<\/div>\n            <div class=\"service-description\">\n \u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0639\u0636\u0644\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u062a\u0645\u0627\u0631\u064a\u0646 \u0623\u0643\u062b\u0631 \u0641\u0639\u0627\u0644\u064a\u0629\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"navigation-buttons\">\n          <button class=\"btn btn-prev\" disabled>\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n<button class=\"btn btn-next\" id=\"to-packages\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Step 2: Package Selection -->\n      <div class=\"step-content\" id=\"package-selection\">\n        <h2>\u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629<\/h2>\n        <div class=\"instructions\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u062a\u064a \u062a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643<\/div>\n        <div class=\"current-selection\" id=\"service-selection-display\">\n \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629: \u0644\u0627 \u0634\u064a\u0621\n        <\/div>\n\n        <div class=\"package-options\" id=\"package-options\">\n          <!-- Packages will be loaded dynamically based on service -->\n        <\/div>\n        <div class=\"navigation-buttons\">\n          <button class=\"btn btn-prev\" id=\"to-services\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n<button class=\"btn btn-next\" id=\"to-sessions\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Step 3: Date & Time Selection -->\n      <div class=\"step-content\" id=\"sessions-selection\">\n        <h2>\u0627\u062e\u062a\u0631 \u062c\u0644\u0633\u0627\u062a\u0643<\/h2>\n        <div class=\"instructions\">\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0623\u064a\u0627\u0645 \u0648\u0627\u0644\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0644\u062c\u0644\u0633\u0627\u062a\u0643\n        <\/div>\n        <div class=\"current-selection\" id=\"package-selection-display\">\n \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629: \u0644\u0627 \u0634\u064a\u0621\n        <\/div>\n\n        <div id=\"club-calendar-section\">\n          <div class=\"calendar-container\">\n            <div class=\"calendar-header\">\n              <div class=\"calendar-title\" id=\"calendar-title\">October 2023<\/div>\n              <div class=\"calendar-nav\">\n                <button id=\"prev-month\">\n                  <i class=\"fas fa-chevron-left\"><\/i>\n                <\/button>\n                <button id=\"next-month\">\n                  <i class=\"fas fa-chevron-right\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n            <div class=\"calendar-grid\" id=\"calendar\">\n              <!-- Calendar will be generated dynamically -->\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"session-booking-section\" class=\"hidden\">\n          <div class=\"calendar-container\">\n            <div class=\"calendar-header\">\n              <div class=\"calendar-title\" id=\"session-calendar-title\">\n October 2023\n              <\/div>\n              <div class=\"calendar-nav\">\n                <button id=\"prev-month-session\">\n                  <i class=\"fas fa-chevron-left\"><\/i>\n                <\/button>\n                <button id=\"next-month-session\">\n                  <i class=\"fas fa-chevron-right\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n            <div class=\"calendar-grid\" id=\"session-calendar\">\n              <!-- Calendar will be generated dynamically -->\n            <\/div>\n          <\/div>\n\n          <div class=\"time-slots-container\">\n            <h3>\n \u0627\u0644\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0645\u062a\u0627\u062d\u0629 \u0644\u0640\n<span id=\"selected-date\">\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e\u0627<\/span>\n            <\/h3>\n            <div class=\"time-slots\" id=\"time-slots\">\n              <!-- Time slots will be generated dynamically -->\n            <\/div>\n          <\/div>\n\n          <div class=\"selected-sessions\">\n            <h3>\n \u0627\u0644\u062c\u0644\u0633\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 \u0644\u062f\u064a\u0643 (0\/0)\n            <\/h3>\n            <div id=\"selected-sessions-list\">\n              <p class=\"instructions\">\n \u0644\u0645 \u064a\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0623\u064a \u062c\u0644\u0633\u0627\u062a \u0628\u0639\u062f. \u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0623\u064a\u0627\u0645 \u0648\u0627\u0644\u0623\u0648\u0642\u0627\u062a \u0644\u062c\u0644\u0633\u0627\u062a\u0643\n\u0627\u0644\u062c\u0644\u0633\u0627\u062a \n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"navigation-buttons\">\n          <button class=\"btn btn-prev\" id=\"to-packages-back\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n<button class=\"btn btn-next\" id=\"to-confirmation\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Step 4: Confirmation -->\n      <div class=\"step-content\" id=\"confirmation\">\n        <h2>\u0645\u0644\u062e\u0635 \u0627\u0644\u062d\u062c\u0632<\/h2>\n        <div class=\"instructions\">\n \u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u062a\u0641\u0627\u0635\u064a\u0644 \u062d\u062c\u0632\u0643 \u0642\u0628\u0644 \u0627\u0644\u062a\u0623\u0643\u064a\u062f\n        <\/div>\n\n        <div class=\"summary-container\">\n          <div class=\"summary-item\">\n            <span class=\"summary-label\">\u0627\u0644\u062e\u062f\u0645\u0629:<\/span>\n            <span class=\"summary-value\" id=\"summary-service\"><\/span>\n          <\/div>\n          <div class=\"summary-item\">\n            <span class=\"summary-label\">\u0627\u0644\u0628\u0627\u0642\u0629:<\/span>\n            <span class=\"summary-value\" id=\"summary-package\"><\/span>\n          <\/div>\n          <div class=\"summary-item\">\n            <span class=\"summary-label\">\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0628\u062f\u0621:<\/span>\n            <span class=\"summary-value\" id=\"summary-date\"><\/span>\n          <\/div>\n          <div class=\"summary-item\">\n            <span class=\"summary-label\">\u0627\u0644\u062c\u0644\u0633\u0627\u062a:<\/span>\n            <span class=\"summary-value\" id=\"summary-sessions\"><\/span>\n          <\/div>\n          <div class=\"summary-item summary-total\">\n            <span class=\"summary-label\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0643\u0644\u0649:<\/span>\n            <span class=\"summary-value\" id=\"summary-price\"><\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"navigation-buttons\">\n          <button class=\"btn btn-prev\" id=\"to-datetime\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n<button class=\"btn btn-confirm\" id=\"confirm-booking\">\n\u0623\u0643\u062f \u0627\u0644\u0637\u0644\u0628 &amp; \u0623\u0636\u0641 \u0644\u0644\u0633\u0644\u0647\n<\/button> \n        <\/div>\n      <\/div>\n    <\/div>\n\n    <script>\n      \/\/ Product data from the CSV\n      const products = {\n        club: [\n          {\n            id: 7728,\n            name: \"1 Month Club Membership\",\n            price: 569,\n            sessions: 1,\n          },\n          {\n            id: 7729,\n            name: \"3 Month Club Membership\",\n            price: 1635,\n            sessions: 1,\n          },\n          {\n            id: 7730,\n            name: \"6 Month Club Membership\",\n            price: 2611,\n            sessions: 1,\n          },\n          {\n            id: 7731,\n            name: \"12 Month Club Membership\",\n            price: 5282,\n            sessions: 1,\n          },\n          {\n            id: 7747,\n            name: \"Club Membership Trial Session\",\n            price: 0,\n            sessions: 1,\n          },\n        ],\n        personal: [\n          {\n            id: 7732,\n            name: \"4 Session Personal Training\",\n            price: 1646,\n            sessions: 4,\n          },\n          {\n            id: 7733,\n            name: \"8 Session Personal Training\",\n            price: 2822,\n            sessions: 8,\n          },\n          {\n            id: 7734,\n            name: \"12 Session Personal Training\",\n            price: 3528,\n            sessions: 12,\n          },\n          {\n            id: 7735,\n            name: \"24 Session Personal Training\",\n            price: 5670,\n            sessions: 24,\n          },\n          {\n            id: 7746,\n            name: \"Personal Training Trial Session\",\n            price: 0,\n            sessions: 1,\n          },\n        ],\n        ems: [\n          { id: 7736, name: \"4 EMS Session\", price: 1763, sessions: 4 },\n          { id: 7737, name: \"8 EMS Session\", price: 2940, sessions: 8 },\n          { id: 7738, name: \"12 EMS Session\", price: 3736, sessions: 12 },\n          { id: 7743, name: \"24 EMS Session\", price: 6313, sessions: 24 },\n          { id: 7744, name: \"EMS Trial Session\", price: 0, sessions: 1 },\n        ],\n      };\n\n      \/\/ Current booking state\n      let bookingState = {\n        service: null,\n        package: null,\n        startDate: null,\n        sessions: [],\n        selectedDate: null,\n        currentMonth: new Date().getMonth(),\n        currentYear: new Date().getFullYear(),\n      };\n\n      \/\/ DOM elements\n      const stepElements = document.querySelectorAll(\".step\");\n      const stepContentElements = document.querySelectorAll(\".step-content\");\n      const serviceOptions = document.querySelectorAll(\".service-option\");\n      const packageOptionsContainer =\n        document.getElementById(\"package-options\");\n      const serviceSelectionDisplay = document.getElementById(\n        \"service-selection-display\"\n      );\n      const packageSelectionDisplay = document.getElementById(\n        \"package-selection-display\"\n      );\n      const sessionsCountElement = document.getElementById(\"sessions-count\");\n      const totalSessionsElement = document.getElementById(\"total-sessions\");\n      const selectedDateElement = document.getElementById(\"selected-date\");\n      const calendarTitle = document.getElementById(\"calendar-title\");\n      const sessionCalendarTitle = document.getElementById(\n        \"session-calendar-title\"\n      );\n      const confirmButton = document.getElementById(\"confirm-booking\");\n\n      \/\/ Initialize the booking process\n      document.addEventListener(\"DOMContentLoaded\", function () {\n        \/\/ Set current date information\n        const today = new Date();\n        bookingState.currentMonth = today.getMonth();\n        bookingState.currentYear = today.getFullYear();\n\n        \/\/ Service selection\n        serviceOptions.forEach((option) => {\n          option.addEventListener(\"click\", function () {\n            serviceOptions.forEach((opt) => opt.classList.remove(\"selected\"));\n            this.classList.add(\"selected\");\n            bookingState.service = this.dataset.service;\n            serviceSelectionDisplay.textContent = `Selected service: ${getServiceName(\n              bookingState.service\n            )}`;\n            loadPackages(bookingState.service);\n          });\n        });\n\n        \/\/ Navigation between steps\n        document\n          .getElementById(\"to-packages\")\n          .addEventListener(\"click\", function () {\n            if (!bookingState.service) {\n              alert(\"Please select a service to continue\");\n              return;\n            }\n            navigateToStep(2);\n          });\n\n        document\n          .getElementById(\"to-services\")\n          .addEventListener(\"click\", function () {\n            navigateToStep(1);\n          });\n\n        document\n          .getElementById(\"to-sessions\")\n          .addEventListener(\"click\", function () {\n            if (!bookingState.package) {\n              alert(\"Please select a package to continue\");\n              return;\n            }\n            navigateToStep(3);\n            initializeCalendar();\n          });\n\n        document\n          .getElementById(\"to-packages-back\")\n          .addEventListener(\"click\", function () {\n            navigateToStep(2);\n          });\n\n        document\n          .getElementById(\"to-confirmation\")\n          .addEventListener(\"click\", function () {\n            if (bookingState.service === \"club\" && !bookingState.startDate) {\n              alert(\"Please select a start date for your membership\");\n              return;\n            }\n\n            if (\n              (bookingState.service === \"personal\" ||\n                bookingState.service === \"ems\") &&\n              bookingState.sessions.length !== bookingState.package.sessions\n            ) {\n              alert(\n                `Please select all ${bookingState.package.sessions} sessions to continue`\n              );\n              return;\n            }\n\n            updateSummary();\n            navigateToStep(4);\n          });\n\n        document\n          .getElementById(\"to-datetime\")\n          .addEventListener(\"click\", function () {\n            navigateToStep(3);\n          });\n\n        document\n          .getElementById(\"confirm-booking\")\n          .addEventListener(\"click\", function () {\n            addToCartAndRedirect();\n          });\n\n        \/\/ Calendar navigation\n        document\n          .getElementById(\"prev-month\")\n          .addEventListener(\"click\", function () {\n            bookingState.currentMonth--;\n            if (bookingState.currentMonth < 0) {\n              bookingState.currentMonth = 11;\n              bookingState.currentYear--;\n            }\n            renderClubCalendar();\n          });\n\n        document\n          .getElementById(\"next-month\")\n          .addEventListener(\"click\", function () {\n            bookingState.currentMonth++;\n            if (bookingState.currentMonth > 11) {\n              bookingState.currentMonth = 0;\n              bookingState.currentYear++;\n            }\n            renderClubCalendar();\n          });\n\n        document\n          .getElementById(\"prev-month-session\")\n          .addEventListener(\"click\", function () {\n            bookingState.currentMonth--;\n            if (bookingState.currentMonth < 0) {\n              bookingState.currentMonth = 11;\n              bookingState.currentYear--;\n            }\n            renderSessionCalendar();\n          });\n\n        document\n          .getElementById(\"next-month-session\")\n          .addEventListener(\"click\", function () {\n            bookingState.currentMonth++;\n            if (bookingState.currentMonth > 11) {\n              bookingState.currentMonth = 0;\n              bookingState.currentYear++;\n            }\n            renderSessionCalendar();\n          });\n\n        \/\/ Initialize calendars\n        initializeCalendar();\n      });\n\n      \/\/ Get service name from service key\n      function getServiceName(serviceKey) {\n        switch (serviceKey) {\n          case \"club\":\n            return \"Club Membership\";\n          case \"personal\":\n            return \"Personal Training\";\n          case \"ems\":\n            return \"EMS Training\";\n          default:\n            return \"None\";\n        }\n      }\n\n      \/\/ Load packages based on selected service\n      function loadPackages(service) {\n        packageOptionsContainer.innerHTML = \"\";\n\n        products[service].forEach((pkg) => {\n          const packageElement = document.createElement(\"div\");\n          packageElement.className = \"package-option\";\n          packageElement.dataset.id = pkg.id;\n          packageElement.innerHTML = `\n                    <div class=\"package-name\">${pkg.name}<\/div>\n                    <div class=\"package-price\">${\n                      pkg.price > 0 ? \"SAR \" + pkg.price : \"FREE\"\n                    }<\/div>\n                    ${\n                      pkg.sessions > 1\n                        ? `<div class=\"package-sessions\">${pkg.sessions} sessions<\/div>`\n                        : \"\"\n                    }\n                `;\n\n          packageElement.addEventListener(\"click\", function () {\n            document\n              .querySelectorAll(\".package-option\")\n              .forEach((opt) => opt.classList.remove(\"selected\"));\n            this.classList.add(\"selected\");\n            bookingState.package = pkg;\n            packageSelectionDisplay.textContent = `Selected package: ${pkg.name}`;\n            totalSessionsElement.textContent = pkg.sessions;\n          });\n\n          packageOptionsContainer.appendChild(packageElement);\n        });\n      }\n\n      \/\/ Initialize calendar based on service type\n      function initializeCalendar() {\n        if (bookingState.service === \"club\") {\n          document\n            .getElementById(\"club-calendar-section\")\n            .classList.remove(\"hidden\");\n          document\n            .getElementById(\"session-booking-section\")\n            .classList.add(\"hidden\");\n          renderClubCalendar();\n        } else {\n          document\n            .getElementById(\"club-calendar-section\")\n            .classList.add(\"hidden\");\n          document\n            .getElementById(\"session-booking-section\")\n            .classList.remove(\"hidden\");\n          renderSessionCalendar();\n        }\n      }\n\n      \/\/ Render calendar for club membership (select start date only)\n      function renderClubCalendar() {\n        const calendarEl = document.getElementById(\"calendar\");\n        calendarEl.innerHTML = \"\";\n\n        \/\/ Update calendar title\n        const monthName = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth\n        ).toLocaleString(\"default\", { month: \"long\" });\n        calendarTitle.textContent = `${monthName} ${bookingState.currentYear}`;\n\n        \/\/ Add day headers\n        const days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n        days.forEach((day) => {\n          const dayHeader = document.createElement(\"div\");\n          dayHeader.className = \"calendar-day-header\";\n          dayHeader.textContent = day;\n          calendarEl.appendChild(dayHeader);\n        });\n\n        \/\/ Get first day of month and number of days in month\n        const firstDay = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth,\n          1\n        ).getDay();\n        const daysInMonth = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth + 1,\n          0\n        ).getDate();\n\n        \/\/ Add empty days for offset\n        for (let i = 0; i < firstDay; i++) {\n          const emptyDay = document.createElement(\"div\");\n          emptyDay.className = \"calendar-day disabled\";\n          calendarEl.appendChild(emptyDay);\n        }\n\n        \/\/ Get today's date\n        const today = new Date();\n        const todayFormatted = formatDate(today);\n\n        \/\/ Calculate next month same day\n        const nextMonthSameDay = new Date(today);\n        nextMonthSameDay.setMonth(nextMonthSameDay.getMonth() + 1);\n        const nextMonthSameDayFormatted = formatDate(nextMonthSameDay);\n\n        \/\/ Add days\n        for (let i = 1; i <= daysInMonth; i++) {\n          const dayEl = document.createElement(\"div\");\n          dayEl.className = \"calendar-day\";\n          dayEl.textContent = i;\n\n          const date = new Date(\n            bookingState.currentYear,\n            bookingState.currentMonth,\n            i\n          );\n          const dateFormatted = formatDate(date);\n\n          dayEl.dataset.date = dateFormatted;\n\n          \/\/ Check if today\n          if (dateFormatted === todayFormatted) {\n            dayEl.classList.add(\"today\");\n          }\n\n          \/\/ Disable dates before today or after next month same day\n          if (date < today || date > nextMonthSameDay) {\n            dayEl.classList.add(\"disabled\");\n          } else {\n            dayEl.addEventListener(\"click\", function () {\n              document\n                .querySelectorAll(\"#calendar .calendar-day\")\n                .forEach((d) => d.classList.remove(\"selected\"));\n              this.classList.add(\"selected\");\n              bookingState.startDate = this.dataset.date;\n            });\n          }\n\n          calendarEl.appendChild(dayEl);\n        }\n      }\n\n      \/\/ Render calendar for session booking (EMS and Personal Training)\n      function renderSessionCalendar() {\n        const calendarEl = document.getElementById(\"session-calendar\");\n        calendarEl.innerHTML = \"\";\n\n        \/\/ Update calendar title\n        const monthName = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth\n        ).toLocaleString(\"default\", { month: \"long\" });\n        sessionCalendarTitle.textContent = `${monthName} ${bookingState.currentYear}`;\n\n        \/\/ Add day headers\n        const days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n        days.forEach((day) => {\n          const dayHeader = document.createElement(\"div\");\n          dayHeader.className = \"calendar-day-header\";\n          dayHeader.textContent = day;\n          calendarEl.appendChild(dayHeader);\n        });\n\n        \/\/ Get first day of month and number of days in month\n        const firstDay = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth,\n          1\n        ).getDay();\n        const daysInMonth = new Date(\n          bookingState.currentYear,\n          bookingState.currentMonth + 1,\n          0\n        ).getDate();\n\n        \/\/ Add empty days for offset\n        for (let i = 0; i < firstDay; i++) {\n          const emptyDay = document.createElement(\"div\");\n          emptyDay.className = \"calendar-day disabled\";\n          calendarEl.appendChild(emptyDay);\n        }\n\n        \/\/ Get today's date\n        const today = new Date();\n        const todayFormatted = formatDate(today);\n\n        \/\/ Calculate next month same day\n        const nextMonthSameDay = new Date(today);\n        nextMonthSameDay.setMonth(nextMonthSameDay.getMonth() + 1);\n        const nextMonthSameDayFormatted = formatDate(nextMonthSameDay);\n\n        \/\/ Add days\n        for (let i = 1; i <= daysInMonth; i++) {\n          const dayEl = document.createElement(\"div\");\n          dayEl.className = \"calendar-day\";\n          dayEl.textContent = i;\n\n          const date = new Date(\n            bookingState.currentYear,\n            bookingState.currentMonth,\n            i\n          );\n          const dateFormatted = formatDate(date);\n\n          dayEl.dataset.date = dateFormatted;\n\n          \/\/ Check if today\n          if (dateFormatted === todayFormatted) {\n            dayEl.classList.add(\"today\");\n          }\n\n          \/\/ Disable dates before today or after next month same day\n          if (date < today || date > nextMonthSameDay) {\n            dayEl.classList.add(\"disabled\");\n          } else {\n            \/\/ Check if this day already has sessions\n            const hasSession = bookingState.sessions.some(\n              (s) => s.date === dateFormatted\n            );\n            if (hasSession) {\n              dayEl.classList.add(\"has-sessions\");\n            }\n\n            dayEl.addEventListener(\"click\", function () {\n              document\n                .querySelectorAll(\"#session-calendar .calendar-day\")\n                .forEach((d) => d.classList.remove(\"selected\"));\n              this.classList.add(\"selected\");\n              bookingState.selectedDate = this.dataset.date;\n              selectedDateElement.textContent = formatDateDisplay(\n                this.dataset.date\n              );\n              generateTimeSlots();\n            });\n          }\n\n          calendarEl.appendChild(dayEl);\n        }\n      }\n\n      \/\/ Format date as YYYY-MM-DD\n      function formatDate(date) {\n        const year = date.getFullYear();\n        const month = (date.getMonth() + 1).toString().padStart(2, \"0\");\n        const day = date.getDate().toString().padStart(2, \"0\");\n        return `${year}-${month}-${day}`;\n      }\n\n      \/\/ Format date for display (e.g., Oct 15, 2023)\n      function formatDateDisplay(dateString) {\n        const date = new Date(dateString);\n        return date.toLocaleDateString(\"en-US\", {\n          month: \"short\",\n          day: \"numeric\",\n          year: \"numeric\",\n        });\n      }\n\n      \/\/ Convert 24h time to 12h format (e.g., 14:00 to 02:00 PM)\n      function formatTime(time24) {\n        const [hours, minutes] = time24.split(\":\");\n        const period = hours >= 12 ? \"PM\" : \"AM\";\n        const hours12 = hours % 12 || 12;\n        return `${hours12.toString().padStart(2, \"0\")}:${minutes} ${period}`;\n      }\n\n      \/\/ Generate time slots for the selected date\n      function generateTimeSlots() {\n        if (!bookingState.selectedDate) return;\n\n        const timeSlotsEl = document.getElementById(\"time-slots\");\n        timeSlotsEl.innerHTML = \"\";\n\n        \/\/ Check if selected date already has a session\n        const hasSessionOnDate = bookingState.sessions.some(\n          (s) => s.date === bookingState.selectedDate\n        );\n\n        \/\/ Generate time slots from 2pm to 10pm\n        for (let hour = 14; hour <= 22; hour++) {\n          const timeSlot = document.createElement(\"div\");\n          timeSlot.className = \"time-slot\";\n\n          \/\/ Format time in 12-hour format\n          const time24 = `${hour}:00`;\n          const time12 = formatTime(time24);\n\n          timeSlot.textContent = time12;\n          timeSlot.dataset.time = time24;\n\n          \/\/ Check if this time slot is already taken\n          const isTaken = bookingState.sessions.some(\n            (s) => s.date === bookingState.selectedDate && s.time === time24\n          );\n\n          if (isTaken) {\n            timeSlot.classList.add(\"disabled\");\n          } else if (hasSessionOnDate) {\n            \/\/ Only one session per day allowed\n            timeSlot.classList.add(\"disabled\");\n          } else if (\n            bookingState.sessions.length >= bookingState.package.sessions\n          ) {\n            \/\/ Maximum sessions reached\n            timeSlot.classList.add(\"disabled\");\n          } else {\n            timeSlot.addEventListener(\"click\", function () {\n              \/\/ Add to selected sessions\n              bookingState.sessions.push({\n                date: bookingState.selectedDate,\n                time: time24,\n              });\n\n              \/\/ Update UI\n              updateSelectedSessionsList();\n              renderSessionCalendar();\n\n              \/\/ Immediately disable all other time slots for this day\n              document.querySelectorAll(\".time-slot\").forEach((slot) => {\n                if (!slot.classList.contains(\"disabled\")) {\n                  slot.classList.add(\"disabled\");\n                }\n              });\n\n              \/\/ If max sessions reached, disable all time slots\n              if (\n                bookingState.sessions.length >= bookingState.package.sessions\n              ) {\n                document\n                  .querySelectorAll(\".time-slot:not(.disabled)\")\n                  .forEach((slot) => {\n                    slot.classList.add(\"disabled\");\n                  });\n              }\n            });\n          }\n\n          timeSlotsEl.appendChild(timeSlot);\n        }\n      }\n\n      \/\/ Update the list of selected sessions\n      function updateSelectedSessionsList() {\n        const sessionsListEl = document.getElementById(\n          \"selected-sessions-list\"\n        );\n        sessionsCountElement.textContent = bookingState.sessions.length;\n\n        if (bookingState.sessions.length === 0) {\n          sessionsListEl.innerHTML =\n            '<p class=\"instructions\">No sessions selected yet. Please select days and times for your sessions.<\/p>';\n          return;\n        }\n\n        sessionsListEl.innerHTML = \"\";\n\n        \/\/ Sort sessions by date and time\n        bookingState.sessions.sort((a, b) => {\n          const dateCompare = a.date.localeCompare(b.date);\n          if (dateCompare !== 0) return dateCompare;\n          return a.time.localeCompare(b.time);\n        });\n\n        bookingState.sessions.forEach((session, index) => {\n          const sessionItem = document.createElement(\"div\");\n          sessionItem.className = \"session-item\";\n          sessionItem.innerHTML = `\n                    <div class=\"session-details\">\n                        <div class=\"session-date\">${formatDateDisplay(\n                          session.date\n                        )}<\/div>\n                        <div class=\"session-time\">${formatTime(\n                          session.time\n                        )}<\/div>\n                    <\/div>\n                    <div class=\"remove-session\" data-index=\"${index}\"><i class=\"fas fa-times\"><\/i><\/div>\n                `;\n\n          sessionsListEl.appendChild(sessionItem);\n        });\n\n        \/\/ Add event listeners to remove buttons\n        document.querySelectorAll(\".remove-session\").forEach((btn) => {\n          btn.addEventListener(\"click\", function () {\n            const index = parseInt(this.dataset.index);\n            const removedSession = bookingState.sessions[index];\n            bookingState.sessions.splice(index, 1);\n            updateSelectedSessionsList();\n            renderSessionCalendar();\n\n            \/\/ If we're on the same date, regenerate time slots\n            if (bookingState.selectedDate === removedSession.date) {\n              generateTimeSlots();\n            }\n          });\n        });\n      }\n\n      \/\/ Update the booking summary\n      function updateSummary() {\n        document.getElementById(\"summary-service\").textContent = getServiceName(\n          bookingState.service\n        );\n        document.getElementById(\"summary-package\").textContent =\n          bookingState.package.name;\n        document.getElementById(\n          \"summary-price\"\n        ).textContent = `SAR ${bookingState.package.price}`;\n\n        if (bookingState.service === \"club\") {\n          document.getElementById(\"summary-date\").textContent =\n            formatDateDisplay(bookingState.startDate);\n          document.getElementById(\"summary-sessions\").textContent = \"N\/A\";\n        } else {\n          document.getElementById(\"summary-date\").textContent =\n            \"Multiple dates\";\n          document.getElementById(\n            \"summary-sessions\"\n          ).textContent = `${bookingState.sessions.length} session(s) selected`;\n\n          \/\/ List all sessions in the summary\n          const sessionsList = document.createElement(\"ul\");\n          sessionsList.style.marginTop = \"10px\";\n          sessionsList.style.paddingLeft = \"20px\";\n\n          bookingState.sessions.forEach((session) => {\n            const sessionItem = document.createElement(\"li\");\n            sessionItem.textContent = `${formatDateDisplay(\n              session.date\n            )} at ${formatTime(session.time)}`;\n            sessionsList.appendChild(sessionItem);\n          });\n\n          document.getElementById(\"summary-sessions\").appendChild(sessionsList);\n        }\n      }\n\n      \/\/ Add product to WooCommerce cart and redirect to checkout\n      function addToCartAndRedirect() {\n        \/\/ Show loading state\n        const originalText = confirmButton.innerHTML;\n        confirmButton.innerHTML =\n          '<span class=\"loading\"><\/span> Adding to cart...';\n        confirmButton.disabled = true;\n\n        \/\/ Create a form to submit the product to WooCommerce\n        const form = document.createElement(\"form\");\n        form.method = \"POST\";\n        form.action = \"\/checkout\/\";\n\n        \/\/ Add product ID\n        const productIdInput = document.createElement(\"input\");\n        productIdInput.type = \"hidden\";\n        productIdInput.name = \"add-to-cart\";\n        productIdInput.value = bookingState.package.id;\n        form.appendChild(productIdInput);\n\n        \/\/ Add quantity\n        const quantityInput = document.createElement(\"input\");\n        quantityInput.type = \"hidden\";\n        quantityInput.name = \"quantity\";\n        quantityInput.value = 1;\n        form.appendChild(quantityInput);\n\n        \/\/ Add session data as custom fields if needed\n        if (bookingState.service === \"club\") {\n          const startDateInput = document.createElement(\"input\");\n          startDateInput.type = \"hidden\";\n          startDateInput.name = \"start_date\";\n          startDateInput.value = bookingState.startDate;\n          form.appendChild(startDateInput);\n        } else {\n          const sessionsInput = document.createElement(\"input\");\n          sessionsInput.type = \"hidden\";\n          sessionsInput.name = \"sessions\";\n          sessionsInput.value = JSON.stringify(bookingState.sessions);\n          form.appendChild(sessionsInput);\n        }\n\n        \/\/ Add the form to the page and submit it\n        document.body.appendChild(form);\n        form.submit();\n      }\n\n      \/\/ Navigate to a specific step\n      function navigateToStep(stepNumber) {\n        \/\/ Update steps visual state\n        stepElements.forEach((step, index) => {\n          if (index + 1 < stepNumber) {\n            step.classList.add(\"completed\");\n            step.classList.remove(\"active\");\n          } else if (index + 1 === stepNumber) {\n            step.classList.add(\"active\");\n            step.classList.remove(\"completed\");\n          } else {\n            step.classList.remove(\"active\", \"completed\");\n          }\n        });\n\n        \/\/ Show the correct content\n        stepContentElements.forEach((content, index) => {\n          if (index + 1 === stepNumber) {\n            content.classList.add(\"active\");\n          } else {\n            content.classList.remove(\"active\");\n          }\n        });\n      }\n    <\/script>\n  \n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&nbsp; \u062d\u062c\u0632 \u0635\u0627\u0644\u0629 \u0628\u0627\u0648\u0631 \u0641\u064a\u062a \u0627\u062d\u062c\u0632 \u062c\u0644\u0633\u0627\u062a \u062a\u062f\u0631\u064a\u0628\u0643 \u0641\u064a \u062e\u0637\u0648\u0627\u062a \u0628\u0633\u064a\u0637\u0629 \u0641\u0642\u0637 1 \u0627\u062e\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 2 \u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 3 \u0627\u062e\u062a\u0631 \u0627\u0644\u062c\u0644\u0633\u0627\u062a 4 \u0627\u0644\u062a\u0623\u0643\u064a\u062f \u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0630\u064a \u062a\u0647\u062a\u0645 \u0628\u0647 \u0639\u0636\u0648\u064a\u0629 \u0627\u0644\u0646\u0627\u062f\u064a \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u062c\u0645\u064a\u0639 \u0645\u0631\u0627\u0641\u0642 \u0627\u0644\u0635\u0627\u0644\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 \u0648\u0627\u0644\u0633\u064a\u0634\u0646\u0632 \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0634\u062e\u0635\u064a \u062a\u062f\u0631\u064a\u0628 \u0641\u0631\u062f\u064a \u0645\u0639 \u0645\u062a\u062e\u0635\u0635\u064a\u0646 \u0645\u0639\u062a\u0645\u062f\u064a\u0646 \u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0639\u0636\u0644\u0627\u062a \u0628\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u062a\u062d\u0641\u064a\u0632 \u0627\u0644\u0639\u0636\u0644\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u062a\u0645\u0627\u0631\u064a\u0646 [&hellip;]<\/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":{"footnotes":""},"class_list":["post-8140","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/pages\/8140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/comments?post=8140"}],"version-history":[{"count":3,"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/pages\/8140\/revisions"}],"predecessor-version":[{"id":8325,"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/pages\/8140\/revisions\/8325"}],"wp:attachment":[{"href":"https:\/\/powerfitksa.com\/ar\/wp-json\/wp\/v2\/media?parent=8140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}