<% layout('../layouts/main') -%>

<% script('https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js') -%>

<% block('custom_scripts', `
<script>
  function goBack() {
    window.history.back();
  }
  $("#signup").validate({
        errorClass: 'text-danger',
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            // password: {
            //     required: true,
            //     minlength: 5
            // },
            // cpassword: {
            //     required: true,
            //     minlength: 5,
            //     equalTo: "#password"
            // }
        },
        messages: {
            name: {
                required: "Please provide a name",
                minlength: "Your name must be at least 3 characters long"
            },
            email: {
                required: "Please provide an email",
                minlength: "Please provide a valid email"
            },
            // password: {
            //     required: "Please provide a password",
            //     minlength: "Your password must be at least 5 characters long"
            // },
            // confirm_password: {
            //     required: "Please provide a password",
            //     minlength: "Your password must be at least 5 characters long",
            //     equalTo: "Please enter the same password as above"
            // }
        }
    });
</script>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Edit User
        <!--<small>Preview</small>-->
    </h1>
    <ol class="breadcrumb">
        <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
        <!-- <li><a href="/user">User</a></li> -->
        <li class="active">Edit</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="box box-primary">
        <form role="form" class="has-validation-callback" method="POST" id=signup>
            <div class="box-header with-border">
                <h3 class="box-title">Edit User</h3>
                <input name="userType" type="hidden" value="<%= userType %>">

                <!--<div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
        </div>-->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">

                        <div class="form-group col-md-6">
                            <label for="name">Name</label>
                            <input name="name" value="<%= user.name || '' %>" id="name" class="form-control"
                                placeholder="Name" type="text" required>
                            <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_name %>
                            </h5>
                            <% } %>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="email">Email</label>
                            <input name="email" value="<%= user.email || '' %>" id="email" class="form-control"
                                placeholder="Email" type="email" required>
                            <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_email')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_email %>
                            </h5>
                            <% } %>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label for="role">Role</label>
                            <select id="role" class="form-control" name="roleId" required>
                                <%
                                for(let r in roles) { console.log("I have reached here: ", roles); %>
                                <option value="<%= roles[r]._id %>" <%-
                                    user.role.toString().includes(roles[r]._id.toString()) ? 'selected="selected"' : ''
                                    %>>
                                    <%= roles[r].name %>
                                </option>
                                <%}
                                %>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_role')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_role %>
                            </h5>
                            <% } %>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="language">Language</label>
                            <select id="language" class="form-control" name="lang" required>
                                <%
                                for(let l in lang) { %>
                                <option value="<%= lang[l]._id %>" <%-
                                    user.lang.toString().includes(lang[l]._id.toString()) ? 'selected="selected"' :
                                    '' %>>
                                    <%= lang[l].name %>
                                </option>
                                <%}
                                %>
                            </select>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_language')) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash.errors_language %>
                            </h5>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="box-footer">
                <div class="pull-left">
                    <p class="text-success">
                    </p>
                </div>
                <div class="pull-right">
                    <a onclick="goBack()" class="btn btn-primary" role="button">Cancel</a>
                    <!-- <a href="/signup" class="btn btn-primary" role="button">Submit</a> -->
                    <input name="submit" value="Submit" class="btn btn-primary" type="submit">
                </div>
            </div>
            <!--<div class="box-footer">
          Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
          the plugin.
      </div>-->
        </form>
    </div>
    <!-- /.box -->
</section>
<!-- /.content -->