<!--
- Sebelum di submit, lakukan validasi terlebih dahulu dengan cara : validateUser();
- Setelah selesai di validasi, lakukan penyimpanan user dengan cara : saveUser();
-->

<style type="text/css">
    .error{
        color   : red;
    }
</style>
<form class="form-horizontal" id="form-user" name="form-user">
    <div class="modal-body">
        <div id="alert-form"></div>
        <input type="hidden" name="token" value="<?php echo isset($this->token) ? $this->token : ''; ?>">
        <div class="form-group row">
            <label for="code" class="col-sm-3 col-form-label float-right">Kode</label>
            <div class="col-sm-9">
                <input type="hidden" id="user_id" name="user_id">
                <input type="text" class="form-control" id="code" name="code" placeholder="Kode user">
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-sm-3 col-form-label">Nama</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="name" name="name" placeholder="Nama user">
            </div>
        </div>
        <div class="form-group row">
            <label for="email" class="col-sm-3 col-form-label">Email</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="email" name="email" placeholder="Email user">
            </div>
        </div>
        <div class="form-group row">
            <label for="language" class="col-sm-3 col-form-label">Bahasa</label>
            <div class="col-sm-9">
                <select class="form-control" id="language" name="language">
                    <?php echo($this->languages->toOptions()); ?>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="user_status_id" class="col-sm-3 col-form-label">Status</label>
            <div class="col-sm-9">
                <select class="form-control" id="user_status_id" name="user_status_id">
                    <?php echo($this->statuses->toOptions()); ?>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="auth_type_id" class="col-sm-3 col-form-label">Jenis Login</label>
            <div class="col-sm-9">
                <select class="form-control" id="auth_type_id" name="auth_type_id">
                    <?php echo($this->authentications->toOptions()); ?>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="password" class="col-sm-3 col-form-label">Password</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <span class="fa fa-eye-slash" data-input="password"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="retype_password" class="col-sm-3 col-form-label">Retype Password</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <input type="password" class="form-control" id="retype_password" name="retype_password" placeholder="Retype Password">
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <span class="fa fa-eye-slash" data-input="retype_password"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">

    </div>
</form>

<script type="text/javascript">
    $("#form-user").submit(function (e) {
        e.preventDefault(); // avoid to execute the actual submit of the form.
        $("#btn-save").html('<i class="fa fa-spinner fa-spin fa-1x fa-fw"></i> <?php echo $this->translate('Saving') ?>');
        $("#btn-save").attr('disabled','true');

        var data = {
            "code": jQuery("#code").val(),
            "name": jQuery("#name").val(),
            "email": jQuery("#email").val(),
            "language": jQuery("#language").val(),
            "user_status_id": jQuery("#user_status_id").val(),
            "auth_type_id": jQuery("#auth_type_id").val(),
            "token": $("[name=\"token\"]").val()
        };

        data.password = jQuery("#password").val();
        data.retype_password = jQuery("#retype_password").val();

        var form = new FormData();

        form.append("data", JSON.stringify(data));

        jQuery.ajax({
            "async": true,
            "crossDomain": true,
            "url": "<?php echo $this->basePath(); ?>/actor/user/register",
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
                "postman-token": "99b51967-aa46-d338-5884-66cd3d077b0f"
            },
            "processData": false,
            "contentType": false,
            "mimeType": "multipart/form-data",
            "dataType": "json",
            "data": form
        }).done(function (response) {
            $("#btn-save").text('<?php echo $this->translate('Save') ?>');
            $("#btn-save").removeAttr('disabled');

            if (response.code != 0) {
                jQuery('#alert-form').neuronAlert(response.info, 'danger');
            } else {
                resetFormUser();
                jQuery('#alert-grid').neuronAlert(response.info, 'success');
                $('#grid-user').DataTable().ajax.reload();
            }
        });
    });

    jQuery.validator.addMethod("alphanumeric", function(value, element) {
        return this.optional(element) || /^[a-z 0-9]+$/i.test(value);
    }, "Please insert letters and numbers only");

    var formUserValidator   = $("#form-user").validate({
        rules               : {
            code                : {
                required        : true,
                alphanumeric    : true,
            },
            name                : "required",
            email               : "required",
            password            : "required",
            retype_password     : {
                required        : true,
                equalTo         : "#password"
            },
        },
        messages            : {
            code            : {
                required    : "<?php echo $this->translate('Code is required!') ?>",
                alphanumeric: "<?php echo $this->translate('Please insert alphanumeric only') ?>"
            },
            name            : "<?php echo $this->translate('Name is required!') ?>",
            email           : "<?php echo $this->translate('E-Mail is required!') ?>",
            password        : "<?php echo $this->translate('Password is required!') ?>",
            retype_password : {
                required    : "Retype Password is requried!",
                equalTo     : "Retype Password didnt match!"
            }
        },
        errorPlacement      : (error,element) => {
            elementName     = element.attr('name');
            if(elementName == 'password' || elementName == 'retype_password'){
                appendEl        = element.parent();
                error.insertAfter(appendEl);
            }else{
                error.insertAfter(element);
            }
        }
    });

    let validateUser = () => {
        validate        = formUserValidator.form();
        return valdate;
    }

    let saveUser = () => {
        validate        = formUserValidator.form();
        if(!validate){
            return false;
        }

       var data = {
            "code": jQuery("#code").val(),
            "name": jQuery("#name").val(),
            "email": jQuery("#email").val(),
            "language": jQuery("#language").val(),
            "user_status_id": jQuery("#user_status_id").val(),
            "auth_type_id": jQuery("#auth_type_id").val(),
            "token": $("[name=\"token\"]").val()
        };

        data.password = jQuery("#password").val();
        data.retype_password = jQuery("#retype_password").val();

        var form = new FormData();

        form.append("data", JSON.stringify(data));

        jQuery.ajax({
            "async": true,
            "crossDomain": true,
            "url": "<?php echo $this->basePath(); ?>/actor/user/register",
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
                "postman-token": "99b51967-aa46-d338-5884-66cd3d077b0f"
            },
            "processData": false,
            "contentType": false,
            "mimeType": "multipart/form-data",
            "dataType": "json",
            "data": form
        }).done(function (response) {
            console.log(response);
            return response;
        });
    }


    /*Show password*/
    $(".fa-eye-slash").click(function (e) {
        var l = $(this);
        if(l.hasClass('peeked')){
            l.addClass('fa-eye-slash').removeClass('fa-eye peeked');
            l.closest('input').attr('type', 'password');
            $('#' +l.attr('data-input')).attr('type', 'password');
        } else {
            l.addClass('fa-eye peeked').removeClass('fa-eye-slash');
            l.closest('input').attr('type', 'text');
            $('#' +l.attr('data-input')).attr('type', 'text');
        }
    });
</script>