<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=user.username%> - Corass Payment</title>
    <link rel="stylesheet" href="css/receipts.css">
    <link rel="stylesheet" href="css/bootstrap1.min.css">
    <script src="js/bootstrap1.min.js"></script>
    <style>
         .signature-line {
            display: inline-block;
            width: 250px;
            border-bottom: 1px solid #000;
            margin-bottom: 10px;
        } 
        .label {
            display: inline-block;
        }
    </style>
</head>
<body onload="window.print()" id="receipts.html">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12 mt-4">
                <center>
                    <div class="row justify-content-center  text-center">
                        <div class="col-lg-12 mt-4  text-center">
                            <div class="row justify-content-center">
                                <div class="col-lg-3 col-sm-6 col-md-6 logo_center">
                                    <img src="/img/kp.png" alt="">
                                </div>
                                <div class="col-lg-6 logo_center">
                                        <h1><b class="justify-content-center">KWARA STATE POLYTECHNIC</h1></h4>
                                        <h4><b class="justify-content-center">P.M.B 1375, Ilorin</b></h4>
                                        <h4><b class="justify-content-center">CORASS PAYMENT SUMMARY </b></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </center>
            </div>
        </div>
        <div class="mt-5">
                <img  src="/avatar/<%= profile.photo_path%>" alt="" width="73" height="73"  style="float: right;margin-right: 40px;">
            <ul style="list-style-type: none;">
                <li><u><b>PERSONAL DATA</b></u></li>
                <li><span><b>Matriculation No:</b></span> 
                    <span><%=user.username%></span>
                </li>
                <li><span><b>Student Name:</b></span> 
                    <span><%=profile.firstname%> <%=profile.middlename%> <%=profile.lastname%></span>
                </li>
                <li><span><b>Email Address:</b></span> 
                    <span><%=user.email%></span>
                </li>
                <li><span><b>Institute:</b></span> 
                    <span><%=profile.department.institute.name%></span>
                </li>
                <li><span><b>Department:</b></span> 
                    <span><%=profile.department.name%></span>
                </li>
                <li><span><b>Study Mode:</b></span>
                    <span><%=profile.study_mode.name%></span>
                </li>
                </ul>
                <ul style="list-style-type: none;">
                    <p><u><b>PAYMENT SUMMARY</b></u></p>
                    <table  width="100%" border="1" style="border: 1; border-collapse: collapse;" class=" table p-4 table-striped text-left ">
                        <thead>
                          <tr>
                            <!-- <th style="padding: 2;" scope="col ">#</th> -->
                            <th style="padding: 2;"  scope="col">Session</th>
                            <th style="padding: 2;"   scope="col">Receipt Number</th>
                            <th style="padding: 2;"  scope="col">Payment Description</th>
                            <th style="padding: 2;"  scope="col">Amount</th>
                            <th style="padding: 2;"  scope="col">Date</th>
                          </tr>
                        </thead>
                        <tbody>
                            <% if(getPayemtHistory && getPayemtHistory.length > 0){
                                id = 0
                                  for(var getPayemtHistorys of getPayemtHistory){
                                %>
                                <tr>
                                  <td><%=Sessions%></td>
                                    <td><%= getPayemtHistorys.txn_ref%></td>
                                    <td><%= getPayemtHistorys.package_name%> </td>
                                    <td><%= getPayemtHistorys.amount%> </td>
                                    <td><%= getPayemtHistorys.createdAt.toLocaleDateString() %> </td>
                                </tr>
                              <%}}%>
                        <% if(bindingPayment){
                        %>
                          <tr style="padding: 2;"  >
                            
                            <td><%=Sessions%></td>
                            <td><%= bindingPayment.txn_ref%></td>
                            <td>Binding  </td>
                            <td><%= bindingPayment.amount-200%>.00 </td>
                            <td><%= bindingPayment.createdAt.toLocaleDateString() %> </td>
                          </tr>
                        <%}%>
                        </tbody>
                      </table>
                      <br><br>
                      <div class="text text-center">
                        <div>
                            <div class="signature-line"></div>
                            <div class="signature-line" style="margin-left: 100px;"></div>
                            
                        </div>
                        <div>
                            <div class="label" ><strong>Date, Checking Officer Sig.</strong></div>
                            <div class="label" style="margin-left: 150px;"><strong>Date, Approving Officer Sig.</strong></div>
                        </div>
                    </div>
                    </ul>
                    
        </div>
        <img src="<%=src%>" alt="" style="float: right;">
        <br><br>
        <ul>
            <li><b>Print Date:</b><strong id="now"></strong></li>
        </ul>

        <script>
       

   
            
            const date = new Date()
            document.getElementById('now').innerHTML = "&nbsp;" + date.toDateString()
        </script>
    </div>
</body>
</html>