{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Add New Product | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Add New Product to Blend Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if p %}
<div>
    <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col" class="mobile__hidden">PRODUCT</th>
            <th scope="col" class="mobile__tab__heading">PRODUCT</th>
            <th scope="col" class="mobile__tab__heading">PRODUCT TYPE</th>
            <th scope="col" class="mobile__tab__heading">PRODUCT CATEGORY</th>
            <th scope="col" class="mobile__hidden">COMMENT</th>
            <th scope="col" class="mobile__tab__heading">CREATED BY</th>
            <th scope="col" class="mobile__hidden">DATE CREATED</th>
          </tr>
        </thead>
        <tbody>
            {% for r in p %}  
          <tr onmouseover="bigImg(this)" onmouseout="normalImg(this)">
            <td class="mobile__hidden">{{r.product_name_long}}</td>
            <td class="mobile__text">{{r.product_name_short}}</td>
            <td class="mobile__text">{{r.product_type}}</td>
            <td class="mobile__text">{{r.product_category}}</td>
            <td class="mobile__hidden">{{r.comment}}</td>
            <td class="mobile__text">{{r.created_by}}</td>
            <td class="mobile__hidden"><small>{{r.datetime_created}}</small></td>
          </tr>
          {% endfor %}
         </tbody>
         </table>   
</div>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% else %}
    <p>No Product in the System</p>
{% endif %}
{% if form %}
<div>
    <h5>NEW PRODUCT FORM</h5>
    <div class="col-md-12 col-lg-6">
        <form method="POST" action="" id="formPage">
            {% csrf_token %}
            {{ form|crispy }}
            <small>NOTE: Only create new product not in the system</small><br>
            <button type="submit" class="btn btn-primary mt-3" id="submit_btn">&nbsp;ADD NEW PRODUCT&nbsp;</button>
        </form>
    </div>
</div>
{% else %}

<p>Form not found</p>

{% endif %}
 <br><br>
 <script>
    $(document).ready(function(){
        $("#formPage div").addClass("mb-3");
        $("textarea").attr({"rows": "2", "cols": "40"});
        $("#id_date_of_supply").attr({'type':'date'});
    })
</script>

 <script>
    document.getElementById("formPage").onsubmit = function() {
        $("input").val(function(i,val) {return val.toUpperCase(); });
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'ADDING NEW PRODUCT';
    }
</script>

<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>
{% endblock %}