<div class="row gray_ttc">
    <div class="col-sm-12 ">
        <div class="col-sm-12 row"><br></div>
        <div class="col-sm-12 ">
            <form action="" name="update_education_form">
                <div class="form-group col-sm-12 ">
                    <div class="input-group text-left">

                        <input type="text" id="userEducationID" value="" style="display: none">
<!--                                            <input type="hidden" value="" id="start_date">-->

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

                            <input type="radio" name="attended" id="school" value="1" >
                            <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 autofocus selected

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

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

                            </select>
                            <span class="input-group-addon" id="basic-addon1" title="Please select country name"><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" autofocus>
                            </select>
                            <span class="input-group-addon" id="basic-addon1" title="please select person city"><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 autofocus class="form-control" id="institution_name" name="institution_name" 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 autofocus type="text" class="form-control" placeholder="Please Type New Category" aria-describedby="basic-addon1">
                                <span class="input-group-addon" id="basic-addon1"  title="Please Type New Category"> <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' id="attended_date" value="" class="form-control" placeholder=" Attended date"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="Please select Attended Date"></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' id="finished_date" value="" class="form-control" placeholder=" Finished date"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar" title="Please Select Finished Date"></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 id="education_description" 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="education_view_type" onchange="otherCategory(this.value)">
                            <option value=""> -Who can see my Education details- </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-6"></div>
                </div>

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


                    <div class="form-group col-sm-4 col-sm-offset-4">
                        <a href="#Education_Edit" onclick="updateSelectedEducation()"  class="green-btn btn btn-default">Update Education</a><br/><br/>
                    </div>

                </div>

            </form>
        </div>



    </div> 
</div> 