<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <link rel="icon" type="image/png" sizes="16x16" href="<?php echo site_url()?>/assets/images/favicon.png">
  <title>WB : PDF Print</title>
</head>
<body> 
 <link rel="stylesheet" href="<?php echo site_url();?>assets/css/invoice_print.css"> 
 <style> 

   table {
     border:1px solid gray;
     border-collapse: collapse; 
     margin: 0 auto;font-size:12px; 
     font-family: Times New Roman !important;
   }

   table td, table th {
    border:1px solid gray;
    border-collapse: collapse;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px !important;
    font-family: Times New Roman !important;
  }
  h1{
    font-size: 18px !important;font-weight: bold;
    font-family: Times New Roman !important;
  }
  h3{
    font-size: 18px !important;font-weight: bold;
    font-family: Times New Roman !important;  
  }
  h5{
    font-size: 18px !important;
    font-family: Times New Roman !important;
  }
  h1,h3,h4,h5{
    margin: 1px !important;
    font-family: Times New Roman !important;
  }
  h5{
    line-height: 1.2;
    font-family: Times New Roman !important;
  }
  .tbl-cap{
    text-align:center;vertical-align:middle;display:table-cell;width: 100%;font-weight: bold; font-size: 18px !important;
    font-family: Times New Roman !important;padding-bottom: 10px;
  }
  @page {     margin-left: 0 !important;margin-right: 0 !important;margin-top: 10 !important;margin-bottom: 10 !important; } 
  body{
    font-size: 12px;
  }
  .col {
    border: none !important; 
  } 
  .btn-primary{
    background-color: #ffbf00 !important;
    border-color: #ffbf00 !important;
  }
  .btn-success{
    background-color: #ffbf00 !important;
    border-color: #ffbf00 !important;
  }
  #invoice{
    padding: 10px;

  }
  .addr-col{
    padding: 0px !important;
  }
  .invoice {
    position: relative;
    background-color: #FFF;
    min-height: 100%;
    padding: 15px;
    padding-top: 0px; 
  } 

  .invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 0px;

    /*min-height: 1100px;*/
  }

  .invoice table td,.invoice table th {
    padding:0px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .invoice table thead,th{
    border:solid 1px;
    text-align: center;
  }
  .invoice table td, table tr,tfoot tr{
    border-left: solid 1px;
    border-right: solid 1px;
  }
  .invoice table th {
    white-space: nowrap;
    font-weight: bold;
    font-size: 12px

  }
  .invoice table tr{
    border:solid 1px;

  }

  .invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6; 
  }

  .invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: left;padding:2px 2px 2px 10px;
    font-size: 15px;
  }

  .invoice table .no {
    color: black;
    text-align: left;padding:2px 2px 2px 10px;
  }


  .invoice table .total {
    color: #000000;
  }


  .invoice table tfoot td {
    background: 0 0;
    white-space: nowrap;
    /* text-align: right; */
    padding: 10px 20px;
  }

  p{
    /*line-height: 1px !important;*/
  }
  .invoice table tfoot {
    font-size: 12px;
    line-height: 0rem;
  }

  .invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0;
  }

  .col{
    border: solid 1px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .invoice:last-child {
    page-break-after: auto;
  }

  @media print{
    body{
      font-size: 19px;
      margin-left: 0px !important;
    }
    .invoice table {
      /*min-height: 900px;*/
    } 
  } 
  .invoice-pdf table td, .invoice-pdf table th {
    padding:2px;
  }
  .def_disc{
    display: none !important;
  }
  .terms_txt1,.terms_txt1 p{
    margin-bottom: 0.1px !important;
    line-height: 1.2 !important;
  /*  font-size: 12px !important;
    font-family: arial !important;*/
  }

  tt1, .terms_txt1 span{
  /*  font-family: arial !important;
    font-size: 12px !important;*/
    line-height: 1.2 !important;
  }
  .hdr-cont{
   font-size: 18px !important;
   font-family: Times New Roman !important;
 }
 
 .inp{ 
  position: absolute;
  width: 88px; 
  padding-top: 5px !important;
  height: 32px; 
  font-weight: bold;
  font-size: 14px;
  padding: 2px;
  color: #000 !important;
  background-color: #fff !important;
  border: none !important;
  text-align: left;
}
</style>
<div id="invoice" style="font-family: 'arial';font-size: 12px; ">
  <div class="invoice" id="data-cont" style="padding: 30px;">
    <div style1="min-width: 600px;"> 
      <!-- <h4 class="text-center" style="padding-top:10px;">PROFORMA INVOICE</h4> -->
      <div class="row" >
       <div class="col-md-12 text-center" style="padding-top:2px;line-height:1.5rem;text-align: center;">
         <img style="margin-top: -6px;width: 700px;margin-right: 10px;" class="img" src="<?php echo base_url('assets/img/pdf_bg.png')?>" alt="" /> 
         <input style="top: 107px;left: 302px;" class="form-control inp" readonly value="<?=$entry['entry_no'];?>"> 

         <textarea readonly style="top: 143px;left: 320px;width: 126px;" rows="3" class="form-control inp" ><?=$entry['veh_no'];?></textarea> 

         <textarea readonly style="top: 198px;left: 320px;width: 126px;" rows="2" class="form-control inp" ><?=$entry['mt_name'];?></textarea> 

         <textarea readonly style="top: 238px;left: 320px;width: 126px;" rows="2" class="form-control inp" ><?=$entry['container_no'];?></textarea> 

         <input readonly style="top: 143px;left: 569px;width: 146px;" class="form-control inp" value="<?=$entry['tot_wt'];?>" >

         <input readonly style="top: 188px;left: 569px;width: 146px;" class="form-control inp" value="<?=$entry['empty_wt'];?>" >

         <input readonly style="top: 233px;left: 569px;width: 146px;" class="form-control inp" value="<?=$entry['net_wt'];?>" >

         <input readonly style="top: 278px;left: 569px;width: 178px;font-size: 22px !important;height: 43px;" class="form-control inp" value="Rs.<?=number_format((double)$entry['net_amt'], 2, '.', '');?>/-" > 

         <input readonly style="top: 105px;left: 784px;width: 80px;" class="form-control inp" value="<?=date('d/m/Y', $entry['entry_date']); ?>" >

         <input readonly style="top: 126px;left: 784px;width: 80px;height: 29px;" class="form-control inp" value="<?=date('h:i A', $entry['entry_date']); ?>" >

         <?php if($entry['upload1']) { ?>
         <img style="position: absolute;top: 156px;width: 100px;left: 784px;" class="img" src="<?php echo base_url('uploads/entry/'.$entry['upload1'])?>" alt="" /> 
         <?php } ?>

         <?php if($entry['upload2']) { ?>
         <img style="position: absolute;top: 245px;width: 100px;left: 784px;" class="img" src="<?php echo base_url('uploads/entry/'.$entry['upload2'])?>" alt="" /> 
         <?php } ?>
       </div> 
     </div>
   </div> 
 </div> 
 <div class="container-fluid w-100" id="btn_div">  
   <button style="margin-bottom: 20px;" type="button" class="btn btn-primary float-right mt-4 ml-2" onclick="generatePDF();">PDF</button>  
 </div> 
 <script src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
 <script> 
  generatePDF();

  function generatePDF() {
    $('#data-cont').addClass('invoice-pdf');
    const element = document.getElementById("data-cont");
    var opt = {
      margin:       [0.4, 0, 0.4, 0], //top, left, buttom, right
      filename:     'Entry.pdf',
      html2canvas: {
        dpi: 192,
        scale:3,
        letterRendering: true,
        useCORS: true
      },
      jsPDF:        { unit: 'in', format: 'a4', orientation: 'landscape' },
      pagebreak: { mode: 'avoid-all', after: '.avoidThisRow' }
    };

    html2pdf().set(opt).from(element).save();  
    setTimeout(
      function() 
      {  
        $('#data-cont').removeClass('invoice-pdf');
       // window.close();
      }, 200);  
  } 

  $('#btn_print').click(function () {
    let a = Popup($('.invoice')[0].outerHTML);
    function Popup(data)
    {
      return print();

    }
    console.log(a);
  });

  (function () {

    var beforePrint = function () {
      $('#btn_div').css('display', 'none');

    };

    var afterPrint = function () {
      $('#btn_div').css('display', 'block'); 
    };

    if (window.matchMedia) {
      var mediaQueryList = window.matchMedia('print');

      mediaQueryList.addListener(function (mql) { 

        if (mql.matches) {

          beforePrint();
        } else {
          afterPrint();
        }
      });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

  }());

  
  var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
     $src = $('.img').attr('src');
     $('.img').attr('src','');
     if (!table.nodeType) table = document.getElementById(table)
      var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx));
    $('.img').attr('src',$src); 
  }
})()
</script>
</body>
</html>