<?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');
    
    
    
    $prosparentID = $_GET['userid'];




?> 

<!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">
    <!-- <link href="../assets/plugins/bootstrap5/css/bootstrap.min.css" rel="stylesheet"> -->

    <!-- 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">
  
    <!-- Slick Carousel -->
    <link rel="stylesheet" href="../css/website_css/slick.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">
    
    
    <!-- tag css -->
    <link href="../assets/plugins/bootstrap-tagsinput/src/bootstrap-tagsinput.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>
    
   

    <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;
        }
        

        /* Child Selection CSS */
        .multipleSelection #checkBoxes,
        .SortBy #checkBox {
            width: 100%;
        }
        .multipleSelection .selectBox,
        .SortBy .selectBoxes {
            position: relative;
            background: #fff;
            width: 100%;
            padding: 13px 10px;
            font-weight: 400;
            background: #fff;
            border: 1px solid #f7f8f9;
            border-radius: 7px;
            display: flex;
            display: -ms-flexbox;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .multipleSelection {
            position: relative;
            margin-bottom: 20px;
        }
        .multipleSelection #checkBoxes,
        .SortBy #checkBox {
            display: none;
            position: absolute;
            width: 300px;
            left: 0;
            z-index: 3;
            margin-top: 10px;
            padding: 20px;
            background: #fff;
            border: 1px solid #f2ecff;
            box-shadow: 0 4px 44px rgba(231, 234, 252, 0.75);
            border-radius: 6px;
        }
        .multipleSelection #checkBoxes-one {
            display: none;
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 3;
            margin-top: 10px;
            padding: 20px;
            background: #fff;
            border: 1px solid #f2ecff;
            box-shadow: 0 4px 44px rgba(231, 234, 252, 0.75);
            border-radius: 6px;
        }
        .multipleSelection #checkBoxes-one::before {
            border: 7px solid #f2ecff;
            border-color: #fff #fff #fff #fff;
            box-shadow: -2px 2px 2px -1px rgb(0 0 0/10%);
            content: "";
            left: 30px;
            position: absolute;
            top: 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }

        .multipleSelection #checkBoxes.form-custom .form-control {
            padding-left: 25px;
            background: #f5f6fa;
            border: 1px solid #e6e9f4;
            border-radius: 5px;
            height: 33px;
        }
        .multipleSelection #checkBoxes .form-custom i {
            position: absolute;
            top: 35%;
            left: 6px;
            color: #7e84a3;
            font-size: 12px;
        }
        .invoices-form .multipleSelection .selectBox {
            border: 2px solid #3d5ee1;
            border-radius: 6px;
        }
        #checkBoxes-one .form-custom {
            margin-bottom: 14px;
         }
        #checkBoxes-one .form-custom .form-control {
            padding-left: 14px;
            border: 1px solid rgba(231, 234, 252, 0.75);
            border-radius: 6px;
        }
        .form-custom {
            position: relative;
        }
        #checkBoxes .form-custom {
            margin-bottom: 14px;
        }
        #checkBoxes .form-custom .form-control {
            padding-left: 14px;
            border: 1px solid rgba(231, 234, 252, 0.75);
            border-radius: 6px;
        }
        #checkBoxes .form-custom .form-control::placeholder {
            color: #8f9bba;
        }
        .selectBox-cont {
            height: 220px;
            overflow-y: auto;
            padding-right: 5px;
        }
        .selectBox-cont-one {
            overflow-y: inherit;
        }
        .selectBox-cont::-webkit-scrollbar {
            width: 4px;
            background: #eef1fe;
            height: 10px;
        }
        .selectBox-cont::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px #e7e7e7;
            border-radius: 4px;
        }
        .selectBox-cont::-webkit-scrollbar-thumb {
            background: rgba(231, 234, 252, 0.75);
            border-radius: 4px;
        }
        .selectBox-cont::-webkit-scrollbar-thumb:hover {
            background: rgba(231, 234, 252, 0.75);
        }
        .custom_check {
            color: #1b2559;
            display: inline-block;
            position: relative;
            font-size: 12px;
            margin-bottom: 15px;
            padding-left: 30px;
            cursor: pointer;
            font-weight: 400;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            align-content: center;
        }
        .custom_check input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        .custom_check input:checked ~ .checkmark {
            background-color: #3d5ee1;
            border-color: #3d5ee1;
        }
        .custom_check .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 19px;
            width: 21px;
            border: 1px solid #c4c4c4;
            background-color: #fff;
            border-radius: 6px;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        .custom_check .checkmark::after {
            content: "";
            font-family: "font awesome 5 free";
            font-weight: 900;
            position: absolute;
            display: none;
            left: 5px;
            top: 2px;
            color: #fff;
            font-size: 9px;
        }
        .custom_check input:checked ~ .checkmark:after {
            display: block;
        }

        /* tag input css */
        .bootstrap-tagsinput {
            width: 100%;
        }
        .label {
            display: inline-block;
            padding: .25em .4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
        .label-info {
            background-color: #3d5ee1;
        }

        .bg-orange{
            background-color:orange;
        }

        
       
    </style>
        

</head>
    <body>

    <header class="header_inner blog_page shadow-sm" id="top">


        
        
    </header> <!-- End nav -->

        <!---- Staff Form---->
            <div class="row justify-content-center m-5" 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">
                                        <span>Sex: </span>
                                        <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline1" name="customRadioInline1" value="male" class="custom-control-input" checked>
                                        <label class="custom-control-label" for="customRadioInline1">Male</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline2" name="customRadioInline1" value="female" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline2">Female</label>
                                        </div>
                                    </div>
                                </div>
                                
                                
                                    
                                    
                                <div class="col-sm-12 col-md-12 col-lg-6 mb-3">
                                    <div class="form-group col-sm-12">
                                        <label class="" >WhatsApp Number </label>
                                        <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>
                                            <!--<span id="prosloadusernamehere"></span>-->
                                    </div>
                                </div>
                                
                                
                                
                                <div class="col-sm-12 col-md-12 col-lg-6 mb-3">
                                    <div class="form-group col-sm-12">
                                        <label class="" >Main Number <span>(optional)</span></label>
                                        <input type="tel" 
                                        class="form-control form-control-lg shadow border-0 profile1"
                                        style="font-size: 15px; display:inline-block;" 
                                        name="WhatsappNumber[main]" 
                                        id="MainWhatsappNumber"
                                        data-id="WhatsappNumber">
                                        <div class="mainWhatsappNumber-error">  
                                        </div>
                                    </div>
                                </div>
                                
                                
                                
                               
                                
                                  <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group col-sm-12">
                                        <label class="" >Other Number <span>(optional)</span></label>
                                        <input type="tel" 
                                        class="form-control form-control-lg shadow border-0 profile1"
                                        style="font-size: 15px; display:inline-block;" 
                                        name="WhatsappNumber[main]" 
                                        id="OtherWhatsappNumber"
                                        data-id="WhatsappNumber">
                                        <div class="OtherWhatsappNumber-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"
                                        class="form-control form-control-lg shadow border-0"
                                        style="font-size: 15px;" 
                                        id="email"
                                        placeholder="Enter Email"
                                        value="">
                                    </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 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 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_password; ?>">
                                        <small class="help-block" id="password-text2"></small>
                                        <div class="password2-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="text" 
                                        class="form-control form-control-lg shadow border-0"  disabled
                                        
                                        style="font-size: 15px;"
                                        placeholder="User Name" id="prosloadusernamehere">
                                        
                                        </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">Register</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>

<!-- Bootsrap Tags -->
<script src="../assets/plugins/bootstrap-tagsinput/src/bootstrap-tagsinput.js"></script>

    <!-- notification js -->
    <script src="../assets/plugins/notify/wnoty.js"></script>

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






         <script>
                $(document).ready(function() {
                  
                    // Password Strength
                    $('#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-orange' style='width: 40%;'><?php echo $staff_invite_Medium;?></small><small class='mt-'>Strong Password should Contain (A-Z), (a-z), (0-9) or (such as $@$!%*#?&)</small>";
                            break;
                            case 3:
                            strength = "<small class='progress-bar bg-warning' style='width: 60%'><?php echo $staff_invite_Medium;?></small><small class='mt-'>Strong Password should Contain (A-Z), (a-z), (0-9) or (such as $@$!%*#?&)</small>";
                            break;
                            case 4:
                            strength = "<small class='progress-bar bg-success' style='width: 100%'><?php echo $staff_invite_Strong;?></small><small class='mt-'>Strong Password should Contain (A-Z), (a-z), (0-9) or (such as $@$!%*#?&)</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;
            
                    });
            
                    // Password Eye Icon View
                    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');
            
                    });   
              });
                
                
                
                 //Image Resize and Upload
            $(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"
                });
                
                
                
                
                 var OtherWhatsappNumber = window.intlTelInput(document.querySelector("#OtherWhatsappNumber"), {
                    separateDialCode: true,
                    preferredCountries:["ng"],
                    hiddenInput: "full",
                    utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
                });
                
               
                 var MainWhatsappNumber = window.intlTelInput(document.querySelector("#MainWhatsappNumber"), {
                    separateDialCode: true,
                    preferredCountries:["ng"],
                    hiddenInput: "full",
                    utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
                });
                
                
                
                
                
                
                  
        
                //Getters for profile stored in Local Storage
                $.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);
                    }
                    
                });
        
               
                var valuenew = localStorage.getItem("WhatsappNumberfull");
                 //alert(valuenew);
                $("#WhatsappNumber").val(valuenew);

         });
         
         
          $('body').on('keyup','#WhatsappNumber',function(){
                     
                     
                     var wanumber = $(this).val();
                     
                     if(wanumber == '')
                     {
                         
                       $('#prosloadusernamehere').val('');  
                       
                     }else
                     {
                         
                        $('#prosloadusernamehere').val('User Name:'+wanumber); 
                        
                     }
                     
                     
                    
          });
         
         
         
         
         
           //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);
            });
        });
                
                
                
                
                
                   //Initializing Image Croppie
            $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){


                $('.crop_image').html('<button class="btn btn-success diabled" ><i class="fa fa-spinner fa-pulse"></i></button>');
                $('#insertimageModal').modal('hide');
                $('#wizardPicturePreview').attr('src', response).fadeIn('slow');
                
                
            });

        });
        
        
        
      
      //Submit Profile
      
          $('body').on('click', '.p-submit', function(){
              
                      var GroupOfSchoolID = '<?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 picture = response;
                   
                      var image = $('#wizardPicturePreview').attr('src');
                      var ParentID = '<?php echo $prosparentID; ?>';
                      
                      
                      
                      
                   
                        
                        
                     
                        
                           var UserName = $('#WhatsappNumber').val(); 
                            
                      
                        // var image_64 = $('#wizardPicturePreview').attr('src');
                          var parent_gendeder = $("#customRadioInline1:checked").val();
                          
                          
                          var lang = '<?php echo $lang; ?>';
                    
                        
                    
                    
                        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
                        });
                        
                        
                        
                        
                           var WhatsappNumberfullmain = [];
                        document.querySelectorAll('#MainWhatsappNumber').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
                            WhatsappNumberfullmain.push(intlTelInputUtils.formatNumber(numberformat, iti.getSelectedCountryData()
                                .iso2));
                            // Display the formatted phone number in an alert message
                        });
                        
                        
                    
                        
                         
                           var WhatsappNumberfullother = [];
                        document.querySelectorAll('#OtherWhatsappNumber').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
                            WhatsappNumberfullother.push(intlTelInputUtils.formatNumber(numberformat, iti.getSelectedCountryData()
                                .iso2));
                            // Display the formatted phone number in an alert message
                        });
                        
                        
                    
                                  var dataString = '&lang=' + lang + '&Email=' + Email + '&fname=' + fname + '&mname=' + mname + '&lname=' + lname + '&WhatsappNumberfull=' + WhatsappNumberfull + '&password=' + password + '&password2=' + password2 + '&GroupOfSchoolID=' + GroupOfSchoolID;
                            
                                  var image_64 = $('#wizardPicturePreview').attr('src');
                                
                               
                                    // console.log(image_64);
                                
                                    //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 {
                                
                                                if (password.length < 6) {
                                                  $("#password").css("outline", "1px solid red");
                                                  $(".password-error").html('<p class="small text-danger">Password length should not be less than 6</p>');
                                                  $("#password").focus();
                                                }
                                
                                                else {
                                                  if (password2.length < 6) {
                                                    $("#password2").css("outline", "1px solid red");
                                                    $(".password2-error").html('<p class="small text-danger">Password length should not be less than 6</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('');
                                
                                                     $('#p-submit').html('<i class="fa fa-spinner fa-pulse"></i> <?php echo $staff_invite_Submiting; ?>');
                                                   
                                                     $('#p-submit').prop("disabled", true);
                                                    
                                                    var lang = $("#changelanguage").val();
                                                  
                                
                                                    var dataString = '&lang=' + lang + '&Email=' + Email + '&fname=' + fname + '&mname=' + mname + '&lname=' + lname + '&WhatsappNumberfull=' + WhatsappNumberfull + '&password=' + password + '&password2=' + password2 + '&GroupOfSchoolID=' + GroupOfSchoolID + '&image_64=' + image_64;
                                                    //alert(dataString);
                                
                                                   
                                
                                                      var child = 0;
                                                      // alert(child);
                                                      $.ajax({
                                                        type: "POST",
                                                        url: "../controller/scripts/website/spouse-invite-insert-bio.php",
                                                        data: {
                                                          lang: lang,
                                                          child: child,
                                                          Email: Email,
                                                          fname: fname,
                                                          mname: mname,
                                                          lname: lname,
                                                          WhatsappNumberfull: WhatsappNumberfull,
                                                          password: password,
                                                          password2: password2,
                                                          GroupOfSchoolID: GroupOfSchoolID,
                                                          image: image,
                                                          parent_gendeder:parent_gendeder,
                                                           WhatsappNumberfullmain:WhatsappNumberfullmain,
                                                          WhatsappNumberfullother:WhatsappNumberfullother,
                                                          UserName:UserName,
                                                          ParentID:ParentID
                                
                                                        },
                                
                                                        success: function(result2) {
                                                            
                                                             $('#p-submit').prop("disabled", false);
                                                             $('#p-submit').html("Register");
                                                              
                                                          // alert(result2);
                                                          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
                                
                                                            // $.ajax({
                                                            //   type: "POST",
                                                            //   url: "../controller/scripts/website/staff-owner-email.php",
                                                            //   data: dataString,
                                                            //   success: function(result3) {
                                                            //     alert(result3);
                                                            //   }
                                                            // });
                                                          } else {
                                                            $.wnoty({
                                                              type: 'warning',
                                                              message: result2,
                                                              autohideDelay: 3000,
                                                              // 5 seconds
                                                              position: 'top-right',
                                                              autohide: true
                                                            });
                                
                                                          }
                                
                                                        }
                                                      });
                                                    
                                                    
                                                    
                                                    
                                                 
                                
                                                  }
                                
                                                }
                                
                                              }
                                            }
                                
                                          }
                                        }
                                      }
                                
                                    }
                              
                      
                     
          });
       
        
        
       
        
        

                
</script>






<script>

    $(".search").keyup(function(e) {
        var val = $(this).val();
        filter(val.toLowerCase());
    });

    $(".search").on("paste", function() {
    var element = this;
    setTimeout(function() {
        var text = $(element).val().toLowerCase();
        filter(text);
    }, 100);
    });

    function filter(x) {
        var isMatch = false;
        $(".selectBox-cont label").each(function(i) {
            var content = $(this).html();

            if (content.toLowerCase().indexOf(x) == -1) {
                $(this).hide();
            } 
            else {
                isMatch = true;
            $(this).show();
            
            }
        });

        var ccs = $('.selectBox-cont label').filter(function() {
            return $(this).css('display') !== 'none';
        }).length;
    
        $(".no-results").toggle(!isMatch);
            $(".cc").toggle(isMatch);
    
    
    }

    var ccs = $('.selectBox-cont label').filter(function() {
        return $(this).css('display') !== 'none';
    }).length;

</script>

    <!-- Get Tags -->
    <script>
       
    </script>

                                   
    <!-- Language Translate -->
    <script>
        $('body').on('change', '#changelanguage', function () {
    
            var lang = $(this).val();
            
            localStorage.setItem('lang', lang);
    
            location.href = '<?php echo $url; ?>?lang=' + lang;
        });
    
        $(document).ready(function () {
            $('#changelanguage').val('<?php echo $lang; ?>');
    
        });
    </script>





