{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}
<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="createModalLabel">CREATE LINE ANALYSIS FORM</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="p-1">

                <form method="post" action="" id="formPage">
                    {% csrf_token %}
                    
                    {{form|crispy}}
                    <button type="submit" class="btn btn-primary mt-3 rounded-0 shadowed">SUBMIT</button>
                    <button type="button" class="btn btn-dark mt-3 rounded-0 shadowed" data-bs-dismiss="modal" onclick="window.location.reload()">CLOSE</button>
                    
                    <input id="ref_code" name="ref_code" type="hidden" placeholder="Ref Code" class="my-2" value=""/>
                
                </form>
            </div>
        </div>
        <div class="modal-footer">
          
        </div>
      </div>
    </div>
  </div>
<!--Modal Ends-->


<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
    <h3 class="p-2" style="background-color:#212529;color:white;">LINE ANALYSIS DASHBOARD</h3>
    <div class="px-2 pb-3">
        <div class="mb-3">
            
              <div class="input-group mb-3">
                <!--input type="text" class="form-control shadowed" id="myInput" placeholder="Search.." aria-label="Recipient's username" aria-describedby="button-addon2"-->
                <button class="btn btn-primary rounded-0 shadowed my-3" type="button" data-bs-toggle="modal" data-bs-target="#createModal">Create Form</button>
              </div>

            <table class="table" id="myTable1">
                <thead>
                  <tr style="background-color:#212529;color:white;">
                    <th scope="col">DATE</th>
                    <th scope="col">SHIFT</th>
                    <th scope="col">LINE</th>
                    <th scope="col">PRODUCT</th>
                    <th scope="col">SIZE</th>
                    <th scope="col">ANALYST</th>
                    <th scope="col">STATUS</th>
                  </tr>
                </thead>
                <tbody>
            {% for d in data %}
                    <tr onclick="window.location.href='/line/analysis/detail/{{d.id}}'" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                        <td>{{ d.date }}</td>
                        <td>{{ d.shift }}</td>
                        <td>{{ d.line }}</td>
                        <td>{{ d.product }}</td>
                        <td>{{ d.product_size }}</td>
                        <td>{{ d.product_analyst }}</td>
                        <td>{{ d.status}}</td>
                    </tr>
            {% endfor %}
                </tbody>
            </table>

            <!-- PAGINATION --
            {% if data.has_other_pages %}
              <ul class="pagination">
                {% if data.has_previous %}
                  <li class="page-item"><a href="?page={{ data.previous_page_number }}" class="page-link">&laquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                {% endif %}
                {% for i in data.paginator.page_range %}
                  {% if data.number == i %}
                    <li class="page-item active"><span class="page-link">{{ i }} <span class="sr-only">(current)</span></span></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={{ data.next_page_number }}" class="page-link">&raquo;</a></li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                {% endif %}
              </ul>
            {% endif %}
            -- PAGINATION -->
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        setSelect('line', "{{lines|safe}}");
        setSelect('product', "{{prods|safe}}");
        setSelect('product_size', "{{size|safe}}");
        
        $('#div_id_product_size label').text("PRODUCT SIZE*");

        $('#id_date').attr('type', 'date');
        
        $('#id_product').on('change', function(){
            if($(this).val() && $(this).val().length > 2){
                setSelect('product_size', filterProducts($(this).val()));
            }else{
                setSelect('product_size', "{{size|safe}}");
            }
            
            $('#div_id_product_size label').text("PRODUCT SIZE*");
        })
        
    })
</script>
<script>
    function filterProducts(prod){
        var prod_list = []
        var return_value = []
         var pp = JSON.stringify("{{products|safe}}");
         pp = pp.replace("[{", "").replace("}]", " ").split("}");
         for(x=0;x<pp.length;x++){
             ppp = pp[x].replace('"', '').replace(',', '').replace("{", "").split("'product_size':")
             prod_list.push({product_name:ppp[0].replace("'product_name': ", "").replace(/'/g, '').replace(',', '').replace(/\s+/g, ''), product_size:ppp[1].replace(/\s+/g, '')})
         }
        //console.log(prod_list)
        var fp = prod_list.filter((pd)=>pd.product_name === prod.replace(/\s+/g, ''))
        for(y=0;y<fp.length;y++){
            return_value.push(fp[y].product_size)
        }
        return return_value.join(',,');
    }
</script>
{% endblock %}