<?php include "include/header.php"; ?>
<style>
    .human-register-form p {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }

    .human-register-form h4 {
        text-align: center;
        font-size: 22px;
        margin: 14px;
        color: #ffffff;
        background-color: #2e5395;
    }

    .human-register-form button {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        z-index: 5;
        padding: 10.5px 29.5px;
        background-color: var(--rr-theme-primary);
        color: var(--rr-common-white);
        font-family: var(--rr-common-white);
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 25px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-transform: capitalize;
        width: fit-content;
    }

    .btn-box {
        display: flex;
        gap: 10px;
    }

    a.login-soc-btn {
        background: #d72323;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        color: white;
        transition: all .5s ease-in;
    }

    a.login-soc-btn:hover {
        background: #14193c;
    }

    a.login-soc-btn.google {
        background: #14193c;
    }

    a.login-soc-btn.google:hover {
        background: #d72323;
    }



    .form-check label a {
        color: var(--pbmit-global-color);
    }

    /*---------*/
    .form-container {
        width: 60%;
        margin: 50px auto;
        padding: 20px;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .step {
        display: none;
    }

    .step.active {
        display: block;
    }

    label {
        font-size: 14px;
        margin: 10px 0 5px;
        display: block;
    }


    button {
        background-color: #2e5395;
        color: white;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
    }

    .backBtn {
        background: #14193c;
        font-style: normal;
        padding: 13px 30px;
        text-transform: none;
        height: 50px;
        width: auto;
        padding: 0 50px;
        -webkit-clip-path: polygon(101% 0, 100% calc(101% - 14px), calc(100% - 14px) 101%, 0 100%, 0 0);
    }

    .nextBtn {
        margin-top: 20px;
        height: 50px;
        width: auto;
        padding: 0 50px;
    }

    .select2-container {
        width: 99% !important;
    }

    .form-control,
    input,
    textarea {
        height: auto !important;
        font-size: 14px !important;
        line-height: 24px !important;
        padding-left: 20px !important;
        color: #767676 !important;
        background-color: #F8F8F8 !important;
    }

    .form-check {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 5px;
    }

    .radio-btn {
        padding: 0px;
        transform: scale(1.5);
        margin: 0 10px;
        height: auto !important;
    }

    .form-select {
        padding: 15px;
        font-size: 15px;
    }
</style>
<section class="page-title">
    <div class="auto-container">
        <h2>become a Human Robot</h2>
        <ul class="bread-crumb clearfix">
            <li><a href="index.html">Home</a></li>
            <li>become a Human Robot</li>
        </ul>
    </div>
</section>
<section class="services-two">
    <div class="auto-container">
        <div class="container">
            <div class="row justify-content-center">
                <div class="form-container contact-form_main human-register-form">
                    <p>Thank you for your interest in becoming a Human Robot! <br>Please fill out the
                        application form below. This role involves wearing a device to connect with users via
                        Zoom, providing real-time interactive experiences in various locations.</p>
                    <form id="registrationForm" method="post" action="" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="kzKVY7OH54Pa3Wrn63gL8CkTPlN3GqS6yAYGWW8R">
                        <input type="hidden" name="role_id" value="2">
                        <!-- Form Steps -->
                        <div class="tab-content">
                            <!-- Step 1 -->
                            <hr>
                            <div class="tab-pane fade show active" id="step1">
                                <h4>Personal Information</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="fullName" class="form-label">Full Name*</label>
                                            <input type="text" id="fullName" name="fullName" class="form-control"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="dob" class="form-label">Date of Birth</label>
                                            <input type="date" id="dob" name="dob" class="form-control"
                                                onclick="this.showPicker()" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="email" class="form-label">Email Address*</label>
                                            <input type="email" id="email" name="email" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="phone" class="form-label">Phone Number</label>
                                            <input type="tel" id="phone" name="phone" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                        <div class="mb-3">
                                            <label for="address" class="form-label">Address</label>
                                            <input type="text" id="address" name="address" class="form-control"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                        <div class="input-main">
                                            <label class="custom-label">Choose your country</label>
                                            <select class="form-select billing_field billing_country" id="country"
                                                name="country" required aria-label="Default select example" required>
                                                <option selected disabled>Select country</option>
                                                <option value="231">United States</option>
                                            </select>
                                            <span class="invalid-feedback" role="alert">
                                                <strong>
                                                </strong>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                        <div class="input-main">
                                            <label class="custom-label">Choose your state</label>
                                            <select class="form-select billing_field select-state billing_state"
                                                name="state" id="state" required aria-label="Default select example"
                                                required>
                                                <option selected disabled>Select state</option>
                                            </select>
                                            <span class="invalid-feedback" role="alert">
                                                <strong>
                                                </strong>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                        <div class="input-main">
                                            <label class="custom-label">Choose your city</label>
                                            <select class="form-select billing_field select-city billing_city"
                                                name="city" id="city" required aria-label="Default select example"
                                                required>
                                                <option selected disabled>Select city</option>
                                            </select>
                                            <span class="invalid-feedback" role="alert">
                                                <strong>
                                                </strong>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="zip" class="form-label">ZIP/Postal Code</label>
                                            <input type="text" id="zip" name="zip" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="zip" class="form-label">Bio</label>
                                                <textarea name="bio" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <input type="hidden" id="password" value="123456789" name="password"
                                                class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary next-step">Next</button>
                            </div>

                            <!-- Step 2 -->
                            <div class="tab-pane fade" id="step2">
                                <h4>Availability</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="preferred_days" class="form-label">Preferred
                                                Days:</label>
                                            <select class="form-control" name="preferred_days[]" id="preferred_days"
                                                multiple required>
                                                <option value="monday">Monday</option>
                                                <option value="tuesday">Tuesday</option>
                                                <option value="wednesday">Wednesday</option>
                                                <option value="thursday">Thursday</option>
                                                <option value="friday">Friday</option>
                                                <option value="saturaday">Saturaday</option>
                                                <option value="sunday">Sunday</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="time_slots" class="form-label">Preferred Time
                                                Slots:</label>
                                            <select class="form-control" name="time_slots[]" id="time_slots" multiple
                                                required>
                                                <option value="morning">Morning</option>
                                                <option value="afternoon">Afternoon</option>
                                                <option value="evening">Evening</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="oncall_sessions" class="form-label">Are you available
                                                for on-call sessions?</label>
                                            <input class="radio-btn" type="radio" name="oncall_sessions" value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="oncall_sessions" value="No">No

                                        </div>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <button type="button" class="btn btn-secondary prev-step">Previous</button>
                                    <button type="button" class="btn btn-primary next-step">Next</button>
                                </div>
                            </div>

                            <!-- Step 3 -->
                            <div class="tab-pane fade" id="step3">
                                <h4>Experience & Skills</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Have you worked as a guide,
                                                host, or in customer service?</label>
                                            <input class="radio-btn" type="radio" id="work_as"
                                                name="customer_service">Yes
                                            <input class="radio-btn" type="radio" name="customer_service">No
                                            <br>
                                            <input type="text" class="form-control work_input"
                                                placeholder="Please describe your experience" name="work_as"
                                                style="display:none">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="similar_with_confe_tools" class="form-label">Are you
                                                familiar with Zoom or similar video conferencing tools?</label>
                                            <input class="radio-btn" type="radio" name="similar_with_confe_tools"
                                                value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="similar_with_confe_tools"
                                                value="No">No
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="exploring_places" class="form-label">Do you feel
                                                comfortable exploring public or private spaces (e.g., museums,
                                                parks, events)?</label>
                                            <input class="radio-btn" type="radio" name="exploring_places"
                                                value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="exploring_places" value="No">No
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Are you fluent in any
                                                languages other than English?</label>
                                            <input class="radio-btn" type="radio" id="other_langugaes" name="fluent">Yes
                                            <input class="radio-btn" type="radio" name="fluent">No
                                            <br>
                                            <input type="text" class="form-control other_langugaes_input"
                                                name="other_langugaes" placeholder="Please list them"
                                                style="display:none">
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <button type="button" class="btn btn-secondary prev-step">Previous</button>
                                    <button type="button" class="btn btn-primary next-step">Next</button>
                                </div>

                            </div>

                            <!-- Step 4 -->
                            <div class="tab-pane fade" id="step4">
                                <h4>Technical Requirements</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="work_as" class="form-label">Do you have access to the
                                            following?</label>
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">A tablet or wearable device
                                                for video conferencing</label>
                                            <input class="radio-btn" type="radio" name="wearable_device" value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="wearable_device" value="No">No
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">A reliable internet
                                                connection</label>
                                            <input class="radio-btn" type="radio" name="internet_connection"
                                                value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="internet_connection"
                                                value="No">No
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Do you have a smartphone or
                                                secondary device for troubleshooting?</label>
                                            <input class="radio-btn" type="radio" name="secondary_device"
                                                value="Yes">Yes
                                            <input class="radio-btn" type="radio" name="secondary_device" value="No">No
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Do you have a valid driver’s
                                                license?</label>
                                            <input class="radio-btn" type="radio" id="driving_license"
                                                name="license">Yes
                                            <input class="radio-btn" type="radio" name="license">No
                                            <div class="driving_license_box" style="dispaly:none">
                                                <label>Please upload a clear photo of your driver’s license
                                                    (front side)</label>
                                                <input type="file" class="form-control" name="driving_license">
                                                <p><span style="color:red">Note:</span> Your license will only
                                                    be used for identity verification and will remain secure.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <button type="button" class="btn btn-secondary prev-step">Previous</button>
                                    <button type="button" class="btn btn-primary next-step">Next</button>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="step5">
                                <h4>Background Information</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="work_as" class="form-label">Why are you interested in
                                            becoming a Human Robot?</label>
                                        <div class="mb-3">
                                            <input class="form-control" type="text" name="why_human_robot">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Are you comfortable
                                                following detailed instructions from users?</label>
                                            <input class="radio-btn" type="radio" name="confortable_with_inst">Yes
                                            <input class="radio-btn" type="radio" name="confortable_with_inst">No
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Do you have any medical
                                                conditions or physical limitations that may affect your ability
                                                to perform this role?</label>
                                            <input class="radio-btn" type="radio" id="medical_condi" name="medical">Yes
                                            <input class="radio-btn" type="radio" name="medical">No
                                            <div class="medical_condi" style="display:none">
                                                <textarea class="form-control" name="medical_condi"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="work_as" class="form-label">Please upload a recent photo
                                                of yourself (optional)</label>
                                            <input class="form-control" type="file" name="profilePic">
                                            <div class="medical_condi">
                                                <label>Please provide two references (name and contact
                                                    details)</label>
                                                <textarea class="form-control" name="reference_detail"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-box">
                                    <button type="button" class="btn btn-secondary prev-step">Previous</button>
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<?php include "include/footer.php"; ?>