<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>ORDER 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 10px 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; }
         }
           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>

         <?php
   include '../config.php';
   $orderid = $_GET['orderid'];
   $sql = "SELECT * FROM marketing_order WHERE id = '$orderid'";
   $res = mysqli_query($conn, $sql);
   $order = mysqli_fetch_assoc($res);
   ?>
   </head>
   <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="text-align:left;width: 33.33%;">
                     <img src="pro-logo.png" style="width: 75%; height: auto;">
                     <img src="barcode.png" alt="Barcode" style="width: 75%;">
                     <!-- <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 style="    width: 33.33%;
                     text-align: center;
                     display: flex
                     ;
                     align-items: center;
                     justify-content: center;">
                     <div 
                        >
                        <h1 class="bebas-neue-regular " style="font-size:40px;">ORDER FORM</h1>
                        <img src="title-bg1.png" alt="" style="width: 35%;">
                     </div>
                     <!-- <div class="ribbon">
                        <h2>ORDER FORM</h2>
                        </div> -->
                     <!-- <h2 style="font-size:40px;" class="bebas-neue-regular">ORDER FORM</h2> -->
                  </div>
                  <div style="
                     /* display: flex; */
                     width: 33.33%;
                     ">
                     <!-- 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-end;margin-bottom:2px;
                        ">
                        <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;">ORDER #</p>
                              <p style="margin:0;background-color:color:black;font-size:15px;"><?php echo $order['order_id'];?></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 $order['order_date'];?></p>
                           </div>
                        </div>
                        <img src="qrcode.png" alt="QR" style="width: 40%; object-fit: contain;">
                     </div>
                  </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</div>
                        <ul class="list-group">
                           <li class="list-group-item"><?php echo $order['company_name'];?><br>
                           <?php echo $order['location'];?></li>
                        </ul>
                     </div>
                     <div class="card" style="width: 33.33%;">
                        <div class="card-header">ORDER DETAILS</div>
                        <ul class="list-group">
                           <div>
                              <ul class="list-group">
                                 <li class="list-group-item"><b>Delivery Date:</b><?php echo $order['delivery_date'];?></li>
                                 <li class="list-group-item"><b>SRS By:</b>Husna</li>
                                 <li class="list-group-item"><b>BDO:</b><?php echo $order['bdo'];?></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['product_category'];?></li>
                                 <li class="list-group-item"><b>Domain:</b>www.programers.in</li>
                                 <li class="list-group-item"><b>Proposal No:</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>
               <div class="" style="margin-top:5px;">
                  <!-- <h4 style="margin-top:20px;margin-bottom:0;">Hosting/Yearly Charges</h4> -->
                  <small>This order 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:70%;">
                              <div class="card" style="width: 100%;height: 88%;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;">Order Details</div>
                                 <div style="padding:10px;">
                                    <?php echo $order['srs_text'];?>
                                 </div>
                                 <div>
                                      <!-- <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:;">Summary of Order:(Except any additional items) - All Amt in Indian Rupees</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: 100%;font-size: 13px!important;"><b>Total: 50000/-</b></li>
                                 <li class="list-group-item" style="border: 1px solid black;width: 100%;font-size: 13px!important;"><b>Discount: 5000/-</b></li>
                                 <!-- <li class="list-group-item"><b>Tax:</b></li> -->
                                 <li class="list-group-item" style="border: 1px solid black;width: 100%;font-size: 13px!important;"><b>Net: 25000/-</b></li>
                                 <!-- <li class="list-group-item"><b>Amount in Words:</b></li> -->
                              </ul>
                              <p style="padding-left: 15px;font-size: 13px!important;"><b>Amount in Words: Twenty Five Thousand Only</b></p>
                                 </div>
                              </div>
                              <div></div>
                              <div class="card" style="width: 100%;margin-top: 2px;height: 9.99%;">
                                 <div class="card-header" style="background-color:black;color:white;text-align:center;text-transform: uppercase;">For Office use only</div>
                                 <div style="padding:10px;">
                                    Remarks: <?php echo $order['remarks'];?>
                                 </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 style="width:30%;padding:0 10px 10px 10px;">
                              <table style="width: 100%;">
                                 <thead style="background-color:black;color:white;">
                                    <tr>
                                       <th style="font-size:10px;padding:0.50rem 1rem;">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>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                              <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;height:75px;justify-content: space-between;">
                                    <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 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;">I accepted the terms &amp; conditions</div>
                                 <div style="padding:10px;">
                                    <span>Authorised Signatory</span><br>
                                    <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;"><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;">
                                 <div style="padding:10px;height:50px;">
                                    <span>Branch Address</span>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <hr style="margin:0;">
                  <p style="text-align: center;">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>