<h2 class="spark2dzoho-page-subtitle"><?php _e( "Application form", "spark2dzoho" ); ?></h2>
<form method="post" class="spark2dzoho-form-application" enctype="multipart/form-data" id="spark2dzoho-form" >
    <input type="hidden" name="opportunity_id" value="<?php echo $opportunity['JOBOPENINGID']; ?>">
    <input type="hidden" name="opportunidade_name_id" value="<?php echo $opportunity['Job Opening ID']; ?>">
    <input type="hidden" name="opportunidade_name" value="<?php echo $opportunity['Posting Title']; ?>">
	<?php wp_nonce_field( 'submit_spark2d_zoho_form', 'submit_spark2d_zoho_form_field' ); ?>
    <h3><?php _e( 'Basic information', 'spark2dzoho' ); ?></h3>
    <div class="form-group">
        <label><?php printf( "%s", __( 'First name', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="125"
               name="zoho_form[First Name]" id="zoho_first_name" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Last name', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="125"
               name="zoho_form[Last Name]" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Email', 'spark2dzoho' ) ); ?></label>
        <input type="email" maxlength="255"
               name="zoho_form[Email]" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s %s", __( 'Mobile', 'spark2dzoho' ), __( '(optional)', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="30"
               name="zoho_form[Mobile]" class="form-control">
    </div>
    <div class="form-group">
        <label><?php printf( "%s %s", __( 'Website', 'spark2dzoho' ), __( '(optional)', 'spark2dzoho' ) ); ?></label>
        <input type="url" maxlength="120"
               name="zoho_form[Website]" class="form-control">
    </div>
    <h3><?php _e( 'Address information', 'spark2dzoho' ); ?></h3>
    <div class="form-group">
        <label><?php printf( "%s", __( 'City', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="255"
               name="zoho_form[City]" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Country', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="255"
               name="zoho_form[Country]" class="form-control" required>
    </div>
    <h3><?php _e( 'Professional details', 'spark2dzoho' ); ?></h3>

    <div class="form-group">
        <label><?php printf( "%s", __( 'Experience in years', 'spark2dzoho' ) ); ?></label>
        <input type="number" name="zoho_form[Experience in Years]" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Highest qualification held', 'spark2dzoho' ) ); ?></label>
        <select name="zoho_form[Highest Qualification Held]" required class="form-control">
            <option value="" selected="selected" disabled="disabled">-- select one --</option>
            <option value="Secondary education"><?php _e( 'Secondary education or high school', 'spark2dzoho' ); ?></option>
            <option value="Vocational qualification"><?php _e( 'Vocational qualification', 'spark2dzoho' ); ?></option>
            <option value="Bachelor"><?php _e( 'Bachelor\'s degree', 'spark2dzoho' ); ?></option>
            <option value="Master"><?php _e( 'Master\'s degree', 'spark2dzoho' ); ?></option>
            <option value="Doctorate"><?php _e( 'Doctorate or higher', 'spark2dzoho' ); ?></option>
        </select>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Current job title', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="255"
               name="zoho_form[Current Job Title]" class="form-control" required>
    </div>
    <div class="form-group">
        <label><?php printf( "%s", __( 'Current employer', 'spark2dzoho' ) ); ?></label>
        <input type="text" maxlength="100"
               name="zoho_form[Current Employer]" class="form-control" required>
    </div>
    <h3><?php _e( 'Education details', 'spark2dzoho' ); ?></h3>
    <div id="zone_educational" style="display: none;">
        <div class="zone-repeater-container" style="display: block;">
            <a onclick="jQuery(this).closest('.zone-repeater-container').remove();" style="float: right;"
               class="removeZone"><?php _e( 'Remove', 'spark2dzoho' ); ?></a>
            <div style="clear: both;"></div>
            <div class="form-group">
                <label><?php _e( 'Institute / School', 'spark2dzoho' ); ?></label>
                <input type="text" maxlength="100"
                       name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Institute / School]"
                       class="form-control required">
            </div>
            <div class="form-group">
                <label><?php _e( 'Course', 'spark2dzoho' ); ?></label>
                <input type="text" maxlength="100"
                       name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Major / Department]"
                       class="form-control required">
            </div>
            <div class="form-group">
                <label><?php _e( 'Degree', 'spark2dzoho' ); ?></label>
                <input type="text" maxlength="100"
                       name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Degree]" class="form-control required">
            </div>
            <div class="form-group">
                <label><?php _e( 'Duration', 'spark2dzoho' ); ?></label>
                <select name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Duration_From][]" size="1">
					<?php for ( $m = 1; $m <= 12; $m ++ ) {
						echo '<option value="' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '">' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '</option>';
					} ?>
                </select>-<select name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Duration_From][]" size="1">
					<?php for ( $m = date( "Y" ); $m >= date( "Y" ) - 50; $m -- ) {
						echo '<option value="' . $m . '">' . $m . '</option>';
					} ?>
                </select> <?php _e( 'to', 'spark2dzoho' ); ?>
                <select name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Duration_To][]" size="1" class="end_date">
					<?php for ( $m = 1; $m <= 12; $m ++ ) {
						echo '<option value="' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '">' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '</option>';
					} ?>
                </select>-<select name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Duration_To][]" size="1"
                                  class="end_date">
					<?php for ( $m = date( "Y" ); $m >= date( "Y" ) - 50; $m -- ) {
						echo '<option value="' . $m . '">' . $m . '</option>';
					} ?>
                </select>
                <input type="checkbox" onclick="SparkZoho_currently_work_here(this)"
                       name="zoho_form_tabs[EducationEXAMPLE][ARRAYID][Currently pursuing]"
                       value="true"> <?php _e( 'Currently pursuing', 'spark2dzoho' ); ?>
            </div>
        </div>
    </div>


    <div class="form-group">
        <label><?php _e( 'Institute / School', 'spark2dzoho' ); ?></label>
        <input type="text" maxlength="100"
               name="zoho_form_tabs[Education][0][Institute / School]"
               class="form-control required" required>
    </div>
    <div class="form-group">
        <label><?php _e( 'Course', 'spark2dzoho' ); ?></label>
        <input type="text" maxlength="100"
               name="zoho_form_tabs[Education][0][Major / Department]"
               class="form-control required" required>
    </div>
    <div class="form-group">
        <label><?php _e( 'Degree', 'spark2dzoho' ); ?></label>
        <input type="text" maxlength="100"
               name="zoho_form_tabs[Education][0][Degree]" class="form-control required" required>
    </div>
    <div class="form-group">
        <label><?php _e( 'Duration', 'spark2dzoho' ); ?></label>
        <select name="zoho_form_tabs[Education][0][Duration_From][]" size="1">
			<?php for ( $m = 1; $m <= 12; $m ++ ) {
				echo '<option value="' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '">' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '</option>';
			} ?>
        </select>-<select name="zoho_form_tabs[Education][0][Duration_From][]" size="1">
			<?php for ( $m = date( "Y" ); $m >= date( "Y" ) - 50; $m -- ) {
				echo '<option value="' . $m . '">' . $m . '</option>';
			} ?>
        </select> <?php _e( 'to', 'spark2dzoho' ); ?>
        <select name="zoho_form_tabs[Education][0][Duration_To][]" size="1" class="end_date">
			<?php for ( $m = 1; $m <= 12; $m ++ ) {
				echo '<option value="' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '">' . str_pad( $m, 2, "0", STR_PAD_LEFT ) . '</option>';
			} ?>
        </select>-<select name="zoho_form_tabs[Education][0][Duration_To][]" size="1"
                          class="end_date">
			<?php for ( $m = date( "Y" ); $m >= date( "Y" ) - 50; $m -- ) {
				echo '<option value="' . $m . '">' . $m . '</option>';
			} ?>
        </select>
        <input type="checkbox" onclick="SparkZoho_currently_work_here(this)"
               name="zoho_form_tabs[Education][0][Currently pursuing]"
               value="true"> <?php _e( 'Currently pursuing', 'spark2dzoho' ); ?>
    </div>


    <p>
        <button type="button" class="spark2dzoho-button"
                onclick="SparkZoho_replicate_zone('zone_educational',this)"
                data-plural="<?php _e( 'Add more', 'spark2dzoho' ); ?>" style="background-color:#ddd;"><?php _e( 'Add more', 'spark2dzoho' ); ?></button>
    </p>

    <h3><?php _e( 'Attachments', 'spark2dzoho' ); ?></h3>

    <div class="form-group">
        <label><?php printf( "%s", __( 'Resume', 'spark2dzoho' ) ); ?></label>
        <input type="file" name="Resume" required>
    </div>

    <div class="form-group">
        <label><?php printf( "%s %s", __( 'Cover letter', 'spark2dzoho' ), __( '(optional)', 'spark2dzoho' ) ); ?></label>
        <input type="file" name="CoverLetter">
    </div>

    <div class="form-group">
        <label><?php printf( "%s %s", __( 'Others attachments / Portfolio', 'spark2dzoho' ), __( '(optional)', 'spark2dzoho' ) ); ?></label>
        <input type="file" name="Others">
    </div>

    <div class="form-group">
        <p class="spark2dzoho-submit-button-container">
            <button type="submit"
                    class="spark2dzoho-submit-button spark2dzoho-button" onclick="mensagemSubmit()"><?php _e( "Apply now", "spark2dzoho" ); ?></button>
        </p>
    </div>
    <div class="form-group">
        <p id="mensagemsubmisao" class="mensagemsubmisao" style="display:none;">A tua candidatura está a ser enviada. Este processo pode demorar alguns segundos. Por favor aguarda.</p>
    </div>
</form>
<script>
    var contador = {
        zone_experience: 0,
        zone_educational: 0
    };

    function SparkZoho_replicate_zone(zone_id, button) {
        var $main_zone = jQuery("#" + zone_id);
        var $html = $main_zone.html();
        contador[zone_id]++;
        var new_html = $html.replace(/ARRAYID/g, contador[zone_id]).replace(/EXAMPLE/g, "");
        jQuery(button).before(new_html).html(jQuery(button).data('plural'));
        jQuery("body").find("input.required:visible").prop("required", true);
    }

    function SparkZoho_currently_work_here(obj) {
        if (obj.checked == true) {
            jQuery(obj).closest('div').find("select.end_date").prop("disabled", true);
        } else {
            jQuery(obj).closest('div').find("select.end_date").prop("disabled", false);
        }
    }
    
    function mensagemSubmit() {
            
        //verify if required are empty
        var requiredElements = document.getElementById("spark2dzoho-form").querySelectorAll("[required]");

        for(var i = 0; i < requiredElements.length; i++) {
            var e = requiredElements[i];
            if ( e.value == "" ) {
                return false;
            }
        }
        
        document.getElementById("mensagemsubmisao").style.display = "block";


    }
</script>