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


        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">

                <?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 } ?>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Supervisor edit</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <!-- Smart Wizard -->
                        <?php echo form_open(base_url('index.php/Supervisor/edited'), 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"  value="<?php echo $user['firstname'] ?>" 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" value="<?php echo $user['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" value="<?php echo $user['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"> 
                                            <option value="">Select executive</option>
                                            <?php foreach ($all_executive as $row) { ?>
                                                <?php if (($row->username) == $executive['username']) { ?>
                                                    <option value="<?php echo $row->username; ?>" selected="selected"><?php echo $row->firstname . ' ' . $row->lastname; ?></option>
                                                <?php } else { ?>
                                                    <option value="<?php echo $row->username; ?>"><?php echo $row->firstname . ' ' . $row->lastname; ?></option>
                                                <?php } ?>

                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="hidden" class="form-control" id="username" name="username" placeholder="Enter Username" value="<?php echo $user['username'] ?>" maxlength="50"/>
                                    </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 ($y = 1; $y < 7; $y++) { ?>
                                                <tr>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="col-xs-12">
                                                                <?php echo '<select class="form-control" id="area' . $y . '" name="area' . $y . '">'; ?>
                                                                <option value=""> Select Area</option>   

                                                                </select>
                                                            </div>
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <div class="form-group">
                                                            <div class="col-xs-12">
                                                                <?php echo '<select class="form-control" id="center' . $y . '" name="center' . $y . '">'; ?>
                                                                <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>
                        <!-- End SmartWizard Content 
                        <?php echo form_close(); ?>
                        <!-- /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=========================================================
                            $("#centerlist").val('<?php echo $center_select_list ?>');
//                            
                            $("#createform").validate({
                                rules: {
                                    fristname: {
                                        required: true,
                                        maxlength: 50
                                    },
                                    executive: {
                                        required: true
                                    }
                                },
                                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_supervisor_edit",
                                                dataType: 'json',
                                                data: {centerlist: $('#centerlist').val(), username: $('#username').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()) {
                                        isStepValid = true;
                                        var executive = $("#executive").val();
                                        var username = $("#username").val();
                                        jQuery.ajax({
                                            type: "POST",
                                            url: "<?php echo base_url(); ?>" + "index.php/Supervisor/get_executive_area_edit",
                                            dataType: 'json',
                                            data: {executive: executive, username: username},
                                            success: function (res) {

                                                console.log(res);

                                                $("#centerlist").val(res.center);
                                                var x = 1;
                                                $.each(res.details, function (index, value) {
                                                    var area = "#area" + x;
                                                    $.each(res.area, function (index, value1) {
                                                        if (value1.name === value.area) {
                                                            $(area).append('<option value="' + value1.name + '" selected="selected">' + value1.name + '</option>');
                                                        } else {
                                                            $(area).append('<option value="' + value1.name + '">' + value1.name + '</option>');
                                                        }

                                                    });

                                                    var center = "#center" + x;

                                                    $.each(value.centerlist, function (index, value1) {
                                                        if (value1 === value.center) {
                                                            $(center).append('<option value="' + value1 + '" selected="selected">' + value1 + '</option>');
                                                        } else {
                                                            $(center).append('<option value="' + value1 + '">' + value1 + '</option>');
                                                        }

                                                    });
                                                    x++;
                                                });
                                                for (var i = x; i < 7; i++) {
                                                    var area = "#area" + i;
                                                     var center = "#center" + i;
                                                    $(area).empty();
                                                    $(area).append('<option value="">Select Area</option>');
                                                    $(center).empty();
                                                    $(center).append('<option value="">Select Center</option>');
                                                    $.each(res.area, function (index, value1) {
                                                        $(area).append('<option value="' + value1.name + '">' + value1.name + '</option>');
                                                    });
                                                }

                                            }


//                                                $("#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>
