{% load static %}
{% include 'dashboard/admin_dashboard/header.html' %}
{% include 'dashboard/admin_dashboard/body.html' %}
<!-- Right side column. Contains the navbar and content of the page -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div style="padding: 10px;">
      {% if messages %}
          {% for message in messages %}
          <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% endif %}" role="alert" id="success-alert">
  <!--                            <div class="alert alert-success" role="alert" id="success-alert">-->
              {{message}}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          {% endfor %}
      {% endif %}
    </div>
    <section class="content-header text-center">
      <h1>
        User Management
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">User Management</li>
      </ol>
    </section>
    <section class="content">
    <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
                <!-- general form elements -->
                <div class="box box-primary">
                  <div class="box-header">
                    <h3 class="box-title">Add User </h3>
                  </div><!-- /.box-header -->
                  <!-- form start -->
                  <form role="form" method="POST" enctype="multipart/form-data" action="">
                    {% csrf_token %}

                            <div class="form-group col-lg-6">
                                <label>First Name <span class="color_red" style="color:red">*</span></label>
                                <input type="text" name="first_name" required="" class="form-control" value="">
                            </div>
                            <div class="form-group col-lg-6">
                                <label>Last Name <span class="color_red" style="color:red">*</span></label>
                                <input type="text" name="last_name" required="" class="form-control" value="">
                            </div>
                            <div class="form-group col-lg-4">
                                <label>Email <span class="color_red" style="color:red">*</span></label>
                                <input type="email" name="email" required="" class="form-control" value="">
                            </div>
                            <div class="form-group col-lg-4">
                                <label>Employee Code <span class="color_red" style="color:red">*</span></label>
                                {% comment %} <input type="number" name="employee_code" required="" class="form-control" value="" oninput="validateNumericInput(this)"> {% endcomment %}
                                <input type="text" class="form-control" id="employee_code" placeholder="Enter Employee Code" inputmode="numeric" name="employee_code" required oninput="validateNumericInput(this)">
                            </div>
                            <div class="form-group col-lg-4">
                                <label>Password <span class="color_red" style="color:red">*</span></label>
                                <input type="password" name="password" required="" class="form-control" value="">
                            </div>
                            
                            
                            <div class="form-group col-lg-6" style="clear: both;" style="color:red">
                                <label>Company <span class="color_red" style="color:red">*</span></label>
                                <select name="company_id" id="company_id" class="form-control" required="">
                                    <option value="">-- Select Company  --</option>
                                    {% for companyes in companyes %}
                                    <option value="{{companyes.id}}">{{companyes.company_name}}</option>
                                    {% endfor%}
                                </select>
                            </div>
                            <div class="form-group col-lg-6">
                                <label>Department <span class="color_red" style="color:red">*</span></label>
                                <select name="department_id" id="department_id" class="form-control" required="">
                                    <option value="">-- Select Department --</option>    
                                    {% for departments in departmentes %}
                                    <option value="{{departments.id}}">{{departments.department_name}}</option>
                                    {% endfor%}
                                </select>
                            </div>
                            <div class="form-group col-lg-6">
                                <label>Mobile</label>
                                <input type="text" name="mobile" class="form-control" value="" minlength='10' maxlength='11' oninput="validateNumericInput(this)">
                            </div>  
                            {% comment %} <div class="form-group col-lg-6">
                                <label>Area <span class="color_red" style="color:red">*</span></label>
                                <select name="area_id" id="area_id" class="form-control" required="required" multiple>
                                    {% for area in area %}
                                    <option value="{{area.id}}">{{area.area_name}}</option>
                                    {% endfor%}
                                </select>
                            </div> {% endcomment %}
                            <div class="form-group col-lg-6">
                                <label>Location<span class="color_red" style="color:red">*</span></label>
                                <select name="location_id" id="location_id" class="form-control" required="">
                                    <option value="">-- Select Location --</option> 
                                    {% for locationes in locationes %}
                                    <option value="{{locationes.id}}">{{locationes.location_name}}</option>
                                    {% endfor%}
                                </select>
                            </div>
                            
                           <div class="form-group col-lg-12">
                                <label>Roles <span class="color_red" style="color:red">*</span></label>
                                {% comment %} <select name="roles_id" id="rolest_id" class="form-control" required=""> {% endcomment %}
                                <select name="roles_id[]" id="rolest_id_user" class="form-control" required="" multiple="multiple" >  
                                    {% for roles in roles %}
                                    <option value="{{roles.name}}">{{roles.name}}</option>
                                    {% endfor%}
                                </select>
                            </div>                       
                            <div class="form-group col-lg-12">
                                <label>Designation<span class="color_red" style="color:red">*</span></label>
                                <select name="designation_id" id="designation_id" class="form-control" required="">
                                    <option value="">-- Select Designation  --</option>
                                    {% for designation in designationes %}
                                    <option value="{{designation.id}}">{{designation.name}}</option>
                                    {% endfor%}
                                </select>
                            </div>
                            <div class="form-group col-lg-12">
                                <label>Gender <span class="color_red" style="color:red">*</span></label>
                                <select name="gender" id="gender" class="form-control" required="">
                                    <option value="">-- Select Gender --</option>    
                                    <option>Male</option>
                                    <option>Female</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-12">
                                <label>Address <span style="color:red">*</span></label>
                                <textarea class="form-control" rows="3" placeholder="Enter your address ..." name="address" required></textarea>
                            </div>

                            
                            
                            <div class="form-group col-lg-12">
                                <label for="exampleInputFile">User Image</label>
                                <input type="file" id="exampleInputFile"  name="image" class="form-control">
          <!--                      <p class="help-block">Example block-level help text here.</p>-->
                              </div> 
                            
                              <div class="form-group col-lg-12">
                                <label>Status  <span style="color:red">*</span></label>
                                <select name="status" id="status" class="form-control" required="">
                                  <option value="1">Active</option>
                                  <option value="0">Inactive</option>
                                </select>
                              </div>

                              
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    
                  </form>
                </div><!-- /.box -->


              </div>
            </div>   <!-- /.row -->
        </div>
    </section>
</div>
{% include 'dashboard/visitors_dashboard/footer.html' %}
{% comment %} <script>
    $('#area_id').multiselect({

        selectAll: true,
    
        search: true,
    
        texts: {
    
          placeholder: 'Select Area First',
    
        },
    
      });
    </script> {% endcomment %}






<script type="text/javascript">
  $(document).ready(function() {
      $('#rolest_id_user').multiselect({search: true,});
  });
</script>