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

    <div class="row gray_ttc">


        <div class="col-sm-12 ">
            <div class="col-sm-12 row">
                <h3>Update Teacher Education Information</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: green">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: gray">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 row"><br></div>
            </div>

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



            <div class="col-sm-12 ">
                <form action="<?php echo base_url()?>edit-work-experience" method="post">
                    <div class="form-group col-sm-12 row">
                        <div class="input-group">

                            <label for="attended" class="">Attended For :  &nbsp;&nbsp;</label>
                            <div class="radio radio-success">

                                <input type="radio" name="attended" id="school" value="1" checked>
                                <label for="school">School</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" name="attended" id="Collage" value="2">
                                <label for="Collage">Collage</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" name="attended" id="Graduation" value="3">
                                <label for="Graduation">Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" name="attended" id="Post_Graduation" value="4">
                                <label for="Post_Graduation">Post-Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" name="attended" id="phd" value="5">
                                <label for="phd">PHD</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" name="attended" id="Post_phd" value="6">
                                <label for="Post_phd">Post-PHD</label>
                            </div>

                        </div>
                    </div>

                    <div class="col-sm-12 row"><br> <br></div>
                    <div class="col-sm-12 row">
                        <div class="form-group col-sm-6">
                            <div class="input-group">
                                <select  

                                    class="form-control validate[required] text-input" 
                                    id="person_country" 
                                    name ="person_country">

                                    <script language="javascript">
                                        populateCountries("person_country", "person_city");  // ....for Country with State
                                    </script>

                                </select>
                                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-flag-checkered"></i></span>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <div class="input-group">
                                <select  

                                    class="form-control validate[required] text-input" 
                                    name ="person_city" 
                                    id ="person_city" >
                                </select>
                                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-flag"></i></span>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="country_code" id ="country_code" >

                    <div class="col-sm-12 row"><br> <br></div>
                    <div class="col-sm-12 row">
                        <div class="form-group col-sm-6">

                            <select class="form-control" id="account-type" onchange="otherInstitution(this.value)">
                                <option value=""> -Select  Institution Name - </option>

                                <option value="Other">Other</option>
                            </select>

                        </div>

                        <div class="form-group col-sm-6 ">
                            <div id="O_Institution" style="display: none">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Please Type New Category" aria-describedby="basic-addon1">
                                    <span class="input-group-addon" id="basic-addon1"><i class="fa fa-retweet"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>


                    <script>
                                        function otherInstitution(givenText) {

                                            if (givenText == 'Other') {
                                                var O_Institution = document.getElementById('O_Institution');
                                                O_Institution.setAttribute("style", 'display:block; ');
                                            } else {
                                                var O_Institution = document.getElementById('O_Institution');
                                                O_Institution.setAttribute("style", 'display:none; ');
                                            }
                                        }
                    </script>

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



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

                        <div class='input-group' id='datetimepicker5'>
                            <input type='text' class="form-control" 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">

                        <div class='input-group' id='datetimepicker6'>
                            <input type='text' class="form-control" 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="col-sm-12 "><br> <br></div>
                    <div class="col-sm-12 ">
                        <div class="form-group input-group">
                            <textarea rows="3" cols="80" class="form-control" placeholder="Please Type Your Education Description"></textarea>

                        </div>
                    </div>



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

                    <div class="col-sm-12 row">
                        <div class="form-group col-sm-6">
                            <select class="form-control" id="account-type" onchange="otherCategory(this.value)">
                                <option value=""> -Select permission- </option>
                                <option value="">Public</option>
                                <option value="">Talha Training User</option>
                                <option value="">Link</option>
                                <option value="">Only Me</option>


                            </select>
                        </div>
                        <div class="col-sm-6"></div>
                    </div>

                    <div class="col-sm-12 row"><br><br></div>
                    <div class="col-sm-12 row">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-3">
                            <a href="<?php echo base_url()?>edit-teacher"> <span class="green-btn btn btn-default">Previous </span></a><br/><br/>
                        </div>
                        <div class="form-group col-sm-4">
                            <input type="submit" class="green-btn btn btn-default" value="Update Education "><br/><br/>
                        </div>

                        <div class="form-group col-sm-3">
                            <a href="<?php echo base_url()?>edit-work-experience"> <span class="green-btn btn btn-default">Skip Education </span></a><br/><br/>
                        </div>
                        <div class="col-sm-1"></div>


                    </div>

                </form>
            </div>



        </div> 
    </div> 

</div>