
<script>
    $.noConflict();
// Code that uses other library's $ can follow here.
</script>
<div class="col-sm-8">
    <div class="row gray_ttc">
        <div class="col-sm-12 ">
            <div class="col-sm-12 row">
                <h3>Add Teacher Education Form</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">
                <?php echo validation_errors(); //id="formID2" ?>
                <form id="formID2" action="<?php echo base_url() . 'add-teacher-education/' . $teacher_personal_info->url; ?>" method="post" 
                      name="educationForm" enctype="multipart/form-data">
                    <div class="form-group col-sm-12 ">
                        <div class="input-group text-left">

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

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for1" title="School" value="1"
                                       onchange="selectInstitute();">
                                <label for="school">School</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for2" title="Collage" value="2"
                                       onchange="selectInstitute();">
                                <label for="Collage">Collage</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for3" onchange="selectInstitute();"
                                       title="Graduation" value="3"
                                       >
                                <label for="Graduation">Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for4" onchange="selectInstitute();"
                                       title="Post_Graduation" value="4">
                                <label for="Post_Graduation">Post-Graduation</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for5" onchange="selectInstitute();"
                                       title="phd" value="5">
                                <label for="phd">PHD</label>
                                <span style="margin-right: 25px"></span>

                                <input type="radio" data-errormessage-value-missing="Attended For is required!" class="validate[required]" 
                                       name="attended_for" id="attended_for6" onchange="selectInstitute();"
                                       title="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 data-errormessage-value-missing="Person Country is required!"
                                        class="form-control validate[required] text-input" 
                                        id="person_country" 
                                        name ="education_institution_country"
                                        onchange="selectInstitute();"
                                        title="Education Institution Country">

                                    <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 data-errormessage-value-missing="Person City is required!" 
                                        class="form-control validate[required]" 
                                        name ="education_institution_city" id ="person_city"  
                                        onchange="selectInstitute();"
                                        title="Education Institution City">
                                </select>
                                <span class="input-group-addon" id="basic-addon1" title="please select person city"><i class="fa fa-flag"></i></span>
                            </div>
                        </div>
                    </div>

                    <script>
                        function selectInstitute() {
                            if (document.getElementById('attended_for1').checked) {
                                attendedFor = document.getElementById('attended_for1').value;
                            }
                            if (document.getElementById('attended_for2').checked) {
                                attendedFor = document.getElementById('attended_for2').value;
                            }
                            if (document.getElementById('attended_for3').checked) {
                                attendedFor = document.getElementById('attended_for3').value;
                            }
                            if (document.getElementById('attended_for4').checked) {
                                attendedFor = document.getElementById('attended_for4').value;
                            }
//                            alert(attendedFor);
                            country = document.getElementById('person_country').value;
                            city = document.getElementById('person_city').value;
                            if (country != '' && city != '' && attendedFor != '') {
                                serverPage = '<?php echo base_url(); ?>select_institute_by_country_city/' + country + '/' + city + '/' + attendedFor;
                                xmlhttp.open("GET", serverPage);
                                xmlhttp.onreadystatechange = function ()
                                {
//                                alert(xmlhttp.readyState + ' ' + xmlhttp.status)
                                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                    {
//                                        alert(xmlhttp.responseText);
                                        document.getElementById('country_city_institute').innerHTML = xmlhttp.responseText;
                                        var a = document.getElementById('country_city_institute');
                                        a.setAttribute("style", 'display:block');
                                    }
                                }
                                xmlhttp.send(null);
                            }


                        }

                    </script>

                    <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" id="country_city_institute">
                            <select type="hidden" data-errormessage-value-missing='Education Institution Name is required!' 
                                    class='form-control validate[required]'
                                    name ="education_institution_id" id="education_institution_id" 
                                    onchange="otherInstitute(this.value)"
                                    title="Education Institution ID">
                                <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"
                                           data-errormessage-value-missing='Education Institution Name is required!' 
                                           class='form-control validate[required, custom[special_char]]'
                                           name="other_institute" id="other_institute" value="" 
                                           placeholder="Please Type New Category" aria-describedby="basic-addon1"
                                           title="Other Institute">
                                    <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 otherInstitute(other) {
//                            other = document.getElementById('education_institution_id').value;
                            if (other == 'other') {
                                var a = document.getElementById('O_Institution');
                                a.setAttribute("style", 'display:block');
                            } else {
                                var a = document.getElementById('O_Institution');
                                a.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" min="1971-12-26" max="<?php echo date('Y-m-d'); ?>" 
                                   data-errormessage-value-missing="Start Time Period is required!" 
                                   class="form-control validate[required, custom[eduStartTime]]" 
                                   id="start_time_period" name="start_time_period" 
                                   value="<?php echo set_value('start_time_period'); ?>" 
                                   onchange="setEndDateMinValue();" placeholder=" Attended date"
                                   title="Start Time Period">
                            <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>


                    <div class="form-group col-sm-6">
                        <div class='input-group' id='datetimepicker6'>
                            <input type="text" min="" 
                                   data-errormessage-value-missing="End Time Period is required!" 
                                   class="form-control validate[required, custom[eduStartTime]]" 
                                   id="end_time_period" name="end_time_period" 
                                   value="<?php echo set_value('end_time_period'); ?>" placeholder=" Finished date"
                                   title="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="col-sm-12 "><br> <br></div>
                    <div class="col-sm-12 ">
                        <div class="form-group input-group">
                            <textarea rows="3" cols="80" name="educational_description" 
                                      data-errormessage-value-missing="Educational Description is required!" 
                                      class="form-control validate[required]" 
                                      placeholder="Educational Description" title="Educational Description"><?php echo set_value('educational_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 data-errormessage-value-missing="Who can see my Education details is required!" 
                                    class="form-control validate[required]" 
                                    id="person_education_view_status"  name="person_education_view_status" 
                                    title="Education View Status">
                                <option value="">--Select permission--</option>
                                <option value="1">Public</option>
                                <option value="2">Talha Training User</option>
                                <option value="3">My 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="col-sm-2 col-sm-offset-1">
                            <?php
                            $encrypted_url = $this->encrypt->encode($teacher_personal_info->url);
                            $encrypted_url = str_replace("/", "%F2", $encrypted_url);
                            ?>
                            <a href="<?php echo base_url() . 'edit-teacher-information/' . $encrypted_url; ?>" class="btn btn-success">Previous</a>
                        </div>

                        <div class="form-group col-sm-4">
                            <input type="submit" name="btn" id="btn" class="green-btn btn btn-default" value="Add Education"><br/><br/>
                        </div>

                        <div class="form-group col-sm-4">
                            <a href="<?php echo base_url() . 'add-teacher-work-experience/' . $teacher_personal_info->url; ?>"> <span class="green-btn btn btn-default">Skip </span></a><br/><br/>
                        </div>

                    </div>

                </form>
            </div>

        </div> 
    </div> 

</div>
