
<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>Executive create</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <!-- Smart Wizard -->
                        <?php echo form_open(base_url('index.php/Executive/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">
                                            Area Selection
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#step-3">
                                        <span class="step_no">2</span>
                                        <span class="step_descr">
                                            Plot Number Management
                                        </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="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">Area Selection</h2>

                                <div class="row">
                                    <div class="col-xs-12" id="error_area_selection"> </div>
                                    <div class="col-xs-5">
                                        <div class="form-group">
                                            <label for="sel1">Select area<samp style="color: red">*</samp></label>
                                            <select class="form-control" id="manager_not_assign" name="manager_not_assign" multiple="true" style="height:100px;">
                                                <?php foreach ($area as $row) { ?>
                                                    <option value="<?php echo $row; ?>"><?php echo $row; ?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-2" style="margin-top: 40px;text-align: center">
                                        <section>
                                            <button id="cop_pull_right" type="button" class="btn btn" style="margin-bottom: 12px;">>></button>
                                        </section>
                                        <section>
                                            <button id="cop_pull_left" type="button" class="btn btn"><<</button>
                                        </section>
                                    </div>
                                    <div class="col-xs-5">
                                        <div class="form-group">
                                            <label for="sel1"></label>
                                            <select class="form-control" id="manager_assign" name="manager_assign" multiple="true" style="height:100px;margin-top: 6px;">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="hidden" class="form-control" name="arealist" id="arealist"  placeholder="Enter allocated short leave"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="step-3">
                                <h2 class="StepTitle">Plot Number Management</h2>
                                <div class="row">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>From</th>
                                                <th>To</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php for ($x = 1; $x < 7; $x++) { ?>
                                                <tr>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="col-xs-12">
                                                                <?php echo '<input type="text" class="form-control" id="rangefrom' . $x . '" name="rangefrom' . $x . '" placeholder="" maxlength="64"/>'; ?>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="form-group">
                                                            <div class="col-xs-12">
                                                                <?php echo '<input type="text" class="form-control" id="rangeto' . $x . '" name="rangeto' . $x . '" placeholder="" maxlength="64"/>'; ?>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            <?php } ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- End SmartWizard Content -->
                        <?php echo form_close(); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="executive_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>Executive already assigned for the area. Please select different area.</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>

<!-- /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=========================================================

    $("#createform").validate({
        rules: {
            fristname: {
                required: true,
                maxlength: 50
            },
            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();
                        }
                    }
                }
            },
            rangefrom1: {
                digits: true
            },
            rangeto1: {
                digits: true
            },
            rangefrom2: {
                digits: true
            },
            rangeto2: {
                digits: true
            },
            rangefrom3: {
                digits: true
            },
            rangeto3: {
                digits: true
            },
            rangefrom4: {
                digits: true
            },
            rangeto4: {
                digits: true
            },
            rangefrom5: {
                digits: true
            },
            rangeto5: {
                digits: true
            },
            rangefrom6: {
                digits: true
            },
            rangeto6: {
                digits: true
            }
        },
        messages: {
            username: {
                remote: "The email has been used!"
            }

        },
        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()) {
            jQuery.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>" + "index.php/Executive/area_exist",
                dataType: 'json',
                data: {area: $('#arealist').val()},
                success: function (res) {
                    if (res.STATUS === 'TRUE') {
                        $("#createform").submit();
                    } else {
                        $('#executive_error').modal({backdrop: 'static', keyboard: false});
                    }

                }
            });
        }
    }


    function validateSteps(stepnumber) {
        var isStepValid = false;
        if (stepnumber === 1) {
            if ($('#fristname').valid() & $('#username').valid() & $('#password').valid() & $('#conpassword').valid()) {
                isStepValid = true;
            }
            return isStepValid;
        } else if (stepnumber === 2) {
            var list = $("#arealist").val();
            if (list) {
                var res1 = jQuery.parseJSON(list);
                if (res1.length > 0) {
                    $("#error_area_selection").empty();
                    isStepValid = true;
                } else {
                    $("#error_area_selection").empty();
                    $("#error_area_selection").append('<div class = "alert alert-error" style="padding: 10px;">'
                            + '<strong>Error!</strong>  Please select area! </span>'
                            + '</div>');
                }

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


            return isStepValid;
        } else if (stepnumber === 3) {
            if ($('#rangefrom1').valid() & $('#rangeto1').valid() & $('#rangefrom2').valid() & $('#rangeto2').valid() & $('#rangefrom3').valid() & $('#rangeto3').valid() & $('#rangefrom4').valid() & $('#rangeto4').valid() & $('#rangefrom5').valid() & $('#rangeto5').valid() & $('#rangefrom6').valid() & $('#rangeto6').valid()) {
                isStepValid = true;
            }
            return isStepValid;
        }
    }
    function validateAllSteps() {
        var isStepValid = true;
        return isStepValid;
    }


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


    //========================================== Check box checked start=============================================



    $('#cop_pull_right').click(function () {
        var selectedItem = $("#manager_not_assign option:selected");
        $("#manager_assign").append(selectedItem);
        selectedItem.prop("selected", false);
        generateMnanagerArray();
    });
    $('#cop_pull_left').click(function () {
        var selectedItem = $("#manager_assign option:selected");
        $("#manager_not_assign").append(selectedItem);
        selectedItem.prop("selected", false);
        generateMnanagerArray();
    });
    function generateMnanagerArray() {
        var manager_list = [];
        $("#manager_assign option").each(function () {
            manager_list.push($(this).val());
        });
        if (manager_list.length > 0) {
            $("#error_area_selection").empty();
        }
        $('#arealist').val(JSON.stringify(manager_list));
    }




//    $("#fristname").on('input', function () {
//
//        var start = this.selectionStart,
//                end = this.selectionEnd;
//        this.value = this.value.toUpperCase();
//        this.setSelectionRange(start, end);
//    });
//    $("#lastname").on('input', function () {
//
//        var start = this.selectionStart,
//                end = this.selectionEnd;
//        this.value = this.value.toUpperCase();
//        this.setSelectionRange(start, end);
//    });
</script>
