{% extends 'base.html' %}

{% load static %}

{% block title %} Finished Product Dashboard | IQChem {% endblock %}

{% block content %}
<h3>FINISHED PRODUCT DASHBOARD</h3>
<p>Chemical Section Platform</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<!-- SEARCH BAR -->
<!--div class="row">
    <div class="col-sm-12 col-lg-6">
        <div>
            <form method="post" action="/finished_products/search_product_dashboard/">
                {% csrf_token %}
                <div class="input-group mb-3">
                  <input type="text" name="search_blend" class="form-control rounded-0" placeholder="Search Blend" autocomplete="off">
                  <button class="btn btn-success rounded-0" type="submit">SEARCH</button>
                </div>
            </form>
        </div>
    </div>
    <div class="col-sm-12 col-lg-6"></div>
</div>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);"-->


<div>
   <table class="table table-striped" id="myTable1">
        <thead>
          <tr>
            <th scope="col" class="mobile__hidden">DATE</th>
            <th scope="col" class="mobile__tab__heading">PRODUCT</th>
            <th scope="col" class="mobile__tab__heading">LINE/Mc.</th>
            <th scope="col" class="mobile__tab__heading">BLEND</th>
            <!--th scope="col" class="mobile__hidden">DATE BLENDED</th>
            <th scope="col" class="mobile__tab__heading">RESULT</th-->
            <th scope="col" class="mobile__tab__heading">STATUS</th>
          </tr>
        </thead>
        <tbody>
            {% for r in R %}  
          <tr onclick="window.location.href='/finished_products/finished_product_detail/{{r.id}}/'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
            <td class="mobile__hidden">{{r.date_time}}</td>
            <td class="mobile__text">{{r.product}}</td>
            <td class="mobile__text">{{r.line}}</td>
            <td class="mobile__text">{{r.blend_number}}</td>
            <!--td class="mobile__hidden">{{r.date_blended}}</td>
            <td class="mobile__hidden">{{r.result}}</td-->
            <td class="mobile__text">
                <i class="bi bi-droplet-fill"></i>
              {% if r.is_checked %}
                  {% if r.result == 'PASS' %}
                        <i class="bi bi-toggles" style="color:green;"></i>
                    {% elif r.result == 'FAIL' %}
                        <i class="bi bi-toggles" style="color:red;"></i>
                    {% else %}
                        <i class="bi bi-toggles"></i>
                    {% endif %}
             {% endif %}
             
              {% if r.is_approved %}
                    {% if r.is_approved_or_rejected == 'APPROVED' %}
                        <i class="bi bi-person-check-fill" style="color:green;"></i>
                    {% elif r.is_approved_or_rejected == 'REJECTED' %}
                        <i class="bi bi-person-x-fill" style="color:red;"></i>
                    {% else %}
                        <i class="bi bi-person-fill"></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 %}