{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Sale Details</h4>
                <h6>View sale details</h6>
                {% if messages %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {% for message in messages %}
                    <strong>Success!</strong>{{ message }}
                    {% endfor %}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {% endif %}

            </div>
            <div class="page-btn">
                <a href="{% url 'invoiceList' %}" class="btn btn-added"><img
                        src="{% static 'assets/img/icons/eye.svg' %}" alt="img" class="me-1">View Invoices</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="card-sales-split">
                    <h2>Invoice ID : {{inv_id}}</h2>
                    <ul>
                        {% if invstatus == "Paid" %}
                        <li>
                            <a href="{% url 'invoicetopdf' inv_id %}"><button class="viewpdf"
                                    style="vertical-align:middle"><span>View</span></button></a>
                        </li>
                        <li>
                            <a href="{% url 'pdftomail' inv_id %}">
                                <button class="emailsent" style="vertical-align:middle"><span>Sent</span></button></a>
                        </li>
                        {% else %}

                        <!-- <li>
                            <a href="{% url 'editInvo' inv_id %}"><button class="editinvo"
                                    style="vertical-align:middle"><span>Edit</span></button></a>
                        </li> -->
                        <li>
                            <a href="{% url 'invoicetopdf' inv_id %}"><button class="viewpdf"
                                    style="vertical-align:middle"><span>View</span></button></a>
                        </li>
                        <li>
                            <a href="{% url 'pdftomail' inv_id %}">
                                <button class="emailsent" style="vertical-align:middle"><span>Sent</span></button></a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
                <div class="invoice-box table-height"
                    style="max-width: 1600px;width:100%;overflow: auto;margin:15px auto;padding: 0;font-size: 14px;line-height: 24px;color: #555;">
                    <table cellpadding="0" cellspacing="0" style="width: 100%;line-height: inherit;text-align: left;">
                        <tbody>
                            <tr class="top">
                                <td colspan="6" style="padding: 5px;vertical-align: top;">
                                    <table style="width: 100%;line-height: inherit;text-align: left;">
                                        <tbody>
                                            <tr>
                                                <td
                                                    style="padding:5px;vertical-align:top;text-align:left;padding-bottom:20px">
                                                    <font style="vertical-align: inherit;margin-bottom:25px;">
                                                        <font
                                                            style="vertical-align: inherit;font-size:14px;color:#7367F0;font-weight:600;line-height: 35px; ">
                                                            Customer Info</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{bill_name}}</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{contact}}</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{address}}</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{gemail}}</font>
                                                    </font><br>
                                                </td>
                                                <td
                                                    style="padding:5px;vertical-align:top;text-align:right;padding-bottom:20px">
                                                    <font style="vertical-align: inherit;margin-bottom:25px;">
                                                        <font
                                                            style="vertical-align: inherit;font-size:14px;color:#7367F0;font-weight:600;line-height: 35px; ">
                                                            Invoice Info</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Reference </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Date </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Payment Status</font>
                                                    </font><br>
                                                    {% if invstatus == "Due" %}
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Paid</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Balance</font>
                                                    </font><br>
                                                    {% else %}
                                                    {% endif %}
                                                </td>
                                                <td
                                                    style="padding:5px;vertical-align:top;text-align:right;padding-bottom:20px">
                                                    <font style="vertical-align: inherit;margin-bottom:25px;">
                                                        <font
                                                            style="vertical-align: inherit;font-size:14px;color:#7367F0;font-weight:600;line-height: 35px; ">
                                                            &nbsp;</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{inv_id}}</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{date}}</font>
                                                    </font><br>

                                                    {% if invstatus == "Due" %}
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:red;font-weight: 400;">
                                                            Pending</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:green;font-weight: 400;">
                                                            {{paid}}</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:blue;font-weight: 400;">
                                                            {{balance}}</font>
                                                    </font><br>
                                                    {% else %}
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#2E7D32;font-weight: 400;">
                                                            Completed</font>
                                                    </font><br>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr class="heading" style="background: #F3F2F7;">
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    Product Name</td>
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    QTY</td>
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    Price</td>
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    Discount</td>
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    TAX</td>
                                <td
                                    style="padding: 5px;vertical-align: middle;font-weight: 600;color: #5E5873;font-size: 14px;padding: 10px;">
                                    Subtotal</td>
                            </tr>

                            {% for ind in invoice_details %}
                            <tr class="details" style="border-bottom:1px solid #E9ECEF;">
                                <td style="padding: 10px;vertical-align: top;font-weight: bold;">
                                    {% for pro in pro_list %}
                                    {% if pro.id == ind.related_product_id %}
                                    {% for image in pro.productimage_set.all %}
                                    {% if image.fea_img == 1 %}
                                    <img src="{{ image.product_image.url }}" alt="{{ image.product_image.url }}"
                                        width="50" height="50">
                                    {% endif %}
                                    {% endfor %}
                                    <span style="padding: 10px;vertical-align: top;">{{pro.product_name}}</span>
                                    {% endif %}
                                    {% endfor %}
                                </td>
                                <td style="padding: 10px;vertical-align: top;">{{ ind.quantity }}</td>
                                <td style="padding: 10px;vertical-align: top;">{{ ind.price }}</td>
                                <td style="padding: 10px;vertical-align: top;">{{ ind.discount }}%</td>
                                <td style="padding: 10px;vertical-align: top;">{{ ind.tax }}</td>
                                <td style="padding: 10px;vertical-align: top;">{{ ind.total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                </div>
                <div class="row">
                    <div class="row">
                        <div class="col-lg-6 "></div>
                        <div class="col-lg-6 ">
                            <div class="total-order w-100 max-widthauto m-auto mb-4">
                                <ul>
                                    <li>
                                        <h4>Shipping</h4>
                                        <h5>0.00</h5>
                                    </li>
                                    <li>
                                        <h4>Discount </h4>
                                        <h5>0%</h5>
                                    </li>
                                    {% if invstatus == "Due" %}
                                    <li>
                                        <h4>Paid </h4>
                                        <h5>{{paid}}</h5>
                                    </li>
                                    {% else %}
                                    {% endif %}
                                    <li class="total">
                                        <h4>Grand Total(QAR)</h4>
                                        <h5>{{ grand_total }}</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{% endblock body %}