<?= $this->element('user_management_nav', array('title' => __('Add User'), 'permissions' => $user_permission,
    'showNavigationButtons' => true)); ?>
<style type="text/css">
    .error-message {
        color: #ff0000;
    }

    .custom-header {
        text-align: center;
        padding: 3px;
        background: #3c8dce;
        color: #fff;
    }

</style>
<div class="box box-primary">
    <!-- /.box-header -->
    <?= $this->Form->create($cmsuser, array('enctype' => 'multipart/form-data', 'id' => 'member-add-form')) ?>
    <div class="box-body">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <?php echo $this->Form->input('language', array('options' => LANGUAGES, 'class' => 'form-control')); ?>
                </div>
                <!-- /.form-group -->
                <div class="form-group">
                    <?php echo $this->Form->input('username', array('class' => 'form-control required', 'placeholder' => __('Username'))); ?>
                </div>
                <!-- /.form-group -->
                <div class="form-group">
                    <?php echo $this->Form->input('password', array('class' => 'form-control required', 'placeholder' => __('Password'))); ?>
                </div>
                <!-- /.form-group -->
                <div class="form-group">
                    <?php echo $this->Form->input('retype_password', array('label' => __('Retype Password'), 'type' => 'Password', 'class' => 'form-control required', 'placeholder' => __('Retype Password'))); ?>
                </div>
                <!-- /.form-group -->
                <div class="form-group">
                    <?php echo $this->Form->input('email', array('class' => 'form-control required', 'placeholder' => __('Email'))); ?>
                </div>
                <div class="form-group">
                    <?php echo $this->Form->input('phone', array('type' => 'text', 'class' => 'form-control required', 'placeholder' => __('Phone'))); ?>
                </div>

                <!-- /.form-group -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <?php echo $this->Form->input('img_path', array('type' => 'file', 'label' => __('Profile Picture'), 'id' => 'exampleInputFile')); ?>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <?php echo $this->Form->input('logo_path', array('type' => 'file', 'label' => __('Logo'))); ?>
                        </div>
                    </div>
                </div>

                <!-- /.form-group -->
            </div>

        </div>
        <!-- /.row -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <?= $this->Form->button(__('Submit'), ['class' => 'btn btn-primary']) ?>
    </div>
    <?= $this->Form->end() ?>
</div>
<style type="text/css">
    .error-message {
        color: #ff0000;
    }
</style>
<script src="<?php echo $this->request->webroot; ?>js/jsvalidate/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {

        $('input[name="retype_password"]').change(function () {

            if ($(this).val() != $("#password").val()) {
                var nextElement = $(this).next();
                if (!nextElement.hasClass("error-message")) {
                    $(this).after('<div class="error-message">Passwords do not match</div>');
                }
            } else {
                $('.error-message').hide();
            }
        });

    });

    $('#member-add-form').validate({
        rules: {
            'username': 'required',
            'password': 'required',
            'retype_password': {'required': true, 'equalTo': "#password"},
            'email': {'required': true, 'email': true},
            'phone': 'required'
        },
        messages: {

            'username': {
                required: "Please enter user name"
            },
            'password': {
                required: "Please enter password"
            },
            'retype_password': {
                required: "Please confirm your password",
                equalTo: "Passwords do not match"
            },
            'email': {
                required: "Please enter email",
                email: "Please enter a valid email address"
            },
            'phone': {
                required: "Please enter phone number"
            },

        },
        highlight: function (element) {
            $(element).parent().addClass("has-error");
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
</script>