{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Join Blend Form | IQBlending{% endblock %}

{% block content %}
<h4>BLENDING PLATFORM</h4>
<p>Join Blend Form</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
{% if d %}
<div> 
    <h5>BLEND NUMBER : <strong>{{ d.blend_number }} / ({{ d.blend_number_2 }})</strong></h5>
    <h5>PRODUCT : <strong>{{ d.product }}</strong></h5>
    <h5>TANK NUMBER : <strong>{{ d.tank_number }}</strong></h5>
    <h5>DATE BLENDED : <strong>{{ d.date_blended }}</strong></h5>
    <h5>VOLUME : <strong>{{ d.volume_in_ltr }} Litres</strong></h5>
    <h5>STATUS : <strong>{{ d.status }}</strong></h5>
    <h5>RESULT : <strong>{{ d.result }}</strong></h5>
    <h5>BLENDING INSP. : <strong>{{ d.blending_inspector }}</strong></h5>
        <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
        <form method="POST" action="/blend_file/join_blend_helper/" id="formPage">
            {% csrf_token %}
            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">AREA</th>
                    <th scope="col">LINE/SACHINE NUMBER</th>
                    <th scope="col">COMMENT</th>
                  </tr>
                </thead>
                <tbody id="tbody">
                  <tr class="trBody" id="1">
                    <th scope="row">1</th>
                    <td>
                        <select class="form-select" name="line_sachet_area1">
                            <option selected>SELECT AREA</option>
                            <option value="LINE">LINE</option>
                            <option value="SACHET">SACHET</option>
                          </select>
                    </td>
                    <td>
                        <input type="number" min="1" class="form-control" id="area" name="line_sachet1">
                    </td>
                    <td>
                        <input type="text" class="form-control" id="comment" name="comment1">
                    </td>
                  </tr>
                </tbody>
              </table>
              <input type="hidden" id="rows__length" name="rows__length" value=1>
              <input type="hidden" name="blend_number" value="{{d.blend_number}}">
              <input type="hidden" name="pkk" value="{{d.id}}">
            <button type="button" class="btn btn-secondary" onclick="addLineMachine()">&nbsp;&nbsp;ADD&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-warning" onclick="removeLineMachine()">&nbsp;&nbsp;REMOVE&nbsp;&nbsp;</button>
            <button type="submit" class="btn btn-primary" id="submit_btn">&nbsp;&nbsp;SUBMIT&nbsp;&nbsp;</button>
        </form>
</div>
{% else %}

<p>No Blend is Available</p>

{% endif %}
 <br><br>
 <script>
    function addLineMachine(){
        var len = document.getElementsByClassName('trBody').length;

        var l = `<tr class="trBody" id="${len+1}"><th scope="row">${len+1}</th><td><select class="form-select" name="line_sachet_area${len+1}">`;
        l += `<option selected>SELECT AREA</option><option value="LINE">LINE</option><option value="SACHET">SACHET</option>`;
        l += `</select></td><td><input type="number" min="1" class="form-control" id="area" name="line_sachet${len+1}">`;
        l += `</td><td><input type="text" class="form-control" id="comment" name="comment${len+1}"></td></tr>`;

        $('#tbody').append(l);
        $('#rows__length').val(document.getElementsByClassName('trBody').length);
    }

    function removeLineMachine(){
        var tr = document.getElementsByClassName('trBody').length;
        if (tr !== 1){
            $(`#${tr}`).remove();
            $('#rows__length').val(document.getElementsByClassName('trBody').length);
        }else{
            alert('Last Row Cannot be removed!!!')
        }
    }
 </script>

 <script>
    $(document).ready(function(){
        $('#rows__length').val(document.getElementsByClassName('trBody').length);
        console.log(document.getElementsByClassName('trBody'))
    })
</script>

 <script>
    document.getElementById("formPage").onsubmit = function() {
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'SUBMITTING';
        if (document.getElementsByClassName('#errorlist')){
            document.getElementsByClassName('#errorlist').innerText;
        }
    }
</script>

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


{% endblock %}