{"id":9190,"date":"2026-08-10T06:58:06","date_gmt":"2026-08-10T06:58:06","guid":{"rendered":"https:\/\/shamelsvc.com\/stage\/?page_id=9190"},"modified":"2026-08-11T07:16:36","modified_gmt":"2026-08-11T07:16:36","slug":"join-champ-provider-2","status":"publish","type":"page","link":"https:\/\/shamelsvc.com\/stage\/join-champ-provider-2\/","title":{"rendered":"Join Champ &amp; Provider"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9190\" class=\"elementor elementor-9190\">\n\t\t\t\t<div class=\"elementor-element elementor-element-552c38e e-con e-atomic-element e-flexbox-base e-61edad2 \" data-id=\"552c38e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"552c38e\">\n    \t\t<div class=\"elementor-element elementor-element-4036c9f elementor-widget elementor-widget-html\" data-id=\"4036c9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n#shamel-join-form,\r\n#shamel-join-form * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n#shamel-join-form {\r\n    --red: #c90008;\r\n    --dark-red: #a50006;\r\n    --orange: #f5a300;\r\n    --text: #171717;\r\n    --muted: #676b72;\r\n    --border: #e6e3e1;\r\n    --soft-red: #fff7f7;\r\n    --soft-orange: #fffaf0;\r\n\r\n    width: calc(100% - 32px);\r\n    max-width: 1050px;\r\n    margin: 40px auto;\r\n    padding: 42px;\r\n    background: #ffffff;\r\n    border: 1px solid #eeeeee;\r\n    border-radius: 22px;\r\n    box-shadow: 0 18px 50px rgba(0,0,0,.07);\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n#shamel-join-form .form-header {\r\n    max-width: 700px;\r\n    margin: 0 auto 28px;\r\n    text-align: center;\r\n}\r\n\r\n#shamel-join-form .eyebrow {\r\n    margin-bottom: 8px;\r\n    color: var(--red);\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n}\r\n\r\n#shamel-join-form .form-header h2 {\r\n    margin: 0;\r\n    color: var(--red);\r\n    font-size: 44px;\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n}\r\n\r\n#shamel-join-form .form-header p {\r\n    margin: 12px auto 0;\r\n    color: var(--muted);\r\n    font-size: 15px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* TABS *\/\r\n\r\n#shamel-join-form .tabs-wrap {\r\n    margin-bottom: 18px;\r\n    padding: 6px;\r\n    border: 1px solid #e7e2df;\r\n    border-radius: 15px;\r\n    background: #f8f5f4;\r\n}\r\n\r\n#shamel-join-form .tabs {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 7px;\r\n}\r\n\r\n#shamel-join-form .tab-btn {\r\n    display: flex !important;\r\n    width: 100% !important;\r\n    min-height: 55px !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    gap: 9px !important;\r\n    margin: 0 !important;\r\n    padding: 10px 14px !important;\r\n    border: 1px solid transparent !important;\r\n    border-radius: 10px !important;\r\n    background: transparent !important;\r\n    color: #696164 !important;\r\n    font-size: 15px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n    cursor: pointer !important;\r\n}\r\n\r\n#shamel-join-form .tab-btn.active {\r\n    border-color: #ead9d6 !important;\r\n    background: #ffffff !important;\r\n    color: var(--red) !important;\r\n    box-shadow: 0 6px 18px rgba(70,18,12,.08) !important;\r\n}\r\n\r\n#shamel-join-form .tab-icon {\r\n    display: flex;\r\n    width: 30px;\r\n    height: 30px;\r\n    flex: 0 0 30px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    background: #f7eded;\r\n    color: var(--red);\r\n}\r\n\r\n#shamel-join-form .tab-btn.active .tab-icon {\r\n    background: var(--red);\r\n    color: #ffffff;\r\n}\r\n\r\n#shamel-join-form .tab-btn[data-role-key=\"shamelChamp\"].active .tab-icon {\r\n    background: var(--orange);\r\n}\r\n\r\n\/* ROLE DETAILS *\/\r\n\r\n#shamel-join-form .role-detail {\r\n    display: none;\r\n    margin-bottom: 28px;\r\n}\r\n\r\n#shamel-join-form .role-detail.active {\r\n    display: block;\r\n}\r\n\r\n#shamel-join-form .role-card {\r\n    display: grid;\r\n    grid-template-columns: auto minmax(0,1fr);\r\n    gap: 18px;\r\n    padding: 24px;\r\n    border: 1px solid #eadfdb;\r\n    border-radius: 15px;\r\n}\r\n\r\n#shamel-join-form .provider-detail .role-card {\r\n    background: var(--soft-red);\r\n}\r\n\r\n#shamel-join-form .champ-detail .role-card {\r\n    background: var(--soft-orange);\r\n}\r\n\r\n#shamel-join-form .role-icon {\r\n    display: flex;\r\n    width: 55px;\r\n    height: 55px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    background: #ffffff;\r\n    color: var(--red);\r\n    font-size: 22px;\r\n}\r\n\r\n#shamel-join-form .champ-detail .role-icon {\r\n    color: var(--orange);\r\n}\r\n\r\n#shamel-join-form .role-content h3 {\r\n    margin: 0 0 7px;\r\n    color: var(--red);\r\n    font-size: 19px;\r\n}\r\n\r\n#shamel-join-form .champ-detail h3 {\r\n    color: #c78500;\r\n}\r\n\r\n#shamel-join-form .role-content p {\r\n    margin: 0 0 13px;\r\n    color: #333333;\r\n    font-size: 13px;\r\n    line-height: 1.6;\r\n}\r\n\r\n#shamel-join-form .role-points {\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n}\r\n\r\n#shamel-join-form .role-points li {\r\n    position: relative;\r\n    margin-top: 8px;\r\n    padding-left: 25px;\r\n    font-size: 13px;\r\n    line-height: 1.45;\r\n}\r\n\r\n#shamel-join-form .role-points li::before {\r\n    content: \"\u2713\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    display: flex;\r\n    width: 17px;\r\n    height: 17px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    background: var(--red);\r\n    color: #ffffff;\r\n    font-size: 10px;\r\n}\r\n\r\n#shamel-join-form .champ-detail .role-points li::before {\r\n    background: var(--orange);\r\n}\r\n\r\n\/* FORM *\/\r\n\r\n#shamel-join-form .fields-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2,minmax(0,1fr));\r\n    gap: 20px;\r\n}\r\n\r\n#shamel-join-form .field {\r\n    min-width: 0;\r\n}\r\n\r\n#shamel-join-form .field.full {\r\n    grid-column: 1 \/ -1;\r\n}\r\n\r\n#shamel-join-form .field label,\r\n#shamel-join-form .services-label {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    color: var(--text);\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n}\r\n\r\n#shamel-join-form .required {\r\n    color: var(--red);\r\n}\r\n\r\n#shamel-join-form .optional {\r\n    color: #888888;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n}\r\n\r\n#shamel-join-form .input-wrap {\r\n    position: relative;\r\n}\r\n\r\n#shamel-join-form .field-icon {\r\n    position: absolute;\r\n    z-index: 2;\r\n    top: 50%;\r\n    left: 15px;\r\n    color: #777777;\r\n    transform: translateY(-50%);\r\n    pointer-events: none;\r\n}\r\n\r\n#shamel-join-form .input {\r\n    width: 100% !important;\r\n    height: 56px !important;\r\n    margin: 0 !important;\r\n    padding: 0 15px !important;\r\n    border: 1px solid var(--border) !important;\r\n    border-radius: 10px !important;\r\n    outline: none !important;\r\n    background: #ffffff !important;\r\n    color: #222222 !important;\r\n    font-size: 14px !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n#shamel-join-form .input.with-icon {\r\n    padding-left: 44px !important;\r\n}\r\n\r\n#shamel-join-form .input:focus {\r\n    border-color: var(--red) !important;\r\n    box-shadow: 0 0 0 3px rgba(201,0,8,.08) !important;\r\n}\r\n\r\n\/* CITY *\/\r\n\r\n#shamel-join-form .city-dropdown {\r\n    position: relative;\r\n}\r\n\r\n#shamel-join-form .city-trigger {\r\n    display: flex !important;\r\n    width: 100% !important;\r\n    height: 56px !important;\r\n    align-items: center !important;\r\n    justify-content: space-between !important;\r\n    margin: 0 !important;\r\n    padding: 0 16px 0 44px !important;\r\n    border: 1px solid var(--border) !important;\r\n    border-radius: 10px !important;\r\n    background: #ffffff !important;\r\n    color: #999999 !important;\r\n    font-size: 14px !important;\r\n    font-weight: 400 !important;\r\n    text-align: left !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n    cursor: pointer !important;\r\n}\r\n\r\n#shamel-join-form .city-trigger.selected {\r\n    color: #222222 !important;\r\n}\r\n\r\n#shamel-join-form .city-trigger:disabled {\r\n    opacity: .65;\r\n    cursor: not-allowed !important;\r\n}\r\n\r\n#shamel-join-form .city-arrow {\r\n    width: 9px;\r\n    height: 9px;\r\n    border-right: 2px solid #555555;\r\n    border-bottom: 2px solid #555555;\r\n    transform: rotate(45deg);\r\n}\r\n\r\n#shamel-join-form .city-menu {\r\n    position: absolute;\r\n    z-index: 999;\r\n    top: calc(100% + 7px);\r\n    left: 0;\r\n    display: none;\r\n    width: 100%;\r\n    max-height: 260px;\r\n    overflow-y: auto;\r\n    padding: 7px;\r\n    border: 1px solid #e5e5e5;\r\n    border-radius: 11px;\r\n    background: #ffffff;\r\n    box-shadow: 0 14px 35px rgba(0,0,0,.12);\r\n}\r\n\r\n#shamel-join-form .city-dropdown.open .city-menu {\r\n    display: block;\r\n}\r\n\r\n#shamel-join-form .city-option {\r\n    display: block !important;\r\n    width: 100% !important;\r\n    margin: 0 !important;\r\n    padding: 10px 12px !important;\r\n    border: 0 !important;\r\n    border-radius: 7px !important;\r\n    background: transparent !important;\r\n    color: #222222 !important;\r\n    text-align: left !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n#shamel-join-form .city-option:hover {\r\n    background: #fff2f2 !important;\r\n    color: var(--red) !important;\r\n}\r\n\r\n#shamel-join-form .city-option.active {\r\n    background: var(--red) !important;\r\n    color: #ffffff !important;\r\n}\r\n\r\n\/* SERVICES *\/\r\n\r\n#shamel-join-form .services-wrapper {\r\n    margin-top: 20px;\r\n}\r\n\r\n#shamel-join-form .services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2,minmax(0,1fr));\r\n    gap: 12px;\r\n}\r\n\r\n#shamel-join-form .service-option {\r\n    position: relative;\r\n    cursor: pointer;\r\n}\r\n\r\n#shamel-join-form .service-option input {\r\n    position: absolute;\r\n    opacity: 0;\r\n}\r\n\r\n#shamel-join-form .service-card {\r\n    display: flex;\r\n    min-height: 66px;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 10px 14px;\r\n    border: 1px solid var(--border);\r\n    border-radius: 10px;\r\n    background: #ffffff;\r\n}\r\n\r\n#shamel-join-form .service-checkbox {\r\n    display: flex;\r\n    width: 21px;\r\n    height: 21px;\r\n    flex: 0 0 21px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid #cccccc;\r\n    border-radius: 4px;\r\n}\r\n\r\n#shamel-join-form .service-icon {\r\n    display: flex;\r\n    width: 41px;\r\n    height: 41px;\r\n    flex: 0 0 41px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: 50%;\r\n    background: #fff0f0;\r\n    font-size: 18px;\r\n}\r\n\r\n#shamel-join-form .service-name {\r\n    display: block;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n}\r\n\r\n#shamel-join-form .service-description {\r\n    display: block;\r\n    margin-top: 2px;\r\n    color: #777;\r\n    font-size: 11px;\r\n    line-height: 1.35;\r\n}\r\n\r\n#shamel-join-form .service-option input:checked + .service-card {\r\n    border-color: var(--red);\r\n    background: #fffafa;\r\n}\r\n\r\n#shamel-join-form .service-option input:checked + .service-card .service-checkbox {\r\n    border-color: var(--red);\r\n    background: var(--red);\r\n}\r\n\r\n#shamel-join-form .service-option input:checked + .service-card .service-checkbox::before {\r\n    content: \"\u2713\";\r\n    color: #ffffff;\r\n}\r\n\r\n#shamel-join-form .loading-box {\r\n    grid-column: 1 \/ -1;\r\n    padding: 18px;\r\n    border: 1px dashed #ddd;\r\n    border-radius: 10px;\r\n    color: #777;\r\n    text-align: center;\r\n    font-size: 13px;\r\n}\r\n\r\n\/* ERRORS *\/\r\n\r\n#shamel-join-form .error-text {\r\n    display: none;\r\n    margin-top: 5px;\r\n    color: #bd1119;\r\n    font-size: 11px;\r\n}\r\n\r\n#shamel-join-form .field.invalid .error-text,\r\n#shamel-join-form .services-wrapper.invalid .error-text {\r\n    display: block;\r\n}\r\n\r\n#shamel-join-form .field.invalid .input,\r\n#shamel-join-form .field.invalid .city-trigger {\r\n    border-color: #bd1119 !important;\r\n}\r\n\r\n\/* SUBMIT *\/\r\n\r\n#shamel-join-form .submit-btn {\r\n    display: flex !important;\r\n    width: 100% !important;\r\n    min-height: 58px !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    margin: 22px 0 0 !important;\r\n    padding: 14px 18px !important;\r\n    border: 0 !important;\r\n    border-radius: 9px !important;\r\n    background: var(--red) !important;\r\n    color: #ffffff !important;\r\n    font-size: 16px !important;\r\n    font-weight: 800 !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n    cursor: pointer !important;\r\n}\r\n\r\n#shamel-join-form .submit-btn:hover {\r\n    background: var(--dark-red) !important;\r\n}\r\n\r\n#shamel-join-form .submit-btn:disabled {\r\n    opacity: .7;\r\n    cursor: not-allowed !important;\r\n}\r\n\r\n#shamel-join-form .form-message {\r\n    display: none;\r\n    margin-top: 14px;\r\n    padding: 12px;\r\n    border-radius: 8px;\r\n    font-size: 13px;\r\n    text-align: center;\r\n}\r\n\r\n#shamel-join-form .form-message.error {\r\n    display: block;\r\n    background: #fff1f1;\r\n    color: #a80008;\r\n}\r\n\r\n#shamel-join-form .form-message.success {\r\n    display: block;\r\n    background: #effaf2;\r\n    color: #27723a;\r\n}\r\n\r\n#shamel-join-form .privacy {\r\n    margin-top: 14px;\r\n    padding: 12px;\r\n    border: 1px solid #eeeeee;\r\n    border-radius: 8px;\r\n    color: #666666;\r\n    font-size: 11px;\r\n    line-height: 1.5;\r\n    text-align: center;\r\n}\r\n\r\n\/* OTP MODAL *\/\r\n\r\n#shamelOtpModal {\r\n    position: fixed;\r\n    z-index: 999999;\r\n    inset: 0;\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    background: rgba(0,0,0,.55);\r\n}\r\n\r\n#shamelOtpModal.show {\r\n    display: flex;\r\n}\r\n\r\n#shamelOtpModal .otp-modal-card {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 430px;\r\n    padding: 30px;\r\n    border-radius: 18px;\r\n    background: #ffffff;\r\n    box-shadow: 0 25px 70px rgba(0,0,0,.25);\r\n    text-align: center;\r\n}\r\n\r\n#shamelOtpModal .otp-close {\r\n    position: absolute;\r\n    top: 13px;\r\n    right: 15px;\r\n    display: flex !important;\r\n    width: 32px !important;\r\n    height: 32px !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    border: 0 !important;\r\n    border-radius: 50% !important;\r\n    background: #f5f5f5 !important;\r\n    color: #333333 !important;\r\n    font-size: 20px !important;\r\n    box-shadow: none !important;\r\n    cursor: pointer !important;\r\n}\r\n\r\n#shamelOtpModal .otp-icon {\r\n    display: flex;\r\n    width: 65px;\r\n    height: 65px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 15px;\r\n    border-radius: 50%;\r\n    background: #fff0f0;\r\n    color: #c90008;\r\n    font-size: 27px;\r\n}\r\n\r\n#shamelOtpModal h3 {\r\n    margin: 0 0 7px;\r\n    color: #171717;\r\n    font-size: 23px;\r\n    font-weight: 800;\r\n}\r\n\r\n#shamelOtpModal .otp-description {\r\n    margin: 0 0 20px;\r\n    color: #6b6b6b;\r\n    font-size: 13px;\r\n    line-height: 1.55;\r\n}\r\n\r\n#shamelOtpModal .otp-phone {\r\n    color: #c90008;\r\n    font-weight: 700;\r\n}\r\n\r\n#shamelOtpModal .otp-code-input {\r\n    width: 100% !important;\r\n    height: 58px !important;\r\n    padding: 0 12px !important;\r\n    border: 1px solid #dddddd !important;\r\n    border-radius: 10px !important;\r\n    outline: none !important;\r\n    background: #ffffff !important;\r\n    color: #222222 !important;\r\n    font-size: 22px !important;\r\n    font-weight: 800 !important;\r\n    letter-spacing: 10px;\r\n    text-align: center;\r\n    box-shadow: none !important;\r\n}\r\n\r\n#shamelOtpModal .otp-code-input:focus {\r\n    border-color: #c90008 !important;\r\n    box-shadow: 0 0 0 3px rgba(201,0,8,.08) !important;\r\n}\r\n\r\n#shamelOtpModal .otp-error {\r\n    display: none;\r\n    margin-top: 8px;\r\n    color: #bd1119;\r\n    font-size: 12px;\r\n}\r\n\r\n#shamelOtpModal .otp-error.show {\r\n    display: block;\r\n}\r\n\r\n#shamelOtpModal .otp-submit {\r\n    display: flex !important;\r\n    width: 100% !important;\r\n    min-height: 54px !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    margin: 18px 0 0 !important;\r\n    padding: 12px !important;\r\n    border: 0 !important;\r\n    border-radius: 9px !important;\r\n    background: #c90008 !important;\r\n    color: #ffffff !important;\r\n    font-size: 15px !important;\r\n    font-weight: 800 !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n    cursor: pointer !important;\r\n}\r\n\r\n#shamelOtpModal .otp-resend {\r\n    margin-top: 16px;\r\n    color: #777777;\r\n    font-size: 12px;\r\n}\r\n\r\n#shamelOtpModal .otp-resend button {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    border: 0 !important;\r\n    background: transparent !important;\r\n    color: #c90008 !important;\r\n    font-size: 12px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media(max-width:1024px) {\r\n    #shamel-join-form {\r\n        width: calc(100% - 30px);\r\n        padding: 32px;\r\n    }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:767px) {\r\n    #shamel-join-form {\r\n        width: calc(100% - 20px);\r\n        margin: 18px auto;\r\n        padding: 22px 16px;\r\n        border-radius: 17px;\r\n    }\r\n\r\n    #shamel-join-form .form-header h2 {\r\n        font-size: 30px;\r\n    }\r\n\r\n    #shamel-join-form .form-header p {\r\n        font-size: 13px;\r\n    }\r\n\r\n    #shamel-join-form .tab-btn {\r\n        min-height: 48px !important;\r\n        gap: 5px !important;\r\n        padding: 7px !important;\r\n        font-size: 12px !important;\r\n    }\r\n\r\n    #shamel-join-form .tab-icon {\r\n        width: 25px;\r\n        height: 25px;\r\n        flex-basis: 25px;\r\n    }\r\n\r\n    #shamel-join-form .role-card {\r\n        grid-template-columns: 1fr;\r\n        padding: 18px;\r\n    }\r\n\r\n    #shamel-join-form .role-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n    }\r\n\r\n    #shamel-join-form .fields-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n    }\r\n\r\n    #shamel-join-form .field.full {\r\n        grid-column: auto;\r\n    }\r\n\r\n    #shamel-join-form .services-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    #shamelOtpModal {\r\n        padding: 14px;\r\n    }\r\n\r\n    #shamelOtpModal .otp-modal-card {\r\n        padding: 26px 18px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<div id=\"shamel-join-form\">\r\n\r\n    <div class=\"form-header\">\r\n        <div class=\"eyebrow\">\u2731 Join the Shamel Network<\/div>\r\n\r\n        <h2>Register With Shamel<\/h2>\r\n\r\n        <p>\r\n            Choose your registration type, enter your information\r\n            and verify your phone number to submit your application.\r\n        <\/p>\r\n    <\/div>\r\n\r\n\r\n    <div class=\"tabs-wrap\">\r\n        <div class=\"tabs\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tab-btn active\"\r\n                data-role-key=\"serviceProvider\"\r\n                data-detail=\"service_provider\"\r\n            >\r\n                <span class=\"tab-icon\">\u25a3<\/span>\r\n                Service Provider\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tab-btn\"\r\n                data-role-key=\"shamelChamp\"\r\n                data-detail=\"shamel_champ\"\r\n            >\r\n                <span class=\"tab-icon\">\u2605<\/span>\r\n                Shamel Champ\r\n            <\/button>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n    <div\r\n        class=\"role-detail provider-detail active\"\r\n        data-role-detail=\"service_provider\"\r\n    >\r\n        <div class=\"role-card\">\r\n\r\n            <div class=\"role-icon\">\u25a3<\/div>\r\n\r\n            <div class=\"role-content\">\r\n\r\n                <h3>Service Provider<\/h3>\r\n\r\n                <p>\r\n                    Partner with Shamel to grow your automotive\r\n                    service business across Saudi Arabia.\r\n                <\/p>\r\n\r\n                <ul class=\"role-points\">\r\n                    <li>Access more customer opportunities<\/li>\r\n                    <li>Increase service volume<\/li>\r\n                    <li>Generate additional revenue<\/li>\r\n                <\/ul>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n    <div\r\n        class=\"role-detail champ-detail\"\r\n        data-role-detail=\"shamel_champ\"\r\n    >\r\n        <div class=\"role-card\">\r\n\r\n            <div class=\"role-icon\">\u2605<\/div>\r\n\r\n            <div class=\"role-content\">\r\n\r\n                <h3>Shamel Champ<\/h3>\r\n\r\n                <p>\r\n                    Earn on your own schedule by providing\r\n                    roadside assistance through Shamel.\r\n                <\/p>\r\n\r\n                <ul class=\"role-points\">\r\n                    <li>Work when you are available<\/li>\r\n                    <li>Receive service opportunities<\/li>\r\n                    <li>Build additional income<\/li>\r\n                <\/ul>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n    <form id=\"shamelApplicationForm\" novalidate>\r\n\r\n        <input\r\n            type=\"hidden\"\r\n            id=\"roleKey\"\r\n            value=\"serviceProvider\"\r\n        \/>\r\n\r\n\r\n        <div class=\"fields-grid\">\r\n\r\n            <!-- FULL NAME -->\r\n\r\n            <div class=\"field\" id=\"nameField\">\r\n\r\n                <label>\r\n                    Full Name\r\n                    <span class=\"required\">*<\/span>\r\n                <\/label>\r\n\r\n                <div class=\"input-wrap\">\r\n\r\n                    <span class=\"field-icon\">\u2659<\/span>\r\n\r\n                    <input\r\n                        type=\"text\"\r\n                        id=\"fullName\"\r\n                        class=\"input with-icon\"\r\n                        placeholder=\"Enter your full name\"\r\n                        maxlength=\"80\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"error-text\">\r\n                    Enter a valid name.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- EMAIL -->\r\n\r\n            <div class=\"field\" id=\"emailField\">\r\n\r\n                <label>\r\n                    Email\r\n                    <span class=\"optional\">(Optional)<\/span>\r\n                <\/label>\r\n\r\n                <div class=\"input-wrap\">\r\n\r\n                    <span class=\"field-icon\">\u2709<\/span>\r\n\r\n                    <input\r\n                        type=\"email\"\r\n                        id=\"email\"\r\n                        class=\"input with-icon\"\r\n                        placeholder=\"example@email.com\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"error-text\">\r\n                    Enter a valid email.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- PHONE -->\r\n\r\n            <div class=\"field full\" id=\"phoneField\">\r\n\r\n                <label>\r\n                    Phone Number (WhatsApp)\r\n                    <span class=\"required\">*<\/span>\r\n                <\/label>\r\n\r\n                <div class=\"input-wrap\">\r\n\r\n                    <span class=\"field-icon\">\u260e<\/span>\r\n\r\n                    <input\r\n                        type=\"tel\"\r\n                        id=\"phone\"\r\n                        class=\"input with-icon\"\r\n                        placeholder=\"Enter phone number with country code\"\r\n                        maxlength=\"25\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"error-text\">\r\n                    Enter your phone number.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- CITY -->\r\n\r\n            <div class=\"field full\" id=\"cityField\">\r\n\r\n                <label>\r\n                    City\r\n                    <span class=\"required\">*<\/span>\r\n                <\/label>\r\n\r\n                <div\r\n                    class=\"city-dropdown\"\r\n                    id=\"cityDropdown\"\r\n                >\r\n\r\n                    <span class=\"field-icon\">\u2316<\/span>\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"city-trigger\"\r\n                        id=\"cityTrigger\"\r\n                        disabled\r\n                    >\r\n\r\n                        <span id=\"cityText\">\r\n                            Loading cities...\r\n                        <\/span>\r\n\r\n                        <span class=\"city-arrow\"><\/span>\r\n\r\n                    <\/button>\r\n\r\n                    <div\r\n                        class=\"city-menu\"\r\n                        id=\"cityMenu\"\r\n                    ><\/div>\r\n\r\n                    <input\r\n                        type=\"hidden\"\r\n                        id=\"cityID\"\r\n                        value=\"\"\r\n                    \/>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"error-text\">\r\n                    Select your city.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- SERVICES -->\r\n\r\n        <div\r\n            class=\"services-wrapper\"\r\n            id=\"servicesField\"\r\n        >\r\n\r\n            <div class=\"services-label\">\r\n                Services You Provide\r\n                <span class=\"required\">*<\/span>\r\n            <\/div>\r\n\r\n            <div\r\n                class=\"services-grid\"\r\n                id=\"servicesGrid\"\r\n            >\r\n                <div class=\"loading-box\">\r\n                    Loading services...\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"error-text\">\r\n                Select at least one service.\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n            type=\"submit\"\r\n            class=\"submit-btn\"\r\n            id=\"sendOtpBtn\"\r\n        >\r\n            Send OTP\r\n        <\/button>\r\n\r\n\r\n        <div\r\n            class=\"form-message\"\r\n            id=\"formMessage\"\r\n        ><\/div>\r\n\r\n\r\n        <div class=\"privacy\">\r\n            By submitting this form, you agree that the\r\n            Shamel team may contact you regarding your application.\r\n        <\/div>\r\n\r\n    <\/form>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- OTP POPUP -->\r\n\r\n<div id=\"shamelOtpModal\">\r\n\r\n    <div class=\"otp-modal-card\">\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"otp-close\"\r\n            id=\"closeOtpModal\"\r\n        >\r\n            \u00d7\r\n        <\/button>\r\n\r\n        <div class=\"otp-icon\">\r\n            \ud83d\udd10\r\n        <\/div>\r\n\r\n        <h3>Verify Your Phone<\/h3>\r\n\r\n        <p class=\"otp-description\">\r\n            Enter the 6-digit OTP sent to\r\n            <br>\r\n\r\n            <span\r\n                class=\"otp-phone\"\r\n                id=\"otpPhoneText\"\r\n            ><\/span>\r\n        <\/p>\r\n\r\n        <input\r\n            type=\"text\"\r\n            id=\"otpInput\"\r\n            class=\"otp-code-input\"\r\n            placeholder=\"------\"\r\n            maxlength=\"6\"\r\n            inputmode=\"numeric\"\r\n        \/>\r\n\r\n        <div\r\n            class=\"otp-error\"\r\n            id=\"otpError\"\r\n        >\r\n            Invalid OTP.\r\n        <\/div>\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"otp-submit\"\r\n            id=\"verifyOtpBtn\"\r\n        >\r\n            Verify & Submit\r\n        <\/button>\r\n\r\n        <div class=\"otp-resend\">\r\n\r\n            Didn't receive OTP?\r\n\r\n            <button\r\n                type=\"button\"\r\n                id=\"resendOtpBtn\"\r\n            >\r\n                Resend OTP\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    const API_BASE =\r\n        \"\/stage\/wp-json\/shamel\/v1\";\r\n\r\n\r\n    const root =\r\n        document.getElementById(\r\n            \"shamel-join-form\"\r\n        );\r\n\r\n    if (!root) return;\r\n\r\n\r\n    const form =\r\n        root.querySelector(\r\n            \"#shamelApplicationForm\"\r\n        );\r\n\r\n\r\n    const tabs =\r\n        root.querySelectorAll(\r\n            \".tab-btn\"\r\n        );\r\n\r\n\r\n    const details =\r\n        root.querySelectorAll(\r\n            \".role-detail\"\r\n        );\r\n\r\n\r\n    const roleKeyInput =\r\n        root.querySelector(\r\n            \"#roleKey\"\r\n        );\r\n\r\n\r\n    const nameInput =\r\n        root.querySelector(\r\n            \"#fullName\"\r\n        );\r\n\r\n\r\n    const emailInput =\r\n        root.querySelector(\r\n            \"#email\"\r\n        );\r\n\r\n\r\n    const phoneInput =\r\n        root.querySelector(\r\n            \"#phone\"\r\n        );\r\n\r\n\r\n    const cityIDInput =\r\n        root.querySelector(\r\n            \"#cityID\"\r\n        );\r\n\r\n\r\n    const nameField =\r\n        root.querySelector(\r\n            \"#nameField\"\r\n        );\r\n\r\n\r\n    const emailField =\r\n        root.querySelector(\r\n            \"#emailField\"\r\n        );\r\n\r\n\r\n    const phoneField =\r\n        root.querySelector(\r\n            \"#phoneField\"\r\n        );\r\n\r\n\r\n    const cityField =\r\n        root.querySelector(\r\n            \"#cityField\"\r\n        );\r\n\r\n\r\n    const servicesField =\r\n        root.querySelector(\r\n            \"#servicesField\"\r\n        );\r\n\r\n\r\n    const servicesGrid =\r\n        root.querySelector(\r\n            \"#servicesGrid\"\r\n        );\r\n\r\n\r\n    const formMessage =\r\n        root.querySelector(\r\n            \"#formMessage\"\r\n        );\r\n\r\n\r\n    const sendOtpBtn =\r\n        root.querySelector(\r\n            \"#sendOtpBtn\"\r\n        );\r\n\r\n\r\n    const cityDropdown =\r\n        root.querySelector(\r\n            \"#cityDropdown\"\r\n        );\r\n\r\n\r\n    const cityTrigger =\r\n        root.querySelector(\r\n            \"#cityTrigger\"\r\n        );\r\n\r\n\r\n    const cityText =\r\n        root.querySelector(\r\n            \"#cityText\"\r\n        );\r\n\r\n\r\n    const cityMenu =\r\n        root.querySelector(\r\n            \"#cityMenu\"\r\n        );\r\n\r\n\r\n    \/* OTP *\/\r\n\r\n    const otpModal =\r\n        document.getElementById(\r\n            \"shamelOtpModal\"\r\n        );\r\n\r\n\r\n    const closeOtpModal =\r\n        document.getElementById(\r\n            \"closeOtpModal\"\r\n        );\r\n\r\n\r\n    const otpPhoneText =\r\n        document.getElementById(\r\n            \"otpPhoneText\"\r\n        );\r\n\r\n\r\n    const otpInput =\r\n        document.getElementById(\r\n            \"otpInput\"\r\n        );\r\n\r\n\r\n    const otpError =\r\n        document.getElementById(\r\n            \"otpError\"\r\n        );\r\n\r\n\r\n    const verifyOtpBtn =\r\n        document.getElementById(\r\n            \"verifyOtpBtn\"\r\n        );\r\n\r\n\r\n    const resendOtpBtn =\r\n        document.getElementById(\r\n            \"resendOtpBtn\"\r\n        );\r\n\r\n\r\n    const emailRegex =\r\n        \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\r\n\r\n\r\n    const nameRegex =\r\n        \/^[A-Za-z\\u0600-\\u06FF\\s'-]{2,80}$\/;\r\n\r\n\r\n    let cities = [];\r\n    let services = [];\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | READ API RESPONSE\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    async function readApiResponse(response) {\r\n\r\n        let result;\r\n\r\n        try {\r\n\r\n            result =\r\n                await response.json();\r\n\r\n        } catch (error) {\r\n\r\n            throw new Error(\r\n                \"Invalid server response.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        if (!response.ok) {\r\n\r\n            throw new Error(\r\n                result.message ||\r\n                \"Request failed.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        if (\r\n            result &&\r\n            result.success === false\r\n        ) {\r\n\r\n            throw new Error(\r\n                result.message ||\r\n                \"Request failed.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        return result;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | LOAD CITIES\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    async function loadCities() {\r\n\r\n        cityTrigger.disabled = true;\r\n\r\n        cityText.textContent =\r\n            \"Loading cities...\";\r\n\r\n\r\n        try {\r\n\r\n            const response =\r\n                await fetch(\r\n                    API_BASE + \"\/cities\",\r\n                    {\r\n                        method: \"GET\",\r\n                        cache: \"no-store\"\r\n                    }\r\n                );\r\n\r\n\r\n            const result =\r\n                await readApiResponse(\r\n                    response\r\n                );\r\n\r\n\r\n            cities =\r\n                Array.isArray(result.data)\r\n                    ? result.data\r\n                    : [];\r\n\r\n\r\n            if (!cities.length) {\r\n\r\n                throw new Error(\r\n                    \"No cities available.\"\r\n                );\r\n\r\n            }\r\n\r\n\r\n            cityMenu.innerHTML = \"\";\r\n\r\n\r\n            cities.forEach(function (city) {\r\n\r\n                const button =\r\n                    document.createElement(\r\n                        \"button\"\r\n                    );\r\n\r\n\r\n                button.type =\r\n                    \"button\";\r\n\r\n\r\n                button.className =\r\n                    \"city-option\";\r\n\r\n\r\n                button.dataset.cityId =\r\n                    String(city.CityID);\r\n\r\n\r\n                button.dataset.cityName =\r\n                    city.Name || \"\";\r\n\r\n\r\n                button.textContent =\r\n                    city.Province\r\n                        ? city.Name +\r\n                          \" - \" +\r\n                          city.Province\r\n                        : city.Name;\r\n\r\n\r\n                button.addEventListener(\r\n                    \"click\",\r\n                    function () {\r\n\r\n                        root\r\n                            .querySelectorAll(\r\n                                \".city-option\"\r\n                            )\r\n                            .forEach(\r\n                                function (item) {\r\n\r\n                                    item.classList.remove(\r\n                                        \"active\"\r\n                                    );\r\n\r\n                                }\r\n                            );\r\n\r\n\r\n                        button.classList.add(\r\n                            \"active\"\r\n                        );\r\n\r\n\r\n                        cityIDInput.value =\r\n                            button.dataset.cityId;\r\n\r\n\r\n                        cityText.textContent =\r\n                            button.dataset.cityName;\r\n\r\n\r\n                        cityTrigger.classList.add(\r\n                            \"selected\"\r\n                        );\r\n\r\n\r\n                        cityDropdown.classList.remove(\r\n                            \"open\"\r\n                        );\r\n\r\n\r\n                        cityField.classList.remove(\r\n                            \"invalid\"\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                cityMenu.appendChild(\r\n                    button\r\n                );\r\n\r\n            });\r\n\r\n\r\n            cityText.textContent =\r\n                \"Select your city\";\r\n\r\n\r\n            cityTrigger.disabled =\r\n                false;\r\n\r\n\r\n        } catch (error) {\r\n\r\n            cityText.textContent =\r\n                \"Unable to load cities\";\r\n\r\n\r\n            formMessage.className =\r\n                \"form-message error\";\r\n\r\n\r\n            formMessage.textContent =\r\n                error.message;\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | SERVICE ICON\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function getServiceIcon(name) {\r\n\r\n        const normalized =\r\n            String(name || \"\")\r\n                .toLowerCase();\r\n\r\n\r\n        if (normalized.includes(\"tow\")) {\r\n            return \"\ud83d\ude97\";\r\n        }\r\n\r\n\r\n        if (\r\n            normalized.includes(\"tyre\") ||\r\n            normalized.includes(\"tire\")\r\n        ) {\r\n            return \"\u25c9\";\r\n        }\r\n\r\n\r\n        if (normalized.includes(\"jump\")) {\r\n            return \"\u26a1\";\r\n        }\r\n\r\n\r\n        if (normalized.includes(\"fuel\")) {\r\n            return \"\u26fd\";\r\n        }\r\n\r\n\r\n        return \"\ud83d\udd27\";\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | ESCAPE HTML\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function escapeHtml(value) {\r\n\r\n        return String(value)\r\n            .replace(\/&\/g, \"&amp;\")\r\n            .replace(\/<\/g, \"&lt;\")\r\n            .replace(\/>\/g, \"&gt;\")\r\n            .replace(\/\"\/g, \"&quot;\")\r\n            .replace(\/'\/g, \"&#039;\");\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | LOAD SERVICES\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    async function loadServices(roleKey) {\r\n\r\n        servicesGrid.innerHTML =\r\n            '<div class=\"loading-box\">Loading services...<\/div>';\r\n\r\n\r\n        servicesField.classList.remove(\r\n            \"invalid\"\r\n        );\r\n\r\n\r\n        try {\r\n\r\n            const response =\r\n                await fetch(\r\n                    API_BASE +\r\n                    \"\/services?roleKey=\" +\r\n                    encodeURIComponent(roleKey),\r\n                    {\r\n                        method: \"GET\",\r\n                        cache: \"no-store\"\r\n                    }\r\n                );\r\n\r\n\r\n            const result =\r\n                await readApiResponse(\r\n                    response\r\n                );\r\n\r\n\r\n            services =\r\n                result &&\r\n                result.data &&\r\n                Array.isArray(\r\n                    result.data.services\r\n                )\r\n                    ? result.data.services\r\n                    : [];\r\n\r\n\r\n            if (!services.length) {\r\n\r\n                throw new Error(\r\n                    \"No services available for this role.\"\r\n                );\r\n\r\n            }\r\n\r\n\r\n            servicesGrid.innerHTML = \"\";\r\n\r\n\r\n            services.forEach(\r\n                function (service) {\r\n\r\n                    const label =\r\n                        document.createElement(\r\n                            \"label\"\r\n                        );\r\n\r\n\r\n                    label.className =\r\n                        \"service-option\";\r\n\r\n\r\n                    const serviceID =\r\n                        Number(\r\n                            service.rsaServiceID\r\n                        );\r\n\r\n\r\n                    label.innerHTML =\r\n                        '<input ' +\r\n                        'type=\"checkbox\" ' +\r\n                        'name=\"services\" ' +\r\n                        'value=\"' +\r\n                        serviceID +\r\n                        '\">' +\r\n\r\n                        '<span class=\"service-card\">' +\r\n\r\n                            '<span class=\"service-checkbox\"><\/span>' +\r\n\r\n                            '<span class=\"service-icon\">' +\r\n                                getServiceIcon(\r\n                                    service.name\r\n                                ) +\r\n                            '<\/span>' +\r\n\r\n                            '<span>' +\r\n\r\n                                '<span class=\"service-name\">' +\r\n                                    escapeHtml(\r\n                                        service.name ||\r\n                                        \"Service\"\r\n                                    ) +\r\n                                '<\/span>' +\r\n\r\n                                (\r\n                                    service.description\r\n                                        ?\r\n                                        '<span class=\"service-description\">' +\r\n                                            escapeHtml(\r\n                                                service.description\r\n                                            ) +\r\n                                        '<\/span>'\r\n                                        :\r\n                                        ''\r\n                                ) +\r\n\r\n                            '<\/span>' +\r\n\r\n                        '<\/span>';\r\n\r\n\r\n                    servicesGrid.appendChild(\r\n                        label\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n        } catch (error) {\r\n\r\n            servicesGrid.innerHTML =\r\n                '<div class=\"loading-box\">' +\r\n                escapeHtml(\r\n                    error.message\r\n                ) +\r\n                '<\/div>';\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | TABS\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    tabs.forEach(function (tab) {\r\n\r\n        tab.addEventListener(\r\n            \"click\",\r\n            async function () {\r\n\r\n                const roleKey =\r\n                    tab.dataset.roleKey;\r\n\r\n\r\n                const detailKey =\r\n                    tab.dataset.detail;\r\n\r\n\r\n                tabs.forEach(\r\n                    function (item) {\r\n\r\n                        item.classList.remove(\r\n                            \"active\"\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                details.forEach(\r\n                    function (detail) {\r\n\r\n                        detail.classList.remove(\r\n                            \"active\"\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                tab.classList.add(\r\n                    \"active\"\r\n                );\r\n\r\n\r\n                const selectedDetail =\r\n                    root.querySelector(\r\n                        '[data-role-detail=\"' +\r\n                        detailKey +\r\n                        '\"]'\r\n                    );\r\n\r\n\r\n                if (selectedDetail) {\r\n\r\n                    selectedDetail.classList.add(\r\n                        \"active\"\r\n                    );\r\n\r\n                }\r\n\r\n\r\n                roleKeyInput.value =\r\n                    roleKey;\r\n\r\n\r\n                await loadServices(\r\n                    roleKey\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | CITY DROPDOWN\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    cityTrigger.addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n            if (cityTrigger.disabled) {\r\n                return;\r\n            }\r\n\r\n\r\n            cityDropdown.classList.toggle(\r\n                \"open\"\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            if (\r\n                !cityDropdown.contains(\r\n                    event.target\r\n                )\r\n            ) {\r\n\r\n                cityDropdown.classList.remove(\r\n                    \"open\"\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | OTP INPUT\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    otpInput.addEventListener(\r\n        \"input\",\r\n        function () {\r\n\r\n            otpInput.value =\r\n                otpInput.value\r\n                    .replace(\/\\D\/g, \"\")\r\n                    .slice(0, 6);\r\n\r\n\r\n            otpError.classList.remove(\r\n                \"show\"\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | CLEAR ERRORS\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function clearErrors() {\r\n\r\n        [\r\n            nameField,\r\n            emailField,\r\n            phoneField,\r\n            cityField,\r\n            servicesField\r\n        ].forEach(\r\n            function (field) {\r\n\r\n                field.classList.remove(\r\n                    \"invalid\"\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        formMessage.className =\r\n            \"form-message\";\r\n\r\n\r\n        formMessage.textContent =\r\n            \"\";\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | SELECTED SERVICES\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function getSelectedServiceIDs() {\r\n\r\n        return Array.from(\r\n            form.querySelectorAll(\r\n                'input[name=\"services\"]:checked'\r\n            )\r\n        )\r\n        .map(\r\n            function (item) {\r\n\r\n                return Number(\r\n                    item.value\r\n                );\r\n\r\n            }\r\n        )\r\n        .filter(\r\n            function (id) {\r\n\r\n                return Number.isInteger(id) &&\r\n                       id > 0;\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | VALIDATION\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function validateForm() {\r\n\r\n        clearErrors();\r\n\r\n\r\n        const name =\r\n            nameInput.value.trim();\r\n\r\n\r\n        const email =\r\n            emailInput.value.trim();\r\n\r\n\r\n        const phone =\r\n            phoneInput.value.trim();\r\n\r\n\r\n        const cityID =\r\n            Number(\r\n                cityIDInput.value\r\n            );\r\n\r\n\r\n        const selectedServices =\r\n            getSelectedServiceIDs();\r\n\r\n\r\n        let valid = true;\r\n\r\n\r\n        if (!nameRegex.test(name)) {\r\n\r\n            nameField.classList.add(\r\n                \"invalid\"\r\n            );\r\n\r\n            valid = false;\r\n\r\n        }\r\n\r\n\r\n        if (\r\n            email &&\r\n            !emailRegex.test(email)\r\n        ) {\r\n\r\n            emailField.classList.add(\r\n                \"invalid\"\r\n            );\r\n\r\n            valid = false;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * No Saudi-only phone validation.\r\n         * Indian \/ Saudi \/ other country\r\n         * numbers can pass frontend.\r\n         *\/\r\n\r\n        if (!phone) {\r\n\r\n            phoneField.classList.add(\r\n                \"invalid\"\r\n            );\r\n\r\n            valid = false;\r\n\r\n        }\r\n\r\n\r\n        if (\r\n            !Number.isInteger(cityID) ||\r\n            cityID <= 0\r\n        ) {\r\n\r\n            cityField.classList.add(\r\n                \"invalid\"\r\n            );\r\n\r\n            valid = false;\r\n\r\n        }\r\n\r\n\r\n        if (\r\n            selectedServices.length === 0\r\n        ) {\r\n\r\n            servicesField.classList.add(\r\n                \"invalid\"\r\n            );\r\n\r\n            valid = false;\r\n\r\n        }\r\n\r\n\r\n        return valid;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | REGISTER PAYLOAD\r\n    |--------------------------------------------------------------------------\r\n    |\r\n    | Iqama and Experience are removed from UI.\r\n    |\r\n    | Backend receives:\r\n    | nationalIdOrIqamaNumber = \"\"\r\n    | yearsOfExperience = 0\r\n    |\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function getRegisterPayload(otp) {\r\n\r\n        return {\r\n\r\n            phone:\r\n                phoneInput.value.trim(),\r\n\r\n            otp:\r\n                otp,\r\n\r\n            roleKey:\r\n                roleKeyInput.value,\r\n\r\n            fullName:\r\n                nameInput.value.trim(),\r\n\r\n            email:\r\n                emailInput.value.trim()\r\n                    || null,\r\n\r\n            cityID:\r\n                Number(\r\n                    cityIDInput.value\r\n                ),\r\n\r\n            nationalIdOrIqamaNumber:\r\n                \"\",\r\n\r\n            yearsOfExperience:\r\n                0,\r\n\r\n            selectedServiceIDs:\r\n                getSelectedServiceIDs()\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | OTP POPUP\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    function openOtpPopup() {\r\n\r\n        otpPhoneText.textContent =\r\n            phoneInput.value.trim();\r\n\r\n\r\n        otpInput.value = \"\";\r\n\r\n\r\n        otpError.style.color =\r\n            \"#bd1119\";\r\n\r\n\r\n        otpError.classList.remove(\r\n            \"show\"\r\n        );\r\n\r\n\r\n        otpModal.classList.add(\r\n            \"show\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n\r\n\r\n        setTimeout(\r\n            function () {\r\n\r\n                otpInput.focus();\r\n\r\n            },\r\n            100\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function closeOtpPopup() {\r\n\r\n        otpModal.classList.remove(\r\n            \"show\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"\";\r\n\r\n    }\r\n\r\n\r\n    closeOtpModal.addEventListener(\r\n        \"click\",\r\n        closeOtpPopup\r\n    );\r\n\r\n\r\n    otpModal.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.target ===\r\n                otpModal\r\n            ) {\r\n\r\n                closeOtpPopup();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | REQUEST OTP\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    async function requestOtp() {\r\n\r\n        const response =\r\n            await fetch(\r\n                API_BASE +\r\n                \"\/request-otp\",\r\n                {\r\n                    method:\r\n                        \"POST\",\r\n\r\n                    headers: {\r\n                        \"Content-Type\":\r\n                            \"application\/json\"\r\n                    },\r\n\r\n                    body:\r\n                        JSON.stringify({\r\n                            phone:\r\n                                phoneInput.value.trim()\r\n                        })\r\n                }\r\n            );\r\n\r\n\r\n        return await readApiResponse(\r\n            response\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | FORM SUBMIT -> SEND OTP\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    form.addEventListener(\r\n        \"submit\",\r\n        async function (event) {\r\n\r\n            event.preventDefault();\r\n\r\n\r\n            if (!validateForm()) {\r\n\r\n                formMessage.className =\r\n                    \"form-message error\";\r\n\r\n\r\n                formMessage.textContent =\r\n                    \"Please correct the highlighted fields.\";\r\n\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            sendOtpBtn.disabled =\r\n                true;\r\n\r\n\r\n            sendOtpBtn.textContent =\r\n                \"Sending OTP...\";\r\n\r\n\r\n            try {\r\n\r\n                const result =\r\n                    await requestOtp();\r\n\r\n\r\n                formMessage.className =\r\n                    \"form-message success\";\r\n\r\n\r\n                formMessage.textContent =\r\n                    result.message ||\r\n                    \"Verification code sent.\";\r\n\r\n\r\n                openOtpPopup();\r\n\r\n\r\n            } catch (error) {\r\n\r\n                formMessage.className =\r\n                    \"form-message error\";\r\n\r\n\r\n                formMessage.textContent =\r\n                    error.message ||\r\n                    \"Unable to send OTP.\";\r\n\r\n            } finally {\r\n\r\n                sendOtpBtn.disabled =\r\n                    false;\r\n\r\n\r\n                sendOtpBtn.textContent =\r\n                    \"Send OTP\";\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | VERIFY OTP + REGISTER\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    verifyOtpBtn.addEventListener(\r\n        \"click\",\r\n        async function () {\r\n\r\n            const otp =\r\n                otpInput.value.trim();\r\n\r\n\r\n            if (\r\n                !\/^\\d{6}$\/.test(\r\n                    otp\r\n                )\r\n            ) {\r\n\r\n                otpError.style.color =\r\n                    \"#bd1119\";\r\n\r\n\r\n                otpError.textContent =\r\n                    \"Enter a valid 6-digit OTP.\";\r\n\r\n\r\n                otpError.classList.add(\r\n                    \"show\"\r\n                );\r\n\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            const payload =\r\n                getRegisterPayload(\r\n                    otp\r\n                );\r\n\r\n\r\n            verifyOtpBtn.disabled =\r\n                true;\r\n\r\n\r\n            verifyOtpBtn.textContent =\r\n                \"Verifying...\";\r\n\r\n\r\n            try {\r\n\r\n                const response =\r\n                    await fetch(\r\n                        API_BASE +\r\n                        \"\/register\",\r\n                        {\r\n                            method:\r\n                                \"POST\",\r\n\r\n                            headers: {\r\n                                \"Content-Type\":\r\n                                    \"application\/json\"\r\n                            },\r\n\r\n                            body:\r\n                                JSON.stringify(\r\n                                    payload\r\n                                )\r\n                        }\r\n                    );\r\n\r\n\r\n                const result =\r\n                    await readApiResponse(\r\n                        response\r\n                    );\r\n\r\n\r\n                closeOtpPopup();\r\n\r\n\r\n                formMessage.className =\r\n                    \"form-message success\";\r\n\r\n\r\n                formMessage.textContent =\r\n                    result.message ||\r\n                    \"Registration submitted successfully.\";\r\n\r\n\r\n                await resetForm();\r\n\r\n\r\n            } catch (error) {\r\n\r\n                otpError.style.color =\r\n                    \"#bd1119\";\r\n\r\n\r\n                otpError.textContent =\r\n                    error.message ||\r\n                    \"Unable to complete registration.\";\r\n\r\n\r\n                otpError.classList.add(\r\n                    \"show\"\r\n                );\r\n\r\n\r\n            } finally {\r\n\r\n                verifyOtpBtn.disabled =\r\n                    false;\r\n\r\n\r\n                verifyOtpBtn.textContent =\r\n                    \"Verify & Submit\";\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | RESEND OTP\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    resendOtpBtn.addEventListener(\r\n        \"click\",\r\n        async function () {\r\n\r\n            resendOtpBtn.disabled =\r\n                true;\r\n\r\n\r\n            resendOtpBtn.textContent =\r\n                \"Sending...\";\r\n\r\n\r\n            otpError.classList.remove(\r\n                \"show\"\r\n            );\r\n\r\n\r\n            try {\r\n\r\n                const result =\r\n                    await requestOtp();\r\n\r\n\r\n                otpError.style.color =\r\n                    \"#27723a\";\r\n\r\n\r\n                otpError.textContent =\r\n                    result.message ||\r\n                    \"A new OTP has been sent.\";\r\n\r\n\r\n                otpError.classList.add(\r\n                    \"show\"\r\n                );\r\n\r\n\r\n            } catch (error) {\r\n\r\n                otpError.style.color =\r\n                    \"#bd1119\";\r\n\r\n\r\n                otpError.textContent =\r\n                    error.message ||\r\n                    \"Unable to resend OTP.\";\r\n\r\n\r\n                otpError.classList.add(\r\n                    \"show\"\r\n                );\r\n\r\n\r\n            } finally {\r\n\r\n                resendOtpBtn.disabled =\r\n                    false;\r\n\r\n\r\n                resendOtpBtn.textContent =\r\n                    \"Resend OTP\";\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | RESET FORM\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    async function resetForm() {\r\n\r\n        form.reset();\r\n\r\n\r\n        cityIDInput.value =\r\n            \"\";\r\n\r\n\r\n        cityText.textContent =\r\n            \"Select your city\";\r\n\r\n\r\n        cityTrigger.classList.remove(\r\n            \"selected\"\r\n        );\r\n\r\n\r\n        root\r\n            .querySelectorAll(\r\n                \".city-option\"\r\n            )\r\n            .forEach(\r\n                function (option) {\r\n\r\n                    option.classList.remove(\r\n                        \"active\"\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n        tabs.forEach(\r\n            function (tab) {\r\n\r\n                tab.classList.remove(\r\n                    \"active\"\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        details.forEach(\r\n            function (detail) {\r\n\r\n                detail.classList.remove(\r\n                    \"active\"\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        tabs[0].classList.add(\r\n            \"active\"\r\n        );\r\n\r\n\r\n        const providerDetail =\r\n            root.querySelector(\r\n                '[data-role-detail=\"service_provider\"]'\r\n            );\r\n\r\n\r\n        if (providerDetail) {\r\n\r\n            providerDetail.classList.add(\r\n                \"active\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        roleKeyInput.value =\r\n            \"serviceProvider\";\r\n\r\n\r\n        otpInput.value =\r\n            \"\";\r\n\r\n\r\n        otpError.classList.remove(\r\n            \"show\"\r\n        );\r\n\r\n\r\n        await loadServices(\r\n            \"serviceProvider\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n    |--------------------------------------------------------------------------\r\n    | INITIAL LOAD\r\n    |--------------------------------------------------------------------------\r\n    *\/\r\n\r\n    loadCities();\r\n\r\n\r\n    loadServices(\r\n        \"serviceProvider\"\r\n    );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2731 Join the Shamel Network Register With Shamel Choose your registration type, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9190","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/pages\/9190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/comments?post=9190"}],"version-history":[{"count":32,"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/pages\/9190\/revisions"}],"predecessor-version":[{"id":9232,"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/pages\/9190\/revisions\/9232"}],"wp:attachment":[{"href":"https:\/\/shamelsvc.com\/stage\/wp-json\/wp\/v2\/media?parent=9190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}