{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %} User Permissions | IQChem {% endblock %}

{% block content %}

{% if all_profiles %}
<div class="mx-1 my-2">
  <h3 class="p-2" style="background-color:#301934;color:white;">USERS PROFILE DETAILS...</h3>
  <div class="row">
    <div class="col-sm-12 col-lg-12">
        <div class="p-2" style="overflow-x:scroll">
            <table class="table  table-sm table-striped table-hover table-bordered" id="myTable1">
                <thead>
                    <tr class="text-center" style="background-color:#301934;color:white;">
                        <th></th>
                        <th>USER</th>
                        <th class="pr-0">ROLE</th>
                        <th>CAN INITIATE</th>
                        <th>UNIT HEAD</th>
                        <th>CAN APPROVE</th>
                        <th>ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in all_profiles %}
                        <tr class="text-center">
                            <td>{{ forloop.counter }}</td>
                            <td>{{ p.fname }} {{ p.lname }}</td>
                            <td class="pr-0">{{ p.role }}</td>
                            <td>{% if p.user_can_initiate_blend %}<i class="bi bi-check-square-fill" style="color:green;"></i>{% else %}<i class="bi bi-x-square-fill" style="color:red;"></i>{% endif %}</td>
                            <td>{% if p.user_can_unit_head_check_blend %}<i class="bi bi-check-square-fill" style="color:green;"></i>{% else %}<i class="bi bi-x-square-fill" style="color:red;"></i>{% endif %}</td>
                            <td>{% if p.user_can_approve_blend %}<i class="bi bi-check-square-fill" style="color:green;"></i>{% else %}<i class="bi bi-x-square-fill" style="color:red;"></i>{% endif %}</td>
                            <td>
                                <i class="bi bi-pencil-square btn btn-success p-1" onclick="handleUserPermUpdate('{{update_url}}', {{p.id}})"></i>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-sm-12 col-lg-0">
        
    </div>
  </div>

<hr>
<a href="/" class="btn btn-dark rounded-0 shadowed" style="background-color: #0c031a;color:white;">BACK</a>
<a href="/useradmin/" class="btn btn-primary rounded-0 shadowed">PROFILE</a>
<!--MODAL STARTS-->
<!-- Modal -->
<div class="modal fade rounded-0" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" id='perms_dialog'>
      <div class="modal-content">
        <div class="modal-header" style="background-color: #0c031a;color:white;">
          <h1 class="modal-title fs-5" id="exampleModalLabel">UPDATE USER PROFILE PERMISSIONS..</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>
  
<!--MODAL ENDS-->

{% else %}
<h3>NO PROFILE FOUND...</h3>

{% endif %}
</div>

    <script>
        function handleUserPermUpdate(url, id){
                    $.ajax({
                        url: `${url}${id}`,
                        error: err => {
                            console.log()
                            alert("An error occured")
                        },
                        success: function(resp) {
                            if (resp) {
                                $('#perms_dialog .modal-body').html(resp)
                                $('#exampleModal').modal('show')
                            }
                        }
                    })
        }
    </script>
    
    
{% endblock %}