<?php  
    include ('../controller/config/config.php');

    // Get Language
    @$langold = $_GET['lang'];

    if ($langold == '' || $langold == NULL || $langold == 'undefined') {
        $lang = 'english';
    } else {
        $lang = $_GET['lang'];
    }
    include('../lang/' . $lang . '.php');


    
    ?>

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content=" ">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $SchoolGeneralName; ?></title>
    <link rel="shortcut icon" href="<?php echo $Favicon; ?>" type="image/x-icon">

    <!-- Goole Font -->
    <link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/website_css/bootstrap.min.css">
    <!-- Font awsome CSS -->
    <link rel="stylesheet" href="../css/website_css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/website_css/flaticon.css">
    <link rel="stylesheet" href="../css/website_css/magnific-popup.css">
    <!-- owl carousel -->
    <link rel="stylesheet" href="../css/website_css/owl.carousel.css">
    <link rel="stylesheet" href="../css/website_css/owl.theme.css">
    <link rel="stylesheet" href="../css/website_css/animate.css">
    <!-- Slick Carousel -->
    <link rel="stylesheet" href="../css/website_css/slick.css">
    <!-- Mean Menu-->
    <link rel="stylesheet" href="../css/website_css/meanmenu.css">

    <!-- Button Css-->
    <link rel="stylesheet" href="../css/website_css/buttons/ionicons.min.css">
    <link rel="stylesheet" href="../css/website_css/buttons/style.css">

    <!-- main style-->
    <link rel="stylesheet" href="../css/website_css/style.css">
    <link rel="stylesheet" href="../css/website_css/responsive.css">
    <link rel="stylesheet" href="../css/website_css/demo.css">
    <!-- <link rel="stylesheet" href="../css/website_css/cdnjs/bootstrap-responsive.min.css"> -->

     <!-- profile upload style-->
    <link rel="stylesheet" href="../css/website_css/profile-upload.css">

     <!-- Image Croppie-->
     <link rel="stylesheet" href="../assets/plugins/Croppie/croppie.css">
    <!-- Wnoty Css -->
    <link href="../css/website_css/wnoty/wnoty.css" rel="stylesheet">	

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="../css/website_css/cdnjs/intlTelInput.min.css" rel="stylesheet" />
    <script src="../css/website_css/cdnjs/intlTelInput.min.js"></script>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <style>
        
        /* fa fa icons style */
        .form-group .form-control {
            padding-left: 3.375rem;
        }

        .form-group .form-control-icon {
            position: absolute;
            z-index: 2;
            display: block;
            width: 2.375rem;
            height: 2.375rem;
            line-height: 2.475rem;
            text-align: right;
            pointer-events: none;
            color: gray;
        }
        .form-group .form-control-icon2 {
            position: absolute;
            /* z-index: 2; */
            display: block;
            width: 2.375rem;
            height: 2.375rem;
            line-height:2.475rem;
            text-align: right;
            color: gray;
            margin-left: 80%;
        }
        /* Progress Bar */
        .progress-bar {
            border-radius: 8px;
            margin-top: 10px;
            height: 12px;
        }
       
    </style>
        
 
</style>

</head>
    <body>

    <header class="header_inner blog_page shadow-sm" id="top">
           
      
    </header> <!-- End nav -->

        <!---- Staff Form---->
            
            <div class="row p-5 justify-content-center" id="output">
                <!--<h4 class="staff text-center">Staff Registration</h4>-->
                <!---- Personal Information Form ---->
                <div class="row justify-content-center" >
                    <div class="col-sm-5 col-md-5 col-lg-5">
                        <div class="card card-body mb-5 shadow border-0">
                            <h5 class="text-center mt-2 mb-2"><?php echo $staff_invite_Welcome; ?></h5>
                            <div class="row justify-content-center">
                                <div class="container-fluid mt-3 mb-3">
                                    <div class="picture-container">
                                        <div class="picture">
                                            <img src="https://static.vecteezy.com/system/resources/previews/020/213/738/original/add-profile-picture-icon-upload-photo-of-social-media-user-vector.jpg"
                                                class="picture-src" id="wizardPicturePreview" title="">
                                            <input type="file" name="insert_image" id="insert_image" accept="image/*">
                                        </div>
                                        <h6 class=""><?php echo $staff_invite_picture; ?></h6>
                                        <div class="image-error">
                                            
                                        </div>
                                        <!-- Image Modal -->
                                        <div id="insertimageModal" class="modal" role="dialog">
                                            <div class="modal-dialog modal-md">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="btn btn-close" data-dismiss="modal">&times;</button>
                                                    <h5 class="modal-title"><?php echo $staff_invite_Crop; ?></h5>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row justify-content-center">
                                                    <div class="col-sm-12 col-md-12 col-lg-12 p-2">
                                                        <div id="image_demo"></div>
                                                    </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12 col-md-12 col-lg-12">
                                                            <button class="btn btn-success btn-sm crop_image"><?php echo $staff_invite_Crop; ?></button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $staff_invite_close; ?></button>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--  -->
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-sm-12 col-md-12 col-lg-12 mt-3 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-user form-control-icon"></span>
                                        <input type="text" 
                                        class="form-control form-control-lg small shadow border-0 profile" 
                                        style="font-size: 15px;"
                                        id="fname"
                                        data-id="fname"
                                        placeholder="<?php echo $staff_invite_FirstName; ?>">
                                        <div class="fname-error">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-user form-control-icon"></span>
                                        <input type="text" 
                                        class="form-control form-control-lg shadow border-0 profile" 
                                        style="font-size: 15px;"
                                        id="mname"
                                        data-id="mname"
                                        placeholder="<?php echo $staff_invite_MiddleName; ?>">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-user form-control-icon"></span>
                                        <input type="text" 
                                        class="form-control form-control-lg shadow border-0 profile" 
                                        style="font-size: 15px;"
                                        id="lname"
                                        data-id="lname" 
                                        placeholder="<?php echo $staff_invite_LastName; ?>">
                                        <div class="lname-error">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <input type="tel" 
                                        class="form-control form-control-lg shadow border-0 profile1"
                                        style="font-size: 15px; display:inline-block;" 
                                        name="WhatsappNumber[main]" 
                                        id="WhatsappNumber"
                                        data-id="WhatsappNumber">
                                        <div class="WhatsappNumber-error">  
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-envelope form-control-icon"></span>
                                        <input type="text" disabled 
                                        class="form-control form-control-lg shadow border-0"
                                        style="font-size: 15px;" 
                                        id="email"
                                        value="<?php echo $email = $_GET['email']; ?>">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-lock form-control-icon"></span>
                                        <span class="fa fa-eye pull-right form-control-icon2" id="togglePassword"></span>
                                        <input type="password" 
                                        class="form-control form-control-lg shadow border-0" 
                                        id="password"
                                        style="font-size: 15px;"
                                        placeholder="<?php echo $staff_invite_password; ?>">
                                        <small class="help-block" id="password-text"></small>
                                        <div class="password-error">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <span class="fa fa-lock form-control-icon"></span>
                                        <span class="fa fa-eye pull-right form-control-icon2" id="togglePassword2"></span>
                                        <input type="password" 
                                        class="form-control form-control-lg shadow border-0" 
                                        id="password2"
                                        style="font-size: 15px;"
                                        placeholder="<?php echo $staff_invite_cpassword; ?>">
                                        <small class="help-block" id="password-text2"></small>
                                        <div class="password2-error">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group col-sm-12 col-md-12 col-lg-12 load">
                                    <button type="submit" 
                                    id = "p-submit" 
                                    style="font-size: 15px;"
                                    class="btn btn-primary btn-lg btn-block p-submit"><?php echo $staff_invite_comfirmApplication; ?></button>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <!---- Personal Information Form End ---->
            </div>
                             
            <!---footer include-->
            <?php #include ('../includes/footer-site.php'); ?>
            <!------footer end-->

            <section id="scroll-top" class="scroll-top">
                <h2 class="disabled">Scroll to top</h2>
                    <div class="to-top pos-rtive">
                        <a href="#"><i class="fa fa-arrow-right"></i></a>
                    </div>
            </section>
    </body>
</html>

<!-- JavaScript -->
<script src="../js/website_js/jquery-3.2.1.min.js"></script>
<script src="../js/website_js/popper.min.js"></script>
<script src="../js/website_js/bootstrap.min.js"></script>
<script src="../js/website_js/jquery.magnific-popup.min.js"></script>
<script src="../js/website_js/owl.carousel.min.js"></script>
<script src="../js/website_js/slick.min.js"></script>
<script src="../js/website_js/jquery.meanmenu.min.js"></script>
<script src="../js/website_js/wow.min.js"></script>

<!-- Counter Script -->
<script src="../js/website_js/waypoints.min.js"></script>
<script src="../js/website_js/jquery.counterup.min.js"></script>
<script src="../js/website_js/custom.js"></script>



<!-- Cropper Script -->
<script src="../assets/plugins/Croppie/croppie.min.js"></script>


<!-- Croppie Script -->
<script src="../assets/plugins/Croppie/croppie.js"></script>

<!--Notifier UI -->
<script src="../css/website_css/wnoty/wnoty.js"></script>

<script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>


<script>
     //Password Strength
    $(document).ready(function() {
        
        
        
         var WhatsappNumber = window.intlTelInput(document.querySelector("#WhatsappNumber"), {
                    separateDialCode: true,
                    preferredCountries:["ng"],
                    hiddenInput: "full",
                    utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
              
              
          });
        $('#password').keyup(function() {
            
            
            
             

            var password_strength = document.getElementById("password-text");
            var password = $(this).val();

                //TextBox left blank.
                if (password.length == 0) {
                        password_strength.innerHTML = "";
                     return;
                }

                //Regular Expressions.
                var regex = new Array();
                regex.push("[A-Z]"); //Uppercase Alphabet.
                regex.push("[a-z]"); //Lowercase Alphabet.
                regex.push("[0-9]"); //Digit.
                regex.push("[$@$!%*#?&]"); //Special Character.

                var passed = 0;

                //Validate for each Regular Expression.
                for (var i = 0; i < regex.length; i++) {
                        if (new RegExp(regex[i]).test(password)) {
                        passed++;
                        }
                }

                //Display status.
                var strength = "";
                switch (passed) {
                    case 0:
                    case 1:
                    case 2:
                    strength = "<small class='progress-bar bg-danger' style='width: 40%'><?php echo $staff_invite_Weak;?></small>";
                    break;
                    case 3:
                    strength = "<small class='progress-bar bg-warning' style='width: 60%'><?php echo $staff_invite_Medium;?></small>";
                    break;
                    case 4:
                    strength = "<small class='progress-bar bg-success' style='width: 100%'><?php echo $staff_invite_Strong;?></small>";
                    break;

                }
                password_strength.innerHTML = strength;

        });
        
        $('#password2').keyup(function() {

            var password_strength = document.getElementById("password-text2");
            var password = $(this).val();

                //TextBox left blank.
                if (password.length == 0) {
                        password_strength.innerHTML = "";
                    return;
                }

                //Regular Expressions.
                var regex = new Array();
                regex.push("[A-Z]"); //Uppercase Alphabet.
                regex.push("[a-z]"); //Lowercase Alphabet.
                regex.push("[0-9]"); //Digit.
                regex.push("[$@$!%*#?&]"); //Special Character.

                var passed = 0;

                //Validate for each Regular Expression.
                for (var i = 0; i < regex.length; i++) {
                    if (new RegExp(regex[i]).test(password)) {
                    passed++;
                    }
                }

                //Display status.
                var strength = "";
                switch (passed) {
                    case 0:
                    case 1:
                    case 2:
                    strength = "<small class='progress-bar bg-danger' style='width: 40%'><?php echo $staff_invite_Weak;?></small>";
                    break;
                    case 3:
                    strength = "<small class='progress-bar bg-warning' style='width: 60%'><?php echo $staff_invite_Medium;?></small>";
                    break;
                    case 4:
                    strength = "<small class='progress-bar bg-success' style='width: 100%'><?php echo $staff_invite_Strong;?></small>";
                    break;

                }
                password_strength.innerHTML = strength;

            });

            var togglePassword = document.querySelector('#togglePassword');
            var password = document.querySelector('#password');
            togglePassword.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
            });

            var togglePassword2 = document.querySelector('#togglePassword2');
            var password2 = document.querySelector('#password2');

            togglePassword2.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
            password2.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
            
            });   
    });

       
    //Check if user Exist?
    $(document).ready(function () {

        var StaffID = '<?php echo $_GET['staffid']; ?>';
        var Email = '<?php echo $_GET['email']; ?>';
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();

        today = mm + '/' + dd + '/' + yyyy;

        //$('.load').html('<button class="btn btn-primary btn-lg btn-block diabled" ><i class="fa fa-spinner fa-pulse"></i> Submiting...</button>');
                                    
            var dataString = 'Email='+ Email + '&StaffID='+ StaffID;
            
           

            $.ajax({
                type: "POST",
                url: "../controller/scripts/website/check-staff-exist.php",
                data: dataString,

                success: function(result){
                    //  alert(result);

                    if(result == "found")
                    {
                        $('#output').html('<div class="row justify-content-center"><div class="col-md-12"><div align="center"><img src = "../Error/404-error.png" style="width:150px; height:150px;"/></i><br> <h3 class="text-secondary"><?php echo $staff_invite_YouAlreadyExist; ?></h3><br><span class="text-secondary" style="font-size:13px;"> <?php echo $staff_invite_PleaseClickbelowtoaccessyourDashboard; ?></span><br><br><div class="col-sm-8"><a style="color:white;" class="btn btn-primary btn-md btn-block small dashboard" id="dashboard"><i class="fa fa-arrow-right"></i> <?php echo $staff_invite_Dashboard;?></a></div></div></div></div>');
                        
                        $('html, body').animate({
                                scrollTop: $("#top").offset().top
                        }, 1000);
                        return false;
                    }else
                    {
                        
                        
                        
                        
                                   
                                 

                                        //Getters and Setters for local Storage Staff Phone Number Only
                                            $('#WhatsappNumber').on("change", function(){
                                                var WhatsappNumberfull = WhatsappNumber.getNumber(intlTelInputUtils.numberFormat.E164);
                                                $("input[name='WhatsappNumber[full]'").val(WhatsappNumberfull);
                                                //alert(WhatsappNumberfull);
                                                var fnames = localStorage.setItem("WhatsappNumberfull", WhatsappNumberfull);             
                                            });
                                    
                                            $(document).ready(function () {
                                                var valuenew = localStorage.getItem("WhatsappNumberfull");
                                                //alert(valuenew);
                                                $("#WhatsappNumber").val(valuenew);
                                                
                                            });


                                            //Image Resize and Upload
                                            $(document).ready(function(){

                                                var StaffID = '<?php echo $_GET['staffid']; ?>'; 

                                                $image_crop = $('#image_demo').croppie({
                                                    enableExif: false,
                                                    viewport: {
                                                    width:300,
                                                    height:300,
                                                    type:'square' //circle
                                                    },
                                                    boundary:{
                                                    width:350,
                                                    height:350
                                                    }    
                                                });

                                                $('#insert_image').on('change', function(){
                                                    var reader = new FileReader();
                                                    reader.onload = function (event) {
                                                        $image_crop.croppie('bind', {
                                                        url: event.target.result
                                                        }).then(function(){
                                                        console.log('jQuery bind complete');
                                                        });
                                                    };
                                                    reader.readAsDataURL(this.files[0]);

                                                    $('#insertimageModal').modal('show');
                                                });

                                                $('.crop_image').click(function(event){

                                                    $image_crop.croppie('result', {
                                                    type: 'canvas',
                                                    size: 'viewport'
                                                }).then(function(response){
                                                   
                                                    // $('#wizardPicturePreview').attr('src', response);
                                                    $('.crop_image').html('<button class="btn btn-success diabled" ><i class="fa fa-spinner fa-pulse"></i> <?php echo $staff_invite_Uploading; ?></button>');
                                                    $.ajax({
                                                    url:'../controller/scripts/website/staff-invite-image-insert.php',
                                                    type:'POST',
                                                    data:{"image":response, "StaffID": StaffID},
                                                    success:function(data){
                                                        // alert(data);
                                                        $('.crop_image').html('<button class="btn btn-success btn-sm crop_image"><?php echo $staff_invite_Crop;?></button>');
                                                        $('#insertimageModal').modal('hide');
                                                        load_images();
                                                        $.wnoty({
                                                            type: 'success',
                                                            message: data,
                                                            autohideDelay: 3000, // 5 seconds
                                                            position:'top-right',
                                                            autohide:true
                                                        });
                                                    }
                                                    });
                                                });
                                            });

                                                load_images();

                                                function load_images()
                                                {
                                                    $.ajax({
                                                    url:'../controller/scripts/website/fetch-staff-image.php',
                                                    type:'POST',
                                                    data:{"StaffID": StaffID},
                                                    success:function(data)
                                                    {
                                                        // alert(data);
                                                        //$('#store_image').html(data);
                                                        if (data == '' || data == '0')
                                                        {
                                                            $('#wizardPicturePreview').attr('src', "https://static.vecteezy.com/system/resources/previews/020/213/738/original/add-profile-picture-icon-upload-photo-of-social-media-user-vector.jpg").fadeIn('slow');
                                                        }else
                                                        {
                                                            $('#wizardPicturePreview').attr('src', data).fadeIn('slow');
                                                        }
                                                    
                                                    }
                                                    });
                                                }
                                            });  
        
         
                                            //Getters and Setters for Profile
                                            $('body').on('change','.profile',function(){
                                                                    
                                                $.each($(this), function(){
                                                    
                                                    var keyname = $(this).data('id');
                                                    var value = $(this).val();
                                                    //alert(value);
                                                
                                                    localStorage.setItem(keyname, value);
                                                });
                                            });

                                            //Get all the profile stored in Local Storage
                                            $(document).ready(function(){
                                                                
                                                $.each($('.profile'), function(){
                                                    var keyname = $(this).data('id');
                                                    var value = $(this).val();
                                                    var valuenew = localStorage.getItem(keyname);
                                                    
                                                    if(valuenew == '0' || valuenew == '')
                                                    {
                                                        
                                                    }
                                                    else
                                                    {

                                                        $('#'+keyname).val(valuenew);
                                                    }
                                                    
                                                });
                                                
                                            });

                                          

                                           

                                       

                                  }
                                
                    

             }
         });
    });
    
    
    
    
    
    
    
     $('.p-submit').on('click',function(){

                var userID = '<?php echo $GroupOfSchoolID; ?>';
                var fname = $('#fname').val();
                var mname = $('#mname').val();
                var lname = $('#lname').val();
                var Email = $('#email').val();
                var password = $('#password').val();
                var password2 = $('#password2').val();
                var image = $('#wizard-picture').val();

                
                
                
                 var WhatsappNumberfull = [];
                        document.querySelectorAll('#WhatsappNumber').forEach(function(input) {
                            // Get the `intlTelInput` plugin instance for the input field
                            var iti = window.intlTelInputGlobals.getInstance(input);
                            // Get the raw phone number value from the input field
                            var numberformat = input.value;
                            // Use the `intlTelInputUtils` library to format the phone number with its country code
                            WhatsappNumberfull.push(intlTelInputUtils.formatNumber(numberformat, iti.getSelectedCountryData()
                                .iso2));
                            // Display the formatted phone number in an alert message
                        });
                    

                //Validate First Name If it is empty
                if(fname == '' )
                {
                    $("#fname").css("outline", "1px solid red");
                    $(".fname-error").html('<p class="small text-danger"> <?php echo $staff_invite_FirstNameisRequired;?></p>');
                    $("#fname").focus();
                }
                else
                {
                    $("#fname").css("outline", "1px solid green");
                    $("#mname").css("outline", "1px solid green");
                    $(".fname-error").html('');
                    
                    //Validate Last Name If it is empty
                    if (lname == '') 
                    {
                        $("#lname").css("outline", "1px solid red");
                        $(".lname-error").html('<p class="small text-danger"> <?php echo $staff_invite_LastNameisRequired;?></p>');
                        $("#lname").focus();
                    }
                    else
                    {
                            $("#lname").css("outline", "1px solid green");
                            $(".lname-error").html('');
                            $(".fname-error").html('');

                            //Validate Number If it is empty
                            if (WhatsappNumberfull == '') 
                            {
                                $("#WhatsappNumber").css("outline", "1px solid red");
                                $(".WhatsappNumber-error").html('<p class="small text-danger"> <?php echo $staff_invite_PhoneNumberisRequired;?></p>');
                                $("#WhatsappNumber").focus();
                            }
                            else
                            {
                                $("#WhatsappNumber").css("outline", "1px solid green");
                                $(".WhatsappNumber-error").html('');
                                $(".lname-error").html('');
                                $(".fname-error").html('');

                                //Validate Password If it is empty
                                if (password == '') 
                                {
                                    $("#password").css("outline", "1px solid red");
                                    $(".password-error").html('<p class="small text-danger"><?php echo $staff_invite_PasswordisRequired; ?></p>');
                                    $("#password").focus();
                                }
                                else{
                                    $("#password").css("outline", "1px solid green");
                                    $(".password-error").html('');
                    
                                    //Validate Password2 If it is empty
                                    if (password2 == '')
                                    {
                                        $("#password2").css("outline", "1px solid red");
                                        $(".password2-error").html('<p class="small text-danger"> <?php echo $staff_invite_ComfirmPasswordisRequired; ?></p>');
                                        $("#password2").focus();
                                    }
                                    else
                                    {
                                        $("#password2").css("outline", "1px solid green");
                                        $(".password2-error").html('');
                                        
                                        //Validate Password If it is same
                                        if(password != password2)
                                        {
                                            $("#password").css("outline", "1px solid red");
                                            $("#password2").css("outline", "1px solid red");
                                            $(".password2-error").html('<p class="small text-danger"> <?php echo $staff_invite_PasswordPleasePassword; ?></p>');
                                            $("#password2").focus();
                                        }
                                        else
                                        {
                                            
                                            $("#password").css("outline", "1px solid green");
                                            $("#password2").css("outline", "1px solid green");
                                            $(".picture").css("outline", "1px solid green");
                                            $(".password-error").html('');
                                            $(".password2-error").html('');
                                            $(".fname-error").html('');
                                            $(".lname-error").html('');
                                            $(".WhatsappNumber-error").html('');

                                            var InstituteID =  '<?php echo $GroupOfSchoolID; ?>';
                                            var StaffID = <?php echo $_GET['staffid']; ?>; 
                                            var UserType ='<?php echo $_GET['usertype']; ?>';
                                           

                                            
                                
                                                $('.load').html('<button class="btn btn-primary btn-lg btn-block diabled" ><i class="fa fa-spinner fa-pulse"></i> <?php echo $staff_invite_Submiting; ?></button>');

                                                var lang = $("#changelanguage").val();
                                              

                                                // var dataString = '&lang='+ lang + '&Email='+ Email + '&InstituteID='+ InstituteID+ '&fname='+ fname+'&mname='+ mname + '&lname='+ lname + '&WhatsappNumberfull='+ WhatsappNumberfull + '&password='+ password + '&password2='+ password2 + '&StaffID='+ StaffID + '&UserType='+ UserType;
                                                   

                                                    $.ajax({
                                                        type: "POST",
                                                        url: "../controller/scripts/website/staff-invite-insert-bio.php",
                                                        data: {
                                                                lang: lang,
                                                                Email: Email,
                                                                InstituteID: InstituteID,
                                                                fname: fname,
                                                                mname: mname,
                                                                lname: lname,
                                                                WhatsappNumberfull: WhatsappNumberfull,
                                                                password: password,
                                                                password2: password2,
                                                                StaffID: StaffID,
                                                                UserType: UserType
                                                                
                                                            },

                                                          success: function(result2){
                                                               $('.p-submit').prop("disabled", false);
                                                                $('.p-submit').html("Register");
                                                                
                                                                                
                                                                                
                                                                                
                                                                        if (result2 == 'Success') {
                                                                            $('#output').html('<div class="row"><div class="col-md-12"><div class="row justify-content-center"><div class="col-9"><img src = "../Error/congratulation.png" style="width:150px; height:150px;"/></i><br></div></div><div class="row justify-content-center"><div class="col-sm-12"><h3 class="text-secondary"><?php echo $staff_invite_Congratulation; ?></h3><br><span class="text-secondary" style="font-size:13px;">You Just Registered<br>Click Below to <strong>"Login"</strong>.</span><br><br></div></div><div class="col-sm-12"><a href = "../sign-in/" style="color:white;" class="btn btn-primary btn-md btn-block small"><i class="fa fa-arrow-right"></i> Sign In</a></div></div></div>');
                                                
                                                                            $.wnoty({
                                                                              type: 'success',
                                                                              message: 'You Have Successfully Registered',
                                                                              autohideDelay: 3000,
                                                                              // 5 seconds
                                                                              position: 'top-right',
                                                                              autohide: true
                                                                            });
                                                
                                                                            $('html, body').animate({
                                                                              scrollTop: $("#top").offset().top
                                                                            },
                                                                            1000);
                                                                            return false
                                                
                                                                           
                                                                          } else {
                                                                              
                                                                            $.wnoty({
                                                                              type: 'warning',
                                                                              message: result2,
                                                                              autohideDelay: 3000,
                                                                              // 5 seconds
                                                                              position: 'top-right',
                                                                              autohide: true
                                                                            });
                                                
                                                                          }
                                                                
                                                                       
                                                          
                                                                   
                                                        }
                                                    });
                                                
                                        }
                            
                                    }
                                }
                                
                            }
                        }
                    }
            });


   
</script>

<!-- Language Translate -->
<script>

    $('body').on('change', '#changelanguage', function () {

        var lang = $(this).val();

        localStorage.setItem('lang', lang);

        var newlang = localStorage.getItem('lang');

        // alert(newlang);

        var currenturl = window.location.href

        var url2 = currenturl.substring(0, currenturl.indexOf('&&lang'));

        // alert(url2);

        url = url2+'&&lang='+newlang;
        //  alert(url);
        location.href = url;

        //window.location.href;
    });
        
    $(document).ready(function () {
        $('#changelanguage').val('<?php echo $lang; ?>');
    });
</script>






