EVOLUTION-NINJA

Edit File: admin_form.php

<?php echo view('includes/header.php'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/website_assets/css/innerpage.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/sumoselect/sumoselect.css'); ?>" />
<script type="text/javascript" src="<?php echo base_url('public/assets/sumoselect/jquery.sumoselect.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('public/assets/timepicker/jquery.timepicker.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/timepicker/jquery.timepicker.css'); ?>" />

<section id="instructor_banner">
    <div class="row menus">
        <div class="row co_details">
            <div class="container">
                <h3>Bringing Affordable Learning Anywhere.</h3>
                
            </div>
        </div>
</section>

<div class="col-sm-12 col-md-6 col-lg-6 instructor_middle_left">
            <div class="col-sm-4 col-md-4 col-lg-4 instructor_middle_left_one">
                <div class="instructor_middle_left_one_1">
                    <h4 class="hidden-sm hidden-md hidden-lg">How it Works</h4>
                    <p><b>Dream</b></p>
                    <p>Partner with us for providing affordable learning anywhere. Extend your approach and get recognised for what you are known for. Use best in class online portal to reach masses and grow together.</p>
                </div>
                <div class="instructor_middle_left_one_2">
                    <p><b>Take Classes</b></p>
                    <p>Take classes as per the your convenience and scheduled time table with live interactions with your students located anywhere in the globe.</p>
                </div>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 instructor_middle_two hidden-xs">
                <h4>How it Works</h4>
                <br>
                <img src="<?php echo base_url('public/assets/website_assets/images/instructor-registration_11.png'); ?>" class="img-responsive center-block">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 instructor_middle_left_three">
                <div class="instructor_middle_left_three_three_1">
                    <p><b>Register</b></p>
                    <p>Register with us by entering your information. We will get back to you at an earliest opportunity.</p>
                </div>

<div class="instructor_middle_left_three_2">
                    <p><b>Earn</b></p>
                    <p>Become cost-effective earn serious money and build your personal brand, all while making a real difference in the lives of students.</p>
                </div>
            </div>
        </div>

<div class="col-sm-12 col-md-6 col-lg-6 instructor_middle_right">
            <form class="form-horizontal" id="add_admins">
                
                
                <div class="instructor_middle_two">
                    <h4>Institution <span>Registration<span></h4>
                </div>
                <br>
                <div class="form-group">
                    <label class="control-label col-sm-4">Institution Name<span style="color:red;"> *</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" id="name" minlength="3" name="name" type="text" required>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Email <span style="color:red;"> *</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" id="email" name="email" type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" required>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Phone <span style="color:red;"> *</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" id="phone" name="inst_phone" type="text" pattern="^[0-9]{10}$" required>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Address <span style="color:red;"> *</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" id="phone" pattern="^[^\s]+.*$" name="address" type="text" required>
                    </div>
                </div>

<div class="form-group">
                    <label class="control-label col-sm-4">Contact Person details <span style="color:red;"> </span></label>
                    <div class="col-sm-8">
                        <input class="form-control" name="contact_person_details" type="text">
                    </div>
                </div>

<div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <span id="SuccessMessage" class="success">Hurray! Your have successfully entered the captcha.</span>
                        <input type="text" id="UserCaptchaCode" class="CaptchaTxtField form-control" placeholder='Enter Captcha - Case Sensitive'>
                        <span id="WrongCaptchaError" class="error"></span>
                        <div class='CaptchaWrap'>
                            <div id="CaptchaImageCode" class="CaptchaTxtField">
                                <canvas id="CapCode" class="capcode" width="100%" height="80"></canvas>
                            </div>
                            <input type="button" class="ReloadBtn" onclick='CreateCaptcha();'>
                        </div>
                    </div>
                </div>

<div class="form-group" style="padding-top:10px;">
                    <div class="col-sm-offset-4 col-sm-8">
                        <button type="submit" class="btn btn-primary submit" style="width:40%; background-color:#a6cf39;">Submit</button>
                    </div>
                </div>

</form>

</div>

</div> 
</section>

<?php echo view('includes/footer.php'); ?>

.form-horizontal .control-label {
        padding-top: 0 !important;
    }

.form-control {
        height: 30px !important;
    }

.form-group {
        margin-bottom: 10px !important;
    }

.timepicker_wrap {
        width: 130px !important;
    }

.append_time {
        margin-bottom: 3%;
    }

.select {
        height: 35px !important;
    }

.available_type_label {
        margin-top: 16px !important;
    }

.course_type_label {
        margin-top: 8px !important;
    }

.glyphicon-remove {
        margin-left: 30px !important;
    }

.ui-timepicker-wrapper {
        width: 150px !important;
    }

.input-group-addon {
        background-color: #F3F3F3;
        border: none !important;
    }

#UserCaptchaCode {
        padding: 15px 10px;
        outline: 0;
        font-weight: 400;
        font-family: 'Open Sans', sans-serif
    }

#CaptchaImageCode {
        text-align: center;
        margin-top: 15px;
        padding: 0 0;
        width: 300px;
        overflow: hidden
    }

.capcode {
        font-size: 30px;
        display: block;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: default;
        letter-spacing: 1px;
        color: #ccc;
        font-family: 'Roboto Slab', serif;
        font-weight: 100;
        font-style: italic
    }

.ReloadBtn {
        background: url(https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png) left top no-repeat;
        background-size: 100%;
        width: 32px;
        height: 32px;
        border: 0;
        outline: 0;
        position: absolute;
        bottom: 0px !important;
        right: 30px;
        outline: 0;
        cursor: pointer
    }

.error {
        color: red;
        font-size: 12px;
        display: none
    }

.success {
        color: green;
        font-size: 18px;
        margin-bottom: 15px;
        display: none
    }

.callback-cont {
        box-shadow: 1px 0 4px 0 rgba(0, 0, 0, .15)
    }

@media only screen and (min-width:991px) and (max-width:1258px) {
        /* .ReloadBtn {
            bottom: 15px!important;
            right: 28px!important
        } */
    }
</style>

$(function() {
        CreateCaptcha();
    });

// Create Captcha
    function CreateCaptcha() {
        //$('#InvalidCapthcaError').hide();
        var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');

var i;
        for (i = 0; i < 6; i++) {
            var a = alpha[Math.floor(Math.random() * alpha.length)];
            var b = alpha[Math.floor(Math.random() * alpha.length)];
            var c = alpha[Math.floor(Math.random() * alpha.length)];
            var d = alpha[Math.floor(Math.random() * alpha.length)];
            var e = alpha[Math.floor(Math.random() * alpha.length)];
            var f = alpha[Math.floor(Math.random() * alpha.length)];
        }
        cd = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e + ' ' + f;
        $('#CaptchaImageCode').empty().append('<canvas id="CapCode" class="capcode" width="250" height="80"></canvas>')

var c = document.getElementById("CapCode"),
            ctx = c.getContext("2d"),
            x = c.width / 2,
            img = new Image();

img.src = "https://pixelsharing.files.wordpress.com/2010/11/salvage-tileable-and-seamless-pattern.jpg";
        img.onload = function() {
            var pattern = ctx.createPattern(img, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, c.width, c.height);
            ctx.font = "46px Roboto Slab";
            ctx.fillStyle = '#ccc';
            ctx.textAlign = 'center';
            ctx.setTransform(1, -0.12, 0, 1, 0, 15);
            ctx.fillText(cd, x, 55);
        };

}

// Validate Captcha
    function ValidateCaptcha() {
        var string1 = removeSpaces(cd);
        var string2 = removeSpaces($('#UserCaptchaCode').val());
        if (string1 == string2) {
            return true;
        } else {
            return false;
        }
    }

// Remove Spaces
    function removeSpaces(string) {
        return string.split(' ').join('');
    }

// Check Captcha
    function CheckCaptcha() {
        var result = ValidateCaptcha();
        if ($("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
            $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
            $('#UserCaptchaCode').focus();
        } else {
            if (result == false) {
                $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
                CreateCaptcha();
                $('#UserCaptchaCode').focus().select();
            } else {
                $('#UserCaptchaCode').val('').attr('place-holder', 'Enter Captcha - Case Sensitive');
                CreateCaptcha();
                $('#WrongCaptchaError').fadeOut(100);
                $('#SuccessMessage').fadeIn(500).css('display', 'block').delay(5000).fadeOut(250);
            }
        }
    }

$('#add_admins').submit(function(e) {
        e.preventDefault();
        formdata = new FormData($(this)[0]);

//  if (!$("input[name='audience_loaction']:checked").val()) {
        //     toastr["error"]("Select audience location");
        //     return false;
        // }
        // else {

var result = ValidateCaptcha();
        if ($("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
            $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
            $('#UserCaptchaCode').focus();
        } else {
            if (result == false) {
                $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
                CreateCaptcha();
                $('#UserCaptchaCode').focus().select();
            } else {
                $('#WrongCaptchaError').fadeOut(100);

$(".submit").attr('disabled', 'disabled');
                $(".submit").text("Submitting...");
                $.ajax({

type: 'post',
                    url: '<?php echo site_url('add_admins') ?>',
                    data: formdata,

contentType: false,
                    processData: false,

success: function(response) {
                        response = jQuery.parseJSON(response);
                        console.log(response);

if (response.result == 1) {
                            swal(response.message);
                            $('#add_admins')[0].reset();
                            $(".submit").text("Submit");
                            $(".submit").removeAttr('disabled');
                        } else {
                            swal(response.message);
                            $(".submit").text("Submit");
                            $(".submit").removeAttr('disabled');
                        }
                    }
                });
            }
        }
        // }

});
</script>