<script>
    $.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="<?php echo base_url(); ?>resource_library/jquery/jquery-2.1.1.min.js"></script>
<div class="col-sm-8">
    <div class="row gray_ttc">
        <div class="col-sm-12 padding-zero">
            <div class="col-sm-12">
                <h3>Add Teacher </h3>  
                <hr>
            </div>
            <div class="col-sm-12"><br><br></div>
            <div class="col-sm-12">
                <?php
                $url = 'add-teacher-organization';
                echo form_open_multipart($url, 'class="" id="formID2" name="userForm"');
                ?>
                <div class="col-sm-12">
                    <div class="form-group col-sm-6">
                        <div class="input-group">
                            <input type="email"
                                   data-errormessage-value-missing="Person Email is required!" 
                                   class="form-control"
                                   placeholder="Please enter your  Email .." 
                                   value="<?php echo set_value('person_email'); ?>" 
                                   oninput="checkUserEmail(this.value,'<?php echo base_url(); ?>check-org-teacher-email');"
                                   autofocus 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>
                    <div class="col-sm-12"><br></div>
                    <div class="form-group col-sm-6">
                        <input data-errormessage-value-missing="Person First Name is required!"
                               class="form-control" 
                               name="person_first_name"
                               id="person_first_name" 
                               oninput="makeurl( '<?php echo base_url(); ?>make-profile-url', '<?php echo base_url(); ?>user/check-add-teacher-forbidden' )"
                               type="text" 
                               placeholder="Please type First Name" 
                               value="<?php echo set_value('person_first_name'); ?>"
                               maxlength="100" >
                        <span id="person_first_name_message" style="color:red;"><?php echo form_error('person_first_name'); ?></span>
                         
                    </div>

                    <div class="form-group col-sm-6">
                        <input name="person_last_name"
                               class="form-control" 
                               id="person_last_name" 
                               oninput="makeurl( '<?php echo base_url(); ?>make-profile-url', '<?php echo base_url(); ?>user/check-add-teacher-forbidden')"
                               type="text" 
                               placeholder="please type Last Name" 
                               value="<?php echo set_value('person_last_name'); ?>" 
                               maxlength="100"
                               data-errormessage-value-missing=" ">
                        <span id="person_last_name_message" style="color:red;"><?php echo form_error('person_last_name'); ?></span>
                        <input type="hidden" id="add_teacher_org_forbidden_exists" value="">
                    </div>
                    <div class="col-sm-12"><br></div>

                    <div class="form-group col-sm-6">
                        <input type="text"
                               data-errormessage-value-missing="Profile URl is required!"
                               class="form-control" 
                               name="profile_url" 
                               id="profile_url" 
                               onblur="getprofileurl(this.value, '<?php echo base_url(); ?>make-profile-url', '<?php echo base_url(); ?>check-profile-url')"
                               placeholder="Please type Profile URL" 
                               value="<?php echo set_value('profile_url'); ?>">
                        <input name="url_exist" id="url_exist" type="hidden" value="">
                        <span id="profile_url_message" style="color:red;"><?php echo form_error('profile_url'); ?></span>
                    </div>

                    <div class="col-sm-12"><br></div>
                    <div class="form-group col-sm-6">
                        <input type="password"
                               data-errormessage-value-missing="* Password field is required!"
                               class="form-control" 
                               id="person_password" 
                               name="person_password"
                               placeholder="Enter Password Here">
                        <span id="person_password_message" style="color:red;"><?php echo form_error('person_password'); ?></span>
                    </div>

                    <input type="hidden" name="pass_stat" id="pass_stat" value="3">
                    <input type="hidden" name="pass_match_stat" id="pass_match_stat" value="3">

                    <div class="form-group col-sm-6">
                        <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 id="confirm_password_message" style="color:red;"><?php echo form_error('confirm_password'); ?></span>
                    </div>

                    <div class="col-sm-12">
                        <div class="text-left" id="password_status"></div>
                        <div class="text-left" id="password_score"></div>
                        <br>
                    </div>
                    <div class="form-group col-sm-6">
                        <div class="input-group">
                            <select data-errormessage-value-missing="Person Country is required!"
                                    class="form-control" 
                                    id="person_country"
                                    name ="person_country" >

                            </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>
                    <div class="form-group col-sm-6">
                        <div class="input-group">
                            <select  data-errormessage-value-missing="Person City is required!"
                                     class="form-control"
                                     name ="person_city" 
                                     id ="person_city" >
                            </select>
                            <span class="input-group-addon"  title="Please Select City"><i class="fa fa-flag"></i></span>
                        </div>
                        <span id="person_city_message" style="color:red;"><?php echo form_error('person_city'); ?></span>
                    </div>
                    <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>

                    <div class="col-sm-12"><br></div>
                    <div class="form-group col-sm-12">
                        <div class="input-group">
                            <textarea rows="3" cols="100"
                                      id="person_address" name="person_address"
                                      data-errormessage-value-missing="Person Address is required!"
                                      class="form-control"
                                      placeholder="Please Type Your Address" style="max-width: 620px;max-height: 300px;"><?php echo set_value('person_address'); ?></textarea>
                        </div>
                    </div>

                    <div class="form-group col-sm-6">
                        <div class="input-group">
                            <input type="text"
                                   data-errormessage-value-missing="Person country Code is required!"
                                   class="form-control"
                                   name="person_zip" id="person_zip"
                                   value="<?php echo set_value('person_zip'); ?>"
                                   placeholder="Zip/Postal Code"
                                   minlength="3" maxlength="5">
                            <span class="input-group-addon"  title="Please type Zip/Postal Code"><i class="fa fa-trello"></i></span>
                        </div>
                        <span id="person_zip_message" style="color:red;"><?php echo form_error('person_zip'); ?></span>
                    </div>

                    <div class="form-group col-sm-6 ">
                        <div class="form-group">
                            <input data-errormessage-value-missing="Person country Code is required!"
                                   class="form-control col-sm-2"
                                   name="country_code"
                                   id ="country_code" 
                                   style="width:70px;"
                                   value="<?php echo set_value('country_code'); ?>"
                                   disabled="1"
                                   value="<?php echo set_value('hidden_country_code'); ?>"
                                   disabled="1">
                            <input type="hidden" name="hidden_country_code" id="hidden_country_code" value="<?php echo set_value('hidden_country_code'); ?>">

                            <div class="col-sm-1" style="padding: 5px;">-</div>
                            <input data-errormessage-value-missing="Person Mobile Number is required!"
                                   class="form-control col-sm-8"
                                   name="person_contact_number"
                                   id ="person_contact_number" 
                                   style="width:200px;"
                                   minlength="8" maxlength="16"
                                   value="<?php echo set_value('person_contact_number'); ?>">
                        </div>
                        <!--<br>-->
                        <div class="col-sm-12 padding-zero">
                            <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>
                        </div>
                   </div>
                    <div class="col-sm-12"><br></div>

                    
                    <div class="form-group col-sm-6 ">
                        <script>
                            $(":file").filestyle({icon: false});
                        </script>
                        <input type="file" 
                               class="filestyle" 
                               data-icon="false" 
                               onchange="personImageUpload(this, 'photo_0');" 
                               name="person_image" >
                        <span class="pull-left">[ Upload Image ]</span><span id="person_image_message" style="color:red;"><?php echo form_error('person_image'); ?></span>
                    </div>
                    <div class="form-group col-sm-6 ">
                        <div id="image" style="float:left; width: 50px;" ></div>
                   </div>
                                       
                    <input style="float:left;" type='hidden' name="image_path" id="image_path" value="<?php echo set_value('image_path'); ?>"/>
                                                      
                    <div class="col-sm-12"><br></div>
                    <div class="form-group col-sm-6 text-left">
                        <label class="col-sm-4">Gender :  &nbsp;&nbsp;</label>
                        <div class="col-sm-8">
                            <div class="radio radio-success margin-zero">
                                <input type="radio" 
                                       data-errormessage-value-missing="Person Gender is required!"
                                       class="" 
                                       id="male" 
                                       name="person_gender" 
                                       value="1" onchange="checkGenderStatus()">
                                <label for="male">Male</label>
                                <span style="margin-right: 30px"></span>
                                <input type="radio"
                                       data-errormessage-value-missing="Person Gender is required!"
                                       class="" 
                                       id="female" 
                                       name="person_gender" 
                                       value="2" onchange="checkGenderStatus()">
                                <label for="female">Female</label>
                            </div>
                            <span id="person_gender_message" style="color:red;"><?php echo form_error('person_gender'); ?></span>
                            <script>
                                document.forms['userForm'].elements['person_gender'].value = '<?php echo set_value('person_gender'); ?>';
                            </script>
                        </div>
                    </div>


                    <div class="form-group col-sm-6 text-left">
                        <label class="col-sm-4">Status : </label>
                        <div class="col-sm-8">
                            <div class="radio radio-success margin-zero">
                                <input type="radio"
                                       data-errormessage-value-missing="Person Status is required!"
                                       class=""
                                       name="person_status" 
                                       id="person_status1" 
                                       value="1"  onchange="checkPersonStatus()"/>
                                <label for="active">Active</label>
                                <span style="margin-right: 30px"></span>
                                <input type="radio"
                                       data-errormessage-value-missing="Person Status is required!"
                                       class=""
                                       name="person_status" 
                                       id="person_status2" 
                                       value="0" onchange="checkPersonStatus()"/>
                                <label for="inactive">Inactive</label>
                            </div>
                            <span id="person_status_message" style="color:red;"><?php echo form_error('person_status'); ?></span>
                            <script>
                                document.forms['userForm'].elements['person_status'].value = '<?php echo set_value('person_status'); ?>';
                            </script>
                        </div>
                    </div>

                    <div class="col-sm-12"><br></div>
                    <div class="form-group col-sm-2 col-sm-offset-4">
                        <input type="submit" class="green-btn btn btn-default" value="Add"><br/><br/>
                    </div>
                    <div class="form-group col-sm-2">
                        <a href="<?php echo base_url() ?>manage-teacher"> <span class="green-btn btn btn-default">Cancel </span></a><br/><br/>
                    </div>
                    <div class="col-sm-4"></div>

                </div>
                <?php echo form_close(); ?>
            </div>
        </div><!-- /.row gray -->
    </div>
</div>
<script>
    document.forms['userForm'].elements['person_country'].value = '<?php
                if (set_value('person_country')) {
                    echo set_value('person_country');
                }
                ?>';

    populateStates('person_country', 'person_city');    //Populate States dropdown on change of Country Dropdown using Javascript 

    document.forms['userForm'].elements['person_city'].value = '<?php
                if (set_value('person_city')) {
                    echo set_value('person_city');
                }
                ?>';
</script>
<script type="text/javascript" src="<?php echo base_url() ?>front_end_resource/organization/add_teacher_organization.js"></script>