<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="">
        <a href="<?php echo base_url(); ?>super_admin">Dashboard</a>->>
        <a href="<?php echo base_url(); ?>super_admin/user_list/<?php echo $role_name . '/' . $this->session->userdata('role_id'); ?>"><?php echo $role_name; ?> List</a>->>
        <a href="<?php echo base_url(); ?>super_admin/view_detail/<?php echo $role_name . '/' . $person_id; ?>"><?php echo $role_name; ?> Detail</a>->>
        <span> Education Information</span>
    </div>
    <br>

    <a style="float: left;" onclick="addEdication();" class="btn btn-sm btn-success"> Add Education</a>
    <p>
        <?php
        $message = $this->session->userdata('message');
        $this->session->unset_userdata('message');
        if ($message) {
            echo $message;
        }
        ?>
    </p>

    <div class="table-responsive col-sm-12" style="display:none;" id="education_form"> <!---->
        <script>
            function addEdication() {
                var educationForm = document.getElementById('education_form');
                educationForm.setAttribute("style", 'display:block; ');
            }
        </script>
        <h3 class="page-header">Add Education Information</h3>
        <form class="cmxform" id="formID2" action="<?php echo base_url(); ?>super_admin_profile/education/<?php echo $role_name . '/' . $person_id; ?>" method="post" name="add_education" enctype="multipart/form-data" >
            
            <input type="hidden" name="person_id" id="person_id" value="<?php echo $person_id ?>">
            <div class="form-group col-sm-12">

                <div class="form-group col-sm-8">
                    <label for="attended_for">Attended For</label><span class="required"> * </span><br>
                    <input data-errormessage-value-missing="Attended For is required!" class="validate[required]" type="radio" name="attended_for" id="attended_for1" value="1" onchange="selectInstitute();" />School
                    <input data-errormessage-value-missing="Attended For is required!" class="validate[required]" type="radio" name="attended_for" id="attended_for2" value="2" onchange="selectInstitute();" />Collage
                    <input data-errormessage-value-missing="Attended For is required!" class="validate[required]" type="radio" name="attended_for" id="attended_for3" value="3" onchange="selectInstitute();" />Graduation
                    <input data-errormessage-value-missing="Attended For is required!" class="validate[required]" type="radio" name="attended_for" id="attended_for4" value="4" onchange="selectInstitute();" />Post-Graduation
                </div>

                <div class="form-group col-sm-5">
                    <label for="country">Education Institution Country</label><span class="required"> * </span>
                    <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();">

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

                    </select>
                </div>
                <div class="form-group col-sm-8" style="color: red"><?php echo form_error('person_country'); ?>  </div>
                <div class="form-group col-sm-4" id="person_country"></div>
                <div class="form-group col-sm-5">
                    <label for="city">Education Institution City</label><span class="required"> * </span><br>

                    <select data-errormessage-value-missing="Person City is required!" 
                            class="form-control validate[required]" 
                            name ="education_institution_city" id ="person_city"  
                            onchange="selectInstitute();">
                        <option></option>
                    </select>

                    <div class="form-group col-sm-4" id="person_city"></div>
                </div>
                <div class="form-group col-sm-5" style="color: red"><?php echo form_error('person_city'); ?>  </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;

                        serverPage = '<?php echo base_url(); ?>super_admin_profile/select_institute/' + country + '/' + city + '/' + attendedFor;
                        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;
                                var a = document.getElementById('country_city_institute');
                                a.setAttribute("style", 'display:block');
                            }
                        }
                        xmlhttp.send(null);

                    }

                </script>

                <div style="display:none">
                    <select  type="hidden" data-errormessage-value-missing='Education Institution Name is required!' 
                             class='form-control validate[required]'
                             name ="education_institution_name" 
                             id ="education_institution_name" >
                    </select>
                </div>

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

                <script>
                    function otherInstitute() {
                        other = document.getElementById('education_institution_id').value;
                        if (other == 'other') {
                            var a = document.getElementById('other_institute');
                            a.setAttribute("style", 'display:block');
                        } else {
                            var a = document.getElementById('other_institute');
                            a.setAttribute("style", 'display:none');
                        }
                    }
                </script>

                <div class="form-group col-sm-12">
                    <div class="form-group col-sm-5" id="other_institute" style="display:none">
                        <input type="text"
                               data-errormessage-value-missing='Education Institution Name is required!' 
                               class='form-control validate[required]'
                               name="other_institute" id="other_institute" value="" placeholder="Please Enter Your Education Institute Name">
                    </div>
                </div>

                <div class="form-group col-sm-5">
                    <label for="start_time_period">Start Time Period</label><span class="required"> * </span>
                    <input type="date" 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();">
                </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 class="form-group col-sm-5">
                    <label for="end_time_period">End Time Period</label><span class="required"> * </span>
                    <input type="date" 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'); ?>">
                </div>

                <div class="form-group col-sm-8" style="color: red"><?php echo form_error('end_time_period'); ?>  </div> 

                <div class="form-group col-sm-8">
                    <label for="address">Educational Description </label>
                    <textarea name="educational_description" data-errormessage-value-missing="Educational Description is required!" class="form-control validate[required]"  ><?php echo set_value('educational_description'); ?></textarea>
                </div>
                <div class="form-group col-sm-8" style="color: red"><?php echo form_error('educational_description'); ?>  </div> 
            </div>

            <div class="form-group col-sm-8" style="color: red"><?php echo form_error('attended_for'); ?>  </div> 
            <div class="form-group col-sm-8">
                <label for="person_education_view_status">Who can see my Education details</label><span class="required"> * </span>
                <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" >
                    <option value="">--Select User--</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="form-group col-sm-8">
                            <label for="person_education_status">Who can see this Education details</label><span class="required"> * </span>
                            <select data-errormessage-value-missing="Education Status is required!" class="form-control validate[required]" id="person_education_status"  name="person_education_status" >
                                <option value="">--Select User--</option>
                                <option value="1">Active</option>
                                <option value="2">Inactive</option>
                            </select>
                        </div>-->
            <div class="form-group col-sm-8" style="color: red"><?php echo form_error('person_education_status'); ?>  </div> 
            <div class="checkbox col-sm-6" >
                <button type="submit" id="submit" class="btn btn-default">Submit</button>
                <button type="reset" class="btn btn-default">Reset</button>
            </div>

        </form>
    </div>

    <div class="table-responsive col-lg-11 col-md-8 col-sm-7" id="user_list"><h3 class="page-header"><hr><br>Education Information</h3></div>
    <div class="table-responsive col-lg-11 col-md-8 col-sm-7" id="user_list"></div>
    <div class="table-responsive col-lg-11 col-md-8 col-sm-7" id="user_list">
        <form name="myform" action=""  method="post">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Education Institution</th>
                        <th>Attend For </th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>View Status</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $i = 1;
                    foreach ($person_edu_info as $v_education) {
                        ?>
                        <tr>
                            <td>
                                <?php
                                echo 'Name: ' . $v_education->education_institute_name . '<br>';
                                echo 'Country: ' . $v_education->education_institute_country . '<br>';
                                echo 'City: ' . $v_education->education_institute_city . '<br>';
                                ?>
                            </td>
                            <td><?php
                                if ($v_education->attended_for == '1') {
                                    echo "<p style='color:Green;'>School";
                                } else if ($v_education->attended_for == '2') {
                                    echo "<p'>College";
                                } else if ($v_education->attended_for == '3') {
                                    echo "<p'>Graduate";
                                } else if ($v_education->attended_for == '4') {
                                    echo "<p'>Post-Graduate";
                                } else if ($v_education->attended_for == '4') {
                                    echo "<p'>PHD";
                                } else if ($v_education->attended_for == '5') {
                                    echo "<p'>Post-PHD";
                                }
                                ?>
                            </td>
                            <td><?php echo $v_education->start_time_period; ?></td>
                            <td><?php echo $v_education->end_time_period; ?></td>

                            <td><?php
                                if ($v_education->person_education_view_status == '1') {
                                    echo "<p style='color:Green;'>Public";
                                } else if ($v_education->person_education_view_status == '2') {
                                    echo "<p'>All Talhatraining User";
                                } else if ($v_education->person_education_view_status == '3') {
                                    echo "<p'>My Link";
                                } else if ($v_education->person_education_view_status == '4') {
                                    echo "<p'>Only Me";
                                }
                                ?>
                            </td>
                            <td><?php
                                if ($v_education->person_education_status == '1') {
                                    echo '<p style="color:limegreen;">Active</p>';
                                    ?>
                                    <a href="<?php echo base_url(); ?>super_admin_profile/inactive_education_detail_information/<?php echo $role_name . '/' . $person_id . '/' . $v_education->person_education_details_id; ?>"><i class="fa fa-user-times" title="Inactive"></i></a>
                                    <?php
                                } else if ($v_education->person_education_status == '0') {
                                    echo '<p style="color:red;">Inactive</p>';
                                    ?>
                                    <a href="<?php echo base_url(); ?>super_admin_profile/active_education_detail_information/<?php echo $role_name . '/' . $person_id . '/' . $v_education->person_education_details_id; ?>">
                                        <i class="fa fa-user-plus" title="Active"></i>
                                    </a>
                                    <?php
                                } else if ($v_education->person_education_status == '2') {
                                    echo '<p style="color:blue;">Archived';
                                    ?>
                                    <a href="<?php echo base_url(); ?>super_admin_profile/active_education_detail_information/<?php echo $role_name . '/' . $person_id . '/' . $v_education->person_education_details_id; ?>"><i class="fa fa-user-plus" title="Active"></i> </a>
                                <?php } ?>
                            </td>
                            <td>
                                <a href="<?php echo base_url(); ?>super_admin_profile/edit_edication_information/<?php echo $role_name . '/' . $person_id . '/' . $v_education->person_education_details_id; ?>"><div class="span1"><i class="fa fa-edit">Edit</i></div></a>
                                <a href="#" onclick="viewDetail('detail', '<?php echo $v_education->person_education_details_id; ?>');">
                                    <div class="span1"><i class="fa fa-edit" id="view_action<?php echo $v_education->person_education_details_id; ?>">View</i></div></a>
                                <?php if ($v_education->person_education_status != 2) { ?>
                                    <a href="<?php echo base_url(); ?>super_admin_profile/delete_education_detail_information/<?php echo $role_name . '/' . $person_id . '/' . $v_education->person_education_details_id; ?>" onclick="deleteEducationInformation();"><div class="span1"><i class="fa fa-edit">Archive</i></div></a>
                                <?php } ?>

                            </td>

                    <script>

                        function checkAction(action) {
                            message = 'do you want to ' + action + '!!';
                            chk = confirm(message);
                            if (chk) {
                                return true;
                            } else {
                                return false;
                            }
                        }

                    </script>

                    </tr>
                    <tr style="display: none;" id="detail<?php echo $v_education->person_education_details_id; ?>">
                        <td colspan="6"><?php echo $v_education->educational_description; ?></td>
                    </tr>
                <?php } ?>
                <script>
                    function viewDetail(objID, eID) {
                        var formStatus = document.getElementById('form_status').value;
                        if (formStatus == '') {
                            var detail = document.getElementById(objID + eID);
                            detail.setAttribute("style", 'display:block; ');
                            document.getElementById('view_action' + eID).innerHTML = 'Hide';
                            document.getElementById('form_status').value = '1';
                        } else if (formStatus == '1') {
                            var detail = document.getElementById(objID + eID);
                            detail.setAttribute("style", 'display: none; ');
                            document.getElementById('view_action' + eID).innerHTML = 'View';
                            document.getElementById('form_status').value = '';
                        }
                    }


                    $(document).ready(function () {
                        $("#person_email").on("keypress keyup keydown blur", function () {
                            var email = $(this).val();
                            checkUserEmail(email, 'email_status');
                        });
                    });

                    function deleteEducationInformation() {
                        if (given_text == '') {
                            document.getElementById('email_status_value').value = 0;
                        } else {
                            serverPage = '<?php echo base_url(); ?>super_admin/check_user_email/' + given_text;  // passing person_email Field value 
                            xmlhttp.open("GET", serverPage);
                            xmlhttp.onreadystatechange = function ()
                            {
                                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                {
                                    if (xmlhttp.responseText == 1)
                                    {
                                        document.getElementById('email_status_value').value = 2;
//                                        document.getElementById(objID).innerHTML = '<p style="color:red;">Email Address Already Exists</p>';
                                    } else if (xmlhttp.responseText == 2)
                                    {
                                        document.getElementById('email_status_value').value = 1;
                                        document.getElementById(objID).innerHTML = '<p style="color:green;"></p>';
                                    }
                                }
                            }
                            xmlhttp.send(null);
                        }
                    }
                </script>
                </tbody>
            </table>
            <input type="hidden" name="form_status" id="form_status" value="">
            <br>
        </form>

    </div>

</div>
</div>


<script type="text/javascript">
    document.forms['add_education'].elements['person_country'].value = '<?php echo set_value('education_institution_country'); ?>';
    populateStates('person_country', 'person_city');
    document.forms['add_education'].elements['person_city'].value = '<?php echo set_value('education_institution_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['person_education_status'].value = '<?php echo set_value('person_education_status'); ?>';
    document.forms['add_education'].elements['education_institution_name'].value = '<?php echo set_value('education_institution_name'); ?>';
    $(document).ready(function () {
        selectInstitute();
    });
</script>