<div class="col-sm-8">

    <div class="row gray_ttc">


        <div class="col-sm-12 ">
            <div class="col-sm-12">
                <h3>Add Teacher Work Experience </h3>  
                <hr>


                <nav class="text-justify">
                    <center>
                        <div class="col-sm-12" style="padding: 0">
                            <span class="clo-sm-4" title="Add Personal Information" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: gray">1</span>
                                    <span class="text-left label" style="color: #000;font-size: 16px;font-weight: normal">Personal Information</span>
                                    <span class="nav-arrow" id="cborder" style="margin-right: 8px"><img src="<?php echo base_url() ?>image/border.jpg"></span>
                                </a>
                            </span>


                            <span class="clo-sm-4" title="Add Education" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: gray">2</span>
                                    <span class="text-left label" style="color: #000 ;font-size: 16px;font-weight: normal">Education</span>
                                    <span class="nav-arrow" id="cborder" style="margin-right: 8px"><img src="<?php echo base_url() ?>image/border.jpg"></span>
                                </a>
                            </span>



                            <span class="clo-sm-4" title="Add work Experience" style="padding: 0">
                                <a href="" style="cursor:default;">
                                    <span class="number badge" style="background-color: green">3</span>
                                    <span class="text-left label" style="color: #000;font-size: 16px;font-weight: normal">Work Experience</span>

                                </a>
                            </span>

                        </div>
                    </center>
                </nav>

                <div class="col-sm-12"><br></div>
            </div>

            <div class="col-sm-12"><br></div>
            <!--<div class="col-md-12" style="border: 1px solid green"></div>-->

            <div class="col-sm-12">
                <?php echo validation_errors(); //id="formID2" ?>
                <form id="formID2" action="<?php echo base_url() . 'add-teacher-work-experience/' . $teacher_personal_info->person_id; ?>" method="post" name="educationForm" enctype="multipart/form-data">

                    <div class="col-sm-12  ">

                        <div class="col-sm-12"><br> <br></div>
                        <div class="form-group col-sm-6">
                            <div class="input-group">
                                <input id="user_new_company_name" name="user_new_company_name" value="" type="text" 
                                       data-errormessage-value-missing="Company  Name is required!" 
                                       class="form-control validate[required],custom[CompanyName]"  
                                       placeholder="Please Type Company Name" 
                                       aria-describedby="basic-addon1" autofocus
                                       value="<?php echo set_value('user_new_company_name'); ?>">
                                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-briefcase"></i></span>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <div class="input-group">
                                <input id="user_new_designation" name="user_new_designation" value="" type="text" 
                                       data-errormessage-value-missing="Designation is required!" 
                                       class="form-control validate[required],custom[Designation],custom[Designation_length]" 
                                       placeholder="Please Type Your Designation" 
                                       aria-describedby="basic-addon1"
                                       value="<?php echo set_value('user_new_designation'); ?>">
                                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
                            </div>
                        </div>



                        <div class="col-sm-12"><br> <br></div>

                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <textarea id="user_new_address" name="user_new_address" rows="3" cols="100" 
                                          data-errormessage-value-missing="Company Address is required!" 
                                          class="form-control validate[required]" 
                                          placeholder="Please Type Your Company  Address"><?php echo set_value('user_new_address'); ?></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12"><br> <br></div>

                        <div class="form-group col-sm-12">
                            <div class="input-group">
                                <textarea id="user_new_responsibility" name="user_new_responsibility" rows="3" cols="100" class="form-control" 
                                          placeholder="Please Type Your Job Responsibility"><?php echo set_value('user_new_responsibility'); ?></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12"><br> <br></div>


                        <div class="form-group col-sm-6">

                            <div class='input-group' id='datetimepicker5'>
                                <input id="user_new_job_start_date" name="user_new_job_start_date" 
                                       value="<?php echo set_value('user_new_job_start_date'); ?>" type='text' 
                                       data-errormessage-value-missing="Job Start Date is required!" 
                                       class="form-control validate[required]" 
                                       placeholder=" Attended date"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span><br>
                                </span>
                            </div>

                        </div>

                        <script type="text/javascript">
                            $(function () {
                                $('#datetimepicker5').datetimepicker({
                                    viewMode: 'years',
                                    format: 'DD/MM/YYYY'

                                });
                            });
                        </script>



                        <div class="form-group col-sm-6">
                            <label class="col-sm-6" for="new_work_current_here">Work Currently Here  :  &nbsp;&nbsp;</label>
                            <div class="radio radio-success col-sm-6" id="status_for_new_work">
                                <input onclick="Finished_date(this.value)" 
                                       data-errormessage-value-missing="Work Currently Here is required!" 
                                       class="validate[required]" type="radio" name="work_current_here" id="yes" value="1" >
                                <label for="yes">Yes</label>
                                <span style="margin-right: 30px"></span>
                                <input onclick="Finished_date(this.value)" 
                                       data-errormessage-value-missing="Work Currently Here is required!" 
                                       class="validate[required]" type="radio" name="work_current_here" id="no" value="0">
                                <label for="no">No</label>
                            </div>
                        </div>

                        <div class="col-sm-12"><br> <br></div>
                        <script>
                            function Finished_date(givenText) {

                                var endDate = document.getElementById('endDate');

                                if (givenText == 0) {
                                    endDate.setAttribute('style', 'display:block')
                                }
                                else {
                                    endDate.setAttribute('style', 'display:none')
                                }
                            }
                        </script>

                        <div class="form-group col-sm-6" id="endDate" style="display: none">

                            <div class='input-group' id='datetimepicker6'>
                                <input id="user_new_job_end_date" name="user_new_job_end_date" value="" type='text' 
                                       data-errormessage-value-missing="Job End Date is required!" 
                                       class="form-control validate[required]" placeholder="Finished date"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span><br>
                                </span>
                            </div>

                        </div>

                        <script type="text/javascript">
                            $(function () {
                                $('#datetimepicker6').datetimepicker({
                                    viewMode: 'years',
                                    format: 'DD/MM/YYYY'

                                });
                            });
                        </script>

                        <div class="form-group col-sm-6">
                            <select data-errormessage-value-missing="Who can see my Education details is required!" class="form-control validate[required]" 
                                    id="person_new_work_view_status" name="person_new_work_view_status" >
                                <option value=""> -Select permission- </option>
                                <option value="1">Public</option>
                                <option value="2">Talha Training User</option>
                                <option value="3">Link</option>
                                <option value="4">Only Me</option>
                            </select>
                        </div>


                        <div class="col-sm-12"><br><br></div>

                        <div class="form-group col-sm-4 col-sm-offset-4">
                            <!--<a href="#" onclick="add_NewWorkExperience()"  class="green-btn btn btn-default">Add Work Experience</a><br/><br/>-->
                            <input type="submit"  class="btn btn-success" value="Add Work Experience"><br/><br/>
                        </div>
                    </div>
                </form>

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

<script>
                            $.noConflict();
// Code that uses other library's $ can follow here.
</script>