{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}

{% if all_profiles %}
<div class="mx-1 my-2">
  <h3 class="p-2" style="background-color:#212529;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:#212529;color:white;">
                        <th></th>
                        <th>USER</th>
                        <th class="pr-0">ROLE</th>
                        <th colspan="4">ANALYSIS</th>
                        <th colspan="4">INSPECTION</th>
                        <th>ACTIONS</th>
                    </tr>
                    <tr style="font-size:10px;">
                        <th></th>
                        <th></th>
                        <th class="pr-0"></th>
                        <th>CAN INITIATE</th>
                        <th>CAN SUBMIT</th>
                        <th>UNIT HEAD</th>
                        <th>CAN APPROVE</th>
                        <th>CAN INITIATE</th>
                        <th>CAN SUBMIT</th>
                        <th>UNIT HEAD</th>
                        <th>CAN APPROVE</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in all_profiles %}
                        <tr style="font-size:10px;">
                            <td>{{ forloop.counter }}</td>
                            <td>{{ p.user__first_name }} {{ p.user__last_name }}</td>
                            <td class="pr-0">{{ p.role }}</td>
                            <td>{% if p.user_can_initiate %}<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_submit %}<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 %}<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 %}<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_initiate_inspection %}<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_submit_inspection %}<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_inspection %}<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_inspection %}<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({{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="/profile" 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(id){
                    $.ajax({
                        url: `/set_user_permissions_form/${id}`,
                        error: err => {
                            console.log()
                            alert("An error occured")
                        },
                        success: function(resp) {
                            if (resp) {
                                //$('#modal-dialog .modal-title').html($title)
                                $('#perms_dialog .modal-body').html(resp)
                                //if ($size != '') {
                                //    $('#uni_modal .modal-dialog').addClass($size + '  modal-dialog-centered')
                                //} else {
                                //    $('#uni_modal .modal-dialog').removeAttr("class").addClass("modal-dialog modal-md modal-dialog-centered")
                                //}
                                //$('#perms_dialog').modal({
                                //    backdrop: 'static',
                                //    keyboard: false,
                                //    focus: true
                                //})
                                $('#exampleModal').modal('show')
                                //end_loader()
                            }
                        }
                    })
        }
    </script>

    <script>
        $("#formPage").on('submit',  function() {
                    document.getElementById("submitBtn").disabled = true;
                    document.getElementById("submitBtn").innerText = 'COMPLETING REGISTRATION...';
                })
    </script>


    <script>
            $(document).ready(function(){
                var labels = document.getElementsByTagName('label');
                Array.from(labels).forEach(element => {element.innerText = element.innerText.toUpperCase() });
                $('#div_id_fname>label').text('FIRST NAME*');
                $('#div_id_lname>label').text('LAST NAME*');
            });
    </script>
{% endblock %}