{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>Special User</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94%!important;
  }
</style>

{% endblock Style %}

{% block MainContent %}


{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}



<div class="contents">


<div class="table-area">

  <!-- table-title -->
  <div class="table-title">
    <div class="row">
      <div class="col-md-4">
        <div class="depertment-name">
          <h4> User Role Switch</h4>
        </div>
      </div>
      <div class="col-md-4">
        {% if request.user.is_superuser == True%}
        <h6>Supper User<h6>
    
        {% elif request.user.user_type == 'Mother_Organization_admin'%} 
        <h6>Group:{{request.user.mother_organization}} &nbsp; &nbsp; &nbsp;User Type: Mother Admin<h6>

        {% elif request.user.user_type == 'Sister_Organization_admin'%} 
        <h6>Sister Concerns:{{request.user.sister_organization}} &nbsp; &nbsp; &nbsp;User Type: Sister Admin<h6>
        {% elif request.user.user_type == 'Branch'%} 
          <h6>Branch:{{request.user.branch}} &nbsp; &nbsp; &nbsp;User Type: Branch Admin<h6>
        {% elif request.user.user_type == 'Regular'%} 
        <h6>Branch:{{request.user.branch}} &nbsp; &nbsp; &nbsp;User Type: Regular user<h6>
        {% endif %}
      </div>
      {% if request.user.special_users == True%}
      <div class="col-md-4">
        <div class="add-btn">
        <form action="{% url 'role-create-user-special' %}" method="POST">
            {% csrf_token %}
            <button type="submit" class="cus-btn" >Submit</button>
        </div>
      </div>
      {% endif %} 
    </div>
  </div>

{% if user_list %}
  <!-- table-title -->
    <div class="table-header">
      <div class="row">
        <div class="col-md-3">
          <div class="data-search">
           
          </div>
      </div>
    </div>
    <div class="tables table-responsive" id="deptList">
<div class="row">
  <div class="col-md-6">
    <table class="table  table-striped table-hover">
      <thead>
        <tr>
          <th class="text-center" colspan="8">Group</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Role</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
      {% for user in user_list  %}
      
      {% if user.role == 'mother_admin' %}
          <tr>
            <td>{{ user.mother_organization }}</td>
            <td>{{ user.role }}</td>
            <td>
              <ul class="action">

                <li>
                  <input class="form-check-input" onchange="check(this)" type="checkbox" name="user_role" value="{{user.id}}" id="flexCheckDefault">
                </li>
              </ul>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
      </tbody>
  </table>
  </div>
  <div class="col-md-6">
    <table class="table  table-striped table-hover">
      <thead>
        <tr>
          <th class="text-center" colspan="8">Sister Concerns</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Role</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
      {% for user in user_list  %}
      {% if user.role == 'sister_admin' %}
      
          <tr>
            <td>{{ user.sister_organization }}</td>
            <td>{{ user.role }}</td>
            <td>
              <ul class="action">

                <li>
                  <input class="form-check-input" onchange="check(this)" type="checkbox" name="user_role" value="{{user.id}}" id="flexCheckDefault">
                </li>
                 
              </ul>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
      </tbody>
  </table>
  </div>
  <div class="col-md-1">  </div>
  <div class="col-md-10">
    <table class="table  table-striped table-hover">
      <thead>
        <tr>
          <th class="text-center" colspan="8">Branch</th>
        </tr>
        <tr>
    
          <th>Name</th>
          <th>Role</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
      {% for user in user_list  %}

        {% if user.role == 'branch_admin'  or user.role == 'regular_user' %}
          <tr>
       
        
            <td>{{ user.branch }}</td>
            <td>{{ user.role }}</td>
            <td>
              <ul class="action">
                <li>
                  <input class="form-check-input" onchange="check(this)" type="checkbox" name="user_role" value="{{user.id}}" id="flexCheckDefault">
                </li>
                 
              </ul>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
      </tbody>
  </table>
  </div>
</form>
  <div class="col-md-1">  </div>
</div>

</div>
</div>
{% endif %}
{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}
<script>
  function check(clickedCheckbox) {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(function(checkbox) {
          if (checkbox !== clickedCheckbox) {
              checkbox.checked = false;
          }
      });
  }
  </script>
<script type=text/javascript>
  var redirect_url = "{% url 'department-index' %}"
  var load_sister_organization_url = "{% url 'sister-organization-load' %}"
  var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  var ajax_search_url = "{% url 'dept_search' %}"
</script>
<script src="{% static 'js/hr_app/department/index.js' %} "></script>

{% endblock JS %}