{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Report | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
{% if start_date %}
    <p>Blend Report for {{product}}, from {{start_date}} to {{end_date}}</p>
{% else %}
    <p>Blend Report</p>
{% endif %}
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<form method="POST" action="">
    {% csrf_token %}
    <div class="row">
        <div class="col-sm-12 col-lg-3">
            <div class="mb-3" id="product__select">
                <label class="form-label">Product</label>
                <select name="product" class="select form-control" required="" id="id_product"></select>
            </div>
        </div>
        <div class="col-sm-12 col-lg-3">
            <div class="mb-3">
                <label class="form-label">Starting Date</label>
                <input class="form-control" type="date" placeholder="Starting Date" name="start_date" required>
            </div>
        </div>
        <div class="col-sm-12 col-lg-3">
            <div class="mb-3">
                <label class="form-label">Ending Date</label>
                <input class="form-control" type="date" placeholder="Ending Date" name="end_date" required>
            </div>
        </div>
        <div class="col-sm-12 col-lg-3">
            <label class="mb-2">&nbsp;</label><br>
            <button type="submit" class="btn btn-primary">GET REPORT</button>
        </div>
    </div>
        {% if data %}
            <button type="button" id="export_btn" class="btn btn-outline-primary" onclick="export_data()">EXPORT</button>
        {% endif %}
</form>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if data %}
<div>
    <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col" class="mobile__tab__heading">BLEND</th>
            <th scope="col" class="mobile__tab__heading">PRODUCT</th>
            <th scope="col" class="mobile__tab__heading">DATE</th>
            <th scope="col" class="mobile__hidden">TANK</th>
            <th scope="col" class="mobile__tab__heading">VOLUME</th>
            <th scope="col" class="mobile__hidden">BLENDER</th>
            <th scope="col" class="mobile__tab__heading">STATUS</th>
          </tr>
        </thead>
        <tbody>
            {% for r in data %}  
          <tr onclick="window.location.href='/blend_info/{{r.id}}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
            <td class="mobile__text">{{r.blend_number}} ({{r.blend_number_2}})</td>
            <td class="mobile__text">{{r.product}}</td>
            <td class="mobile__text">{{r.date_blended}}</td>
            <td class="mobile__hidden">{{r.tank_number}}</td>
            <td class="mobile__text">{{r.volume_in_ltr}}</td>
            <td class="mobile__hidden">{{r.blending_inspector}}</td>
            <td class="mobile__text">
              {% if r.status == 'BLENDED' %}
                  <i class="bi bi-droplet-fill"></i>
              {% elif r.status == 'CHECKED' %}
                  <i class="bi bi-droplet-fill"></i>
                  <i class="bi bi-toggles"></i>
              {% elif r.status == 'APPROVED' %}
                  <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 data.has_other_pages %}
          <ul class="pagination">
            {% if data.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 data.paginator.page_range %}
              {% if data.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 data.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 %}  
</div>
{% endif %}

<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>
<script>
    function export_data(){
      $.get("/report/blend_report_api/?product={{product}}&start_date={{start_date}}&end_date={{end_date}}", function(data, status){
        if (status == 'success'){
            window.location.href = data;
        }else{
            alert("Connection Error");
        }
        });
    }
</script>

<script>
    function getAllProducts(){
        var all_products = "{{all_products|safe}}";
        const usingSplit = all_products.split(',');
        var id_product = document.getElementById('id_product')
        var row = '<option value="" selected="">-</option>'
        
        usingSplit.forEach(element => {
            row += `<option value="${element}">${element}</option>`
        });

        id_product.innerHTML = row;
    }


    $(document).ready(function(){
        $("#formPage div").addClass("mb-3");
        getAllProducts();
    })
</script>
{% endblock %}