window.singleAttendeeFormComponent = function (attendeeContact, ticketInfo, index, EbFormeo) {
    const attendeeCountryName = `attendee_country[${index}]`;
    const attendeeStateName = `attendee_state[${index}]`;
    const attendeeCityName = `attendee_city[${index}]`;
    const attendeePostCodeName = `attendee_post_code[${index}]`;

    const attendeeCountryId = `attendee_country_${index}`;
    const attendeeStateId = `attendee_state_${index}`;
    const attendeeCityId = `attendee_city_${index}`;
    const attendeePostCodeId = `attendee_post_code_${index}`;
    

    let requiredSpan = '<span class="text-red">*</span>';
    let attendeeHtml = `<div class="eb-formeo-controls eb-attendee-body-wrapper js_attendee_body_wrapper event-attendee" attendee_index="${index}">
        <h5 class="eb-attendee-body-title attendee_and_ticket_heading js_attendee_${index}"><span>Attendee ${index + 1}:</span> ${ticketInfo?.ticket_name}</h5>
        <div class="attendee-edit-form">
            ${index === 0 ? `
            <div class="js_attendee_autofill_wrapper" id="js_attendee_autofill_wrapper_${index} eb-input-holder">
                <input type="checkbox" class="js_attendee_populate_from_checkout" onchange="EbFormeo.jsAttendeePopulateFromCheckout(this)">
                <label>Autofill from &lt;Booking information&gt;</label>
            </div>
            ` : `
            <div class="js_attendee_autofill_wrapper" id="js_attendee_autofill_wrapper_${index} eb-input-holder">
                <input type="checkbox" class="js_attendee_populate_from_attendee" onchange="EbFormeo.jsAttendeePopulateFromAttendee(this)">
                <label>Autofill from &lt;Attendee ${index}&gt;</label>
            </div>
            `}
            <div id="contact-attendee-form-${index}" class="eb-form-row attendee-form-">
                ${attendeeContact.titleEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label class="mb-1">Title ${attendeeContact.titleRequired ? requiredSpan : ''}</label>
                        <div class="eb-select-picker-holder">
                            <div class="select2-main-wrap">
                                <select class="select2Picker" id="attendeeTitle_${index}" name="attendee_title[${index}]" ${attendeeContact.titleRequired ? 'required' : ''}>
                                    <option>Mr.</option>
                                    <option>Mrs.</option>
                                    <option>Ms.</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.firstNameEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label>First Name ${attendeeContact.firstNameRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" name="attendee_first_name[${index}]" class="form-control color-black" id="attendee_first_name_${index}" ${attendeeContact.firstNameRequired ? 'required' : ''}>
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.middleNameEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label>Middle Name ${attendeeContact.middleNameRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" class="form-control" id="attendee_middle_name_${index}" name="attendee_middle_name[${index}]" ${attendeeContact.middleNameRequired ? 'required' : ''}>
                        </div>
                    </div>
                </div>
            ` : ''}
                ${attendeeContact.lastNameEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label>Last Name ${attendeeContact.lastNameRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" name="attendee_last_name[${index}]" class="form-control color-black" id="attendee_last_name_${index}" ${attendeeContact.lastNameRequired ? 'required' : ''}>
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.emailAddressEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label>Email Address ${attendeeContact.emailAddressRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="email" name="attendee_email_address[${index}]" class="form-control color-black" id="attendee_email_address_${index}" ${attendeeContact.emailAddressRequired ? 'required' : ''}>
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.phoneEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label class="mb-1 d-block">Phone ${attendeeContact.phoneRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder eb-phone-input-itl">
                            <input type="tel"  class="form-control js_attendee_phone" name="attendee_phone[${index}]" id="attendee_phone_${index}" ${attendeeContact.phoneRequired ? 'required' : ''} placeholder="">
<!--                            <input id="phone" type="tel" class="eb-form-control">-->
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.dateOfBirthEnabled ? `
                <div class="eb-col-6 date-front-group">
                    <div class="eb-form-group input-group">
                        <label>Date of Birth ${attendeeContact.dateOfBirthRequired ? requiredSpan : ''}</label>
                        <div class="date eb-input-holder">
                            <input type="text" class="form-control date_of_birth" onkeydown="return false" id="attendee_dob_${index}" name="attendee_dob[${index}]" placeholder="DD/MM/YYYY" ${attendeeContact.dateOfBirthRequired ? 'required' : ''}/>
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.addressEnabled ? `
                <div class="eb-col-12">
                    <div class="eb-form-group">
                        <label>Address ${attendeeContact.addressRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" class="form-control js_attendee_address" id="attendee_address_${index}" name="attendee_address[${index}]" ${attendeeContact.addressRequired ? 'required' : ''} placeholder="Type address here to auto complete">
                        </div>
                    </div>
                </div>
                ` : ''}
                ${attendeeContact.addressLine1Enabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label>Address Line 1 ${attendeeContact.addressLine1Required ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" class="form-control" id="attendee_address_line1_${index}" name="attendee_address_line1[${index}]" ${attendeeContact.addressLine1Required ? 'required' : ''}>
                        </div>
                    </div>
                </div>
                ` : ''}
    
                ${attendeeContact.addressLine2Enabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                            <label>Address Line 2 ${attendeeContact.addressLine2Required ? requiredSpan : ''}</label>
                            <div class="eb-input-holder">
                                <input type="text" class="form-control" id="attendee_address_line2_${index}" name="attendee_address_line2[${index}]" ${attendeeContact.addressLine2Required ? 'required' : ''}>
                            </div>
                        </div>
                    </div>
                ` : ''}

                ${attendeeContact.countryEnabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                             <label class="mb-1">Country ${attendeeContact.countryRequired ? requiredSpan : ''}</label>
                            <div class="eb-select-picker-holder">
                                <div class="select2-main-wrap select select-country-mapper-arrow">
                                    <select class="select2Picker form-control dropdown-select2 js-basic-single attendee_simple_contact_form_country_select_dropdown error select2-hidden-accessible" id=${attendeeCountryId} name=${attendeeCountryName} ${attendeeContact.countryRequired ? 'required' : ''}
                                    type="select" title="Nothing selected" data-select2-id="select2-data-attendee_country_${index}">
                                        <option value="">Select a country</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                ` : ''}
                ${attendeeContact.stateEnabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                            <label for="state">State ${attendeeContact.stateRequired ? requiredSpan : ''}</label>
                            <div class="eb-select-picker-holder">
                                <div class="select2-main-wrap" id=${attendeeStateId+'_wrap'}>
                                    <select class="select2Picker" id=${attendeeStateId} name=${attendeeStateName} ${attendeeContact.stateRequired ? 'required' : ''}>
                                        <option value="">Select a state</option>
                                    </select>
                                </div>
                                <div class="eb-form-group" id=${attendeeStateId + '_input'}>
                                    <div class="eb-input-holder">
                                        <input type="text" name=${attendeeStateName + '_input'} placeholder="Enter state" class="eb-form-control" style="display:hidden;" ${attendeeContact.stateRequired ? 'required' : ''}>
                                    </div>
                                </div>
                                    
                            </div>
                        </div>
                    </div>
                ` : ''}
                ${attendeeContact.cityEnabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                            <label for="city">City ${attendeeContact.cityRequired ? requiredSpan : ''}</label>
                            <div class="eb-input-holder">
                                <input type="text" id=${attendeeCityId} name=${attendeeCityName} placeholder="Enter city" class="eb-form-control" ${attendeeContact.cityRequired ? 'required' : ''}>
                            </div>
                        </div>
                    </div>
                ` : ''}
                ${attendeeContact.postalEnabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                            <label for="postcode">ZIP/Postal Code ${attendeeContact.postalRequired ? requiredSpan : ''}</label>
                            <div class="eb-input-holder">
                                <input type="text" id=${attendeePostCodeId} name=${attendeePostCodeName} placeholder="Enter ZIP/Postal Code" class="eb-form-control" ${attendeeContact.postalRequired ? 'required' : ''}>
                            </div>
                        </div>
                    </div>
                ` : ''}
                    
                ${attendeeContact.identificationNoEnabled ? `
                <div class="eb-col-6">
                    <div class="eb-form-group">
                        <label class="mb-1">Identification No ${attendeeContact.identificationNoRequired ? requiredSpan : ''}</label>
                        <div class="eb-input-holder">
                            <input type="text" class="form-control" id="attendee_identification_no_${index}" name="identification_no[${index}]" ${attendeeContact.identificationNoRequired ? 'required' : ''}>
                        </div>
                    </div>
                </div>
                ` : ''}

                ${attendeeContact.nationalityEnabled ? `
                    <div class="eb-col-6">
                        <div class="eb-form-group">
                            <label class="mb-1">Nationality ${attendeeContact.nationalityRequired ? requiredSpan : ''}</label>
                             <div class="eb-select-picker-holder">
                                <div class="select2-main-wrap">
                                    <select class="select2picker2" data-flag="true" data-live-search="true" id="attendee_nationality_${index}" name="attendee_nationality[${index}]" ${attendeeContact.nationalityRequired ? 'required' : ''}>
                                        <option value="">Select a country</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                ` : ''}
            </div>

            <input name="formeo_ticket_slug[${index}]" value="${ticketInfo?.formeo_ticket_slug}" type="hidden"></input>
            <input id="phoneEnabled" value="${attendeeContact.phoneEnabled}" type="hidden"></input>
            <input id="addressEnabled" value="${attendeeContact.addressEnabled}" type="hidden"></input>
            <input id="isAttendeeStateRequired" value="${attendeeContact.stateRequired}" type="hidden"></input>
            <input id="isAttendeePostcodeRequired" value="${attendeeContact.postalRequired}" type="hidden"></input>

            <input id="addressEnabled" value="${attendeeContact.addressEnabled}" type="hidden"></input>
            <div class="eb-attendee-form-main-field-wrap">
                <div class="attendee_detail_form_render_wrapper">
                    <div id="editor-form_${index}" formeo_ticket_slug="${ticketInfo?.formeo_ticket_slug}" attendee_index="${index}" class="full-width formeo-editor-render attendee_formeo_render"></div>
                </div>
            </div>
        </div>
    </div>`;

    return attendeeHtml;
}
