{% extends 'base.html' %}

{% load static %}

{% block title %} User-Admin Dashboard | IQChem {% endblock %}

{% block content %}
<h3>USER -ADMIN RAW MATERIALS DASHBOARD</h3>
<p>Chemical Section Platform</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<div>
   <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col" class="mobile__hidden">REFERENCE</th>
            <th scope="col" class="mobile__tab__heading">MATERIAL</th>
            <th scope="col" class="mobile__hidden">SAMPLED BY</th>
            <th scope="col" class="mobile__tab__heading">SAMPLED</th>
            <th scope="col" class="mobile__hidden">QUANTITY</th>
            <th scope="col" class="mobile__tab__heading">SUPPLIER</th>
            <th scope="col" class="mobile__hidden">RESULT</th>
            <th scope="col" class="mobile__tab__heading">STATUS</th>
          </tr>
        </thead>
        <tbody>
            {% for r in R %}  
          <tr onclick="window.location.href='/useradmin/admin_raw_material_ed/{{r.id}}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
            <td class="mobile__hidden">{{r.reference}}</td>
            <td class="mobile__text">{{r.material}}</td>
            <td class="mobile__hidden">{{r.sampled_by}}</td>
            <td class="mobile__text">{{r.date_sampled}}</td>
            <td class="mobile__hidden">{{r.quantity}}</td>
            <td class="mobile__text">{{r.supplier}}</td>
            <td class="mobile__hidden">{{r.result}}</td>
            <td class="mobile__text">
              {% if r.status == 'sampled' %}
                  <i class="bi bi-droplet-fill"></i>
              {% elif r.status == 'analysed' %}
                  <i class="bi bi-droplet-fill"></i>
                  <i class="bi bi-toggles"></i>
              {% elif r.status == 'checked' %}
                  <i class="bi bi-droplet-fill"></i>
                  <i class="bi bi-toggles"></i>
                    {% if r.result == 'PASS' %}
                        <i class="bi bi-person-check-fill" style="color:green;"></i>
                    {% elif r.result == 'FAIL' %}
                        <i class="bi bi-person-x-fill" style="color:red;"></i>
                    {% else %}
                        <i class="bi bi-person-fill"></i>
                    {% endif %}
              {% endif %}
              <span class="mobile__hidden"><small>{{r.status}}</small></span>

                {% if r.has_dispute == True %}
                        {% if r.dispute_status == 'open' %}
                        <i class="bi bi-patch-question-fill" style="color:red;"></i>
                        {% elif r.dispute_status == 'closed' %}
                        <i class="bi bi-patch-question-fill" style="color:green;"></i> 
                        {% endif %}
                {% endif %}
              </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if R.has_other_pages %}
          <ul class="pagination">
            {% if R.has_previous %}
              <li class="page-item"><a href="?page={{ users.previous_page_number }}"  class="page-link">&laquo;</a></li>
            {% else %}
              <li class="page-item disabled"><span>&laquo;</span></li>
            {% endif %}
            {% for i in R.paginator.page_range %}
              {% if R.number == i %}
                <li class="active page-link">{{ i }}></li>
              {% else %}
                <li class="page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
              {% endif %}
            {% endfor %}
            {% if R.has_next %}
              <li class="page-item"><a href="?page={{ users.next_page_number }}" class="page-link">&raquo;</a></li>
            {% else %}
              <li class="disabled page-item"><span>&raquo;</span></li>
            {% endif %}
          </ul>
        {% endif %}
<br><br>
{% endblock %}