<!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%> -  Binding</title>
    <link rel="stylesheet" href="css/receipts.css">
    <link rel="stylesheet" href="css/bootstrap1.min.css">
    <script src="js/bootstrap1.min.js"></script>
    <style>
        /* body {
        background-image: url("/img/kp.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-size: 18em;
        background-color: rgba(255, 255, 255, 0.5);
        } */
    </style>
</head>
<body onload="window.print()" id="receipts.html">
    <div class="container">
        <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/logo.png" alt="">
                        </div>
                        <div class="col-lg-6 logo_center">
                                <h3><b class="justify-content-center">KWARA STATE COLLEGE OF EDUCATION, ILORIN</b></h3>
                                <h4><b class="justify-content-center">Payment Slip [<%=MypaymentHistory.txn_ref%>]</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </center>
        <div class="mt-5">
                <img  src="/avatar/<%= user.photo_path%>" alt="<%= user.photo_path%>" width="90" height="90"  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><%=user.firstname%> <%=user.middlename%> <%=user.lastname%></span>
                </li>
                <li><span><b>Email Address:</b></span> 
                    <span><%=user.email%></span>
                </li>
                <li><span><b>School:</b></span> 
                    <span><%=user?.department?.institute?.name%></span>
                </li>
                <li><span><b>Course:</b></span> 
                    <span><%=user?.department?.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; Binding Payment <li>
                    <li><b>Payment Session:</b> &nbsp; 2022/2023</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;₦ 9,000</li>
                    <li><b>Response Amount:</b>&nbsp; ₦ 9,000</li>
                    <li><b>Response Payment Reference:</b> &nbsp;<b><%=MypaymentHistory.txn_ref%></b></li></li>
                    <li><b>Payment Gateway:</b>&nbsp; School Portal</li>
                    <li><b>Print Date:</b><strong id="now"></strong></li>
                    </ul>
        </div>
        <img src="<%=src%>" alt="" style="float: right;">
        <script>
            const date = new Date()
            document.getElementById('now').innerHTML = "&nbsp;" + date.toDateString()
        </script>
    </div>
</body>
</html>