<!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%> -  <%=GetPackages.name%></title>
    <link rel="stylesheet" href="css/receipts.css">
    <link rel="stylesheet" href="css/bootstrap1.min.css">
    <script src="js/bootstrap1.min.js"></script>
</head>
<body onload="window.print()" >
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12 mt-4">
                <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-3 col-sm-6 col-md-6 logo_center">
                        <img src="img/kp.png" alt="">
                    </div>
                    <div class="col-lg-6 logo_center">
                            <h4><b class="justify-content-center">Kwara State Polytechnic</b></h4>
                            <h4><b class="justify-content-center">P.M.B 1375, Ilorin</b></h4>
                            <h4><b class="justify-content-center">Payment Slip [<%=MypaymentHistory.txn_ref%>]</b></h4>
                    </div>
                    <!-- <div class="col-lg-4">
                        <img src="img/icon/logo.png" alt="">
                    </div> -->
                </div>
            </div>
        </div>
        <!-- <div style="display: flex; column-gap: 100px;">
            <img src="img/icon/logo.png" alt="">
            <div>
            <h5>Kwara State Polytechnic</h5>
            <h5>P.M.B 1375, Ilorin</h5>
            <h5><ins>Payment Slip [kRPTZQA9KSUg571649315724876]</ins></h5>
            </div>
             <img src="img/scan.png" alt="">
        </div> -->
        <div class="mt-5">
                <img  src="/avatar/<%= profile?.photo_path%>" alt="" width="53" height="53"  style="float: right;">
            <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;">
                    <li><u><b>PAYMENT DETAILS</b></u></li>
                    <li><b>Transaction Reference:</b>&nbsp;<b><%=MypaymentHistory.txn_ref%></b></li>
                    <li><b>Payment Title:</b>&nbsp; <%=GetPackages.name%> Access Fee</li>
                    <li><b>Payment Session:</b> &nbsp;<%=Sessions%></li>
                    <%if(MypaymentHistory.txn_status === "success"){%>
                    <li><b>Payment Status:</b>&nbsp;<b style="color: green;">Succesful</b></li>
                    <%}%>
                    <%if(MypaymentHistory.txn_status === "Pending"){%>
                        <li><b>Payment Status:</b>&nbsp;<b style="color: red;"><%=MypaymentHistory.txn_status%></b></li>
                        <%}%>
                        <%if(MypaymentHistory.txn_status != "Pending" && MypaymentHistory.txn_status != "success"){%>
                            <li><b>Payment Status:</b>&nbsp;<b style="color: red;"><%=MypaymentHistory.txn_status%></b></li>
                            <%}%>
                    <li><b>Payment Date:</b> &nbsp;<%= new Date(MypaymentHistory.createdAt).toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})  %></li>
                    <li><b>Authorized Amount:</b> &nbsp;₦<%=MypaymentHistory.amount%></li>
                    <li><b>Response Amount:</b>&nbsp; ₦<%=MypaymentHistory.amount%></li>
                    <li><b>Response Payment Reference:</b> &nbsp;<b><%=MypaymentHistory.txn_ref%></b></li></li>
                    <li><b>Payment Gateway:</b>&nbsp; Payment Stack</li>
                    <li><b>Print Date:</b><strong id="now"></strong></li>
                    </ul>
        </div>
        <img src="<%=src%>" alt="" style="float: right;">
        <!-- <a id="print" class="btn" onclick="window.print()" style="background-color:  rgb(42, 127, 42); color: white;">Print</a> -->

        <script>
       

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