<style>/*! elementor - v3.5.3 - 28-12-2021 */
.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2>Your Information:</h2>		
			<input
				type="text"
				class="mf-input "
				id="mf-input-text-3f550ea"
				name="mf-patient-name"
				placeholder="${ parent.decodeEntities(`Patient name`) } "
									onInput=${parent.handleChange}
					aria-invalid=${validation.errors['mf-patient-name'] ? 'true' : 'false'}
					ref=${el => parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":true,"expression":"null"}, el)}
								/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-patient-name"
					as=${html``}
					/>
			<input type="email"  defaultValue="" id="mf-input-email-f334448" name="mf-email" placeholder="${ parent.decodeEntities(`Email`) } "  onInput=${parent.handleChange} aria-invalid=${validation.errors['mf-email'] ? 'true' : 'false' } ref=${el=> parent.activateValidation({"message":"This field is required.","emailMessage":"Please enter a valid Email address","minLength":1,"maxLength":"","type":"none","required":true,"expression":"null"}, el)}
				/>
					<${validation.ErrorMessage} errors=${validation.errors} name="mf-email" as=${html``}
				/>
			<${props.Flatpickr}
					name="mf-date-of-birth"
					className="mf-input mf-date-input mf-left-parent "
					placeholder="${ parent.decodeEntities(`Date of Birth`) } "
					options=${{"minDate":"no","maxDate":"","dateFormat":"m-d-Y","enableTime":"","disable":[],"mode":"single","static":true,"disableMobile":true,"time_24hr":false}}
					value=${parent.getValue('mf-date-of-birth')}
					onInput=${parent.handleDateTime}
					aria-invalid=${validation.errors['mf-date-of-birth'] ? 'true' : 'false'}
					ref=${el => props.DateWidget(
							el, 
							'', 
							{"message":"This field is required.","required":false},  
							register, 
							parent 
						)}
					/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-date-of-birth"
					as=${html``}
					/>
			<input
				type="tel"
				class="mf-input "
				id="mf-input-telephone-086e300" 
				name="mf-telephone"
				placeholder="${ parent.decodeEntities(`Telephone`) } "
									onInput=${parent.handleChange}
					aria-invalid=${validation.errors['mf-telephone'] ? 'true' : 'false'}
					ref=${el => parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":true,"expression":"null"}, el)}
								/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-telephone"
					as=${html``}
					/>
							<label for="mf-input-radio-2f12840">
					${ parent.decodeEntities(`Gender :`) } 					
				</label>
						<label>
														<input
								type="radio"
								class="mf-input mf-radio-input "
								name="mf-gender"
								value="male"
								data-checked=""
																									onChange=${ parent.handleChange }
									aria-invalid=${validation.errors['mf-gender'] ? 'true' : 'false'}
									ref=${el =>{
										parent.handleRadioDefault(el);
										parent.activateValidation({"message":"This field is required.","required":false}, el)
									}}
									checked=${'male' === parent.getValue('mf-gender')}
																/>
								${ parent.decodeEntities(`Male`) } 							
						</label>
						<label>
														<input
								type="radio"
								class="mf-input mf-radio-input "
								name="mf-gender"
								value="female"
								data-checked=""
																									onChange=${ parent.handleChange }
									aria-invalid=${validation.errors['mf-gender'] ? 'true' : 'false'}
									ref=${el =>{
										parent.handleRadioDefault(el);
										parent.activateValidation({"message":"This field is required.","required":false}, el)
									}}
									checked=${'female' === parent.getValue('mf-gender')}
																/>
								${ parent.decodeEntities(`Female`) } 							
						</label>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-gender"
					as=${html``}
					/>
            <${props.Select}
                className=${"mf-input mf-input-select  " + ( validation.errors['mf-hospital'] ? 'mf-invalid' : '' )}
                classNamePrefix="mf_select"
                name="mf-hospital"
                placeholder="${ parent.decodeEntities(`Select Hospital`) } "
                isSearchable=${false}
                options=${[{"label":"Hospital level 1","value":"hospital-level-1","isDisabled":false},{"label":"Hospital level 2","value":"hospital-level-2","isDisabled":false},{"label":"Hospital level 3","value":"hospital-level-3","isDisabled":false}]}
                value=${parent.getValue("mf-hospital") ? [{"mf_input_option_text":"Hospital level 1","mf_input_option_value":"hospital-level-1","_id":"9f3ca2d","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Hospital level 2","mf_input_option_value":"hospital-level-2","_id":"2a9cffa","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Hospital level 3","mf_input_option_value":"hospital-level-3","_id":"8edf927","mf_input_option_status":"","mf_input_option_selected":""}].filter(item => item.value === parent.getValue("mf-hospital"))[0] : []}
                onChange=${parent.handleSelect}
                ref=${() => {
                    register({ name: "mf-hospital" }, parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false}));
                    if ( parent.getValue("mf-hospital") === '' && false ) {
                        parent.handleChange({
                            target: {
                                name: 'mf-hospital',
                                value: ''
                            }
                        });
                        parent.setValue( 'mf-hospital', '', true );
                    }
                }}
                />
            				<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-hospital"
					as=${html``}
					/>
            <${props.Select}
                className=${"mf-input mf-input-select  " + ( validation.errors['mf-service'] ? 'mf-invalid' : '' )}
                classNamePrefix="mf_select"
                name="mf-service"
                placeholder="${ parent.decodeEntities(`Select Service`) } "
                isSearchable=${false}
                options=${[{"label":"Cosmetic Dentistry","value":"cosmetic-dentistry","isDisabled":false},{"label":"Cardiology","value":"cardiology","isDisabled":false},{"label":"Neurology","value":"neurology","isDisabled":false},{"label":"Child Health","value":"child-health","isDisabled":false},{"label":"Newborn Baby","value":"newborn-baby","isDisabled":false},{"label":"Neurology","value":"neurology","isDisabled":false}]}
                value=${parent.getValue("mf-service") ? [{"mf_input_option_text":"Cosmetic Dentistry","mf_input_option_value":"cosmetic-dentistry","_id":"2a9cffa","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Cardiology","mf_input_option_value":"cardiology","_id":"9f3ca2d","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Neurology","mf_input_option_value":"neurology","_id":"8edf927","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Child Health","mf_input_option_value":"child-health","_id":"64cc398","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Newborn Baby","mf_input_option_value":"newborn-baby","_id":"38a8d35","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Neurology","mf_input_option_value":"neurology","_id":"4d63bd9","mf_input_option_status":"","mf_input_option_selected":""}].filter(item => item.value === parent.getValue("mf-service"))[0] : []}
                onChange=${parent.handleSelect}
                ref=${() => {
                    register({ name: "mf-service" }, parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false}));
                    if ( parent.getValue("mf-service") === '' && false ) {
                        parent.handleChange({
                            target: {
                                name: 'mf-service',
                                value: ''
                            }
                        });
                        parent.setValue( 'mf-service', '', true );
                    }
                }}
                />
            				<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-service"
					as=${html``}
					/>
			<${props.Flatpickr}
					name="mf-date-appointment"
					className="mf-input mf-date-input mf-left-parent "
					placeholder="${ parent.decodeEntities(`Select Date`) } "
					options=${{"minDate":"no","maxDate":"","dateFormat":"m-d-Y","enableTime":"","disable":[],"mode":"single","static":true,"disableMobile":true,"time_24hr":false}}
					value=${parent.getValue('mf-date-appointment')}
					onInput=${parent.handleDateTime}
					aria-invalid=${validation.errors['mf-date-appointment'] ? 'true' : 'false'}
					ref=${el => props.DateWidget(
							el, 
							'', 
							{"message":"This field is required.","required":true},  
							register, 
							parent 
						)}
					/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-date-appointment"
					as=${html``}
					/>
			<${props.Flatpickr}
					name="booking_time"
					className="mf-input mf-date-input mf-time-input mf-left-parent "
					placeholder="${ parent.decodeEntities(`Select Time`) } "
					options=${{"enableTime":true,"dateFormat":"h:i K","noCalendar":true,"time_24hr":false,"static":true}}
					value=${parent.getValue('booking_time')}
					onInput=${parent.handleDateTime}
					aria-invalid=${validation.errors['booking_time'] ? 'true' : 'false'}
					ref=${
						el => {
							if( el && el.node.nextSibling ) {
								if( el.props.value.trim().length ) {
									el.node.nextSibling.classList.add('value-found');
								}else {
									el.node.nextSibling.classList.remove('value-found');
								}
							}
							register({ name: "booking_time" }, parent.activateValidation({"message":"This field is required.","required":true}))
						}
					}
					/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="booking_time"
					as=${html``}
					/>
            <${props.Select}
                className=${"mf-input mf-input-select  " + ( validation.errors['mf-doctor'] ? 'mf-invalid' : '' )}
                classNamePrefix="mf_select"
                name="mf-doctor"
                placeholder="${ parent.decodeEntities(`Select Doctor`) } "
                isSearchable=${false}
                options=${[{"label":"Sara Jackson","value":"sara-jackson","isDisabled":false},{"label":"Jonathan Gomez","value":"jonathan-gomez","isDisabled":false},{"label":"Ruth Miller","value":"ruth-miller","isDisabled":false}]}
                value=${parent.getValue("mf-doctor") ? [{"mf_input_option_text":"Sara Jackson","mf_input_option_value":"sara-jackson","_id":"2a9cffa","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Jonathan Gomez","mf_input_option_value":"jonathan-gomez","_id":"9f3ca2d","mf_input_option_status":"","mf_input_option_selected":""},{"mf_input_option_text":"Ruth Miller","mf_input_option_value":"ruth-miller","_id":"8edf927","mf_input_option_status":"","mf_input_option_selected":""}].filter(item => item.value === parent.getValue("mf-doctor"))[0] : []}
                onChange=${parent.handleSelect}
                ref=${() => {
                    register({ name: "mf-doctor" }, parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false}));
                    if ( parent.getValue("mf-doctor") === '' && false ) {
                        parent.handleChange({
                            target: {
                                name: 'mf-doctor',
                                value: ''
                            }
                        });
                        parent.setValue( 'mf-doctor', '', true );
                    }
                }}
                />
            				<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-doctor"
					as=${html``}
					/>
			<textarea id="mf-input-text-area-c0df07f"
				name="mf-note-to-the-doctor" 
				placeholder="${ parent.decodeEntities(`Note to the doctor (optional)`) } "
				cols="30" rows="10"
									onInput=${ parent.handleChange }
					aria-invalid=${validation.errors['mf-note-to-the-doctor'] ? 'true' : 'false'}
					ref=${ el => parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false,"expression":"null"}, el) }
								></textarea>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-note-to-the-doctor"
					as=${html``}
					/>
							<button type="submit" id="">
					${ parent.decodeEntities(`Confirm and Pay`) } 
									</button>