<div class="table-responsive col-sm-12">
    <?php echo validation_errors(); ?>
    <?php
    if ($person_id) {
        $c_function = 'update_recent_student';
    } else {
        $c_function = 'create';
    };
    ?>
    <form id="formID2" action="<?php echo base_url(); ?>super_admin_student/<?php echo $c_function; ?>" method="post" name="personForm" enctype="multipart/form-data" >
        <div class="form-group col-sm-10">
            <div class="form-group col-sm-4">
                <label for="person_email">Email:</label><span class="required"> * </span>
                <input type="hidden" name="email_status_value" id="email_status_value" value="1"/>
                <input type="email" 
                       data-errormessage-value-missing="Person Email is required!" 
                       class="form-control validate[required, custom[email], custom[emailExist]] text-input"
                       id="person_email" 
                       name="person_email" 
                       placeholder="Enter email"  
                       value="<?php echo set_value('person_email'); ?>" 
                       autofocus >
            </div>
            <script>
                $(document).ready(function () {
                    $("#person_email").on("keypress keyup keydown blur", function () {
                        var email = $(this).val();
                        checkUserEmail(email, 'email_status');
                    });
                });

                function checkUserEmail(given_text, objID)
                {
                    if (given_text == '') {
                        document.getElementById('email_status_value').value = 0;
                    } else {
                        //                        alert(given_text);
//                        return;
                        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>
            <div class="form-group col-sm-8" id=""></div>
            <div class="form-group col-sm-4" id="email_status"><?php echo form_error('person_email'); ?></div>
        </div>

        <div class="form-group col-sm-10">
            <div class="form-group col-sm-4">
                <label for="person_first_name">First Name</label><span class="required"> * </span>
                <input type="text" 
                       data-errormessage-value-missing="Person First Name is required!"
                       class="form-control validate[required, custom[personName]] text-input" 
                       id="person_first_name" 
                       name="person_first_name" 
                       value="<?php echo set_value('person_first_name'); ?>" 
                       onblur="checkFirstName(this.value, 'first_name_status')" placeholder="Enter First Name" >
            </div>

            <script>
                function checkFirstName(given_text, objID) {
                    if (given_text == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter your First Name</p>';
                    } else {
                        document.getElementById(objID).innerHTML = '<p style="color:red;"></p>';
                    }
                }
            </script>

            <div class="form-group col-sm-4">
                <label for="person_last_name">Last Name</label>
                <input type="text" data-errormessage-value-missing=" "
                       class="form-control validate[custom[personName]] text-input"
                       id="person_last_name" 
                       name="person_last_name" 
                       placeholder="Enter Last Name" 
                       value="<?php echo set_value('person_last_name'); ?>" 
                       onclick="checkFirstName(person_first_name.value, 'first_name_status');" >
            </div>

            <div class="form-group col-sm-6" id="first_name_status"></div>
            <div class="form-group col-sm-10"><?php echo form_error('person_last_name'); ?></div>

            <div class="form-group col-sm-4">
                <label for="person_gender">Gender</label>
                <input data-errormessage-value-missing="Person Gender is required!"
                       class=" validate[required] text-input"  type="radio" id="person_gender" name="person_gender" value="1" onblur="checkGenderStatus(this.value, 'gender_status');"> Male
                <input data-errormessage-value-missing="Person Gender is required!"
                       class=" validate[required] text-input"  type="radio" id="person_gender" name="person_gender" value="2" > Female
            </div>
            <script>
                function checkGenderStatus(value, objID) {
                    if (value == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter your First Name</p>';
                    } else {
                        document.getElementById(objID).innerHTML = '<p style="color:red;"></p>';
                    }
                }
            </script>

            <div class="form-group col-sm-4" id="gender_status"> </div>

        </div>

        <div class="form-group col-sm-10">
            <div class="form-group col-sm-4">
                <label for="person_password">Password</label><span class="required"> * <?php echo form_error('person_password'); ?></span>
                <input type="password"  
                       data-errormessage-value-missing="* Password field is required!"
                       class="form-control validate[required,custom[password]]  text-input" 
                       id="person_password" 
                       name="person_password" 
                       onblur="noticeField(this.value, 'password_status');" 
                       placeholder="Password">
                <input type="hidden" name="pass_stat" id="pass_stat" value="3">
            </div>

            <div class="form-group col-sm-4">
                <label for="confirm_password">Confirm Password</label><span class="required"> * </span>
                <input type="password"  
                       data-errormessage-value-missing="* Person Confirm Password is required!"
                       class="form-control validate[required, custom[matchPassword]] text-input" 
                       class="form-control" 
                       id="confirm_password" 
                       name="confirm_password" 
                       onblur="checkConfirmPassword(person_password.value, this.value, 'password_status');" 
                       placeholder="Password" 
                       minlength="6">
                <input type="hidden" name="pass_match_stat" id="pass_match_stat" value="0">
            </div>

            <script>
                function noticeField(password, objID) {
                    if (password == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter Password</p>';
                        if (!document.getElementById('person_gender').checked) {
                            document.getElementById('gender_status').innerHTML = '<p style="color:red;">Please Select Gender</p>';
                        }
                    } else {
                        if (password < 6) {
                            document.getElementById(objID).innerHTML = '<p style="color:red;"> Minimum length 6</p>';
                        }
                        document.getElementById(objID).innerHTML = '<p style="color:red; font-size:10px;"></p>';
                    }
                }

                function checkConfirmPassword(password, confirmPassword, objID) {
                    if (password == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter Password</p>';
                    } else if (password == '' && confirmPassword == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter Password and Confirm Password</p>';
                    } else if (password && confirmPassword == '') {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Please Enter Confirm Password</p>';
                    } else if (password === confirmPassword) {
                        document.getElementById(objID).innerHTML = '<p style="color:green;">Password Matched</p>';
                        document.getElementById('pass_match_stat').value = '1';
                    } else {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Password is not Matched</p>';
                        document.getElementById('pass_match_stat').value = '0';
                    }
                    if (password < 6) {
                        document.getElementById(objID).innerHTML = '<p style="color:red;">Password is not Matched</p>';
                    }
                }
            </script>

            <div class="form-group col-sm-10" id="password_status"></div>
            <div class="form-group col-sm-10" id="password_score"></div>
            <div class="form-group col-sm-4 danger required"><?php echo form_error('person_password'); ?></div>
            <div class="form-group col-sm-5 danger required"><?php echo form_error('confirm_password'); ?></div>
        </div>

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

            
            <div class="form-group col-sm-4">
                <label class="control-label" for="typeahead">Country<span style="color: red">*</span></label>
                <div class="controls">
                    <select data-errormessage-value-missing="Person Country is required!"
                            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>
                </div>
                <div class="form-group col-sm-4" id="country_status"></div>
            </div>
            <div class="form-group col-sm-4">
                <label for="typeahead">City<span style="color: red">*</span></label>
                <div class="controls">
                    <select  
                        data-errormessage-value-missing="Person City is required!"
                        class="form-control validate[required] text-input" 
                        name ="person_city" id ="person_city"></select>
                </div>
                <div class="form-group col-sm-4" id="city_status"></div>
            </div>

            <div class="form-group col-sm-12 danger"><?php echo form_error('person_country'); ?></div>

            <div class="form-group col-sm-6">
                <label for="address">Address</label>
                <textarea name="person_address" class="form-control" ><?php echo set_value('person_address'); ?></textarea>
            </div>

            <div class="form-group col-sm-2">
                <label for="zip">Zip/Postal Code</label>
                <input type="text" 
                       data-errormessage-value-missing="Person Zip/Postal Code is required!"
                       class="form-control validate[required, custom[number]] text-input" 
                       name="person_zip" maxlength="5" class="form-control" value="<?php echo set_value('person_zip'); ?>" >
            </div>
        </div>

        <div class="form-group col-sm-10">
            <div class="form-group col-sm-4">
                <label for="person_contact_number"> Mobile Number<span style="color: red">*</span></label>
                <div class="form-group">
                    <input  
                        data-errormessage-value-missing="Person country Code is required!"
                        class="form-control col-sm-2 validate[required,custom[number]] text-input"
                        name="country_code" 
                        id ="country_code" 
                        style="width:50px;" 
                        minlength="3" maxlength="4"
                        value="<?php echo set_value('country_code'); ?>"
                        >

                    <div class="form-group col-sm-1" style="padding: 5px;">-</div>
                    <input data-errormessage-value-missing="Person Mobile Number is required!"
                           class="form-control col-sm-4 validate[required,custom[number]] text-input"
                           name="person_contact_number" 
                           id ="person_contact_number" 
                           style="width:120px;" 
                           onblur="checkContaNumber();"
                           minlength="11" maxlength="11"
                           value="<?php echo set_value('person_contact_number'); ?>">
                </div>

                <script>
                    function checkContaNumber() {
                        countryCode = document.getElementById('country_code').value;
                        contactNumber = document.getElementById('person_contact_number').value;
                        if (countryCode != '' && contactNumber == '') {
                            document.getElementById('person_contact_number_status').innerHTML = 'Please Give your Contact Number if any <p>or Remove the Country code<p>';
                        }
                        if (countryCode == '' && contactNumber != '') {
                            document.getElementById('person_contact_number_status').innerHTML = 'Please Give your Country code';
                        } else {
                            document.getElementById('person_contact_number_status').innerHTML = '';
                            submitChangable = true;
                        }
                    }
                </script>

            </div>
            <div class="form-group col-sm-7 required" id="person_contact_number_status"><?php echo form_error('person_contact_number'); ?></div>
        </div>

        <div class="form-group col-sm-10">
            <div class="form-group col-sm-10">
                <div id="image_field">
                    <label for="person_image" style="float:left;">Image</label><br><br>
                    <input style="float:left;" type='file' onchange="readURL(this, 'photo_0');" name="person_image" value="<?php echo set_value('person_image'); ?>"/>
                </div>
                <div id="image" style="float:left;width: 150px; height: 50px;" > </div>
                <script>

                    function readURL(input, objID) {
                        var node = document.createElement("img");
                        var parentDIV = document.getElementById("image");
                        parentDIV.appendChild(node);
                        document.getElementById("image").appendChild(node);
                        node.setAttribute("id", objID);
                        node.setAttribute("src", "");

                        var file = input.files[0];
                        if (file.size > 300000) {
//                            alert('Your Selected file size exceeded!!! max File Size 300 KB and Resulation ');
                            serverPage = '<?php echo base_url(); ?>super_admin/load_image_field';  // passing person_email Field value 
                            xmlhttp.open("GET", serverPage);
                            xmlhttp.onreadystatechange = function ()
                            {
                                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                {
                                    document.getElementById('image').innerHTML = 'Maximum File Size 300 KB and Resulation 1024x1024';
                                    document.getElementById('image_field').innerHTML = xmlhttp.responseText;
                                }
                            }
                            xmlhttp.send(null);
                        } else {
                            var list = document.getElementById("image");
                            list.removeChild(list.childNodes[0]);
                            if (input.files && input.files[0]) {
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    $('#' + objID)
                                            .attr('src', e.target.result)
                                            .width(50)
                                            .height(50);
                                };
                                reader.readAsDataURL(input.files[0]);
                            }
                        }
                    }
                </script>
            </div>
        </div>

        <div class="form-group col-sm-10">
            <div class="form-group col-sm-4">
                <label for="person_role">User Role:</label><span class="required"> * <?php echo form_error('person_role'); ?></span>
                <select data-errormessage-value-missing="Person Role is required!"
                        class="form-control validate[required] text-input"
                        name="person_role" id="person_role">
                    <option value="5">Student</option>
                </select>
            </div>
            <script>
                document.forms['userForm'].elements['person_role'].value = '<?php
    if (set_value('person_role')) {
        echo set_value('person_role');
    }
    ?>';
            </script>
        </div>
        <div class="form-group col-sm-8">

            <div class="form-group col-sm-8">
                <label for="person_status">Status</label><span class="required"> * <?php echo form_error('status'); ?></span>
                <input type="radio"
                       data-errormessage-value-missing="Person Status is required!"
                       class="validate[required] text-input" 
                       name="person_status" id="person_status1" value="1"  />Active
                <input type="radio" 
                       data-errormessage-value-missing="Person Status is required!"
                       class="validate[required] text-input"
                       name="person_status" id="person_status2" value="2" />Inactive
                <script>
                    document.forms['userForm'].elements['person_status'].value = '<?php echo set_value('person_status'); ?>';
                </script>
            </div>

            <div class="checkbox col-sm-8">
                <label><input data-errormessage-value-missing="Please Check Agree"
                              class="validate[required] text-input" 
                              type="checkbox" name="agree" id="agree" onchange="manageSubmitButton();">Agree with Terms and Condition</label>
                <span class="required"> * <?php echo form_error('agree'); ?></span>
                <div id="submit_status"></div>

                <script>



                    function manageSubmitButton() {
                        var agree = document.getElementById('agree').checked;
                        var personEmail = document.getElementById('person_email').value;
                        var personFirstName = document.getElementById('person_first_name').value;
                        var personPassword = document.getElementById('person_password').value;
                        var confirmPassword = document.getElementById('confirm_password').value;
                        var PersonContactNumber = document.getElementById('person_contact_number').value;
                        var countryCode = document.getElementById('country_code').value;
                        var personRole = document.getElementById('person_role').value;
                        var submitChangable = true;
                        if (PersonContactNumber != '' && countryCode == '') {
                            document.getElementById('person_contact_number_status').innerHTML = "<p style='color:green'>Pleas enter Country Code</p>";
                            submitChangable = false;
                        } else if (PersonContactNumber == '' && countryCode != '') {
                            submitChangable = false;
                        } else {
                            submitChangable = true;
                        }

                        if (agree && personEmail != '' && personFirstName != '' && personPassword != '' && confirmPassword != '' && personRole != '' && submitChangable == true) {
                            document.getElementById('submit_status').innerHTML = "<p style='color:green'>OK</p>";
                        } else {//if (!agree || personEmail == '' || personFirstName == '' || personPassword == '' || confirmPassword == '' || personRole == '' || submitChangable == false) {
//                            alert();
                            document.getElementById('submit_status').innerHTML = "<p class='required'>Please select all Required Field</p>";
                        }

                        this.checkRequiredField();

                    }


                    function checkRequiredField() {
                        var agree;
                        var personEmail;
                        var personFirstName;
                        var personGender;
                        var personPassword;
                        var confirmPassword;
                        var PersonContactNumber;
                        var personCountry;
                        var personCity;
                        var countryCode;
                        var personRole;
                        personEmail = document.getElementById('person_email').value;
                        personFirstName = document.getElementById('person_first_name').value;
                        personGender = document.getElementById('person_gender').checked;
                        personPassword = document.getElementById('person_password').value;
                        confirmPassword = document.getElementById('confirm_password').value;
                        PersonContactNumber = document.getElementById('person_contact_number').value;
                        personCountry = document.getElementById('person_country').value;
                        personCity = document.getElementById('person_city').value;
                        countryCode = document.getElementById('country_code').value;
                        personRole = document.getElementById('person_role').value;

                        if (personEmail == '') {
                            document.getElementById('email_status').innerHTML = '<p style="color:red;">Please Enter your Email</p>';
                        }
                        if (personFirstName == '') {
                            document.getElementById('first_name_status').innerHTML = '<p style="color:red;">Please Enter your First Name</p>';
                        }
                        if (personGender == '') {
                            document.getElementById('gender_status').innerHTML = '<p style="color:red;">Please Select Gender</p>';
                        }
                        if (personPassword == '') {
                            document.getElementById('password_status').innerHTML = '<p style="color:red;">Please Enter Password</p>';
                        }

                        if (confirmPassword == '') {
                            document.getElementById('password_status').innerHTML = '<p style="color:red;">Please Enter Confirm Password</p>';
                        }
                        if (personCountry == '') {
                            document.getElementById('country_status').innerHTML = '<p style="color:red;">Please Select Country</p>';
                        }
                        if (personCity == '') {
                            document.getElementById('city_status').innerHTML = '<p style="color:red;">Please Select Country</p>';
                        }
                        if (PersonContactNumber == '') {
                            document.getElementById('person_contact_number_status').innerHTML = '<p style="color:red;">Please Give your Contact Number</p>';
                        }
                        return this;
                    }

                </script>
            </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>
        </div>
    </form>
</div>
<script>
    function scorePassword(pass) {
        var score = 0;
        if (!pass)
            return score;

        // award every unique letter until 5 repetitions
        var letters = new Object();
        for (var i = 0; i < pass.length; i++) {
            letters[pass[i]] = (letters[pass[i]] || 0) + 1;
            score += 5.0 / letters[pass[i]];
        }

        // bonus points for mixing it up
        var variations = {
            digits: /\d/.test(pass),
            lower: /[a-z]/.test(pass),
            upper: /[A-Z]/.test(pass),
            nonWords: /\W/.test(pass),
        }

        variationCount = 0;
        for (var check in variations) {
            variationCount += (variations[check] == true) ? 1 : 0;
            (variations[check] == false) ? $("#password_status").text('A-Z, a-z, 0-9, minumum one special charecter') : '';
        }
        score += (variationCount - 1) * 10;

        var digit = (/\d/.test(pass)) ? 1 : 0;
        var small_letter = (/[a-z]/.test(pass)) ? 1 : 0;
        var capital_letter = (/[A-Z]/.test(pass)) ? 1 : 0;
        var special_letter = (/\W/.test(pass)) ? 1 : 0;
        if (digit && small_letter && capital_letter && special_letter) {
            document.getElementById('pass_stat').value = 1;
        } else {
            document.getElementById('pass_stat').value = 0;
        }
        return parseInt(score);
    }

    function checkPassStrength(pass) {
        var score = scorePassword(pass);
        if (score > 70)
            return "";
//            return "strong";
        if (score > 50)
            return "";
//            return "good";
        if (score >= 30)
            return "";
//            return "weak";
        return "";
    }

    $(document).ready(function () {

        $("#person_password").on("keypress keyup keydown onblur", function () {
            var pass = $(this).val();
            if (pass == '') {
                document.getElementById('pass_stat').value = 3;
            }
            $("#password_status").text(checkPassStrength(pass));
            $("#strength_score").text(scorePassword(pass));

        });
    });
    
    document.forms['personForm'].elements['person_country'].value = '<?php echo set_value('person_country'); ?>';
    populateStates('person_country', 'person_city');
    document.forms['personForm'].elements['person_city'].value = '<?php echo set_value('person_city'); ?>';

</script>