
<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 viewed</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content form-horizontal form-label-left">
                            <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"  disabled="true" 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"  disabled="true" 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"  disabled="true" 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="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"  disabled="true" value="<?php echo $user['username']; ?>" placeholder="Enter Username" maxlength="50"/>
                                        </div>
                                    </div>

                                </div>
                                <div id="step-2">
                                    <h2 class="StepTitle">Area Selection</h2>
                                    <div class="row">
                                        <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_not_select 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;">
                                                    <?php foreach ($area_select as $row) { ?>
                                                        <option value="<?php echo $row; ?>"><?php echo $row; ?></option>
                                                    <?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" 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 $x = 1; ?>
                                                <?php foreach ($range as $row) { ?>
                                                    <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" value="' . $row->from . '" disabled="true"/>'; ?>
                                                                </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 . '" value="' . $row->to . '" maxlength="64" disabled="true"/>'; ?>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <?php $x++ ?>
                                                <?php } ?>

                                                <?php for ($y = $x; $y < 7; $y++) { ?>
                                                    <tr>
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="col-xs-12">
                                                                    <?php echo '<input type="text" class="form-control" id="rangefrom' . $y . '" name="rangefrom' . $y . '" placeholder="" maxlength="64" disabled="true"/>'; ?>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="col-xs-12">
                                                                    <?php echo '<input type="text" class="form-control" id="rangeto' . $y . '" name="rangeto' . $y . '"  maxlength="64" disabled="true"/>'; ?>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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=========================================================


    $(document).ready(function () {
        $(".buttonFinish").remove();
    });
    $("#createform").validate({
        rules: {
            fristname: {
                required: true,
                maxlength: 50
            },
            password: {
                required: true,
                minlength: 5,
                maxlength: 5
            },
            conpassword: {
                required: true,
                minlength: 5,
                maxlength: 5,
                equalTo: "#password"
            },
            username: {
                required: true,
                minlength: 3,
                maxlength: 45
            },
            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: {
            email: {
                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()) {
            $('#createform').submit();
        }
    }


    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) {

            isStepValid = true;

            return isStepValid;
        } else if (stepnumber === 3) {
            $('.buttonFinish').prop('disabled', true);
//            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;
    }



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