<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Swizzle Pay</title>
    <meta name="color-scheme" content="only">
    <link rel="stylesheet" href="<%= process.env.APP_URL %>/css/main.css">
    <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=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> -->
<style>
  body {font-family: "K2D", sans-serif;}
  h3{font-size:1.475rem !important;}
  .logo{width: 200px;margin-bottom: 50px;}
  /* .card.invoice-card {
    min-height: 35px;
    margin-bottom: 20px;
    border-radius: 0px !important;
    display: flex;
    align-items: center;
    border: 0px !important;
    justify-content: center;
} */
p,small{margin-bottom: .425rem !important;font-size: 1.275rem !important;}
span.paid-badge {
    padding: 5px;
    position: absolute;
    bottom: 0;
    background: red;
    width: 100%;
    left: 0;
    font-size: 14px;
}
.primary{color: #3276FD !important;}
.card.invoice-card small {color:#A0C0FF;}
.btn.btn-primary {background: #3276FD !important;}
.border-dashed-bottom { border-bottom: 1px dashed #DBDBDB;}
.primary-border-bottom { border-bottom: 1px dashed #A0C0FF;}
.gray {color: #969696;}
.primary {color: #3276FD;}
.qr-code-sec {
    text-align: center;
    background: #F9FBFF;
    margin-top: 30px;
    border-radius: 20px;
}
.qr-code-sec img {
  width: 200px;
}
a.link {
  color: #3276FD;
  text-decoration: none;
  font-size: 18px;
}

@page {
  size: A4 Portrait;
  margin: 5mm 5mm 5mm 5mm; 
}


</style>
<!-- Add this script at the bottom of your page -->


  </head>
    <body>
      <div class="container">
        <div class="row invoice-container">
          <!-- <div class="col-12">
            <div class="card invoice-card text-center">
               <div class="mb-4">
                <h5 class="mb-0"><%= customerData.customer_name %></h5>
                <small><%= customerData.customer_email %></small>
              </div> 
              <% if (invoiceListDetails.invoiceStatus === '0') { %>
             <span class="paid-badge" style="padding: 8px;width: 100%;color: #FF0000;font-size: 1rem;border-bottom: 1px dashed #FF0000;">Unpaid</span>
             <% } %>
             <% if (invoiceListDetails.invoiceStatus === '1') { %>
              <span class="paid-badge" style="padding: 8px;width: 100%;color: #0a9443;font-size: 1rem;border-bottom: 1px dashed #0a9443;">Paid</span>
              <% } %>

            </div>
          </div> -->
          <div class="col-12">
            <div class="text-center">
              <% if (logoUrl !== '') { %> 
                <img src="<%= logoUrl %>" class="logo" alt="SwizzlePay">
                <% } %>
                <% if (logoUrl === '') { %> 
                  <h2 style="padding:5px 10px;  text-align: center; text-transform: uppercase; display: inline-block; margin: 30px auto; color: #3276FD;" class="fw-medium primary"> <%= org_name %></h2>

                 <% } %>
            </div>
          </div>
          <div class="col-12">
            <div class="row">
              <div class="col-6">
                <p class="gray">Invoice Number</p>
              </div>
              <div class="col-6 text-end">
                <p style="color: #3276FD !important;"><%= invoiceListDetails.invoiceNum %></p>
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <p class="gray">Invoice Date</p>
              </div>
              <div class="col-6 text-end">
                <p> <%= invoiceListDetails.invoiceDate %></p>
              </div>
            </div>
            <div class="row">
              <div class="col-6">
                <p class="gray">Due Date</p>
              </div>
              <div class="col-6 text-end">
                <p><%= invoiceListDetails.invoiceDueDate %></p>
              </div>
            </div>
            <div class="col-12">
              <h3 class="mb-2">Invoice Items</h3>
              <div class="row">
                <div class="col-12">
                    <% invoiceItemList.forEach(function(item) { %>

                        <div class="mb-1 border-dashed-bottom">
                            <div class="d-flex justify-content-between">
                            <p class=""><%= item.item_name %></p>
                            <p class="">$ <%= item.price %></p>
                            </div>
                            <div>
                                <p class="mb-2 gray">Quantity : <%= item.quantity %></p>
                            </div>
                        </div>
                    <% }); %>
           
                </div>
              </div>
            </div>

            
            <div class="col-12">
              <h3 class="mb-2">Summary</h3>
            
                    <div class="d-flex justify-content-between">
                      <p class="gray">Subtotal</p>
                      <p>$<%= invoiceListDetails.subtotal %></p>
                    </div>
                

                  <div class="d-flex justify-content-between align-items-center">
                      <p class="gray">Tax</p>
                      <p>$<%= invoiceListDetails.taxamount %> <% if ((invoiceListDetails.taxpercentage !== '') ) { %>(<%= invoiceListDetails.taxpercentage %>%)  <% } %></p>
                  </div>
    
                    <div class="d-flex justify-content-between align-items-center">
                      <p class="gray">Total</p>
                      <h2 class="primary" style="color:#3276FD; font-size: 22px;">$<%= invoiceListDetails.total %></h2>

                    </div>
               
          
              </div>
            </div>

            <div class="col-12">
              <h3 class="mb-2">Billed By</h3>
              <div class="row">
                <div class="col-12">
                  <div class="mb-2 primary-border-bottom">
                    <p><%= userDetails[0].first_name %> <%= userDetails[0].last_name %></p>
                    <p class="gray"><%= userDetails[0].email %></p>
                    <!-- <p class="mt-3">TC 29/2637-1, 8th, Carmel Towers, P.O, Cotton Hill, Vazhuthacaud, Thiruvananthapuram, Kerala 695014</p> -->
                    <p class="mb-2"> <%= userPhoneNumber %></p>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12">
                <h3 class="mb-2">Billed To</h3>
                <div class="row">
                  <div class="col-12">
                    <div>
                      <p><%= customerData.customer_name %></p>
                      <p class="gray"><%= customerData.customer_email %></p>
                      <p><%= customerData.address %></p>
                      <p><%= customerData.phone_number %></p>
                    </div>
                  </div>
                </div>
              </div>

            <!-- <div class="col-12">
              <div class="qr-code-sec">
                <h3>Scan QR Code</h3>
                <h6 class="gray">Customer can pay now by <br>scanning this QR Code</h6>
                <img src="qr-code.png" alt="Scan QR Code">
              </div>
            </div> -->
          </div>
        </div>
        </div>
      </div>
    </body>
</html>