<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>
<style>
    .formfield {
        position: relative;
        box-sizing: border-box;
        float: left;
        margin: auto;
        padding: 0px;
        border: 0px;
        background: white;
        width: 100%;
    }


    .formfield>input,
    .formfield>select,
    .formfield>textarea,
    .formfield>label {
        padding: 0.8em;
        margin: 0.5em;
        width: 100%;
        background: none;
    }

    .formfield>input,
    .formfield>textarea,
    .formfield>select {
        border: 1px solid #d4d4d4;
        border-radius: 5px;
        outline: none;
    }

    .formfield>label {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        color: #6b6b6b;
        font-size: 12px;
    }

    input:focus+label,
    select:focus+label,
    textarea:focus+label,
    input:valid+label,
    textarea:valid+label,
    select:valid+label {
        color: #686868;
        font-size: 0.9em;
        width: auto;
        height: 1em;
        padding: 0px 0.5em 0px 0.5em;
        margin: 0px;
        background: white;
        transition: 0.2s ease-in-out;
        top: 0em;
        left: 2em;
        font-weight: 600px;

    }

    input:focus,
    input:valid,
    select:focus,
    select:valid,
    textarea:focus,
    textarea:valid {
        border: 2px solid #5381aa;
    }


    input:focus~label,
    input:valid~label,
    select:focus~label,
    select:valid~label,
    textarea:focus~label,
    textarea:valid~label {
        font-size: 12px;
        color: #286397;
        font-weight: 500;
        /* border: 2px solid #009688; */
    }


    input:focus~label span,
    input:valid~label span,
    select:focus~label span,
    select:valid~label span,
    textarea:focus~label span,
    textarea:valid~label span {
        color: red !important;
    }

    /* .containerr {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    } */

    .radio_container {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        background-color: #cecece !important;
        width: 100% !important;
        margin-top: 10px;
        height: 50px;
        border-radius: 5px;
        box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
        margin-left: 7px;
    }

    .radio_container input[type="radio"] {
        appearance: none !important;
        display: none !important;
    }

    .radio-label {
        font-family: "Open Sans", sans-serif;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none !important;
        width: 48% !important;
        height: 40px !important;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        transition: linear 0.3s;
        color: #6e6e6edd !important;
    }

    .radio_container input[type="radio"]:checked+label {
        background-color: #f15a2b !important;
        color: #f1f3f5 !important;
        /* font-weight: 900; */
        transition: 0.3s;
    }

    h1 {
        position: relative;
        padding: 0;
        margin: 0;
        font-family: "Raleway", sans-serif;
        font-weight: 300;
        font-size: 18px;
        color: #080808;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    h1 span {
        display: block;
        font-size: 0.5em;
        line-height: 0.2;
    }

    h1 em {
        font-style: normal;
        font-weight: 600;
    }

    /* === HEADING STYLE #1 === */

    .one h1 {
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 2px;
    }

    .one h1:before {
        width: 28px;
        height: 5px;
        display: block;
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -14px;
        background-color: #f15a2b;
    }

    .one h1:after {
        width: 100px;
        height: 1px;
        display: block;
        content: "";
        position: relative;
        margin-top: 10px;
        left: 50%;
        margin-left: -50px;
        background-color: #f15a2b;
    }

    /* === HEADING STYLE #2 === */

    .boutonn {
        text-transform: uppercase;
        font-weight: 500;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #05579e);
        width: 250px;
        transition: box-shadow 0.1s linear;
        height: 40px;
        margin-top: 20px;
    }

    .boutonn:hover {
        transition: box-shadow 0.1s linear;
        text-transform: uppercase;
        font-weight: 800;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #05579e);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;
    }

    .boutonn:active {
        text-transform: uppercase;
        font-weight: 800;
        color: #fff;
        border-radius: 100px;
        border: 0px;
        background-image: linear-gradient(60deg, #05579e, #7c4891);
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        height: 45px;
        width: 145px;
    }

    .modal-header {
        background: linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        background: -moz-linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        background: -webkit-linear-gradient(90deg, hsla(212, 50%, 34%, 1) 0%, hsla(215, 62%, 34%, 1) 36%, hsla(203, 92%, 37%, 1) 100%);
        color: white;
    }

    input[type="date"]::before,
    input[type="file"]::before {
        content: attr(placeholder);
        position: absolute;
        color: #999999;

    }

    input[type="date"],
    input[type="file"] {
        color: #ffffff;
        background: url("add-file.png") no-repeat;
        text-indent: -9999px;
    }

    input[type="date"]:focus,
    input[type="date"]:valid,
    input[type="file"]:focus,
    input[type="file"]:valid {
        color: #666666;
        background: none;
        text-indent: 0px;
    }

    input[type="date"]:focus::before,
    input[type="date"]:valid::before,
    input[type="file"]:focus::before,
    input[type="file"]:valid::before {
        content: "";
    }

    .dose h1,
    .dose {
        margin-top: 8px;
        text-align: right;
        font-size: 13px;
    }


    .avatar-upload {
        position: relative;
        max-width: 210px;
        margin-left: 10px;
        margin: -5px auto;
    }

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 12px;
        z-index: 1;
        top: 10px;
    }

    .avatar-upload .avatar-edit input {
        display: none;
    }

    .avatar-upload .avatar-edit input+label {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-bottom: 0;

        background: #FFFFFF;
        border: 1px solid transparent;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-weight: normal;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .avatar-upload .avatar-edit input+label:hover {
        background: #f1f1f1;
        border-color: #d6d6d6;
    }

    .avatar-upload .avatar-edit input+label:after {
        color: #757575;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        text-align: center;
        margin: auto;
    }

    .avatar-upload .avatar-preview {
        width: 200px;
        height: 210px;
        position: relative;
        border: 6px solid #F8F8F8;
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .avatar-upload .avatar-preview>div {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    @media (max-width: 1024px) {
        .mobilePad {
            padding-left: 10px !important;
        }
    }

    #addressFirst {
        height: 93px;
    }

    #tableProfile {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        margin-left: 6px;
    }



    #tableProfile tr {
        border: 1px solid #ddd;
        padding: .15em;
    }

    #tableProfile tr:nth-child(even) {
        /* background: #f8f8f8; */
    }

    #tableProfile th,
    #tableProfile td {
        padding: .455em;
        text-align: left;
    }

    #tableProfile th {
        /* background: #999; */
        color: black;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    #tableProfile td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px !important;
        text-align: center;
    }

    #tableProfile td div {
        padding-left: 35px;
    }

    #tableProfile td:nth-child(2) {
        color: rgb(102, 102, 102) !important;
        font-weight: 200 !important;
    }

    input[type="radio"],
    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        border: 2px solid #999;
        transition: 0.2s all linear;
        position: relative;
    }

    input[type="radio"]:checked,
    input[type="checkbox"]:checked {
        border: 6px solid #f15a2b;
        background: white;
        outline: unset !important
            /* I added this one for Edge (chromium) support */
    }
</style>

<div class="row candidate-form">
    <div class="col-md-12  skilledUnskilled">
        <form method='POST' action="" id="form_addCandidate" enctype="multipart/form-data" autocomplete='off' validate>
        
         <div class="row">
                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-header bg-primary">
                            <h4 class="mb-0 text-white" style='font-size:14px;'>STEP 1: BASIC INFO</h4>
                        </div>
                        <div class="card-body">
                            <div class="row" style='padding-right:10px;'>

                                <div class='col-md-3'>
                                    <label style='text-align:center; font-weight:500; color:black; width:100%;'>Staff Photo <span class='required' style='color:red;'>*</span></label>
                                    <div class="avatar-upload">
                                        <div class="avatar-edit">
                                            <input type='file' name="profile_photo" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                            <label for="imageUpload"><i class="bx bxs-edit" style='font-size:25px;'></i></label>
                                        </div>
                                        <div class="avatar-preview ">
                                            <div id="imagePreview" style="background-image: url(assets/images/user-image.png); background-position:center !important;">
                                            </div>
                                        </div>

                                    </div>

                                    <div style='text-align:center; margin-top:10px;'>
                                        <p style='font-size:10px;'><span style='color:black; font-weight:600;'>NOTE: </span> <span style='color:black;'>Staff Photo must be in passport size with white background.</span></p>
                                    </div>
                                </div>

                                <div class='col-md-9'>
                                    <div class='row'>


                                        <div class='col-md-12 mobilePad'>
                                            <div class="formfield">
                                                <select name="title" id="title" class="title" required>

                                                </select>
                                                <label alt="Title" for="title" placeholder="title">Title <span class='required'>*</span></label>
                                            </div>
                                        </div>

                                        <div class='col-md-4 mobilePad'>
                                            <div class="formfield">
                                                <input type="text" name="first_name" id="first_name" required>
                                                <label alt="First Name" for="first_name" placeholder="First Name">First Name <span class='required'>*</span></label>
                                            </div>
                                        </div>

                                        <div class='col-md-4 mobilePad'>
                                            <div class="formfield">
                                                <input type="text" name="middle_name" id="middle_name" required>
                                                <label alt="Middle Name" for="middle_name" placeholder="Middle Name">Middle Name </label>
                                            </div>
                                        </div>

                                        <div class='col-md-4 mobilePad'>
                                            <div class="formfield">
                                                <input type="text" name="last_name" id="last_name" required>
                                                <label alt="Last Name" for="last_name" placeholder="Last Name">Last Name <span class='required'>*</span></label>
                                            </div>
                                        </div>


                                        <div class='col-md-4 mobilePad'>
                                            <div class="containerr">
                                                <div class="radio_container">
                                                    <input type="radio" name="gender" value="Male" id="one" checked required>
                                                    <label class='radio-label' for="one">Male</label>
                                                    <input type="radio" name="gender" value="Female" id="two" required>
                                                    <label class="radio-label" for="two">Female</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class='col-md-4 mobilePad'>
                                            <div class="formfield">
                                                <input type="date" name="dob" id="dob" required>
                                                <label alt="Date of Birth" for="dob">Date of Birth <span class='required'>*</span></label>
                                            </div>
                                        </div>

                                        <div class='col-md-4 mobilePad'>
                                            <div class="formfield">
                                                <div class="formfield">
                                                    <select name="nationality" id="nationality" class="nationality" autofocus required>
                                                        <option selected disabled value=""></option>

                                                    </select>
                                                    <label alt="Country" for="nationality">Nationality <span class='required'>*</span></label>
                                                </div>

                                            </div>
                                        </div>

                                        <div class='col-md-12 mobilePad'>
                                            <div class="formfield">
                                                <div class="formfield">
                                                    <textarea type="text" name="address" id="addressFirst" required></textarea>
                                                    <label alt="Full Address" for="addressFirst" placeholder="Full Address">Current Full Address <span class='required'>*</span></label>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>



                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-header bg-primary">
                            <h4 class="mb-0 text-white" style='font-size:14px;'>STEP 2: CONTACT</h4>
                        </div>
                        <div class="card-body">
                            <div class="row" style='padding-right:10px;'>



                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="phone" id="phone11" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
                                        <label alt="Telephone Number" for="phone11">Telephone Number <span class='required'>*</span></label>
                                    </div>
                                </div>


                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="whatsapp_no" id="whatsapp_no" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
                                        <label alt="Whatsapp Number" for="whatsapp_no" placeholder="Whatsapp Number">Whatsapp Number <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="email" name="email" id="email11" required>
                                        <label alt="First Name" for="email11" placeholder="Email">Email <span class='required'>*</span></label>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>


                </div>

                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-header bg-primary">
                            <h4 class="mb-0 text-white" style='font-size:14px;'>STEP 3: JOB DETAILS / Qualifications and Skills</h4>
                        </div>


                        <div class="card-body">
                            <div class="row" style='padding-right:10px;'>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="added_by" class="added_by" <?php echo "style='display:none;' readonly"; ?>>
                                        <select name="worker_type" id="worker_type" class="candidateType" required>
                                            <option value="Chief Executive Officer">Chief Executive Officer </option>
                                            <option value="Administrative Manager">Administrative Manager</option>
                                            <option value="Administrative Assistant">Administrative Assistant</option>
                                            <option value="Production Manager">Production Manager</option>
                                            <option value="Storekeeper">Storekeeper</option>
                                            <option value="Foreman">Foreman</option>
                                            <option value="Factory staff">Factory staff</option>
                                        </select>
                                        <label alt="Candidate Type" for="worker_type" placeholder="Job Title / Position">Job Title / Position <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="added_by" class="added_by" <?php echo "style='display:none;' readonly"; ?>>
                                        <select name="worker_type" id="worker_type" class="candidateType" required>

                                        </select>
                                        <label alt="Candidate Type" for="worker_type" placeholder="Department">Department <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="added_by" class="added_by" <?php echo "style='display:none;' readonly"; ?>>
                                        <select name="worker_type" id="worker_type" class="candidateType" required>
                                            <option value="Full Time">Full Time</option>
                                            <option value="Part Time">Part Time</option>
                                            <option value="Contract">Contract</option>
                                            <option value="Trainee">Trainee</option>
                                        </select>
                                        <label alt="Candidate Type" for="worker_type" placeholder="Department">Employment Status <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class="col-md-6 mobilePad">
                                    <div class="formfield">
                                        <select name="qualification[]" id="qualification" class="qualification" required autofocus>

                                        </select>
                                        <label alt="What is your highest level of Education?" for="qualification">Education Background <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class="col-md-6 mobilePad">
                                    <div class="formfield">
                                        <select name="qualification[]" id="qualification" class="qualification" required autofocus>

                                        </select>
                                        <label alt="What is your highest level of Education?" for="qualification">Training / Certifications <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class="col-md-2 mobilePad dose">
                                    <h1>Relevant Skills and Experience :</h1>
                                </div>
                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Skill / Expereience 1</label>
                                    </div>
                                </div>
                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>
                                        <label alt="Vaccine Date" for="date">Skill / Expereience 2</label>
                                    </div>
                                </div>

                                <div class="col-md-2 mobilePad dose">

                                </div>
                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Skill / Expereience 3</label>
                                    </div>
                                </div>
                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>
                                        <label alt="Vaccine Date" for="date">Skill / Expereience 4</label>
                                    </div>
                                </div>


                            </div>
                        </div>


                    </div>
                </div>

                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-header bg-primary">
                            <h4 class="mb-0 text-white" style='font-size:14px;'>STEP 4: WORK HISTORY / PREVIOUS EMPLOYMENT DETAILS</h4>
                        </div>
                        <div class="card-body">
                            <div class="row" style='padding-right:10px;'>

                                <div class="col-md-1 mobilePad dose">
                                    <h1>Job 1:</h1>
                                </div>
                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (From)</label>
                                    </div>
                                </div>

                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (To)</label>
                                    </div>
                                </div>

                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Job Roles / Responsibilities</label>
                                    </div>
                                </div>

                                <div class="col-md-1 mobilePad dose">
                                    <h1>Job 2:</h1>
                                </div>
                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (From)</label>
                                    </div>
                                </div>

                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (To)</label>
                                    </div>
                                </div>

                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Job Roles / Responsibilities</label>
                                    </div>
                                </div>


                                <div class="col-md-1 mobilePad dose">
                                    <h1>Job 3:</h1>
                                </div>
                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (From)</label>
                                    </div>
                                </div>

                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (To)</label>
                                    </div>
                                </div>

                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Job Roles / Responsibilities</label>
                                    </div>
                                </div>


                                <div class="col-md-1 mobilePad dose">
                                    <h1>Job 4:</h1>
                                </div>
                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (From)</label>
                                    </div>
                                </div>

                                <div class="col-md-3 mobilePad">
                                    <div class="formfield">
                                        <input type="date" name="date[]" id="date">
                                        <label alt="Vaccine Date" for="date">Date Of Emplyment (To)</label>
                                    </div>
                                </div>

                                <div class="col-md-5 mobilePad">
                                    <div class="formfield">
                                        <select id="drug_name" name="drug_name[]" class="drug_name drug_nameSearch" autofocus>

                                        </select>

                                        <label alt="Vaccine Type" for="drug_name">Job Roles / Responsibilities</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>

                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-header bg-primary">
                            <h4 class="mb-0 text-white" style='font-size:14px;'>STEP 5: PAYROLL / COMPENSATION & HEALTH / SAFETY</h4>
                        </div>
                        <div class="card-body">
                            <div class="row" style='padding-right:10px;'>

                                <div class='col-md-6 mobilePad'>
                                    <div class="formfield">
                                        <select name="title" id="title" class="title" required>

                                        </select>
                                        <label alt="Title" for="title" placeholder="title">Salary / Wage Information <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-6 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="first_name" id="first_name" required>
                                        <label alt="First Name" for="first_name" placeholder="First Name">Bank Account Details <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="middle_name" id="middle_name" required>
                                        <label alt="Middle Name" for="middle_name" placeholder="Middle Name">SSNIT Number </label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <input type="text" name="phone" id="phone11" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
                                        <label alt="Telephone Number" for="phone11">Emergency Contact <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-4 mobilePad'>
                                    <div class="formfield">
                                        <select name="title" id="title" class="title" required>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                        </select>
                                        <label alt="Title" for="title" placeholder="title">Safety Training Completion <span class='required'>*</span></label>
                                    </div>
                                </div>

                                <div class='col-md-12 mobilePad'>
                                    <div class="formfield">
                                        <div class="formfield">
                                            <textarea type="text" name="address" id="addressFirst" required></textarea>
                                            <label alt="Full Address" for="addressFirst" placeholder="Full Address">Medical Conditions/Allergies <span class='required'>*</span></label>
                                        </div>

                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>
                </div>
            </div>

       
        </form>
    </div>
</div>
<script>
    $("#imageUpload").change(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        readURL(this);
    });

    $("#imageUploadd").change(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePrevieww').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePrevieww').hide();
                    $('#imagePrevieww').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        readURL(this);
    });

    $("#imageUpload1").change(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview1').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview1').hide();
                    $('#imagePreview1').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        readURL(this);
    });

    $("#imageUpload2").change(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview2').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview2').hide();
                    $('#imagePreview2').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        readURL(this);
    });

    $("#imageUpload3").change(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview3').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview3').hide();
                    $('#imagePreview3').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        readURL(this);
    });


    $(".addUser").on("click", function() {
        var form_name = $(this).attr("data-form-name");
        var endpoint = $(this).attr("data-endpoint");
        $("#" + form_name).submit(function(e) {
            $.ajax({
                url: domain_api + endpoint,
                type: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $(".addUser").attr("disabled", "disabled");
                    $(".submitLoader").html("<i class='fa fa-spinner fa-spin'></i>")
                },
                success: function(data) {
                    $(".submitLoader").html("Save");
                    if (data.code == 200) {
                        $("#" + form_name)[0].reset();
                        swal("Succes!", data.message, "success");
                        $(".username").html(data.tempUsername);
                        $(".password").html(data.tempPassword);
                        $(".alert-success").fadeIn();
                    } else {
                        swal("Oops!", data.message, "error");
                    }
                    $(".addUser").attr("disabled", false);
                },
                error: function(request, error) {
                    $(".submitLoader").html("Save");
                    swal("Oops!", "Saving was not successful, you should try again!", "error");
                },
            });
            e.preventDefault();
        });
        $(this).off();
    });



    $("#agent-form").off().on("click", function() {
        $(".candidate-form").hide();
        $(".employer-form").hide();
        $(".admin-form").hide();
        $(".agent-form").fadeIn();

    })

    $("#candidate-form").off().on("click", function() {
        $(".agent-form").hide();
        $(".employer-form").hide();
        $(".admin-form").hide();
        $(".candidate-form").fadeIn();

    })

    $("#employer-form").off().on("click", function() {
        $(".candidate-form").hide();
        $(".agent-form").hide();
        $(".admin-form").hide();
        $(".employer-form").fadeIn();

    });


    $("#admin-form").off().on("click", function() {
        $(".candidate-form").hide();
        $(".agent-form").hide();
        $(".employer-form").hide();
        $(".admin-form").fadeIn();

    });



    $(".passport_question").off().on("change", function() {
        var passportQuestion = $(this).val();
        // alert(passportQuestion);
        if (passportQuestion == "Yes") {
            $(".passportFields").show();
            $(".passportFields input").attr("required", true);
        } else {
            $(".passportFields").hide();
            $(".passportFields input").attr("required", false);
        }

    });

    $(".job_experience").off().on("change", function() {
        var experienceYears = $(this).val();
        // alert(passportQuestion);
        if (experienceYears == "Yes") {
            $(".moreJobsAction,.moreJobs").show();
            $(".experienceYears input").attr("required", true);
        } else {
            $(".moreJobsAction,.moreJobs").hide();
            $(".experienceYears input").attr("required", false);
        }

    });

    $("#worked_oversees").off().on("change", function() {
        var experienceDiasporaYears = $(this).val();
        // alert(experienceDiasporaYears);
        if (experienceDiasporaYears == "Yes") {
            $(".moreDiasporaJobsAction,.moreDiasporaJobs").show();
            $(".experienceDiasporaYears input").attr("required", true);
        } else {
            $(".moreDiasporaJobsAction,.moreDiasporaJobs").hide();
            $(".experienceDiasporaYears input").attr("required", false);
        }

    });



    $("#teeth_issue").off().on("change", function() {
        var gapFix = $(this).val();
        // alert(passportQuestion);
        if (gapFix == "Yes") {
            $(".gapFix").show();
        } else {
            $(".gapFix").hide();
        }

    });

    $("#agent_description").off().on("change", function() {
        var agent_description = $(this).val();
        if (agent_description == "Individual / Company") {
            $(".agency_name").html("Agency Name <span class='required'>*</span>");
            $(".name_of_ceo").html("Name of CEO <span class='required'>*</span>");
            $(".nameOfCEO,.licenseNumber").show();
            $(".toBeFull").removeClass("col-md-12");
            $(".toBeFull").addClass("col-md-4");
            $("#name_of_ceo,#license_no").attr("required", true);
        } else if (agent_description == "Chiefdom Focal Person") {
            $(".agency_name").html("Name of Chiefdom / Focal Person <span class='required'>*</span>");
            $(".name_of_ceo").html("Chiefdom Name <span class='required'>*</span>");
            $(".nameOfCEO,.licenseNumber").show();
            $(".toBeFull").removeClass("col-md-12");
            $(".toBeFull").addClass("col-md-4");
            $("#name_of_ceo,#license_no").attr("required", true);
        } else if (agent_description == "Government") {
            $(".agency_name").html("Name of Government <span class='required'>*</span>");
            $(".nameOfCEO,.licenseNumber").hide();
            $(".toBeFull").removeClass("col-md-4");
            $(".toBeFull").addClass("col-md-12");
            $("#name_of_ceo,#license_no").attr("required", false);
        } else if (agent_description == "SOS") {
            $(".agency_name").html("Name of SOS <span class='required'>*</span>");
            $(".nameOfCEO,.licenseNumber").hide();
            $(".toBeFull").removeClass("col-md-4");
            $(".toBeFull").addClass("col-md-12");
            $("#name_of_ceo,#license_no").attr("required", false);
        }

    })

    $(".added_by").val(token);

    $(".title").empty();
    $(".title").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.titles, function(key, value) {
            $(".title").append("<option value='" + value + "'>" + value + "</option>");

        });
    });

    $("#religion").empty();
    $("#religion").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.religion, function(key, value) {
            $("#religion").append("<option value='" + value + "'>" + value + "</option>");
        });
    });

    $("#marital_status").empty();
    $("#marital_status").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;

        $.each(results.data.marital_statuses, function(key, value) {
            $("#marital_status").append("<option value='" + value + "'>" + value + "</option>");
        });
    });

    $(".nationality").empty();
    $(".nationality").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.countries, function(key, value) {
            $(".nationality").append("<option value='" + value + "'>" + value + "</option>");
        });
    });

    $(".country_diaspora").empty();
    $(".country_diaspora").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.countries_in_the_diaspora, function(key, value) {
            $(".country_diaspora").append("<option value='" + value + "'>" + value + "</option>");
        });
    });



    $("#document_type").empty();
    $.get(domain_api + "/documents/document-types.php", function(data) {
        var results = data;
        $.each(results.data, function(key, value) {
            if (value.name == "Resume / CV") {
                $("#document_type").append("<option value='" + value.name + "'>" + value.name + "</option>");
            }
        });
    });

    $("#document_type_certificates").empty();
    $.get(domain_api + "/documents/document-types.php", function(data) {

        var results = data;
        $.each(results.data, function(key, value) {

            if (value.name == "Certificate") {
                $("#document_type_certificates").append("<option value='" + value.name + "'>" + value.name + "</option>");
            }
            if (value.name == "Transcript") {
                $("#document_type_transcript").append("<option value='" + value.name + "'>" + value.name + "</option>");
            }

        });
    });

    $(".work_experience").empty();
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.jobs, function(key, value) {
            $(".work_experience").append("<div class='col-md-3' style='border:none; width:300px;'><div class='form-check'><input class='form-check-input' type='checkbox' name='experience_area[]' value=" + encodeURIComponent(value) + " id='experience_area'><label class='form-check-label' for='experience_area'>" + value + "</label></div></div>");
        });
    });

    $(".candidateType").off().on("change", function() {
        var candidateType = $(this).val();
        if (candidateType == "Skilled/Unskilled") {
            $(".mastersDegree,.diasporaWorkers").hide();
            $(".skilledUnskilled").show();
        } else if (candidateType == "Masters Degree") {
            $(".skilledUnskilled,.diasporaWorkers").hide();
            $(".mastersDegree").show();
        } else if (candidateType == "Diaspora Workers") {
            $(".skilledUnskilled,.mastersDegree").hide();
            $(".diasporaWorkers").show();
        }


    });


    $(".relative_question").off().on("change", function() {
        var relative_question = $(this).val();
        // alert(passportQuestion);
        if (relative_question == "Yes") {
            $(".relative_yes").show();
            $(".relative_yes input").attr("required", true);
        } else {
            $(".relative_yes").hide();
            $(".relative_yes input, .relative_yes select").val("");
            $(".relative_yes input, .relative_yes select").attr("required", false);
        }

    });


    $(".relationship").off().on("change", function() {
        var relationship = $(this).val();
        // alert(passportQuestion);
        if (relationship == "Other") {
            $(".otherRelation").show();
            $(".relationship").attr("name", "none");
            $(".otherRelation input, .otherRelation select").attr("name", "relationship");
            $(".otherRelation input").attr("required", true);
        } else {
            $(".otherRelation").hide();
            $(".otherRelation input, .otherRelation select").val("");
            $(".relationship").attr("name", "relationship");
            $(".otherRelation input, .otherRelation select").attr("name", "none");
            $(".otherRelation input, .otherRelation select").attr("required", false);
        }

    });


    $(".ielts_duolingo_question").off().on("change", function() {
        var ielts_duolingo_question = $(this).val();
        // alert(passportQuestion);
        if (ielts_duolingo_question == "Yes") {
            $(".ielts_duolingo_yes").show();
            $(".ielts_duolingo_yes input").attr("required", true);
        } else {
            $(".ielts_duolingo_yes").hide();
            $(".ielts_duolingo_yes input, .ielts_duolingo_yes select").val("");
            $(".ielts_duolingo_yes input, .ielts_duolingo_yes select").attr("required", false);
        }

    });
    $("#immigrant_visa").off().on("change", function() {
        var immigrant_visa = $(this).val();
        // alert(passportQuestion);
        if (immigrant_visa == "Yes") {
            $(".immigrantVisa").show();
            $(".immigrantVisa input").attr("required", true);
        } else {
            $(".immigrantVisa").hide();
            $(".immigrantVisa input, .immigrantVisa select").val("");
            $(".immigrantVisa input, .immigrantVisa select").attr("required", false);
        }

    });

    $(".special_need_question").off().on("change", function() {
        var special_need_question = $(this).val();
        // alert(passportQuestion);
        if (special_need_question == "Yes") {
            $(".special_need_yes").show();
            $(".special_need_yes textarea").attr("required", true);
        } else {
            $(".special_need_yes").hide();
            $(".special_need_yes textarea, .special_need_yes select").val("");
            $(".special_need_yes textarea, .special_need_yes select").attr("required", false);
        }

    });



    $(".qualification").off().on("change", function() {
        var otherHighestLevelOfEducation = $(this).val();
        // alert(passportQuestion);
        if (otherHighestLevelOfEducation == "Other") {
            $(".otherHighestLevelOfEducation").show();
            $(".qualification").attr("name", "none[]");
            $(".otherHighestLevelOfEducation input, .otherHighestLevelOfEducation select").attr("name", "qualification[]");
            $(".otherHighestLevelOfEducation input, .otherHighestLevelOfEducation select").attr("required", true);
        } else {
            $(".otherHighestLevelOfEducation").hide();
            $(".otherHighestLevelOfEducation input, .otherHighestLevelOfEducation select").val("");
            $(".qualification").attr("name", "qualification[]");
            $(".otherHighestLevelOfEducation input, .otherHighestLevelOfEducation select").attr("name", "none[]");
            $(".otherHighestLevelOfEducation input, .otherHighestLevelOfEducation select").attr("required", false);
        }

    });

    $(".deportation_experience").off().on("change", function() {
        var deportation_experience = $(this).val();
        // alert(passportQuestion);
        if (deportation_experience == "Yes") {
            $(".deportaionAnswerTrue").show();
            $(".deportaionAnswerTrue input, .deportaionAnswerTrue select").attr("required", true);
        } else {
            $(".deportaionAnswerTrue").hide();
            $(".deportaionAnswerTrue input, .deportaionAnswerTrue select").val("");
            $(".deportaionAnswerTrue input, .deportaionAnswerTrue select").attr("required", false);
        }

    });


    $(".course_abroad_question").off().on("change", function() {
        var course_abroad_question = $(this).val();
        if (course_abroad_question == "Other") {
            $(".otherCourseToPursue").show();
            $(".field").attr("name", "none");
            $(".otherCourseToPursue input, .otherCourseToPursue select").attr("name", "course_abroad");
            $(".otherCourseToPursue input, .otherCourseToPursue select").attr("required", true);
        } else {
            $(".otherCourseToPursue").hide();
            $(".otherCourseToPursue input, .otherCourseToPursue select").val("");
            $(".field").attr("name", "course_abroad");
            $(".otherCourseToPursue input, .otherCourseToPursue select").attr("name", "none");
            $(".otherCourseToPursue input, .otherCourseToPursue select").attr("required", false);
        }

    });



    $("#children_question").off().on("change", function() {
        var childrenQuestion = $(this).val();
        if (childrenQuestion == "Yes") {
            $(".children").show();
            $(".children input").attr("required", true);
        } else {
            $(".children").hide();
            $(".children input").attr("required", false);
        }

    });


    $(".drug_nameSearch").off().on("change", function() {
        var drugName = $(this).val();
        if (drugName == "Johnson & Johnson’s Janssen") {
            $(".sndDose").hide();
            $(".sndDose input, .sndDose select").attr("name", "none[]");
        } else {
            $(".sndDose").show();
            $(".sndDose input").attr("name", "date[]");
            $(".sndDose select").attr("name", "drug_name[]");
        }
    });

    $(".addMoreJobs").off().on("click", function() {
        $(".moreJobs").append(
            '<div class="col-md-12 rowW" style="margin-top:20px;">' +
            '<div class="row">' +
            '<div class="col-md-12"> <a href="#" class="removeJobs" style="float:left; color:red;"> Remove <i class="fa fa-trash"></i></a></div>' +

            '<div class="col-md-6 experienceYears mobilePad" ><div class="formfield"><input type="text" name="institution[]" id="institution"><label alt="institution" for="institution">Institution <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6 experienceYears mobilePad" ><div class="formfield"><select name="work_experience_country[]" id="country_diaspora1" class="nationality1"><option selected disabled value=""></option></select><label alt="Country" for="country_diaspora1">Country <span class="required">*</span></label></div></div>' +

            '<div class="col-md-12 experienceYears mobilePad" ><div class="formfield"><input type="text" name="job_title[]" id="job_title"><label alt="Job Title" for="job_title">Job Title <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6 experienceYears mobilePad" ><div class="formfield"> <input type="date" name="start_date[]" id="start_date"><label alt="Start Date" for="start_date">Start Date <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6 experienceYears mobilePad" ><div class="formfield"><input type="date" name="end_date[]" id="end_date"><label alt="End Date" for="end_date">End Date <span class="required">*</span></label></div></div>' +
            '</div>' +
            '</div>'
        )

        $(".nationality1").empty();
        $(".nationality1").append('<option value="" selected></option>');
        $.get(domain_api + "/other-configs/configs.php", function(data) {
            var results = data;
            $.each(results.data.countries, function(key, value) {
                $(".nationality1").append("<option value='" + value + "' selected>" + value + "</option>");
            });
        });
    });


    $(".addMoreDiasporaJobs").off().on("click", function() {
        $(".moreDiasporaJobs").append(
            '<div class="col-md-12 rowW" style="margin-top:20px;">' +
            '<div class="row">' +
            '<div class="col-md-12"> <a href="#" class="removeDiasporaJobs" style="float:left; color:red;"> Remove <i class="fa fa-trash"></i></a></div>' +

            '<div class="col-md-12 experienceDiasporaYears mobilePad" ><div class="formfield"><select name="work_experience_diaspora_country[]" id="work_experience_diaspora_country1" class="nationality1"><option selected disabled value=""></option></select><label alt="Country" for="work_experience_diaspora_country1">Country <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6 experienceDiasporaYears mobilePad" ><div class="formfield"><input type="text" name="referee[]" id="referee"><label alt="Referee" for="referee">Referee <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6 experienceDiasporaYears mobilePad" ><div class="formfield"><input type="text" name="referee_contact[]" id="referee_contact"><label alt="Referee Contact" for="referee_contact">Referee Contact <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6  experienceDiasporaYears mobilePad" ><div class="formfield"> <input type="date" name="diaspora_work_start_date[]" id="diaspora_work_start_date"><label alt="Start Date" for="diaspora_work_start_date">Start Date <span class="required">*</span></label></div></div>' +

            '<div class="col-md-6  experienceDiasporaYears mobilePad" ><div class="formfield"><input type="date" name="diaspora_work_end_date[]" id="diaspora_work_end_date"><label alt="End Date" for="diaspora_work_end_date">End Date <span class="required">*</span></label></div></div>' +
            '</div>' +
            '</div>'
        )

        $(".nationality1").empty();
        $(".nationality1").append('<option value="" selected></option>');
        $.get(domain_apii + "/other-configs/configs.php", function(data) {
            var results = data;
            $.each(results.data.countries, function(key, value) {
                $(".nationality1").append("<option value='" + value + "' selected>" + value + "</option>");
            });
        });
    });
    $(document).on('click', '.removeDiasporaJobs', function() {
        $(this).closest(".rowW").remove();
    });



    $(document).on('click', '.removeJobs', function() {
        $(this).closest(".rowW").remove();
    });





    // $("#qualification").empty();
    // $("#qualification").append('<option value="" selected></option>');
    // $.get(domain_api + "/other-configs/configs.php", function(data) {
    //     var results = data;
    //     $.each(results.data.qualifications, function(key, value) {
    //         $("#qualification").append("<option value='" + value + "'>" + value + "</option>");
    //     });
    // });

    $(".referral").empty();
    $(".referral").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;

        $.each(results.data.referrals, function(key, value) {
            $(".referral").append("<option value='" + value + "'>" + value + "</option>");
        });
    });



    // $(".city").empty();
    // $(".city").append('<option value="" selected></option>');
    // $.get(domain_api + "/cities/cities.php", function(data) {
    //     var results = data;
    //     $.each(results.data, function(key, value) {
    //         $(".city").append("<option value=" + value.id + ">" + value.name + "</option>");
    //     });
    // });

    $(".field").empty();
    $(".field").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.fields_of_study, function(key, value) {
            $(".field").append("<option value='" + value + "'>" + value + "</option>");
        });
    });

    // $(".country_id").empty();
    // $(".country_id").append('<option value="" selected></option>');
    // $.get(domain_api + "/other-configs/configs.php", function(data) {
    //     var results = data;
    //     $.each(results.data.countries, function(key, value) {
    //         $(".country_id").append("<option value='" + value + "'>" + value + "</option>");
    //     });
    // });


    $(".drug_name").empty();
    $(".drug_name").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.vaccines, function(key, value) {
            $(".drug_name").append("<option value='" + value + "'>" + value + "</option>");
        });
    });



    $(".qualification").empty();
    $(".qualification").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;
        $.each(results.data.qualifications, function(key, value) {
            $(".qualification").append("<option value='" + value + "'>" + value + "</option>");
        });
    });

    $(".job").empty();
    $(".job").append('<option value="" selected></option>');
    $.get(domain_api + "/other-configs/configs.php", function(data) {
        var results = data;

        $.each(results.data.jobs, function(key, value) {
            $(".job").append("<option value='" + value + "'>" + value + "</option>");
        });
    });
</script>

<script>
    sessionStorage.setItem('UserType', domain + '/COMPONENTS/super-admin/index.php');
    sessionStorage.setItem('ActivePage', domain + '/COMPONENTS/super-admin/add-new-user.php');
</script>
<script src="<?php echo $website_name; ?>/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="<?php echo $website_name; ?>/dist/js/pages/datatable/datatable-basic.init.js"></script>
<script src="<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js"></script>