{% extends 'base.html' %}

{% load static %}

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

{% block content %}
<h3>FINISHED PRODUCT PARAMETERS DASHBOARD</h3>
<p>Chemical Section Platform</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<div>
    {% if data %}
        <ol>
            {% for d in data %}
                <li id="{{d.id}}" onmouseover="showProductParams('{{d.id}}')" onmouseout="hideProductParams('{{d.id}}')">{{d.product}}</li>
            {% endfor %}
        </ol>
    {% endif %}
</div>
<br><br><br>


<script>
    function showProductParams(d){
        $(`#ul_${d}`).remove();

        $.get(`/finished_products/finished_product_parametersAPI/${d}`, function(data, status){
            //console.log("Data: " + data);
            var finished_products__box = $(`#${d}`);
            var latest__updates__box  = `<ul id="ul_${d}">`

            $.each(data, function( key, value ) {
                    //alert( key + ": " + value );
                    latest__updates__box += `<li class="mb-0">${key} = ${value}</li>`
                    
                });
                finished_products__box.append(latest__updates__box)
  });
    }


function hideProductParams(d){
    if ($(`#ul_${d}`)){
        $(`#ul_${d}`).remove();
    }
}
</script>
{% endblock %}