{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}


{% block content %}
<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 OPQR</h3>
  <div class="px-3 pb-3">
      <div class="mb-3">
            <form action="/report/line_opqr/" method="post" id="formPage">
                {% csrf_token %}
            
            <div class="row">
                <div class="col-sm-12 col-lg-3">
                    <div id="div_id_date_sampled" class="my-2">
                        <label class="form-label requiredField">START DATE* </label>
                        <input type="text" id="from" name="from" class="form-control" required="" autocomplete="off">
                    </div>
                </div>
                <div class="col-sm-12 col-lg-3">
                        <div id="div_id_date_sampled" class="my-2">
                          <label for="id_date_sampled" class="form-label requiredField">END DATE* </label>
                          <input type="text" type="text" id="to" name="to" class="form-control" required="" autocomplete="off">
                        </div>
                </div>
                <div class="col-sm-12 col-lg-5"><br/>
                    <button class="btn btn-primary shadowed rounded-0 mt-3" id="submit_btn">SUBMIT</button>
                </div>
                <div class="col-sm-12 col-lg-1">
                    <!--div class="my-3">
                          <label class="form-label requiredField">MATERIAL*</label>
                          <select class="form-select" name="model" id="model">
                              <option value="" selected="">Open this select menu</option>
                              <option value="LINE_ANALYSIS">LINE ANALYSIS</option>
                              <option value="SACHET_ANALYSIS">SACHET ANALYSIS</option>
                              <option value="LINE_INSPECTION">LINE INSPECTION</option>
                              <option value="SACHET_INSPECTION">SACHET INSPECTION</option>
                          </select>
                      </div-->
                </div>
            </div>
              
              
          </form>
          </div>
        </div>

  
  {% if data %}
    <div class="mt-2">
        <div><h5 class="p-3 text-center" style="background-color:#212529;color:white;">OPQR for {{ start_date }} to {{ end_date }}</h5></div>
        <div>
            <div class="p-3" style="overflow-x:scroll">
                <table class="table table-sm table-striped table-bordered">
                    <thead>
                        <tr style="background-color:#212529;color:white;">
                            <th>LINE</th>
                            <th>PRODUCT</th>
                            <th>P/SIZE</th>
                            <th>S/SIZE</th>
                            <th>MINOR</th>
                            <th>% MINOR</th>
                            <th>MAJOR</th>
                            <th>% MAJOR</th>
                            <th>CRITICAL</th>
                            <th>% CRITICAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for d in data2 %}
                            <tr style="font-size:12px;">
                                <td>{{ d.line }}</td>
                                <td>{{ d.product_info.product_name_short }}</td>
                                <td>{{ d.product_info.product_size }}</td>
                                <td>{{ d.sample_size }}</td>
                                <td>{{ d.minor}}</td>
                                <td>{{ d.pminor }}</td>
                                <td>{{ d.major }}</td>
                                <td>{{ d.pmajor }}</td>
                                <td>{{ d.critical }}</td>
                                <td>{{ d.pcritical }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
    </div>
  {% endif %}
  
  <div id="charts">
      <div><canvas id="minorChart"></canvas></div>
      <div><canvas id="majorChart"></canvas></div>
      <div><canvas id="criticalChart"></canvas></div>
  </div>
</div>

 <br><br>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

 <script>
    $(document).ready(function(){
        if (("{{chart_label2|safe}}").split(',,').length < 2){
            $('#charts').hide();
        }
    })
</script>

<script>
    $( function() {
      var dateFormat = "yy-mm-dd",
        from = $( "#from" )
          .datepicker({
            defaultDate: "-1w",
            changeMonth: true,
            numberOfMonths: 3,
            dateFormat: 'yy-mm-dd'
          })
          .on( "change", function() {
            to.datepicker( "option", "minDate", getDate( this ) );
          }),
        to = $( "#to" ).datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3,
          dateFormat: 'yy-mm-dd'
        })
        .on( "change", function() {
          from.datepicker( "option", "maxDate", getDate( this ) );
        });
   
      function getDate( element ) {
        var date;
        try {
          date = $.datepicker.parseDate( dateFormat, element.value );
        } catch( error ) {
          date = null;
        }
   
        return date;
      }
    } );
    </script>

 <script>
    document.getElementById("formPage").onsubmit = function(e) {
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'GETTING REPORT....';
        }

</script>

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

<script>
    var chart_label2 = ("{{chart_label2|safe}}").split(',,')
    if(chart_label2.length > 0){
        //$('#charts').show();
        var chart_values_minor2 = ("{{chart_values_minor2|safe}}").split(',,')
        createChart("minorChart", chart_label2, chart_values_minor2, 'Outgoing Product Quality Rating (MINOR)')
        var chart_values_major2 = ("{{chart_values_major2|safe}}").split(',,')
        createChart("majorChart", chart_label2, chart_values_major2, 'Outgoing Product Quality Rating (MAJOR)')
        var chart_values_critical2 = ("{{chart_values_critical2|safe}}").split(',,')
        createChart("criticalChart", chart_label2, chart_values_critical2, 'Outgoing Product Quality Rating (CRITICAL)')
    }
    
    function getRandomColorHex(len){
        var res = []
        var borderColor = []
        var hex = "0123456789ABCDEF";
        
        for (var x=1; x<len; x++){
            color = "#";
            for (var i = 1; i <= 6; i++) {
                color += hex[Math.floor(Math.random() * 16)];
            }
            res.push(color);
            borderColor.push("#111");
        }
        return [res, borderColor];
  }
    
    
    
    function createChart(container, label, value, chart_heading){
        //var chts = document.getElementById('charts')
        //chts.append(`<div><canvas id="${container}"></canvas></div>`)
        const ctx = document.getElementById(container);
          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: label,
              datasets: [{
                label: chart_heading,
                data: value,
                backgroundColor: getRandomColorHex(label.length)[0],
                  //'rgba(255, 99, 132, 0.6)',
                  //'rgba(255, 159, 64, 0.6)',
                  //'rgba(255, 205, 86, 0.6)',
                  //'rgba(75, 192, 192, 0.6)',
                  //'rgba(54, 162, 235, 0.6)',
                  //'rgba(153, 102, 255, 0.6)',
                  //'rgba(201, 203, 207, 0.6)'
                //],
                borderColor: getRandomColorHex(label.length)[1],
                /*
                [
                  'rgb(255, 99, 132)',
                  'rgb(255, 159, 64)',
                  'rgb(255, 205, 86)',
                  'rgb(75, 192, 192)',
                  'rgb(54, 162, 235)',
                  'rgb(153, 102, 255)',
                  'rgb(201, 203, 207)'
                ],
                */
                borderWidth: 1
              }]
            },
            options: {
              scales: {
                y: {
                  beginAtZero: true
                }
              }
            }
          });
    }
</script>


{% endblock %}