{% 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>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="card-sales-split">

                    <h2>Sale Detail : {{sales_det.sale_code}}</h2>
                    <ul>
                        <li>
                            <a href="#"><img src="{% static 'assets/img/icons/edit.svg' %}" alt="img"></a>
                        </li>
                        <li>
                            <a href="#"><img src="{% static 'assets/img/icons/pdf.svg' %}" alt="img"></a>
                        </li>
                        <li>
                            <a href="#"><img src="{% static 'assets/img/icons/excel.svg' %}" alt="img"></a>
                        </li>
                        <li>
                            <a href="#"><img src="{% static 'assets/img/icons/printer.svg' %}" alt="img"></a>
                        </li>
                    </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: 0px;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;">
                                                            {{sales_det.customer.first_name}}
                                                            {{sales_det.customer.last_name}}
                                                        </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            <a href="#"
                                                                class="__cf_email__">{{sales_det.customer.email}}</a>
                                                        </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {% for ad in order_address %}
                                                            {% if ad.id == sales_det.address_id %}
                                                            {{ad.contact_no}}
                                                            {% endif %}
                                                            {% endfor %}
                                                        </font>
                                                    </font><br>
                                                </td>
                                                <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;">
                                                            Delivery Info
                                                        </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {% for ad in order_address %}
                                                            {% if ad.id == sales_det.address_id %}
                                                            {{ad.address}}<br>
                                                            {{ad.city}},{{ad.state}},{{ad.country}}<br>
                                                            {{ad.postal_code}}<br>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </font>
                                                    </font><br>

                                                </td>

                                                <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; ">
                                                            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;">
                                                            Payment Status</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            Status</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; ">
                                                            &nbsp;</font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#000;font-weight: 400;">
                                                            {{sales_det.sale_code}} </font>
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        {% if sales_det.paid == "" %}
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:red;font-weight: 400;">
                                                            Not Paid</font>
                                                        {% else %}
                                                        <font
                                                            style="vertical-align: inherit;font-size: 14px;color:#2E7D32;font-weight: 400;">
                                                            {{sales_det.paid}}</font>
                                                        {% endif %}
                                                    </font><br>
                                                    <font style="vertical-align: inherit;">
                                                        <font id="status-text"
                                                            style="vertical-align: inherit; font-size: 14px; color: #2E7D32; font-weight: 400;">
                                                            {{sales_det.status}}
                                                        </font>
                                                    </font>

                                                </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; ">
                                    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; ">
                                    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; ">
                                    Subtotal
                                </td>
                            </tr>
                            <tr class="details" style="border-bottom:1px solid #E9ECEF ;">

                                {% for ca in order_cart %}
                                
                                <td style="padding: 10px;vertical-align: top; display: flex;align-items: center;">
                                    {% for pr in products %}

                                    {% if pr.id == ca.product_id %}
                                    {% for image in pr.productimage_set.all %}
                                    
                                    {% if image.fea_img == 1 %}
                                        
                                    <img src="{{image.product_image.url}}" alt="img" class="me-2"
                                        style="width:40px;height:40px;">
                                    {% endif %}
                                        
                                        {% endfor %}
                                    {% endif %}

                                    {% endfor %}
                                    {{ca.product.product_name}}
                                </td>
                                <td style="padding: 10px;vertical-align: top; ">
                                    0.00
                                </td>
                                <td style="padding: 10px;vertical-align: top; ">
                                    0.00
                                </td>
                                <td style="padding: 10px;vertical-align: top; ">
                                    {{ca.product_quantity}}x
                                </td>
                                <td style="padding: 10px;vertical-align: top; ">
                                    QAR{{ca.product.price}}
                                </td>
                                <td style="padding: 10px;vertical-align: top; ">
                                    = QAR{{ca.price}}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="form-group">
                            <label>Order Tax</label>
                            <input type="text">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="form-group">
                            <label>Discount</label>
                            <input type="text">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-12">
                        <form method="post" action="{% url 'changeStatusOrder' %}">
                            {% csrf_token %}
                            <div class="form-group">
                                <input type="hidden" name="saleid" value="{{sales_det.sale_code}}">
                                <label>Status</label>
                                <div class="d-flex">
                                    <select name="order_id" class="select">
                                        <option>{{sales_det.status}}</option>
                                        <option value="Ordered">Ordered</option>
                                        <option value="Out For Delivery">Out For Delivery</option>
                                        <option value="Completed">Completed</option>
                                    </select>
                                    <button type="submit" class="btn btn-link ml-2"><i class="fas fa-sync"></i></button>
                                </div>
                                <div id="success-message" class="text-success"></div>
                            </div>
                        </form>
                    </div>
                    <div id="status-value">{{ sales_det.status }}</div> <!-- Add this line -->


                    <script>
                        $(document).ready(function () {
                            // Handle the form submission
                            $('form').submit(function (e) {
                                e.preventDefault(); // Prevent the form from submitting normally

                                // Store the selected value before submitting the form
                                var selectedValue = $('select[name="order_id"]').val();

                                // Send the form data using AJAX
                                $.ajax({
                                    type: 'POST',
                                    url: $(this).attr('action'),
                                    data: $(this).serialize(),
                                    success: function (data) {
                                        if (data.success) {
                                            $('#success-message').text(data.message);

                                            // Change the content of the "status-text" element
                                            $('#status-text').text(selectedValue);

                                            // Clear the message after a delay (e.g., 5 seconds)
                                            setTimeout(function () {
                                                $('#success-message').text('');
                                            }, 5000);
                                        } else {
                                            // Handle other error cases if needed
                                        }
                                    },
                                    error: function () {
                                        // Handle AJAX errors if needed
                                    }
                                });
                            });
                        });


                    </script>


                    <div class="row">
                        <div class="col-lg-6 ">
                            <div class="total-order w-100 max-widthauto m-auto mb-4">
                                <ul>
                                    <li>
                                        <h4>Order Tax</h4>
                                        <h5>$ 0.00 (0.00%)</h5>
                                    </li>
                                    <li>
                                        <h4>Discount </h4>
                                        <h5>$ 0.00</h5>
                                    </li>
                                </ul>
                            </div>
                        </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 class="total">
                                        <h4>Grand Total</h4>
                                        <h5>QAR{{total_price}}</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <a href="#" class="btn btn-submit me-2">Update</a>
                        <a href="#" class="btn btn-cancel">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock body %}