<script src="https://www.google.com/recaptcha/api.js?"></script>
<section class="sign-up">
    <div class="sign-up-inner">
        <div class="white-bg row padding-top-zero">
            <div class="col-sm-12 text-right padding-top-zero">
                TT User?<a href="<?php echo base_url() ?>sign-in"> Sign In</a>
            </div>
            <div class="col-sm-12"><br></div>
            <div class="col-md-6 col-sm-offset-3">
            
                <?php
                $url = base_url() . 'sign-up';
                echo form_open_multipart($url, 'class="" id="signUpForm" name="userForm" onsubmit="return check_form_bug_report()" autocomplete="off"');
                ?>
                <div class="input-group">
                    <input type="text"
                           data-errormessage-value-missing="Person First Name is required!"
                           class="form-control" 
                           id="person_first_name" 
                           name="person_first_name" 
                           oninput="check_forbidden_exist(this.value, person_last_name.value, person_role.value, '<?php echo base_url(); ?>user/check-forbidden')" 
                           maxlength="100"
                           value="<?php
                           if (set_value('person_first_name')) {
                               echo set_value('person_first_name');
                           } else {
                               echo $this->session->userdata('person_first_name');
                           }
                           ?>"
                           placeholder="Please enter your First Name ..">
                    <span class="input-group-addon"  title="Please enter your First Name"><i class="fa fa-user"></i></span>
                </div>
                <span id="person_first_name_message" style="color:red;"><?php echo form_error('person_first_name'); ?></span>


                <div class="col-sm-12"><br></div>
                <div class="input-group">
                    <input type="text" 
                           data-errormessage-value-missing=" "
                           class="form-control"  
                           id="person_last_name"
                           name="person_last_name"
                           maxlength="100"
                           oninput="check_forbidden_exist(person_first_name.value, this.value, person_role.value, '<?php echo base_url(); ?>user/check-forbidden')" 
                           value="<?php echo set_value('person_last_name'); ?>"
                           placeholder="Please enter your Last Name ..">
                    <span class="input-group-addon"  title="Please enter your Last Name"><i class="fa fa-user"></i></span>
                    <input type="hidden" id="sign_up_forbidden_exists" value="">
                </div>
                <span id="person_last_name_message" style="color:red;"><?php echo form_error('person_last_name'); ?></span>

                <div class="col-sm-12"><br></div>
                <div class="input-group">
                    <input type="email"
                           data-errormessage-value-missing="Person Email is required!" 
                           class="form-control"
                           placeholder="Please enter your  Email .." 
                           oninput="check_email_registration(this.value,  '<?php echo base_url(); ?>check-user-email-registration')" 
                           value="<?php echo set_value('person_email'); ?>" 
                           name="person_email" id="person_email" 
                           maxlength="256">
                    <input type="hidden" name="email_status_value" id="email_status_value" value="1"/>
                    <span class="input-group-addon"  title="Please enter your  Email"><i class="fa fa-envelope"></i></span>
                </div>
                <span id="person_email_message" style="color:red;"><?php echo form_error('person_email'); ?></span>

                <div id="email_status"></div>
                <br/>
                <div class="input-group">
                    <input type="password" 
                           data-errormessage-value-missing="* Password field is required!"
                           class="form-control" 
                           id="person_password" 
                           name="person_password"
                           placeholder="Enter Your Password Here">
                    <input type="hidden" name="pass_stat" id="pass_stat" value="3">
                    <input type="hidden" name="pass_match_stat" id="pass_match_stat" value="3">
                    <span class="input-group-addon"  title="Please Type Your Password"><i class="fa fa-lock"></i></span>
                </div>
                <span id="person_password_message" style="color:red;"><?php echo form_error('person_password'); ?></span>

                <br/>
                <div class="input-group">
                    <input type="password"
                           data-errormessage-value-missing="* Person Confirm Password is required!"
                           class="form-control"
                           id="confirm_password" 
                           name="confirm_password" 
                           minlength="6" 
                           placeholder="Please enter  Confirm Password ..">
                    <span class="input-group-addon"  title="Please enter  Confirm Password"><i class="fa fa-lock"></i></span>
                </div>
                <span id="confirm_password_message" style="color:red;"><?php echo form_error('confirm_password'); ?></span>
                <br/>
                <script src="<?php echo base_url(); ?>resource_library/js/countries.js"></script>

                <div class="input-group">
                    <select data-errormessage-value-missing="Country is required!"
                            class="form-control" 
                            id="person_country" 
                            name ="person_country" class="flagstrap">
                        <script>
                               populateCountries("person_country", "person_city");  // ....for Country with State
                               $("#person_country").on("keypress keyup keydown blur change mouseup input", function () {
                                   document.getElementById('hidden_country_code').value = getCountryCode('person_country');
                               });

                               $(document).ready(function () {
                                   document.getElementById('hidden_country_code').value = getCountryCode('person_country');
                               });
                        </script>

                    </select>
                    <span class="input-group-addon"  title="Please select Country"><i class="fa fa-flag-checkered"></i></span>
                </div>
                <span id="person_country_message" style="color:red;"><?php echo form_error('person_country'); ?></span>

                <div class="input-group">
                    <select  data-errormessage-value-missing="Person City is required!"
                             class="form-control"
                             name ="person_city" 
                             id ="person_city" style="display: none"
                             oninput="checkValidPersonCity()"
                             onkeyup="checkValidPersonCity()"
                             onmouseup="checkValidPersonCity()">
                    </select>
                </div>

                <br/>
                <div class="input-group">
                    <input type="text"
                           id="country_code" name="country_code"
                           data-errormessage-value-missing="Contact Number is required!" type="text" 
                           class="form-control"
                           maxlength="5"
                           value="<?php echo set_value('hidden_country_code'); ?>"
                           placeholder="" aria-describedby="basic-addon1" style="width:25%;padding:5px;"
                           disabled="1">
                    <input type="hidden" name="hidden_country_code" id="hidden_country_code" value="<?php echo set_value('hidden_country_code'); ?>">

                    <input type="text"
                           id="person_contact_number" name="person_contact_number"
                           data-errormessage-value-missing="Contact Number is required!"
                           class="form-control"
                           minlength="8" maxlength="16"
                           value="<?php echo set_value('person_contact_number'); ?>"
                           placeholder="Please enter your phone number.." 
                           aria-describedby="basic-addon1" style="width:70%;float:right;">
                    <span class="input-group-addon" id="basic-addon1"><i class="fa fa-phone"></i></span>
                </div>
                <span id="country_code_message" style="color:red;"><?php echo form_error('country_code'); ?></span>
                <span id="person_contact_number_message" style="color:red;"><?php echo form_error('person_contact_number'); ?></span>

                <br/>
              <select id="person_role" name="person_role"                     
                        data-errormessage-value-missing="Account Type is required!" type="text" 
                        class="form-control"
                        onchange="check_org_name(this.value, person_first_name.value, person_last_name.value, '<?php echo base_url(); ?>user/check-org-forbidden')">
                    <option value=""> -Select Account Type- </option>
                    <option value="3">Individual</option>
                    <option value="4">Groups of People</option>
                    
                    
                </select>
                <span id="person_role_message" style="color:red;"><?php echo form_error('person_role'); ?></span>
               <br/>
                <div>
                    <div>
                        <input type="hidden" id="mcap" name="google_captcha" value="">
                        <?php $this->general_library->google_captcha(); ?>
                    </div>
                    <span id="captcha_error" style="color: red;"><?php echo form_error('google_captcha')?></span>
                </div>
               
               
              
                <br>
<!--                <div class="input-group">
                    <input type="text" required
                           data-errormessage-value-missing="Please type the words for verification." 
                           class="form-control validate[required],custom[matchCaptcha]" 
                           name="captcha" id="captcha" 
                           oninput="signupCaptchaMatch(this.value, captcha_time.value, '<?php //echo base_url(); ?>check-sign-up-captcha' )"
                           placeholder="Please enter the code shown in the image" aria-describedby="basic-addon1">
                    <span class="input-group-addon" id="basic-addon1">
                        <i class="fa fa-pencil"></i>
                    </span>
                    <input type="hidden" id="mcap" value="">
                </div>-->
<!--                <span id="captcha_message" style="color:red;"><?php //echo form_error('captcha'); ?></span>-->
<!--                <input type="hidden" id="mcap" required class="validate[required, custom[googleRecaptcha]]" value="">-->

                <div class="form-group col-sm-8" id="url2"></div>
                <span><input type="hidden" name="person_time_zone" id="person_time_zone" value=""></span>
                              
                        <br/>
                <div class="form_group col-sm-5 col-sm-offset-3">
                <input type="submit" class="green-btn btn btn-default" value="Join Now!"><br/><br/>
                </div>
                <!--</form>-->
                <?php echo form_close(); ?>
            </div>

        </div><!-- /.row -->
    </div><!-- /.Service inner -->
</section>
<script>
    function check_form_bug_report(){
        if(grecaptcha.getResponse() == ''){
             $('#mcap').val('');
             $('#captcha_error').html('Fill up the above fields then Complete The Captcha');
             return false;
         }else{
             $('#mcap').val('1');
             return true;
         }
    }
</script>

<script>
    document.forms['userForm'].elements['person_country'].value = '<?php echo set_value('person_country'); ?>';
    populateStates('person_country', 'person_city');
    document.forms['userForm'].elements['person_role'].value = '<?php echo set_value('person_role'); ?>';
</script>


<script src="<?php echo base_url() ?>front_end_resource/sign_up/sign_up.js" type="text/javascript"></script>
