<?php
include("db/cn.php");
if(isset($_SESSION['user_name']) && isset($_SESSION['user_role'])&& isset($_SESSION['outlet_name'])
&& isset($_SESSION['outlet_address'])) {
    $userName = $_SESSION['user_name'];
    $userRole = $_SESSION['user_role'];
	$outlet_address = $_SESSION['outlet_address'];
	$outlet_name = $_SESSION['outlet_name'];
}
$id = $_GET["id"]; 


?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Processing Slip</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background-color: #f4f7fc;
    }
    .processing-slip {
      margin: 30px auto;
      max-width: 750px;
      background: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 30px;
      border: none;
    }
    .processing-slip h4, .processing-slip h5 {
      font-weight: 700;
    }
    .processing-slip .table th, .processing-slip .table td {
      vertical-align: middle;
    }
    .processing-slip .logo {
      text-align: center;
      margin-bottom: 20px;
    }
    .processing-slip .heading {
      text-align: center;
      margin-bottom: 20px;
      border-bottom: 2px solid #ddd;
      padding-bottom: 10px;
    }
    .processing-slip .signature {
      text-align: right;
      margin-top: 30px;
    }
    .print-btn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    .footer-note {
      font-size: 0.85rem;
      color: #666;
      text-align: center;
      margin-top: 20px;
    }
    
    /* Print-specific styles */
    @media print {
      body {
        background-color: white;
      }
      .processing-slip {
        box-shadow: none;
        border: 1px solid black;
      }
      .print-btn {
        display: none;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div class="processing-slip card">
    <div class="logo">
      <img src="img/united sales corporation 2.png" width="60" height="60" alt="Company Logo">
    </div>

    <div class="heading">
      <h4>UNITED SALES CORPORATION</h4>
      <p> Burewala<br>TEL: 0300-7615409</p>
      <h5>Processing Slip</h5>
    </div>
   <?php
$inquiry = mysqli_query($connection,"select * from inquiry where id = '$id' ");
$inq_fetch = mysqli_fetch_array($inquiry);
?>
    <table class="table table-borderless">
      <tbody>
        <tr>
          <th>Processing No :</th>
          <td><?php echo $inq_fetch["process_no"]; ?></td>
          <th>Processing Date :</th>
          <td><?php echo $inq_fetch["process_date"]; ?></td>
        </tr>
        <tr>
          <th>Customer :</th>
          <td><?php echo $inq_fetch["customer_name"]; ?></td>
          <th>Product :</th>
          <td><?php echo $inq_fetch["product_detail"]; ?></td>
        </tr>
        <tr>
          <th>S/O or W/O :</th>
          <td><?php echo $inq_fetch["father_husband_name"]; ?></td>
          <th>Model :</th>
          <td><?php echo $inq_fetch["company_model"]; ?></td>
        </tr>
        <tr>
          <th>Cell #:</th>
          <td><?php echo $inq_fetch["cell"]; ?></td>
          <th>Product Price :</th>
          <td><?php echo $inq_fetch["cash_price"]; ?></td>
        </tr>
        <tr>
          <th>Sale Person :</th>
          <td><?php echo $inq_fetch["marketing_officer"]; ?></td>
          <th>Duration :</th>
          <td><?php echo $inq_fetch["duration"]; ?></td>
        </tr>
        <tr>
          <th>Remarks:</th>
          <td><?php echo $inq_fetch["remarks"]; ?></td>
          <th>Process Fee :</th>
          <td><?php echo $inq_fetch["process_fee"]; ?></td>
        </tr>
        <tr>
          <th>CNIC:</th>
          <td><?php echo $inq_fetch["cnic"]; ?></td>
          <th>Advance :</th>
          <td><?php echo $inq_fetch["advance"]; ?></td>
        </tr>
      </tbody>
    </table>

    <p><strong>Note:</strong> In Case of Cancellation, Processing Fee Rs. 500 is NON REFUNDABLE if any.</p>
    
    <div class="signature">
      <p>Signature ________________________</p>
    </div>
  </div>

  <div class="print-btn">
    <button onclick="printSlip()" class="btn btn-primary">Print Slip</button>
    <button onclick="downloadPDF()" class="btn btn-secondary ms-3">Download as PDF</button>
    <a href="inq_detail.php?id=<?php echo $id ; ?>"><button type="button" class="btn btn-dark" >Back</button>  </a></div>

  <p class="footer-note">Thank you for your business!</p>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
  function printSlip() {
    window.print();
  }

  function downloadPDF() {
    html2canvas(document.querySelector('.processing-slip')).then(function(canvas) {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      // Convert canvas to image data and add it to the PDF
      const imgData = canvas.toDataURL('image/png');
      const imgProps = doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

      doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      doc.save('processing-slip.pdf');
    });
  }
</script>

</body>
</html>

