
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
/*invoice container starts here*/
.invoice-container {
  display: none;
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 30px;
  /*border-radius: 12px;*/
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.invoice-header {
  text-align: center;
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
}

.invoice-header h2 {
  margin: 0;
  color: #333;  
}

.invoice-details {
  margin-top: 20px;
}

.invoice-details p {
  margin: 5px 0;
  font-size: 16px;
}

.summary {
  background-color: #f1f1f1;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
}

.summary h3 {
  margin-bottom: 10px;
  color: #444;
}

.summary p {
  margin: 5px 0;
}

.btns {
  margin-top: 30px;
  text-align: center;
}

.btns button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 15px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #1976d2;
  color: white;
  transition: background 0.3s;
}

.btns button:hover {
  background-color: #004ba0;
}

@media print {
  body * {
    visibility: hidden;
  }

  #invoiceArea, #invoiceArea * {
    visibility: visible;
  }

  #invoiceArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .btns {
    display: none !important;
  }

  .logo-area img {
    width: 60px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  .invoice-top{
    display: block !important;
  }
  .invoice-container{
    display: block !important;
  }
}

.invoice-top{
  display: none;   
}

.logo-area img{
  max-width: 60px;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 5px;
  display: block;
}
.invoice-title{
  width: 100%;
  text-align: center;
}
.invoice-title h4{
  font-size: 30px;
  font-weight: bold;
  font-family: sans-serif;
}
.invoice-title span{
  font-size: 18px;
  font-weight: bold;
  font-family: sans-serif;
}
.invoice-cust{
  padding-top: 20px;
}
.invoice-cust h4{
  font-size: 17px;
}
.invoice-cust span{
  font-size: 16px;
  font-weight: bold;
}
.total h4{
  font-size: 18px;
  font-weight: bold;
}
.summary h4{
  font-weight: 18px;
  font-size: 18px;
}
.summary span{
  font-size: 15px;
  font-family: sans-serif;
  font-weight: bold;
}

</style>
<?php
$orderId;

?>

    
      <div class="invoice-container" id="invoiceArea">
        <div class="invoice-top">
          <div class="logo-area">
            <img src="logo/logo.jpg" alt="logo" class="logo-print">
          </div>
          <div class="invoice-title">
            <h4>DIVINE PRODUCT ENT.</h4>
            <span>Your business address</span>
          </div>
        </div>
        <div class="invoice-cust">
          <table>
            <tr>
              <td><span>Full Name:</span></td>
              <td style="padding-left: 10px;"><?= $fullName;?>.</td>
            </tr>
            <tr>
              <td><span>Phone Num.:</span></td>
              <td style="padding-left: 10px;"><?= $mobile;?>.</td>
            </tr>
            <tr>
              <td><span>Order No:</span></td>
              <td style="padding-left: 10px;"><?= $orderId;?>.</td>
            </tr>
            <tr>
              <td><span>Date Created:</span></td>
              <td style="padding-left: 10px;"><?= $created?>.</td>
            </tr>
          </table>  
        </div>
  
        <div class="card-header text-center">
            <h5>INVOICE SUMMARY <?=$status?></h5>
        </div>
        <table class="table table-hover table-bordered table-striped">
          <tr>
            <th>S/N</th>
            <th>Product Name</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
          <tbody>
          <?php
          // trigger the print button to
          $new_stutus = "Supplied";
          $prt = "SELECT * FROM order_items WHERE order_no = ? AND status = ?";
          $prtpdo = $pdo->prepare($prt);
          $prtpdo->execute([$orderId, $new_stutus]);
          $sn               = 0;
          while ($prtRow    = $prtpdo->fetch(PDO::FETCH_ASSOC)) {
            $prodId         = $prtRow['product_id'];
            $quantity       = $prtRow['quantity'];
            
            // Then let's find the normal info about the product using prodId
            $info = "SELECT prodName, unit_price FROM products WHERE prodId = ?";
            $infopdo = $pdo->prepare($info);
            $infopdo->execute([$prodId]);
            while ($infoRow = $infopdo->fetch(PDO::FETCH_ASSOC)) {
              $prodName     = $infoRow['prodName'];
              $price        = $infoRow['unit_price'];
              $sn           = $sn + 1;
            
          ?>
            <tr>
              <td><?php echo $sn;?></td>
              <td><?php echo $prodName?></td>
               <td><?php echo $quantity?></td>
              <td>₦<?php echo number_format($price, 2);?></td>
            </tr>
            <?php } };?>
            
          </tbody>
        </table>
        <?php
        // Get total price and quantity 
        $prt = "SELECT SUM(quantity) AS totalQty, 
                count(orderId) AS countNo
                FROM order_items 
                WHERE order_no = ? AND status = ?";
        $prtpdo = $pdo->prepare($prt);
        $prtpdo->execute([$orderId, $new_stutus]);
        $prtRow    = $prtpdo->fetch(PDO::FETCH_ASSOC);
          $totalQty       = $prtRow['totalQty'];
          $countNo        = $prtRow['countNo'];
           
        ?>

        <div class="total">
          <h4>TOTAL AMOUNT: ₦ <?php echo number_format($totalPrice, 2);?></h4>
        </div>

        <div class="summary" style="background: none; border-top:1px solid #ccc">
          <h4>SUMMARY:</h4>
          <span>No of Products: <?= $countNo; ?></span><br>
          <span>No of Quantity: <?=$totalQty;?></span>
        </div>
      </div>
     

  <script>
    function printInvoice() {   
      window.print();
      
    }
    // printInvoice();
    // setInterval(printInvoice, 10000);

    function downloadPDF() {
      const element = document.getElementById('invoiceArea');
      html2pdf().from(element).save('invoice.pdf');
    }
  </script>
  <script>
    function closeModal2(){
      document.getElementById('theModal').style.display="none";
    }
  </script>