<% 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
      }
    },
    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"
      }
    }
  });
</script>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Register 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">Add</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST" action="/user/signup" id=signup>
      <div class="box-header with-border">
        <h3 class="box-title">New Partner</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="<%= flash.data_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="<%= flash.data_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="address">Address</label>
              <input name="address" value="<%= flash.data_address || '' %>" id="address" class="form-control"
                placeholder="Address" type="text" required>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_address')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_address %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-6">
              <label for="phone">Phone</label>
              <input name="phone" value="<%= flash.data_phone || '' %>" id="phone" class="form-control"
                placeholder="Phone" type="number" required>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_phone')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_phone %>
              </h5>
              <% } %>
            </div>
          </div>

          <div class="col-md-12">
            <div class="form-group col-md-4">
              <label for="city">City</label>
              <input name="city" value="<%= flash.data_name || '' %>" id="city" class="form-control" placeholder="City"
                type="text" required>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_city')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_city %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label for="country">Country</label>
              <select name="country" value="<%= flash.data_country || '' %>" id="country" class="form-control" required>
                <option value="">Select Country</option>
                <%
                    for(let c in countryList) { %>
                <option value="<%= countryList[c]._id %>">
                  <%= countryList[c].name %>
                </option>
                <%}
                  %>
                </option>
              </select>
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_country')) { %>
              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                <%= flash.errors_country %>
              </h5>
              <% } %>
            </div>
            <div class="form-group col-md-4">
              <label for="name">Zip Code</label>
              <input name="zipcode" value="" id="zipcode" class="form-control" placeholder="Zipcode" type="text">
              <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
              
            </div>
          </div>

          <input name="password" id="password" type="hidden" value="999test666">
          <input id="cpassword" type="hidden" value="999test666">

          <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) { %>
                <option value="<%= roles[r]._id %>">
                  <%= 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 %>">
                  <%= 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>
          <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 -->