{% 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;">DOWNLOAD HOURLY DATA</h3>
  <div class="px-3 pb-3">
      <div class="mb-3">

        <div class="text-center" id="loading__spinner">
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                    <span class="visually-hidden">Loading...</span>
            </div>
          </div>
          
        <div class="row">
          <div class="col-sm-12 col-lg-6">
            <form action="/report/api/v1/report_download_api/" method="get" id="formPage">
              <div id="div_id_date_sampled" class="my-3">
                  <label class="form-label requiredField">START DATE* </label>
                  <input type="text" id="from" name="from" class="form-control" required="">
              </div>

              <div id="div_id_date_sampled" class="my-3">
                  <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="">
              </div>

              <!--div class="my-3">
                  <label class="form-label requiredField">MATERIAL*</label>
                  <select class="form-select" name="model" id="model" required="">
                      <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-->

              <button class="btn btn-primary shadowed" id="submit_btn">Submit</button>
          </form>

          

          </div>
          <div class="col-sm-12 col-lg-6"></div>
        </div>
      </div>
  </div>
</div>

 <br><br>
 <script src="{% static 'assets/js/filesaver.js' %}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>


 <script>
    $(document).ready(function(){
        $('#loading__spinner').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) {
        $('#loading__spinner').show();
        $('#formPage').hide();
        e.preventDefault();
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'Submitting....';
        
        var from = $('#from').val();
        var to = $('#to').val();

        

        $.get(`/report/api/v1/hourly_report_to_excel_download_api/?from=${from}&to=${to}`, function(data, status){
            
            if(status === 'success'){
              
              var worksheet1 = XLSX.utils.json_to_sheet(data[0]);
              var worksheet2 = XLSX.utils.json_to_sheet(data[1]);
              var worksheet3 = XLSX.utils.json_to_sheet(data[2]);
              var worksheet4 = XLSX.utils.json_to_sheet(data[3]);
              var worksheet5 = XLSX.utils.json_to_sheet(data[4]);
              var worksheet6 = XLSX.utils.json_to_sheet(data[5]);

              var workbook = {Sheets:{'Line Analysis Alcoholic':worksheet1, 'Line Analysis Non-Alcoholic':worksheet2, 'Line Inspection Alcoholic':worksheet3, 'Line Inspection Non-Alcoholic':worksheet4, 'Sachet Analysis':worksheet5, 'Sachet Inspection':worksheet6}, SheetNames:['Line Analysis Alcoholic', 'Line Analysis Non-Alcoholic', 'Line Inspection Alcoholic', 'Line Inspection Non-Alcoholic', 'Sachet Analysis', 'Sachet Inspection']};
              var excelBuffer = XLSX.write(workbook, {bookType:'xlsx', type:'array'});

            saveAsExcel(excelBuffer, 'Report');

            window.location.reload();
            }
        })

        from = '';
        to = '';
        model = '';

        
    }

    function saveAsExcel(buffer, filename){
        var data = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
        saveAs(data, filename+'_export_'+new Date().getTime()+'.xlsx')
    }
</script>

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


{% endblock %}