{% extends 'root.html' %}
{% load static %}
    {% block content %}
<!-- Main content -->
    <style>
    .content{
      padding: 20px;
    }
    </style>


<section class="content">
    <div class="row">
  <div class="col-xs-12">
  <div class="box">

  <div class="box-header with-border">
    <div class="box-header with-border">
      <a href="#addnew" data-toggle="modal" class="btn btn-primary btn-sm btn-flat"><i
              class="fa fa-plus"></i> Create </a>
    </div>

  <h2>Users</h2>
  </div>
  <div class="box-body">
    <table id="example1" class="table table-bordered">
        <thead>
            <th>Username</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
            <th>Company</th>
            <th>Role</th>
            <th>Last Login</th>
            <th>Active</th>
            <th>Action</th>
        </thead>
        <tbody>
            {% for user in users %}
                
            <tr>
                <td>{{ user.username}}</td>
                <td>{{ user.first_name}}</td>
                <td>{{ user.last_name}}</td>
                <td>{{ user.phone}}</td>
                <td>{{ user.companyLocation.name}}</td>
                <td>{{ user.roles.name}}</td>
                <td>{{ user.last_login}}</td>
                
                {% if user.is_active == True %}
                    <td><i class="fa fa-check"></td>
                {% else %}
                    <td><i class="fa fa-times"></td>
                {% endif %}
                
                <td>
                    <button class='btn btn-success btn-sm edit btn-flat' data-id='{{ user.id }}'><i class='fa fa-edit'></i></button>
                    <button class='btn btn-danger btn-sm delete btn-flat' data-id='{{ user.id }}'><i class='fa fa-trash'></i> </button>
                </td>
            </tr>
            {% endfor %}      
  
        </tbody>
    </table>
  </div>
  </div>
  </div>
  </div>
  </section>

  <!-- Button trigger modal -->
      
    {% endblock content %}



    {% block modal %}
    <!-- Modal -->


    <div class="modal fade" id="addnew">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Create User</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'suppliers' %}">
                  {% csrf_token %}
                 
                  <div class="modal-body">
                      {% for field in form  %}
                      <div class="form-group has-feedback">
                          <span class="text-danger">{{field.errors}}</span>
                          {{field.label_tag}}
                          {{field}}
                      </div>
                      {% endfor %}
    
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>




    # Edit Modal
    <div class="modal fade" id="edit">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Edit User Details</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'updateUsers' %}">
                  {% csrf_token %}
                  <input type="hidden" class="id" id="id" name="id">
                  <div class="form-group">
                    <label for="name" class="col-sm-3 control-label">Username</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control username" id="username" name="username">
                    </div>
                </div>
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">First Name</label>
    
                  <div class="col-sm-9">
                    <input type="text" class="form-control first_name" id="first_name" name="first_name">
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Last Name</label>
    
                  <div class="col-sm-9">
                    <input type="text" class="form-control last_name" id="last_name" name="last_name">
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Phone</label>
    
                  <div class="col-sm-9">
                    <input type="text" class="form-control phone" id="phone" name="phone">
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Company Location</label>
    
                  <div class="col-sm-9">
                    <select class="form-control companyLocation" id="companyLocation" name="companyLocation">
                      {% for location in locations %}
                        <option value="{{location.id}}">{{location.name}}</option>
                      {% endfor %}
                    </select>
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Role</label>
    
                  <div class="col-sm-9">
                    <select class="form-control role" id="role" class="role" name="roles">
                      {% for role in roles %}
                        <option value="{{role.id}}">{{role.name}}</option>
                      {% endfor %}
                    </select>
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Active</label>
    
                  <div class="col-sm-9">
                    <input type="checkbox" class="is_active" id="is_active" name="is_active">
                  </div>
              </div>
                 
    
                <div class="form-group">
                  <label for="max_vote" class="col-sm-3 control-label">Superuser</label>
    
                  <div class="col-sm-9">
                    <input type="checkbox" class="is_superuser" id="is_superuser" name="is_superuser">
                  </div>
              </div>
                 
    
    
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-success btn-flat" name="edit"><i class="fa fa-check-square-o"></i> Update</button>
                </form>
          </div>
        </div>
      </div>
    </div>
    



    # Delete Modal
    <div class="modal fade" id="delete">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><b>Confirm Deletion</b></h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" method="POST" action="{% url 'deleteUsers' %}">
                  <input type="hidden" class="id" id="id" name="id">
                  {% csrf_token %}
                  <div class="text-center">
                      <p>DELETE USER </p>
                     <h4 class="bold user" id="deleteuserrole"></h4>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="submit" class="btn btn-danger btn-flat" name="delete"><i class="fa fa-trash"></i> Delete</button>
                </form>
              </div>
          </div>
      </div>
    </div>
    
    
    {% endblock modal %}




    {% block script %}
    <script>
      $(function() {
        $(document).on('click', '.edit', function(e) {
            e.preventDefault();
            $('#edit').modal('show');
            var id = $(this).data('id');
            getRow(id);
        });
  

        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            $('#delete').modal('show');
            var id = $(this).data('id');
            getRow(id);
        });
  
    });


    function getRow(id) {
        $.ajax({
            type: 'GET',
            url: "{% url 'viewUserById' %}",
            data: {
                id: id
            },
            dataType: 'json',
            success: function(response) {
                console.log(response)
                $('.id').val(response.id);
                $('.username').val(response.username);
                $('.phone').val(response.phone);
                $('.first_name').val(response.first_name);
                $('.last_name').val(response.last_name);
                $('.is_active').val(response.is_active);
                $('.is_superuser').val(response.is_superuser);
                $('.companyLocation').val(response.companyLocation);
                $('#role').val(response.role);
                $('#deleteuserrole').html(response.username);
                
                
               if (response.is_active == true) {
                    $('.is_active').prop('checked', true);
                } else {
                    $('.is_active').prop('checked', false);
                }
                
                if (response.is_superuser == true) {
                  $('.is_superuser').prop('checked', true);
              } else {
                  $('.is_superuser').prop('checked', false);
              }
            }
        });
    }

    </script>
    {% endblock script %}