
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
.modal2 {
  /*display: none;*/
  position: fixed;
  z-index: 99999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter:blur(3px);
}
.modal-content2 {
  background-color: transparent;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  width: 800px;
  /*max-width: 500px;*/
  animation: fadeIn 0.3s;
  margin-top:30px;
  /*border:2px solid #fff;*/
}
.modal-header{
  padding: 15px;
}
.modal-body{
  padding: 15px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.modal-body p{
  text-align: justify-all;
  font-family: sans-serif;
}
.modal-body span{
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 4px;
}
/*.modal-body label{
    padding: 5px;
    background: #f2f2f2;
    font-size: 13px;
}*/
.modal-footer{
    padding-bottom: 10px;
}

.modal-header2, .modal-footer2 {
    font-weight: bold;
}

.modal-footer2{
  /*border-top: 1px solid #ddd;*/
  display: flex;
  justify-content: space-between;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media(max-width: 992px){
  .modal-content2{
    width: 90%;
    margin-top:100px;
  }
  .modal-body p{
    font-size: 14px;
  }
  .modal-body span{
    font-size: 14px;
  }
  .modal-footer2{
    display: flex;
    justify-content: space-between;
    gap:20px;
  }
  .modal-footer2 button{
    font-size: 12px;
  }
}

/*invoice container starts here*/
.invoice-container {
  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-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
if (isset($_SESSION['customer'])) {
  $customer = $_SESSION['customer']; // $customer mean = phone number

  //find this customer with their phone nunber
  $info = "SELECT * FROM account WHERE mobile = ?";
  $infoPdo = $pdo->prepare($info);
  $infoPdo->execute([$customer]);
  $row = $infoPdo->fetch(PDO::FETCH_ASSOC);
  $firstname = $row['firstname'];
  $lastname = $row['lastname'];
  $email = $row['email'];
  $phone = $row['mobile']; 

  $names = $firstname.' '.$lastname;
  $sepDate = explode(" ", $created);
  $theDate = $sepDate[0];
}?>
<div class="modal2" id="theModal">
  <div class="modal-content2">
    <?php
    switch ($invoice_case) {
      case 'cart':

      $getSum = "SELECT SUM(price * quantity) AS totalPrice, SUM(quantity) 
                AS totalQty, COUNT(product) AS totalPdt 
                FROM catalog WHERE customer = ?";
      $sumpdo = $pdo->prepare($getSum);
      $sumpdo->execute([$customer]);
      $dataSum    = $sumpdo->fetch(PDO::FETCH_ASSOC);
      $summazion  = $dataSum['totalPrice'];
      $totalQty   = $dataSum['totalQty'];
      $totalPdt   = $dataSum['totalPdt'];

      ?>
      <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;"><?= $names;?>.</td>
            </tr>
            <tr>
              <td><span>Phone Num.:</span></td>
              <td style="padding-left: 10px;"><?= $phone;?>.</td>
            </tr>
            <tr>
              <td><span>Invoice No:</span></td>
              <td style="padding-left: 10px;"><?= $invoiceNo;?>.</td>
            </tr>
            <tr>
              <td><span>Date Created:</span></td>
              <td style="padding-left: 10px;"><?= $theDate?>.</td>
            </tr>
            <tr>
              <td><span>Payment Mode:</span></td>
              <td style="padding-left: 10px;"><?= $mode;?>.</td>
            </tr>
          </table>  
        </div>
  
        <div class="card-header text-center">
            <h5>INVOICE SUMMARY</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 
          $prt = "SELECT * FROM catalog WHERE customer = ?";
          $prtpdo = $pdo->prepare($prt);
          $prtpdo->execute([$customer]);
          $sn = 0;
          while ($prtRow = $prtpdo->fetch(PDO::FETCH_ASSOC)) {
            $requestProduct = $prtRow['product'];
            $requestQty    = $prtRow['quantity'];
            $paidPrice     = $prtRow['price'];
            $sn = $sn + 1;
            
          ?>
            <tr>
              <td><?php echo $sn;?></td>
              <td><?php echo $requestProduct?></td>
               <td><?php echo $requestQty?></td>
              <td>₦<?php echo number_format($paidPrice, 2);?></td>
            </tr>
            <?php };?>
            
          </tbody>
        </table>

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

        <div class="summary" style="background: none; border-top:1px solid #ccc">
          <h4>SUMMARY:</h4>
          <span>No of Products: <?php echo $totalPdt; ?></span><br>
          <span>No of Quantity: <?php echo $totalQty;?></span>
        </div>
      </div>
      <?php
        break;
      
      default:
        # code...
        break;
    }
    ?>
    <div class="modal-footer2" style="width: 100%; background: #d5d5d5; padding: 10px;">
      <button type="button" class="btn btn-danger"onclick="closeModal2()">Close</button>
      <div style=" display: flex; gap:10px; justify-content: flex-end; width: 100%;">
        <button class="btn btn-primary" onclick="printInvoice()">🖨️ Print Invoice</button>
        <button class="btn btn-primary" onclick="downloadPDF()">⬇️ Download PDF</button>
      </div>
    </div>

  </div> 

</div>



  <!-- <div class="btns">
    <button onclick="printInvoice()">🖨️ Print Invoice</button>
    <button onclick="downloadPDF()">⬇️ Download PDF</button>
  </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>