@if(isset($temp))
    <div class="container-fluid">
      <div class="card card-primary card-primary-border">
        <div class="card-header">
          <h3 class="card-title">Last 7 Days Sales, (Under Testing)</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool button-collapse" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="row">   
            <script src="https://www.gstatic.com/charts/loader.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>     
            <script type="text/javascript">
              google.charts.load("current", {packages:['corechart']});
              google.charts.setOnLoadCallback(drawChart);
              function drawChart() 
              {
                // product Wise Sales
                var productData = google.visualization.arrayToDataTable([
                  ['Date', 'Petrol', { role: 'annotation'} ,'Diesel', { role: 'annotation'}],
                       
                ]);
                
                var productOption = {title: 'Product Wise Sales',  vAxis: {title: 'Liter'},
                width: 560,
                height: 350,
                gap:"50%",               
                colors: ['green','#142e81'],
                annotations: {
                    alwaysOutside: true,
                    highContrast: true,  // default is true, but be sure
                    textStyle: {
                      bold: true, color: 'black',auraColor: 'transparent',text: 'verticle'
                    }
                  },    
                };            
               
                var salesData = google.visualization.arrayToDataTable([
                  ['','Regular', 'Loyalty', 'Credit', 
                  {role: 'annotation' } ],
                                        
                ]);

                // Moduel Wise Sales
                var salesView = new google.visualization.DataView(salesData);
                var salesOptions = {
                  title : 'Module Wise Sale',
                  vAxis: {title: 'Liter'},
                  width: 560,
                  height: 350,
                  //legend: { position: 'top', maxLines: 3 },
                  bar: { groupWidth: '65%' },
                  colors: ['green','#142e81','red'],
                  annotations: {
                    alwaysOutside: true,
                    highContrast: true,  // default is true, but be sure
                    textStyle: {
                      bold: true, color: 'black',auraColor: 'transparent'
                    }
                  },                    
                  isStacked: true,
                };

                // Moduel Wise Sales
               
                var salesChart = new google.visualization.ColumnChart(document.getElementById("salesChart"));
                var salesChartBtn = document.getElementById('salesChartBtn');
                google.visualization.events.addListener(salesChart, 'ready', function () {
                  salesChartBtn.disabled = false;
                });

                var pumpName = document.getElementById('pumpName').value;
                  
                salesChartBtn.addEventListener('click', function () {
                  var doc = new jsPDF();
                  doc.setFontSize(8);
                  doc.text(170, 10, 'Powered by ');
                  doc.setFontType("bold");
                  doc.text(186, 10, 'PetroERP');
                  doc.setFontSize(13);
                  doc.setFontType("bold");
                  doc.text(50, 30, pumpName);  
                  doc.setFontType("normal");       
                  doc.addImage(salesChart.getImageURI(), 'PNG', 20, 50);  
                  doc.save('Module_Wise_Sale.pdf');
                  
                }, false);
                salesChart.draw(salesView, salesOptions);                  

                // product Wise Sales
                var productChart = new google.visualization.ColumnChart(document.getElementById('productChart'));
                var productChartBtn = document.getElementById('productChartBtn');
                google.visualization.events.addListener(productChart, 'ready', function () {
                  productChartBtn.disabled = false;
                });

                productChartBtn.addEventListener('click', function () {
                  var doc = new jsPDF();
                  doc.setFontSize(8);
                  doc.text(170, 10, 'Powered by ');
                  doc.setFontType("bold");
                  doc.text(186, 10, 'PetroERP');
                  doc.setFontSize(13);
                  doc.setFontType("bold");
                  doc.text(50, 30, pumpName);  
                  doc.setFontType("normal");        
                  doc.addImage(productChart.getImageURI(), 'PNG', 20, 50);           
                  doc.save('Product_Wise_Sale.pdf');
                }, false);

                productChart.draw(productData, productOption);                                
              }

              function genPDF() {
                html2canvas(document.getElementById('hoja1'),{
                  onrendered: function (canvas) {
                  var img = canvas.toDataURL("image/png");
                  var doc= new jsPDF();
                  doc.addImage(img,'JPEG',0,0,210,230);
                  doc.save('ContratoMutuo.pdf');
                  }
                });
              }

            </script>
            
            <div class="col-md-6 tableFixHead" style="overflow-y: hidden;" id="salesChart">
            </div>
            <div class="col-md-6 tableFixHead" style="overflow-y: hidden;" id="productChart"></div>
          </div>
          <div class="row space-top">
            <div class="col-md-2 tableFixHead"></div>
            <div class="col-md-2 tableFixHead"><input id="salesChartBtn" class="btn btn-success btn-sm" type="button" value="Download in PDF" disabled /></div>
            <div class="col-md-2 tableFixHead"></div>
            <div class="col-md-2 tableFixHead"></div>
            <div class="col-md-2 tableFixHead"><input id="productChartBtn" class="btn btn-success btn-sm" type="button" value="Download in PDF" disabled /></div>
            <div class="col-md-2 tableFixHead"></div>
          
            <input type="hidden" value="{{$pumpName}}" class="pumpName" id="pumpName">
          </div>
        </div>
      </div>
    </div>
  @endif