{% 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: end;
            font-size: 18px;
            margin: 30px 0px;
        }

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


        .invoiceDetails {
            width: 100%;
            display: table; 
        }

        .customerDetails, .companyDetails {
            width: 50%;
            float: left;
        }

        .companyDetails {
            text-align: end;
        }

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


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

        .invoiceItemsContainer ul {
            padding: 0px 20px;
            list-style:circle;
            color: #20336b;
            font-size: 13px;
        }

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

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

        .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>Invoice {{order.invoice.invoice_number}}</p>
        </div>


        <div class="invoiceDetails">
            <div class="customerDetails">
                <h1>Bill To:</h1>

                {% if not order.business %}
                <p>{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
                <p>{{order.customer.mobile_number}}</p>
                <p>{{order.customer.user.email}}</p>

                {% else %}
                <p>{{order.business.name}}</p>
                <p>{{order.business.phone_number}}</p>
                <p>{{order.business.email}}</p>
                {% endif %}
            </div>

            <div class="companyDetails">
                <h1>Date: {{order.date}}</h1>

                <p>OSITCOM LTD</p>
                <p>CR. 2014057</p>
                <p>Registration Number: 1808707</p>
                <p>PO Box: 90-1246</p>
                <p>Tel/Fax: +961 (9) 918718/9</p>
                <p>Mobile: +961 (70) 918 718</p>
                <p>billing@ositcom.net</p>
            </div>
        </div>


        <div class="invoiceItemsBar">
            <p>Invoice Items</p>
        </div>


        <div class="invoiceItemsContainer">
            <ul>
                {% for item in order.orderitem_set.all %}
                <li>{{item.item.title}}</li>
                {% endfor %}
            </ul>

            <div class="totalContainer">
                <p>Total:<span> ${{order.get_cart_total}}</span></p>
            </div>
        </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>