{% extends 'base.html' %}

{% load static %}

{% block title %} Single Material Report | IQChem {% endblock %}

{% block content %}
{% if R %}
<h3 class="mt-3">{{mat|upper}} Report for range <strong>{{start_date}}</strong> to <strong>{{end_date}}</strong></h3>
{% else %}
<h3 class="mt-3">SINGLE MATERIAL REPORT</h3>
{% endif %}

<p>Chemical Section Platform</p>
<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="material_select_input">
                <label class="form-label">Material</label>
                
            </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>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        
        {% if R %}
            <button type="button" id="export_btn" class="btn btn-outline-primary" onclick="export_data()">EXPORT</button>
        {% endif %}
</form>
{% if R %}
<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__hidden">TECHNOLOGIST</th>
            <th scope="col" class="mobile__tab__heading">STATUS</th>
          </tr>
        </thead>
        <tbody>
            {% for r in R %}  
          <tr onclick="window.location.href='/material_info/?ref={{r.reference}}'" 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__hidden">{{r.technologist}}</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>
    {% endif %}
      
      {% if data %}
        <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            <h5 class="mb-0"><strong>{{k|upper}}</strong> REPORT</h5>
            <p class="mb-0">Total : {{data.count}}</p>
            <p class="mb-0">Total Passed : {{data.pass}}</p>
            <p class="mb-3">Total Failed : {{data.fail}}</p>

             <p class="mb-1"><strong>SUPPLIERS DETAILS</strong></p>
            <ol>
                {% for a,b in data.suppliers.items %}
                <li>
                    <p class="mb-1">{{a|upper}}</p>
                    <p class="mb-1"><small class="mb-1">Supplies : {{b.count}}</small></p>
                    <p class="mb-1"><small class="mb-1">Passed : {{b.pass}}</small></p>
                    <p class="mb-1"><small class="mb-1">Failed : {{b.fail}}</small></p>
                    <p class="mb-1"><small class="mb-1">Disputes observed</small></p>
                    {% if b.disputes|length > 0 %}
                        <ul>
                            {% for d in  b.disputes %}
                                <li class="mb-1">{{d}}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                    <p class="mb-1"><small>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;No disputes was raised on this material</small></p>
                    {% endif %}
                    
                </li>
                
                {% endfor %}
            </ol>
      {% else %}
            <p>NO INFORMATION TO DISPLAY</p>
            <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
      {% endif %}
<br><br><br>
<script>
    $(document).ready(function(){
        //var mats = '{{mats|safe}}';

        $.get('/report/material_list/', function(data, status){
            console.log("Data: " + data + "\nStatus: " + status);
            if(status === 'success'){
                var row_select = '<select class="form-select" name="material" required><option selected></option>'
                for (var key in data) {
                    row_select += `<option value="${data[key]}">${data[key]}</option>`
                        }
                row_select += '</select>';
                $('#material_select_input').append(row_select);
            }
        })
    })
</script>

<script>
    function export_data(){
        if (confirm('Do you want to export to Excel?')){
            
            document.getElementById("export_btn").innerText = 'Please wait';
            var start_date = "{{start_date|safe}}"
            var end_date = "{{end_date|safe}}"
            var mat = "{{mat|safe}}"
      
      $.get(`/report/single_material_api/?start_date=${start_date}&end_date=${end_date}&material=${mat}`, function(data, status){
        console.log("Data: " + data + "\nStatus: " + status);
        if(status === 'success'){
          window.location.href = data;
        }
        document.getElementById("export_btn").innerText = 'EXPORT';
      //});
      //document.getElementById("ranged__data__btn").innerText = 'Ranged Data';
        })
        }else{
            event.stopPropagation();
            event.preventDefault();
        };
    }
</script>
{% endblock %}