{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice Details</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h1 {
            color: #20336b;
            font-size: 16px;
            margin-bottom: 10px;
        }

        p {
            color: #374a7a;
            margin-bottom: 5px;
            font-size: 13px;
        }

        .mainContainer {
            width: 100%;
            display: block;
        }


        .logoContainer {
            width: 100%;
            text-align: center;
        }

        .logoContainer img {
            width: 150px;
        }

        .invoiceNumberBar {
            width: 100%;
            background-color: #374a7a;
            padding: 10px 20px;
            color: white;
            font-weight: 600;
            text-align: start;
            font-size: 18px;
            margin: 30px 0px;
        }

        .invoiceNumberBar p {
            color: white;
            font-size: 15px;
        }


        .tableContainer {
            border: 1px solid rgb(230, 230, 230);
            border-radius: 5px;
        }

        .tableContainer table {
            width: 100%;
        }

        .payment-header {
            padding: 10px 10px;
            font-size: 15px;
            font-weight: lighter;
            color: rgb(161, 161, 161);
            border-right: 1px solid rgb(230, 230, 230);
            white-space: nowrap;
            width: 25%;
        }

        .payment-body {
            width: 100%;
        }

        .payment-cell {
            width: 25%;
            padding: 10px 10px;
            text-align: center;
            font-size: 0.875rem;
            border-right: 1px solid rgb(230, 230, 230);
            color: #374a7a;
            background-color: #fff;
            border-top: 1px solid rgb(230, 230, 230);
        }

        .tableContainer {
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        .remainingAmountContainer {
            width: 100%;
            text-align: end;
            margin-top: 50px;
            color: #20336b;
            font-weight: 600;
        }

        .remainingAmountContainer p {
            font-size: 16px;
        }

        .payment-header-last, .payment-cell-last {
            border-right: 0px !important;
        }


        .footer {
            width: 100%;
            bottom: 0;
            position: absolute;
        }

        .footer div {
            margin-top: 20px;
        }
        
        .footer p {
            color: rgb(151, 151, 151);
            margin-bottom: 5px;
        }

        .footer span {
            font-weight: 600;
            color: #20336b;
            font-size: 13px;
        }
    </style>
</head>


<body>
    <div class="mainContainer">
        <div class="logoContainer">
            <img src="https://osina.ositcom.com/static/images/ositcom_logos/full-logo.png">
        </div>


        <div class="invoiceNumberBar">
            <p>Payments</p>
        </div>


        <div class="tableContainer">
            <table>
                <thead>
                    <th class="payment-header">Amount</th>
                    <th class="payment-header">Date Due</th>
                    <th class="payment-header">Date Paid</th>
                    <th class="payment-header payment-header-last">Payment Method</th>
                </thead>

                <tbody class="payment-body">
                    {% for payment in payments %}
                    <tr>
                        <td class="payment-cell">${{payment.amount}}</td>

                        <td class="payment-cell">
                            {% if payment.date_due %}
                                {{payment.date_due}}
                            {% else %}
                              -
                            {% endif %}
                        </td>
                        <td class="payment-cell">
                            {% if payment.date_paid %}
                                {{payment.date_paid}}
                            {% else %}
                            <p style="color: #ef4444;">UNPAID</p>
                            {% endif %}
                        </td>
                        <td class="payment-cell payment-cell-last">
                            {% for type in payment.type.all %}
                                {{type.name}}
                            {% endfor %}
                            </td>
                        
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>


        <div class="remainingAmountContainer">
            <p>Remaining Amount: <span>${{remaining_amount}}</span></p>
        </div>

    </div>

    <div class="footer">
        <p>Thank you for choosing us, we hope to satisfy all your IT Requirements.</p>
        <p>OSITCOM ltd</p>
        <p>Optimal Solutions for IT and Communication Lebanon Jounieh Highway, Doueihy Building, 7th Floor </p>
        <p>Phone: +961 (9) 918 718 - Fax: +961 (9) 918 718 - Mobile: +961 (70) 918 718</p>
        <p>Box: 90-1246</p>
        <p>Email: billing@ositcom.net</p>

        <div >
            <p>If you have any questions, please feel free to contact us at billing@ositcom.net.</p>

            <span>You can now pay your invoice online through <a>https://osina.ositcom.com</a></span>
        </div>

    </div>

</body>

</html>