
<div class="right_col" role="main">
    <div class="">


        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <?php
                $message = $this->session->flashdata('contact');
                if (isset($message)) {
                    echo '<div class="alert alert-info">' . $message . '</div>';
                    $this->session->unset_userdata('contact');
                }
                ?>
                <?php if (isset($suc_msg) && $suc_msg) { ?>
                    <div class = "alert alert-success" style="padding: 10px;">
                        <strong>Success!</strong> <span><?php echo $suc_msg ?></span>
                    </div>
                <?php } ?>
                <?php if (isset($exceed_emp) && $exceed_emp != null) { ?>
                    <div class = "alert alert-danger" style="padding: 10px;">
                        <strong>Oh snap!</strong> <span><?php echo $exceed_emp ?></span>
                    </div>
                <?php } else { ?>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Supervisor create</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <!-- Smart Wizard -->
                            <?php echo form_open(base_url('index.php/Supervisor/created'), array('id' => 'createform', 'class' => 'form-horizontal form-label-left', 'enctype' => "multipart/form-data")); ?>
                            <div id="wizard" class="form_wizard wizard_horizontal">
                                <ul class="wizard_steps">
                                    <li>
                                        <a href="#step-1">
                                            <span class="step_no">1</span>
                                            <span class="step_descr">
                                                Personal Details
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#step-2">
                                            <span class="step_no">2</span>
                                            <span class="step_descr">
                                                Center Selection
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                                <div id="step-1">
                                    <h2 class="StepTitle">Personal Details</h2>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">First Name <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" class="form-control" name="fristname" id="fristname"  placeholder="Enter first name" maxlength="50"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Last Name 
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter last name" maxlength="50"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mobile">Mobile 
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Enter mobile number" maxlength="16"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mobile">Executive 
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select class="form-control" id="executive" name="executive"> 
                                                <?php foreach ($executive as $row) { ?>
                                                    <option value="<?php echo $row->username; ?>"><?php echo $row->firstname . ' ' . $row->lastname; ?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="username">Username <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" maxlength="50"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="password">Password <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password" maxlength="64"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="conpassword">Confirm Password <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="password" class="form-control" id="conpassword" name="conpassword" placeholder="Enter Confirm Password" maxlength="64"/>
                                        </div>
                                    </div>
                                </div>
                                <div id="step-2">
                                    <h2 class="StepTitle">Center Selection</h2>
                                    <div class="row">
                                        <div class="col-xs-12" id="error_center_selection"> </div>
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Area</th>
                                                    <th>Center</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php for ($x = 1; $x < 7; $x++) { ?>
                                                    <tr>
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="col-xs-12">
                                                                    <?php echo '<select class="form-control" id="area' . $x . '" name="area' . $x . '">'; ?>

                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="col-xs-12">
                                                                    <?php echo '<select class="form-control" id="center' . $x . '" name="center' . $x . '">'; ?>
                                                                    <option value=""> Select Center</option> 
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <?php } ?>

                                            </tbody>
                                        </table>
                                        <div class="form-group">
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input type="hidden" class="form-control" name="centerlist" id="centerlist" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal" id="supervisor_error"> 
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">

                                            <h4 class="modal-title" style="color:#3c8dbc"> Error!</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p><b>Supervisor already assigned for the center. Please select different center.</b></p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" id="delete_Cancel" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End SmartWizard Content 
                            <?php echo form_close(); ?>
                        </div>
                    </div>
                </div>
                        <?php } ?>
</div>
</div>
</div>

                        <!-- /page content -->
                        <!-- jQuery -->
                        <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
                        <!-- Bootstrap -->
                        <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
                        <!-- FastClick -->
                        <script src="<?php echo base_url('assets/js/fastclick.js'); ?>"></script>
                        <!-- NProgress -->
                        <script src="<?php echo base_url('assets/js/nprogress.js'); ?>"></script>


                        <script src="<?php echo base_url('assets/js/custom.min.js'); ?>"></script>
                        <script src="<?php echo base_url('assets/js/jquery.smartWizard.js'); ?>"></script>
                        <script src="<?php echo base_url('assets/js/jquery.validate.min.js'); ?>"></script>
                        <script src="<?php echo base_url('assets/js/jquery.dataTables.min.js'); ?>"></script>
                        <script type="text/javascript">
                            //========================================== Wizard form validation start=========================================================
                            var manager_list = [];

                            $('#centerlist').val(JSON.stringify(manager_list));
                            $("#createform").validate({
                                rules: {
                                    fristname: {
                                        required: true,
                                        maxlength: 50
                                    },
                                    executive: {
                                        required: true
                                    },
                                    password: {
                                        required: true,
                                        minlength: 5
                                    },
                                    conpassword: {
                                        required: true,
                                        minlength: 5,
                                        equalTo: "#password"
                                    },
                                    username: {
                                        required: true,
                                        minlength: 3,
                                        maxlength: 45,
                                        remote: {
                                            url: "<?php echo base_url(); ?>" + "index.php/Executive/username_exsist",
                                            type: "POST",
                                            data: {
                                                email: function () {
                                                    return $('#username').val();
                                                }
                                            }
                                        }
                                    }
                                },
                                messages: {
                                    username: {
                                        remote: "The username has been used!"
                                    },
                                    executive: {
                                        required: "Please select a executive!"
                                    }

                                },
                                errorElement: "div", // default is 'label'
                                errorPlacement: function (error, element) {
                                    if ($(element).attr('id') === 'emp_validation') {
                                        error.appendTo(element.parent("createform").prev("input"));
                                        $(".stepContainer").css({'background-color': '#ffffff', 'opacity': '0.4'});
                                    } else {
                                        error.insertAfter(element);
                                    }
                                }
                            });
                            //========================================== Wizard form validation end=========================================================


                            //========================================== Wizard step validation start=========================================================

                            $('#wizard').smartWizard({
                                labelNext: 'Next',
                                labelPrevious: 'Previous',
                                labelFinish: 'Finish',
                                selected: 0,
                                onLeaveStep: leaveAStepCallback,
                                onFinish: onFinishCallback
                            });
                            function leaveAStepCallback(obj, context) {
                                return validateSteps(context.fromStep); // return false to stay on step and true to continue navigation 
                            }


                            function onFinishCallback(objs, context) {
                                if (validateAllSteps()) {
                                    var list = $("#centerlist").val();
                                    if (list) {
                                        var res1 = jQuery.parseJSON(list);
                                        if (res1.length > 0) {
                                            $("#error_center_selection").empty();
                                            jQuery.ajax({
                                                type: "POST",
                                                url: "<?php echo base_url(); ?>" + "index.php/Supervisor/center_exist",
                                                dataType: 'json',
                                                data: {centerlist: $('#centerlist').val()},
                                                success: function (res) {
                                                    if (res.STATUS === 'TRUE') {
                                                        $("#createform").submit();
                                                    } else {
                                                        $('#supervisor_error').modal({backdrop: 'static', keyboard: false});
                                                    }

                                                }
                                            });
                                        } else {
                                            $("#error_center_selection").empty();
                                            $("#error_center_selection").append('<div class = "alert alert-error" style="padding: 10px;">'
                                                    + '<strong>Error!</strong>  Please select center! </span>'
                                                    + '</div>');
                                        }

                                    } else {
                                        $("#error_center_selection").empty();
                                        $("#error_center_selection").append('<div class = "alert alert-error" style="padding: 10px;">'
                                                + '<strong>Error!</strong>  Please select center! </span>'
                                                + '</div>');
                                    }

                                }
                            }


                            function validateSteps(stepnumber) {
                                var isStepValid = false;
                                if (stepnumber === 1) {
                                    if ($('#fristname').valid() & $('#username').valid() & $('#password').valid() & $('#conpassword').valid()) {
                                        isStepValid = true;
                                        var executive = $("#executive").val();
                                        jQuery.ajax({
                                            type: "POST",
                                            url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_executive_area",
                                            dataType: 'json',
                                            data: {executive: executive},
                                            success: function (res) {
                                                $("#area1").empty();
                                                $("#area1").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area1").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });
                                                $("#area2").empty();
                                                $("#area2").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area2").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });
                                                $("#area3").empty();
                                                $("#area3").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area3").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });
                                                $("#area4").empty();
                                                $("#area4").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area4").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });
                                                $("#area5").empty();
                                                $("#area5").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area5").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });
                                                $("#area6").empty();
                                                $("#area6").append('<option value="">Select Area</option>');
                                                $.each(res, function (index, value) {
                                                    $("#area6").append('<option value="' + value.name + '">' + value.name + '</option>');
                                                });

                                                $("#center1").empty();
                                                $("#center1").append('<option value="">Select Center</option>');
                                                $("#center2").empty();
                                                $("#center2").append('<option value="">Select Center</option>');
                                                $("#center3").empty();
                                                $("#center3").append('<option value="">Select Center</option>');
                                                $("#center4").empty();
                                                $("#center4").append('<option value="">Select Center</option>');
                                                $("#center5").empty();
                                                $("#center5").append('<option value="">Select Center</option>');
                                                $("#center6").empty();
                                                $("#center6").append('<option value="">Select Center</option>');
                                            }
                                        });
                                    }
                                    return isStepValid;
                                } else if (stepnumber === 2) {
                                    isStepValid = true;

                                    return isStepValid;
                                }
                            }
                            function validateAllSteps() {
                                var isStepValid = true;
                                return isStepValid;
                            }


                            //========================================== Wizard step validation end =========================================================

                            $("#area1").change(function () {

                                var area = this.value;
                                $("#center1").empty();
                                $("#center1").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center1").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center1").empty();
                                            $("#center1").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });
                            $("#area2").change(function () {
                                var area = this.value;

                                $("#center2").empty();
                                $("#center2").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $("#center2").empty();
                                        $("#center2").append('<option value="">Select Center</option>');
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center2").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center2").empty();
                                            $("#center2").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });
                            $("#area3").change(function () {
                                var area = this.value;

                                $("#center3").empty();
                                $("#center3").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $("#center3").empty();
                                        $("#center3").append('<option value="">Select Center</option>');
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center3").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center3").empty();
                                            $("#center3").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });
                            $("#area4").change(function () {
                                var area = this.value;

                                $("#center4").empty();
                                $("#center4").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $("#center4").empty();
                                        $("#center4").append('<option value="">Select Center</option>');
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center4").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center4").empty();
                                            $("#center4").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });
                            $("#area5").change(function () {
                                var area = this.value;

                                $("#center5").empty();
                                $("#center5").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $("#center5").empty();
                                        $("#center5").append('<option value="">Select Center</option>');
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center5").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center5").empty();
                                            $("#center5").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });
                            $("#area6").change(function () {
                                var area = this.value;

                                $("#center6").empty();
                                $("#center6").append('<option value="">Select Center</option>');
                                generateMnanagerArray();

                                var centerlist = $('#centerlist').val();
                                jQuery.ajax({
                                    type: "POST",
                                    url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_center_by_area",
                                    dataType: 'json',
                                    data: {area: area, centerlist: centerlist},
                                    success: function (res) {
                                        var number = 0;
                                        $("#center6").empty();
                                        $("#center6").append('<option value="">Select Center</option>');
                                        $.each(res, function (index, value) {
                                            number++;
                                            $("#center6").append('<option value="' + value + '">' + value + '</option>');
                                        });
                                        if (number === 0 && area) {
                                            $("#center6").empty();
                                            $("#center6").append('<option value="">Center already exist.</option>');
                                        }
                                    }
                                });
                            });


                            $("#center1").change(function () {
                                generateMnanagerArray();

                            });
                            $("#center2").change(function () {
                                generateMnanagerArray();
                            });
                            $("#center3").change(function () {
                                generateMnanagerArray();
                            });
                            $("#center4").change(function () {
                                generateMnanagerArray();
                            });
                            $("#center5").change(function () {
                                generateMnanagerArray();
                            });
                            $("#center6").change(function () {
                                generateMnanagerArray();
                            });


                            function generateMnanagerArray() {
                                var manager_list = [];
                                for (var i = 1; i < 7; i++) {
                                    var center = "#center" + i;
                                    var value = $(center).val();
                                    if (value) {
                                        manager_list.push(value);
                                    }

                                }
                                if (manager_list.length > 0) {
                                    $("#error_center_selection").empty();
                                } 
                                $('#centerlist').val(JSON.stringify(manager_list));
                            }
                        </script>
