<div class="col-sm-12 gray" style="padding:0px">
    <h3 class="text-center">Add Education</h3><hr><br>
    <div class="col-sm-12">
        <div class="row gray_ttc">
            <div class="col-sm-12 ">
                <div class="col-sm-12 ">
                    <!--id="formID3"-->
                    <form id="formID3" class="cmxform" action="<?php echo base_url() ?>super-admin-profile/add-education/<?php echo $person_info->url; ?>" 
                          method="post" name="add_education" enctype="multipart/form-data" >
                        <input type="hidden" name="person_id" id="person_id" value="<?php echo $person_info->person_id; ?>">                       
                        <div class="form-group col-sm-12 ">
                            <label for="attended" class="col-sm-3 ">Attended For :</label>
                            <div class="radio radio-success col-sm-9 margin-zero padding-zero">
                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="school" 
                                       value="1"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="school">School</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="Collage" 
                                       value="2"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="Collage">Collage</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="Graduation" 
                                       value="3"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="Graduation">Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="Post_Graduation" 
                                       value="4"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="Post_Graduation">Post-Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="phd" 
                                       value="5"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="phd">PHD</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" 
                                       name="attended_for" 
                                       class="validate[required]" 
                                       id="Post_phd" value="6"
                                       data-errormessage-value-missing="Please Select Attended For"
                                       onclick="selectInstituteForAddEducation();">
                                <label for="Post_phd">Post-PHD</label>
                            </div>
                            <div class="form-group col-sm-8" style="color: red"><?php echo form_error('attended_for'); ?>  </div>
                        </div>

                        <div class="col-sm-12"> </div>
                        <div class="col-sm-12 ">
                            <div class="form-group col-sm-6">
                                <div class="input-group">
                                    <select  
                                        data-errormessage-value-missing="Person Country is required!"
                                        class="form-control validate[required]" 
                                        id="person_country" 
                                        name ="education_institute_country" 
                                        onchange="selectInstituteForAddEducation();" >
                                        <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 class="form-group col-sm-5" style="color: red"><?php echo form_error('education_institute_country'); ?>  </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <div class="input-group">
                                    <select  
                                        data-errormessage-value-missing="Person City is required!"
                                        class="form-control validate[required]" 
                                        name ="education_institute_city" 
                                        id ="person_city" 
                                        onchange="selectInstituteForAddEducation();">
                                    </select>
                                    <span class="input-group-addon" id="basic-addon1" title="please select person city"><i class="fa fa-flag"></i></span>
                                    <div class="form-group" id="country_code"></div>
                                </div>
                                <div class="form-group col-sm-5" style="color: red"><?php echo form_error('education_institute_city'); ?>  </div>
                            </div>
                        </div>
                        <script>

                            function selectInstituteForAddEducation() {
                                var attended_for1 = document.getElementsByName('attended_for');
                                var attended_for = '';
                                for (var i = 0; i < attended_for1.length; i++) {
                                    if (attended_for1[i].checked) {
                                        attended_for = attended_for1[i].value;
                                    }
                                }
//                                alert(attended_for);
                                var country = document.getElementById('person_country').value;
                                var city = document.getElementById('person_city').value;
//alert(country+'-------'+city);
                                serverPage = '<?php echo base_url(); ?>super_admin_profile/select_institute/' + country + '/' + city + '/' + attended_for;
                                xmlhttp.open("GET", serverPage);
                                xmlhttp.onreadystatechange = function ()
                                {
                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                    {
//                                alert(xmlhttp.responseText);
                                        document.getElementById('country_city_institute').innerHTML = xmlhttp.responseText;
//                                        document.forms['add_education'].elements['education_institute_id'].value = '<?php // echo set_value('education_institute_id');   ?>';
//                                        otherInstitution('<?php // echo set_value('education_institute_id');   ?>');
//                                         var a = document.getElementById('country_city_institute');
//                                        a.setAttribute("style", 'display:block');
                                    }
                                }
                                xmlhttp.send(null);
                            }

                        </script>

                        <div class="col-sm-12 "></div>
                        <div class="col-sm-12 ">
                            <div class="form-group col-sm-6" id="country_city_institute">
                                <select class="form-control validate[required]" id="education_institute_id"
                                        data-errormessage-value-missing='Education Institution Name is required!'
                                        name ="education_institute_id"
                                        onchange="otherInstitution(this.value)">
                                    <option value=""> -Select  Institution Name - </option>
                                    <option value="other">Other</option>
                                </select>
                                <div style="color: red"><?php echo form_error('education_institute_id'); ?>  </div>
                            </div>
                            <!--                            <div class="form-group col-sm-12" style="display:none">
                                                            <div class="form-group col-sm-5" id="country_city_institute" >
                                                            </div>
                                                        </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 validate[required]" 
                                               data-errormessage-value-missing='Education Institution Name is required!' 
                                               placeholder='Education Institute Name' 
                                               aria-describedby="basic-addon1"
                                               name="education_institute_name" id="other_institute" value="<?php echo set_value('education_institute_name'); ?>" >
                                        <span class="input-group-addon" id="basic-addon1"  title="Please Type Institution Name"> <i class="fa fa-retweet"></i></span>
                                    </div>
                                    <div style="color: red"><?php echo form_error('education_institute_name'); ?>  </div>
                                </div>

                            </div>
                            <!--                            <div class="form-group col-sm-12" style="display:none">
                                                            <div class="form-group col-sm-5" id="country_city_institute" >
                                                            </div>
                                                        </div>-->

                            <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>
                        <div class="col-sm-12 "><br> </div>
                        <div class="col-sm-12 ">
                            <div class="form-group col-sm-6">
                                <div class='input-group' id='datetimepicker5'>
                                    <input type='text' 
                                           data-errormessage-value-missing="Start Time Period is required!"
                                           class="form-control validate[required, custom[maxdate]]" 
                                           placeholder=" Attended date"
                                           id="start_time_period" 
                                           name="start_time_period" 
                                           value="<?php echo set_value('start_time_period'); ?>" 
                                           onchange="setEndDateMinValue();">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar" title="Please select Attended Date"></span><br>
                                    </span>
                                </div>
                                <script>
                                    function setEndDateMinValue() {
                                        var endTimePeriod = document.getElementById('end_time_period');
                                        var startTimePeriod = document.getElementById('start_time_period').value;
                                        endTimePeriod.setAttribute("min", startTimePeriod);
                                    }
                                </script>
                                <div class="form-group col-sm-8" style="color: red"><?php echo form_error('start_time_period'); ?>  </div>
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    $('#datetimepicker5').datetimepicker({
                                        viewMode: 'years',
                                        format: 'DD/MM/YYYY'

                                    });
                                });
                            </script>

                            <div class="form-group col-sm-6">
                                <label for="person_current_education_instute" class="col-sm-8">Current Education Institute  :  &nbsp;&nbsp;</label>
                                <div class="radio radio-success col-sm-4 margin-zero" id="status">
                                    <input type="radio" 
                                           class="validate[required]"
                                           onclick="EducationStatus(this.value)" 
                                           name="person_current_education_instute" 
                                           id="yes" 
                                           value="1" >
                                    <label for="yes">Yes</label>
                                    <span style="margin-right: 30px"></span>
                                    <input type="radio" 
                                           class="validate[required]"
                                           onclick="EducationStatus(this.value)" 
                                           name="person_current_education_instute" 
                                           id="no" 
                                           value="2">
                                    <label for="no">No</label>
                                </div>
                                <span style="color: red"><?php echo form_error('person_current_education_instute'); ?></span>
                            </div>

                            <script>
                                function EducationStatus(GivenText) {
                                    var eduEndDate = document.getElementById('eduEndDate');
                                    if (GivenText == 2) {
                                        eduEndDate.setAttribute('style', 'display:block');
                                    }
                                    else {
                                        eduEndDate.setAttribute('style', 'display:none');
                                    }
                                }
                            </script>
                        </div>
                        <div class="col-sm-12 " id="eduEndDate" style="display: none">
                            <div class="form-group col-sm-6">
                                <div class='input-group' id='datetimepicker6'>
                                    <input type='text' 
                                           data-errormessage-value-missing="End Time Period is required!" 
                                           class="form-control validate[required, custom[eduStartTime], custom[maxdate]]" 
                                           placeholder=" Finished date"
                                           id="end_time_period" 
                                           name="end_time_period" 
                                           value="<?php echo set_value('end_time_period'); ?>">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar" title="Please Select Finished Date"></span><br>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group col-sm-8" style="color: red"><?php echo form_error('end_time_period'); ?>  </div>
                            <script type="text/javascript">
                                $(function () {
                                    $('#datetimepicker6').datetimepicker({
                                        viewMode: 'years',
                                        format: 'DD/MM/YYYY'

                                    });
                                });
                            </script>
                        </div>
                        <div class=" col-sm-12 ">
                            <div class="form-group col-sm-12">
                                <textarea name="educational_description" id="educational_description" 
                                          data-errormessage-value-missing="Educational Description is required!"
                                          class="form-control col-sm-4 validate[required] text-input" 
                                          placeholder="Please type Educational Description"><?php echo set_value('educational_description'); ?></textarea>
                                <span style="color: red;"><?php echo form_error('educational_description'); ?></span>
                            </div>
                            <div class="col-sm-12 "><br> </div>
                            <div class="col-sm-12 padding-zero">
                                <div class="form-group col-sm-6">
                                    <select class="form-control validate[required]" 
                                            onchange="otherCategory(this.value)"
                                            data-errormessage-value-missing="Who can see my Education details is required!" 
                                            id="person_education_view_status"  
                                            name="person_education_view_status" >
                                        <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="6">Only Me</option>
                                    </select>
                                </div>
                                <div class="col-sm-6"></div>
                                <div class="form-group col-sm-8" style="color: red"><?php echo form_error('person_education_view_status'); ?>  </div>
                            </div>
                            <div class="col-sm-12 ">
                                <div class="form-group col-sm-4  col-sm-offset-4">
                                    <input type="submit" class="green-btn btn btn-default" value="Add Education ">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div> 
        </div> 
    </div>
</div>
<script type="text/javascript">
    document.forms['add_education'].elements['person_country'].value = '<?php echo set_value('education_institute_country'); ?>';
    populateStates('person_country', 'person_city');
    document.forms['add_education'].elements['person_city'].value = '<?php echo set_value('education_institute_city'); ?>';
    document.forms['add_education'].elements['attended_for'].value = '<?php echo set_value('attended_for'); ?>';
    document.forms['add_education'].elements['person_education_view_status'].value = '<?php echo set_value('person_education_view_status'); ?>';
    document.forms['add_education'].elements['education_institute_id'].value = '<?php echo set_value('education_institute_id'); ?>';
    otherInstitution('<?php echo set_value('education_institute_id'); ?>');
    document.forms['add_education'].elements['person_current_education_instute'].value = '<?php echo set_value('person_current_education_instute'); ?>';
    $(document).ready(function () {
//        selectInstitute();
    });
    EducationStatus('<?php echo set_value('person_current_education_instute'); ?>');
</script>