<html lang="en">
   <head>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
      <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;display=swap" rel="stylesheet">
      <meta charset="UTF-8">
      <title>PROPOSAL FORM</title>
      <style>
         body {
         font-family: Arial, sans-serif;
         margin: 15px;
         color: #333;
         font-size: 10px;
         }
         .container {
         width: 100%;
         max-width: 1200px; /* You can change this to 960px, 1140px, etc. */
         margin-left: auto;
         margin-right: auto;
         /* padding-left: 15px;
         padding-right: 15px; */
         box-sizing: border-box;
         }
         table {
         border-collapse: collapse;
         width: 100%;
         }
         h1, h2, h3 {
         margin: 0;
         padding: 0;
         }
         .header, .footer {
         text-align: center;
         margin-bottom: 0;
         }
         .work-order-header {
         display: flex;
         justify-content: space-between;
         }
         .work-order-box {
         border: 1px solid #ccc;
         padding: 10px;
         margin-bottom: 20px;
         }
         .section-title {
         background-color: #0072C6;
         color: #fff;
         padding: 5px;
         }
         .table-bordered th, .table-bordered td {
         border: 1px solid #000;
         padding: 8px;
         }
         .text-right {
         text-align: right;
         }
         .text-center {
         text-align: center;
         }
         .highlight {
         background-color:black;
         color: white;
         }
         .total-row {
         font-weight: bold;
         background-color: #D9EDF7;
         }
         .img-fluid {
         max-width: 100%;
         height: auto;
         display: block;
         }
         .head-terms{
         font-size: 14px;
         text-align: center;
         }
         @media print {
         body{
         font-size: 10px;
         }
         .terms{
         font-size: 10px!important;
         }
         .head-terms{
         font-size: 9px;
         text-align: center;
         }
         .inner-span{
         font-size: 10px;
         }
         }
         .border-box{
         border: 2px solid black;
         padding: 10px 20px 0px 20px;
         border-radius: 10px;
         }
         @media print {
         .page-break {
         page-break-before: always;
         }
         }
         .card {
         width: 18rem; /* 288px */
         border: 1px solid black;
         border-radius: 0.25rem;
         overflow: hidden;
         font-family: Arial, sans-serif;
         background-color: #fff;
         /*          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
         }
         .card-header {
         padding: 0.50rem 1rem;
         background-color: black;
         border-bottom: 1px solid #dee2e6;
         font-weight: bold;
         color: white;
         }
         .list-group {
         list-style: none;
         margin: 0;
         padding: 0;
         }
         .list-group-item {
         padding: 0.50rem 1rem;
         border-bottom: 1px solid #dee2e6;
         }
         .list-group-item:last-child {
         border-bottom: none;
         }
         .img-fluid{
         max-width: 75%;
         height: auto;
         display: block;
         }
         .bebas-neue-regular {
         font-family: "Bebas Neue", sans-serif;
         font-weight: 400;
         font-style: normal;
         }
         .ribbon-head {
         position: relative;
         margin: 0 auto 20px;
         padding: 5px 30px;
         text-align: center;
         background-color: black;
         color: white;
         font-family: "Bebas Neue", sans-serif;
         }
         .ribbon-head::before, .ribbon-head::after {
         content: '';
         width: 80px;
         height: 100%;
         background-color: #000000c9;
         /* position ribbon ends behind and slightly lower */
         position: absolute;
         z-index: -1;
         top: 20px;
         /* clip ribbon end shape */
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
         /* draw and position the folded ribbon bit */
         background-image: linear-gradient(45deg, transparent 50%, #544d49 50%);
         background-size: 20px 20px;
         background-repeat: no-repeat;
         background-position: bottom right;
         }
         .ribbon-head::before {
         left: -45px;
         }
         .ribbon-head::after {
         right: -45px;
         transform: scaleX(-1); /* flip horizontally */
         }
         /* everything below is for demo appearances and not important to the concept */
         @media (max-width: 400px) {
         .ribbon-head { font-size: 1.5rem; }
         }
         @media print {
         body {
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
         }
         @page {
         size: A4;          /* Force A4 sheet */
         margin: 0 !important;  /* Remove default page margins */
         }
         }
      </style>
      <style>
         @media print {
         button {
         display: none;
         }
         }
      </style>
      <div style="text-align: center; margin-top: 20px; display: flex; justify-content: center; gap: 15px;">
         <!-- Print Button -->
         <button onclick="window.print()" 
            style="
            background: linear-gradient(90deg, #333, #000);
            color: #fff;
            border: none;
            padding: 12px 28px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            "
            onmouseover="this.style.transform='scale(1.05)'; this.style.background='linear-gradient(90deg, #555, #111)';"
            onmouseout="this.style.transform='scale(1)'; this.style.background='linear-gradient(90deg, #333, #000)';"
            >
         Print
         </button>
         <!-- Back Button -->
         <button onclick="history.back()" 
            style="
            background: linear-gradient(90deg, #777, #444);
            color: #fff;
            border: none;
            padding: 12px 28px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            "
            onmouseover="this.style.transform='scale(1.05)'; this.style.background='linear-gradient(90deg, #999, #666)';"
            onmouseout="this.style.transform='scale(1)'; this.style.background='linear-gradient(90deg, #777, #444)';"
            >
         Back
         </button>
      </div>
   </head>
   <?php
      include '../config.php';
      
      $orderid = $_GET['orderid'];
      
      // 1. Get proposal data first (financial / proposal details)
       $proposal_sql = "SELECT * FROM proposals WHERE id = '$orderid'";
      $proposal_res = mysqli_query($conn, $proposal_sql);
      
      if(!$proposal_res || mysqli_num_rows($proposal_res) == 0){
          die("Proposal not found.");
      }
      
      $proposal = mysqli_fetch_assoc($proposal_res);
      // print_r($proposal);
      $lead_id = $proposal['lead_id'];
      
      // 2. Get the positive lead data using lead_id (customer / project details)
      $lead_sql = "SELECT p.*, s.segment_name 
                   FROM tb_positiveleads p
                   LEFT JOIN segments s ON p.segment = s.id
                   WHERE p.id = '$lead_id'";
      $lead_res = mysqli_query($conn, $lead_sql);
      
      if(!$lead_res || mysqli_num_rows($lead_res) == 0){
          die("Lead not found.");
      }
      
      $order = mysqli_fetch_assoc($lead_res);
      ?>
   <body>
      <div>
         <div class="container" style="height:297mm;width: 200mm;">
            <div class="border-box">
               <div class="header" style="display:flex;justify-content:space-between;align-items:start;margin-top:0px;">
                  <div style="width: 33.33%;height:;">
                     <!-- Left or center content (if any) -->
                     <div style=""></div>
                     <!-- QR and barcode container aligned to the right -->
                     <div style="
                        display: flex;
                        align-items: stretch; /* stretch all child elements to equal height */
                        gap: 8px;
                        justify-content: flex-start;margin-bottom:2px;
                        ">
                        <img src="qrcode.png" alt="QR" style="width: 40%; object-fit: contain;">
                        <div style="display: flex; flex-direction: column; gap: 8px; width: 40%;">
                           <div style="flex: 1;border:1px solid #0000002e">
                              <p style="background-color:black;color:white;margin:0;">QUOTATION #</p>
                              <p style="margin:0;background-color:color:black;font-size:15px;"><?php echo $proposal['proposal_no'];?></p>
                              <!-- <p style="margin:0;background-color:#f2f2f2;color:black;">00-000</p> -->
                           </div>
                           <div style="flex: 1;border:1px solid #0000002e">
                              <p style="background-color:black;color:white;margin:0;">ORDER DATE</p>
                              <p style="margin:0;background-color:color:black;font-size:15px;"><?php echo $proposal['created_at'];?></p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div style="    width: 33.33%;
                     text-align: center;
                     display: flex
                     ;
                     align-items: center;
                     justify-content: center;flex-direction: column;">
                     <div 
                        >
                        <h1 class="bebas-neue-regular " style="font-size:40px;">PROPOSAL FORM</h1>
                        <img src="title-bg.png" alt="" style="width: 35%;">
                     </div>
                     <img src="gem-logo.png" style="width: 35%; height: auto;">
                     <!-- <div class="ribbon">
                        <h2>ORDER FORM</h2>
                        </div> -->
                     <!-- <h2 style="font-size:40px;" class="bebas-neue-regular">ORDER FORM</h2> -->
                  </div>
                  <div style="text-align:left;width: 33.33%;display:flex;flex-direction:column;align-items:flex-end;margin-top:-10px;">
                     <img src="pro-logo.png" style="width: 75%; height: auto;">
                     <img src="barcode.png" alt="Barcode" style="width: 75%;">
                     <p style="text-align: center;letter-spacing: 12px;">1234567890</p>
                     <!-- <p>
                        4th Floor, Park House<br>
                        Round North, Thrissur, Kerala, India - 001<br>
                        Phone: +91 9447151442<br>
                        <a href="#">www.programers.in</a>
                        </p> -->
                  </div>
               </div>
               <div style="width: 100%;margin-top:5px;">
                  <div style="display:flex;gap:10px;">
                     <div class="card" style="width: 33.33%;">
                        <div class="card-header">CUSTOMER DETAILS</div>
                        <ul class="list-group">
                           <li class="list-group-item"><?php echo $order['company_name'];?>
                              <br><?php echo $order['location'];?>
                              <br>
                           </li>
                        </ul>
                     </div>
                     <div class="card" style="width: 33.33%;">
                        <div class="card-header">PROPOSAL DETAILS</div>
                        <ul class="list-group">
                           <div>
                              <ul class="list-group">
                                 <li class="list-group-item"><b>BDO /BDM: <?php echo $order['bdm'];?></b></li>
                                 <?php
                                    // Count how many proposals exist for this lead
                                    // $lead_id = $proposal['lead_id'];
                                    $rev_sql = "SELECT COUNT(*) AS revision_count FROM proposals WHERE lead_id = '$lead_id'";
                                    $rev_res = mysqli_query($conn, $rev_sql);
                                    $rev_data = mysqli_fetch_assoc($rev_res);
                                    
                                    // Current revision number
                                    $revision_number = $rev_data['revision_count'];
                                    
                                    // Display: if more than 1, show "Revised"
                                    $revision_text = $revision_number > 1 ? " (Revised #$revision_number)" : "";
                                    ?>
                                 <li class="list-group-item"><b>Quotation Revision#: <?php echo $proposal['proposal_no'] . $revision_text; ?></b></li>
                                 <li class="list-group-item"><b>Quotation By: <?php echo $proposal['qtnby'];?></b></li>
                              </ul>
                           </div>
                        </ul>
                     </div>
                     <div class="card" style="width: 33.33%;">
                        <div class="card-header">PROJECT DETAILS</div>
                        <ul class="list-group">
                           <div>
                              <ul class="list-group">
                                 <li class="list-group-item"><b>Category:</b><?php echo $order['segment_name'];?></li>
                                 <li class="list-group-item"><b>Customer Type:</b> NEW</li>
                                 <li class="list-group-item"><b>Sources:</b>123456</li>
                              </ul>
                           </div>
                        </ul>
                     </div>
                  </div>
               </div>
               <!-- <table class="table-bordered">
                  <thead class="highlight" style="background-color:#3364a7!important;color:white;">
                     <tr>
                        <th colspan="1">REQUESTED BY</th>
                        <th colspan="2">JOB DETAILS</th>
                     </tr>
                  </thead>
                  <tbody style="background-color:#f3f3f3!important;">
                     <tr>
                        <td class="text-center" colspan="1">Name<br>
                           Company Name<br>
                           Street Address<br>
                           City, ST ZIP<br>
                           (000) 000-0000
                        </td>
                        <td class="text-center" colspan="2">[Enter general description of work]</td>
                     </tr>
                  </table> -->
               <div></div>
               <style>
                  .signature-box {
                  /*                   border: 1px solid #000; */
                  display: inline-block;
                  padding: 8px 12px;
                  font-family: Arial, sans-serif;
                  position: relative;
                  background-color: #fff;
                  width: 80%;
                  }
                  .signature-title {
                  font-size: 12px;
                  font-weight: bold;
                  color: #222;
                  }
                  .signature-text {
                  font-size: 10px;
                  color: #333;
                  margin-top: 4px;
                  line-height: 1.4;
                  z-index: 2;
                  position: relative;
                  }
                  .checkmark {
                  position: absolute;
                  right: 117px;
                  top: 0px;
                  font-size: 48px;
                  color: green;
                  font-weight: bold;
                  transform: rotate(12deg);
                  }
                  .tooltip {
                  position: absolute;
                  right: 15px;
                  top: 40px;
                  background: #fff8dc;
                  border: 1px solid #aaa;
                  padding: 4px 8px;
                  font-size: 12px;
                  display: none;
                  }
                  .signature-box:hover .tooltip {
                  display: block;
                  }
               </style>
               <div class="" style="margin-top:5px;">
                  <!-- <h4 style="margin-top:20px;margin-bottom:0;">Hosting/Yearly Charges</h4> -->
                  <small>This Proposal form is issued in connection with the proposed project, and confirms our intent to proceed with the implementation as per the agreed terms and conditions.</small>
                  <div style="display:flex;gap:60px;margin-top:7px;">
                     <div style="width: 100%;">
                        <div style="display:flex">
                           <div style="width:30%;padding:0 10px 10px 0px;">
                              <table style="width: 100%;">
                                 <thead style="background-color:black;color:white;">
                                    <tr>
                                       <th style="font-size:10px;padding:0.50rem 1rem;text-transform: uppercase;">Terms &amp; Conditions</th>
                                    </tr>
                                 </thead>
                                 <tbody>
                                    <tr>
                                       <td>
                                          <div style="display: flex; align-items: flex-start; margin-bottom: 10px;text-align:justify;font-size:13px;margin-top:10px;">
                                             <strong style="margin-right: 5px;">1.</strong>
                                             <span><strong>Payments:</strong> 50% advance should be made on signing of contract and balance before hosting or implementing the product. All the payments should be done through demand draft / cheque / netbanking payable to respective company name named in the signed column.</span>
                                          </div>
                                          <div style="display: flex; align-items: flex-start; margin-bottom: 10px;text-align:justify;font-size:13px;">
                                             <strong style="margin-right: 5px;">2.</strong>
                                             <span><strong>Renewals:</strong> Yearly renewal (Yearly Rent) amount will be as per the yearly charges mentioned in the order form. The charges for server space will be started on the day of registration of the domain, irrespective of the site hosting date. The renewal charges for the website includes domain renewal and server space charges is to be paid 30 days before expiry date of the domain. Delayed payment may lose the domain. The rates for domain</span>
                                          </div>
                                          <div style="display: flex; align-items: flex-start; margin-bottom: 10px;text-align:justify;font-size:13px;">
                                             <strong style="margin-right: 5px;">3.</strong>
                                             <span><strong>Support:</strong> Support will be provided to you via internet, Email and phone in setting up and trouble shooting Software/web problems. Support will be available 6days in a week and 7hours in a day between 10.00am to 5.00pm. All the support will be through a valid ALC contract only.</span>
                                          </div>
                                          <div style="display: flex; align-items: flex-start; margin-bottom: 10px;text-align:justify;font-size:13px;">
                                             <strong style="margin-right: 5px;">4.</strong>
                                             <span><strong>Support:</strong> Support will be provided to you via internet, Email and phone in setting up and trouble shooting Software/web problems. </span>
                                          </div>
                                          <div style="display: flex;gap: 10px;">
                                          </div>
                                          <!-- <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                             <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Accepted By</div>
                                             <div style="    padding-left: 10px;
                                                padding-right: 10px;
                                                padding-top: 5px;">
                                                <div style="    display: flex;
                                                   align-items: center;
                                                   justify-content: center;">
                                                   <div class="signature-box">
                                                      <div class="signature-title">Signature valid</div>
                                                      <div class="signature-text">
                                                         Digitally signed by <b>Cotton Tree</b><br>
                                                         Date: 2013.05.06 21:12:36 -05:00<br>
                                                         Location: USA
                                                      </div>
                                                      <div class="checkmark">✔</div>
                                                      <div class="tooltip">Valid signature</div>
                                                   </div>
                                                </div>
                                             </div> -->
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                              <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Approved By</div>
                                 <div style="padding:2px;">
                                    <div class="signature-box">
                                       <div class="signature-title">Signature valid</div>
                                       <div class="signature-text">
                                          Digitally signed by <b>Programers International</b><br>
                                          Date: 2013.05.06 21:12:36 -05:00<br>
                                          Location: USA
                                       </div>
                                       <div class="checkmark">✔</div>
                                       <div class="tooltip">Valid signature</div>
                                    </div>
                                    <span style="display:flex;justify-content:space-between;align-items: baseline;margin-top: -15px;"><span><span>Authorised signatory:</span></span><span style="display: flex;align-items: end;justify-content: end;"><img src="seal.png" alt="" class="img-fluid" style="        position: relative;
                                       left: 20px;
                                       width: 40%;
                                       top: -50px;"> <span>(Seal)</span></span></span>
                                 </div>
                              </div>
                              <!-- <div class="card" style="width: 100%;height:120px;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">I accepted the terms &amp; conditions</div>
                                 <div style="    display: flex
                                    ;
                                    flex-direction: column;
                                    gap: 30px;padding:10px;">
                                    <span>Customer name &amp; Signature:</span>
                                    <span style="display:flex;justify-content:space-between;align-items: baseline;margin-top: -5px;"><span>Date:</span><span style="display: flex;align-items: end;justify-content: end;"></span></span>                                 
                                 </div>
                                 </div> -->
                           </div>
                           <div style="width:70%;">
                              <div class="card" style="width: 100%;height:98%;display: flex;justify-content: space-between;flex-direction:column;>;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;text-transform: uppercase;">Proposal Summary</div>
                                 <div style="padding:10px; text-align:justify; vertical-align:top;font-size:13px;height: 75%;"><?php
                                    // Get proposal text from database
                                    $raw_proposal = $proposal['details'];
                                    $total = $proposal['total'];
                                    $discount = $proposal['discount'];
                                    // Split into lines
                                    $lines = explode("\n", $raw_proposal);
                                    
                                    // Take only first 60 lines
                                    $max_lines = 20;
                                    $first_part_lines = array_slice($lines, 0, $max_lines);
                                    $proposal_text = implode("\n", $first_part_lines);
                                    
                                    // 1️⃣ Convert major headings (ends with :- or titles) to bold and bigger
                                    $proposal = preg_replace(
                                        '/^(Key Modules and Features:-|Detailed Scope:-|Investment & Pricing:-|Implementation Timeline:-|Benefits:-|Support & Maintenance:-)$/m',
                                        '<h2 style="margin-top:25px; margin-bottom:10px; color:#222;">$1</h2>',
                                        htmlspecialchars($proposal_text)
                                    );
                                    
                                    // 2️⃣ Convert numbered list items like "1.Admin Control" to bold
                                    $proposal = preg_replace('/^(\d+)\.(.+)$/m', '<strong>$1.$2</strong>', $proposal);
                                    
                                    // 3️⃣ Convert bullets "* text" into proper <li> elements
                                    $proposal = preg_replace('/^\* (.+)$/m', '<li>$1</li>', $proposal);
                                    
                                    // 4️⃣ Wrap consecutive <li> items in <ul>
                                    $proposal = preg_replace_callback('/(<li>.*?<\/li>)/s', function($matches){
                                        return '<ul style="margin:5px 0 15px 25px; padding:0;">'.$matches[1].'</ul>';
                                    }, $proposal);
                                    
                                    // 5️⃣ Preserve other line breaks
                                    $proposal = nl2br($proposal);
                                    
                                    // Display the formatted proposal (only first 60 lines)
                                    echo $proposal;
                                    
                                    // 6️⃣ Add "Continued on next page" if more lines exist
                                    if(count($lines) > $max_lines){
                                        echo '<p style="text-align:center; font-style:italic; margin-top:5px;">--- Continued on next page ---</p>';
                                    }
                                    ?>
                                 </div>
                                 <div>
                                    <!-- <p style="padding-left: 10px;font-size: 12px;"><b>Summary of Proposal:(Except additional items)</b></p> -->
                                    <!-- <hr> -->
                                    <div class="card-header" style="background-color:white;color:black;text-align:left;text-transform: capitalize;font-size: 12px;padding-left: 15px;border-bottom: 1px solid black;border-top:;">All Amt in Indian Rupees | No additional service or items | E&O</div>
                                    <ul class="list-group " style="display: flex;width: 100%;justify-content: space-between;">
                                       <li class="list-group-item" style="border: 1px solid black;width: 75%;font-size: 13px!important;display: flex;justify-content: space-between;"><b>Total: <?php echo $total;?>/-</b><span>(Discount: <?php echo $discount;?>/-)</span></li>
                                       <!-- <li class="list-group-item"><b>Tax:</b></li> -->
                                       <li class="list-group-item" style="border: 1px solid black;width: 25%;font-size: 13px!important;"><b>Net: <?php echo $total-$discount;?>/-</b></li>
                                       <!-- <li class="list-group-item"><b>Amount in Words:</b></li> -->
                                    </ul>
                                    <p style="padding-left: 15px;font-size: 13px!important;display: flex;justify-content: space-between;"><b><?php
                                       $amount = $total-$discount;
                                       echo numberToWords($amount) . " Rupees";
                                       ?> Only</b>
                                       <span style="padding-right: 10px;"><b>Annexure - A(3 Pages)</b></span>
                                    </p>
                                    <!--      <ul class="list-group">
                                       <li class="list-group-item" style="font-size: 12px;"><b>Total Amt:30000/- | Discount: 5000/- | Net Amt:25000/- <br>Amt in Ruppees: Twenty Five Thousand Only/-</b></li>
                                       
                                       <li class="list-group-item"><b>Discount:</b> </li>
                                       <li class="list-group-item"><b>Tax:</b></li>
                                       <li class="list-group-item"><b>Net Amount:</b></li>
                                       </ul> -->
                                 </div>
                              </div>
                              <div style="display: flex;gap: 10px;">
                                 <!-- <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                    <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Approved By</div>
                                    <div style="padding:10px;">
                                       <span>For PROGRAMERS International:</span><br>
                                       <span style="display:flex;justify-content:space-between;align-items: baseline;margin-top: -15px;"><span><span>Authorised signatory:</span></span><span style="display: flex;align-items: end;justify-content: end;"><img src="seal.png" alt="" class="img-fluid" style="position: relative;
                                          left: 25px;
                                          width: 40%;"> <span>(Seal)</span></span></span>
                                    </div>
                                    </div> -->
                                 <!-- <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                    <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Accepted By</div>
                                    <div style="    padding-left: 10px;
                                       padding-right: 10px;
                                       padding-top: 5px;">
                                       <div style="    display: flex;
                                          align-items: center;
                                          justify-content: center;">
                                          <div class="signature-box">
                                             <div class="signature-title">Signature valid</div>
                                             <div class="signature-text">
                                                Digitally signed by <b>Cotton Tree</b><br>
                                                Date: 2013.05.06 21:12:36 -05:00<br>
                                                Location: USA
                                             </div>
                                             <div class="checkmark">✔</div>
                                             <div class="tooltip">Valid signature</div>
                                          </div>
                                       </div>
                                    </div>
                                    </div> -->
                                 <!-- <div class="card" style="width: 100%;margin-top:10px;">
                                    <div style="padding:10px;">
                                       <span>Accepted By:</span><br>
                                       <span style="display:flex;justify-content:space-between;align-items: baseline;margin-top: -15px;"><span></span><span style="display: flex;align-items: end;justify-content: end;height: 100;">
                                          <img src="seal.png" alt="" class="img-fluid" style="position: relative;
                                          left: 25px;
                                          width: 33%;"> <span>(Seal)</span></span></span>
                                    </div>
                                    </div> -->
                              </div>
                              <div></div>
                              <!--  <div style="display:flex;margin-top:15px;align-items:center;">
                                 <div>
                                     <img src="qrcode.png" alt="" class="img-fluid" style="width: 150px;">
                                     </div>
                                     <div>
                                     <p style="margin:0;">For download PDF Online,</p>
                                     <b style="margin:0;">Scan the QR Code</b>
                                     </div>
                                 </div> -->
                           </div>
                        </div>
                     </div>
                  </div>
                  <hr style="margin:0;">
                  <p style="text-align: center;margin-bottom: 0!important;margin-top: 0!important;padding-bottom: 5px;padding-top: 5px;">4th Floor, Park House ,Round North, Thrissur, Kerala, India - 680 001 | info@programers.in, www.programers.in | Ph: 9447151442, 94464 51442</p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
<?php
   function numberToWords($number) {
       $hyphen      = '-';
       $conjunction = ' and ';
       $separator   = ', ';
       $negative    = 'negative ';
       $decimal     = ' point ';
       $dictionary  = array(
           0 => 'zero',
           1 => 'one',
           2 => 'two',
           3 => 'three',
           4 => 'four',
           5 => 'five',
           6 => 'six',
           7 => 'seven',
           8 => 'eight',
           9 => 'nine',
           10 => 'ten',
           11 => 'eleven',
           12 => 'twelve',
           13 => 'thirteen',
           14 => 'fourteen',
           15 => 'fifteen',
           16 => 'sixteen',
           17 => 'seventeen',
           18 => 'eighteen',
           19 => 'nineteen',
           20 => 'twenty',
           30 => 'thirty',
           40 => 'forty',
           50 => 'fifty',
           60 => 'sixty',
           70 => 'seventy',
           80 => 'eighty',
           90 => 'ninety',
           100 => 'hundred',
           1000 => 'thousand',
           1000000 => 'million',
           1000000000 => 'billion',
           1000000000000 => 'trillion'
       );
       
       if (!is_numeric($number)) {
           return false;
       }
       
       if (($number >= 0 && (int) $number < 0) || (int) $number < 0 - PHP_INT_MAX) {
           // overflow
           return false;
       }
   
       if ($number < 0) {
           return $negative . numberToWords(abs($number));
       }
       
       $string = $fraction = null;
       
       if (strpos($number, '.') !== false) {
           list($number, $fraction) = explode('.', $number);
       }
       
       switch (true) {
           case $number < 21:
               $string = $dictionary[$number];
               break;
           case $number < 100:
               $tens   = ((int) ($number / 10)) * 10;
               $units  = $number % 10;
               $string = $dictionary[$tens];
               if ($units) {
                   $string .= $hyphen . $dictionary[$units];
               }
               break;
           case $number < 1000:
               $hundreds  = (int) ($number / 100);
               $remainder = $number % 100;
               $string = $dictionary[$hundreds] . ' ' . $dictionary[100];
               if ($remainder) {
                   $string .= $conjunction . numberToWords($remainder);
               }
               break;
           default:
               $baseUnit = pow(1000, floor(log($number, 1000)));
               $numBaseUnits = (int) ($number / $baseUnit);
               $remainder = $number % $baseUnit;
               $string = numberToWords($numBaseUnits) . ' ' . $dictionary[$baseUnit];
               if ($remainder) {
                   $string .= $remainder < 100 ? $conjunction : $separator;
                   $string .= numberToWords($remainder);
               }
               break;
       }
       
       if (null !== $fraction && is_numeric($fraction)) {
           $string .= $decimal;
           $words = array();
           foreach (str_split((string) $fraction) as $digit) {
               $words[] = $dictionary[$digit];
           }
           $string .= implode(' ', $words);
       }
       
       return ucfirst($string);
   }
   
   // $amount = $order['total_amount'] - $order['discount_amount'];
   // echo numberToWords($amount);
   ?>
<?php
   if (count($lines) > $max_lines) {
       $remaining_lines = array_slice($lines, $max_lines);
       $second_part_text = implode("\n", $remaining_lines);
   
       // Format the remaining proposal text
       $proposal2 = preg_replace(
           '/^(Key Modules and Features:-|Detailed Scope:-|Investment & Pricing:-|Implementation Timeline:-|Benefits:-|Support & Maintenance:-)$/m',
           '<h2 style="margin-top:25px; margin-bottom:10px; color:#222;">$1</h2>',
           htmlspecialchars($second_part_text)
       );
   
       $proposal2 = preg_replace('/^(\d+)\.(.+)$/m', '<strong>$1.$2</strong>', $proposal2);
       $proposal2 = preg_replace('/^\* (.+)$/m', '<li>$1</li>', $proposal2);
       $proposal2 = preg_replace_callback('/(<li>.*?<\/li>)/s', function($matches){
           return '<ul style="margin:5px 0 15px 25px; padding:0;">'.$matches[1].'</ul>';
       }, $proposal2);
       $proposal2 = nl2br($proposal2);
   
       echo '
       <div style="page-break-before:;">
       <div class="container" style="height:285mm;width: 200mm;">
           <div class="border-box" style="border:2px solid #000; border-radius:10px; margin-right:8px; padding-left:25px; box-sizing:border-box; display:flex; flex-direction:column; height:100%;padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 8px;">
               
               <!-- Header -->
               <div class="header" style="display:flex;justify-content:space-between;align-items:start;margin-top:0px;">
                  <div style="width: 33.33%;height:;">
                     <!-- Left or center content (if any) -->
                     <div style=""></div>
                     <!-- QR and barcode container aligned to the right -->
                     <div style="
                        display: flex;
                        align-items: stretch; /* stretch all child elements to equal height */
                        gap: 8px;
                        justify-content: flex-start;margin-bottom:2px;
                        ">
                        <img src="qrcode.png" alt="QR" style="width: 40%; object-fit: contain;">
                        <div style="display: flex; flex-direction: column; gap: 8px; width: 40%;">
                           <div style="flex: 1;border:1px solid #0000002e">
                              <p style="background-color:black;color:white;margin:0;">QUOTATION #</p>
                              <p style="margin:0;background-color:color:black;font-size:15px;">P2025-0006</p>
                              <!-- <p style="margin:0;background-color:#f2f2f2;color:black;">00-000</p> -->
                           </div>
                           <div style="flex: 1;border:1px solid #0000002e">
                              <p style="background-color:black;color:white;margin:0;">ORDER DATE</p>
                              <p style="margin:0;background-color:color:black;font-size:15px;">2025-10-15 14:30:05</p>
                           </div>
                        </div>
                     </div>
                     <p style="    margin-top: 0 !important;
   text-align: left;
   margin-bottom: 0 !important;"><b>ANNEXURE - A (1/3)</b></p>
                  </div>
                  <div style="    width: 33.33%;
                     text-align: center;
                     display: flex
                     ;
                     align-items: center;
                     justify-content: center;flex-direction: column;">
                     <div 
                        >
                        <h1 class="bebas-neue-regular " style="font-size:40px;">PROPOSAL FORM</h1>
                        <img src="title-bg.png" alt="" style="width: 35%;">
   
                     </div>
   
                     <img src="gem-logo.png" style="width: 35%; height: auto;">
                     <!-- <div class="ribbon">
                        <h2>ORDER FORM</h2>
                        </div> -->
                     <!-- <h2 style="font-size:40px;" class="bebas-neue-regular">ORDER FORM</h2> -->
                  </div>
                  <div style="text-align:left;width: 33.33%;display:flex;flex-direction:column;align-items:flex-end;margin-top:-10px;">
                     <img src="pro-logo.png" style="width: 75%; height: auto;">
                     <img src="barcode.png" alt="Barcode" style="width: 75%;"> 
   
                     <p style="text-align: center;letter-spacing: 12px;margin-bottom:0!important;">1234567890</p>     
                     <p style="text-align: center;margin-top:5px;">P2025-0006 | 10/11/25 | HUSNA</p>     
                                       <!-- <p>
                        4th Floor, Park House<br>
                        Round North, Thrissur, Kerala, India - 001<br>
                        Phone: +91 9447151442<br>
                        <a href="#">www.programers.in</a>
                        </p> -->
                  </div>
               </div>
               <!-- <h4 style="margin-top:20px;margin-bottom:0;">Hosting/Yearly Charges</h4> -->
                  <small style="margin-top:8px;">This Proposal form is issued in connection with the proposed project, and confirms our intent to proceed with the implementation as per the agreed terms and conditions.</small>
               <div style="width:100%;margin-top:8px;height:100%;">
                              <div class="card" style="width: 100%;height:97%;display: flex;justify-content: space-between;flex-direction:column;&gt;;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;text-transform: uppercase;">Proposal in Details</div>
                                 <div style="padding:10px; text-align:justify; vertical-align:top;font-size:13px;height:100%;">Greetings From Programers!!!!<br>
   <br>
   We propose designing and developing a dynamic website for your designing boutique, showcasing your work, services, and brand. The website will be responsive, user-friendly, and optimized for search engines.<br>
   <br>
   Features and Functionalities:-<br>
   <strong>1. Custom Design: Tailored design to reflect your brand identity.<br>
   </strong><br>
   <strong>2. Responsive Design: Adaptable to various screen sizes and devices.<br>
   </strong><br>
   <strong>3. Portfolio: Showcase your designs and projects.<br>
   </strong><br>
   <strong>4. Services: Highlight your services and expertise.<br>
   </strong><br>
   <strong>5. Blog: Share your insights, news, and industry trends.<br>
   </strong><br>
   <strong>6. Contact Form: Simple and intuitive contact form.<br>
   </strong><br>
   <strong>7. Social Media Integration: Links to your social media profiles.<br>
   </strong><br>
   
   <br>
   Payment Terms<br>
   <strong>1. 50% Advance Payment: Upon project commencement.<br>
   </strong><br>
   <strong>2. 30% Payment: Upon completion of design phase.<br>
   </strong><br>
   <strong>3. 20% Final Payment: Upon project launch.<br>
   </strong><br>
   
   <br>
   Total Cost : 28000/-<br>
   <br>
   <p style="text-align:center; font-style:italic; margin-top:10px;">--- End of page ---</p>                                 </div>
                                 <div style="display:flex;gap:10px;padding:10px;">
                                 <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Bank Details</div>
                                 <div style="padding:10px;">
                                    <span>Programers International</span><br>
                                    <span>IFSC Code: 1234567890</span><br>
                                    <span>Account No: 1234567890</span><br>
                                    <span>Branch: Thrissur</span><br>
                                 </div>
                              </div>
                                 <div class="card" style="width: 100%;margin-top:10px;height:120px;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;font-size:10px;">Approved By</div>
                                 <div style="padding:10px;">
                                    <div class="signature-box">
                                       <div class="signature-title">Signature valid</div>
                                       <div class="signature-text">
                                          Digitally signed by <b>Programers International</b><br>
                                          Date: 2013.05.06 21:12:36 -05:00<br>
                                          Location: USA
                                       </div>
                                       <div class="checkmark">✔</div>
                                       <div class="tooltip">Valid signature</div>
                                    </div>
                                    <span style="display:flex;justify-content:space-between;align-items: baseline;margin-top: -15px;"><span><span>Authorised signatory:</span></span><span style="display: flex;align-items: end;justify-content: end;"><img src="seal.png" alt="" class="img-fluid" style="        position: relative;
                                       left: 20px;
                                       width: 26%;
                                       top: -60px;"> <span>(Seal)</span></span></span>
                                 </div>
                              </div>
                              </div>
                              <div style="display:flex;margin-top:15px;align-items:center;">
                                 <!-- <div>
                                    <img src="qrcode.png" alt="" class="img-fluid" style="width: 150px;">
                                    </div>
                                    <div>
                                    <p style="margin:0;">For download PDF Online,</p>
                                    <b style="margin:0;">Scan the QR Code</b>
                                    </div> -->
                              </div>
                           </div>
   
           </div>

                              <hr style="margin:0;">
                  <p style="text-align: center;margin-bottom: 0!important;margin-top: 0!important;padding-bottom: 5px;padding-top: 5px;">4th Floor, Park House ,Round North, Thrissur, Kerala, India - 680 001 | info@programers.in, www.programers.in | Ph: 9447151442, 94464 51442</p>
           </div>
       </div>';
   }
   ?>