{% include 'AdminTemplates/adminDash.html' %} {% load static %}
{% block body %}
<style>
    table {
        width: 100%;
        /* Make the table width 100% to center its contents within the parent container */
    }

    .center-td {
        text-align: center;
        /* Center the contents horizontally within the td */
        vertical-align: middle;
        /* Center the contents vertically within the td */
    }

    .center-img {
        display: inline-block;
        /* Make the image an inline block element */
        vertical-align: middle;
        /* Center the image vertically within the td */
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Sales List</h4>
                <h6>Manage your sales</h6>
            </div>
            <!-- <div class="page-btn">
                <a href="add-sales.html" class="btn btn-added"><img src="{% static 'assets/img/icons/plus.svg' %}"
                        alt="img" class="me-1">Add Sales</a>
            </div> -->
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-path">
                        </div>
                        <div class="search-input">
                            <a class="btn btn-searchset"><img src="{% static 'assets/img/icons/search-white.svg' %}"
                                    alt="img"></a>
                        </div>
                        <!-- 
                        <div class="search-input">
                            <form id="search-form" method="get" action="{% url 'search_results' %}">
                                <input type="text" name="q" placeholder="Search">
                                <button type="submit" class="btn btn-searchset">
                                    <img src="{% static 'assets/img/icons/search-white.svg' %}" alt="img">
                                </button>
                            </form>
                        </div>

                        <div id="result-table">
                        </div> -->

                    </div>
                </div>

                <div class="card" id="filter_inputs">
                    <div class="card-body pb-0">
                        <div class="row">
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <input type="text" placeholder="Enter Name">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <input type="text" placeholder="Enter Reference No">
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <select class="select">
                                        <option>Completed</option>
                                        <option>Paid</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <a class="btn btn-filters ms-auto"><img
                                            src="{% static 'assets/img/icons/search-whites.svg' %}" alt="img"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% if all_order_cart %}
                <div class="table-responsive">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Ordered Date</th>
                                <th>Customer Name</th>
                                <th>Status</th>
                                <th>Order Category</th>
                                <th>Total</th>
                                <th>Biller</th>
                                <th>Quickview</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for cart_id in all_order_cart %}
                            {% for i in sales_list %}
                            {% if i.customer_id == cart_id|add:0 %}
                            <tr>
                                <td>{{ i.order_date }}</td>
                                <td>{{ i.customer.first_name }} {{ i.customer.last_name }}</td>

                                {% if i.status == 'Ordered' %}
                                <td><span class="badges text-white" style="background-color: #637381;">{{ i.status }}</span></td>
                                {% elif i.status == 'Out For Delivery' %}
                                <td><span class="badges" style="background-color: #ff9900;">{{ i.status }}</span></td>
                                {% elif i.status == 'Pending' %}
                                <td><span class="badges text-white" style="background-color: #ea5455;">{{ i.status }}</span></td>
                                {% else %}
                                <td><span class="badges" style="background-color: #28c76f;">{{ i.status }}</span></td>
                                {% endif %}
                                <td>{{ i.product_type}}</td>
                                <td>{{ i.sub_total }}</td>
                                <td>{{ i.biller }}</td>
                                <td class="center-td">
                                    <a href="{% url 'salesDetails' cart_id %}">
                                        <img src="{% static 'assets/img/icons/eye1.svg' %}" class="center-img"
                                            alt="img">
                                    </a>
                                </td>
                                <td class="text-center">
                                    <a class="action-set" href="#" data-bs-toggle="dropdown" aria-expanded="true">
                                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="{% url 'salesDetails' cart_id %}" class="dropdown-item">
                                                <img src="{% static 'assets/img/icons/eye1.svg' %}" class="me-2"
                                                    alt="img">
                                                Sale Detail
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{% url 'addInvo' %}" class="dropdown-item">
                                                <img src="{% static 'assets/img/icons/edit.svg' %}" class="me-2"
                                                    alt="img">
                                                Edit Sale
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown-item">
                                                <img src="{% static 'assets/img/icons/download.svg' %}" class="me-2"
                                                    alt="img">
                                                Download pdf
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown-item confirm-text">
                                                <img src="{% static 'assets/img/icons/delete1.svg' %}" class="me-2"
                                                    alt="img">
                                                Delete Sale
                                            </a>
                                        </li>
                                    </ul>

                                </td>

                            </tr>
                            {% endif %}
                            {% endfor %}
                            {% endfor %}

                        </tbody>

                    </table>
                    <div class="pagination text-end">
                        <span class="step-links">
                            {% if sales_list.has_previous %}
                            <a href="?page=1">&laquo; first</a>
                            <a href="?page={{ sales_list.previous_page_number }}">previous</a>
                            {% endif %}

                            {% if sales_list.has_next %}
                            <a href="?page={{ sales_list.next_page_number }}">next</a>
                            <a href="?page={{ sales_list.paginator.num_pages }}">last &raquo;</a>
                            {% endif %}
                            <span class="current-page">{{ sales_list.number }}</span>
                            of {{ sales_list.paginator.num_pages }}
                        </span>
                    </div>

                </div>

                {% else %}
                No Orders yet
                {% endif %}

            </div>

        </div>

    </div>

</div>

</div>



<div class="modal fade" id="showpayment" tabindex="-1" aria-labelledby="showpayment" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Show Payments</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Reference</th>
                                <th>Amount </th>
                                <th>Paid By </th>
                                <th>Paid By </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bor-b1">
                                <td>2022-03-07 </td>
                                <td>INV/SL0101</td>
                                <td>$ 0.00 </td>
                                <td>Cash</td>
                                <td>
                                    <a class="me-2" href="#">
                                        <img src="{% static 'assets/img/icons/printer.svg' %}" alt="img">
                                    </a>
                                    <a class="me-2" href="#" data-bs-target="#editpayment" data-bs-toggle="modal"
                                        data-bs-dismiss="modal">
                                        <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                    </a>
                                    <a class="me-2 confirm-text" href="#">
                                        <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="createpayment" tabindex="-1" aria-labelledby="createpayment" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Customer</label>
                            <div class="input-groupicon">
                                <input type="text" value="2022-03-07" class="datetimepicker">
                                <div class="addonset">
                                    <img src="{% static 'assets/img/icons/calendars.svg' %}" alt="img">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Reference</label>
                            <input type="text" value="INV/SL0101">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Received Amount</label>
                            <input type="text" value="0.00">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Paying Amount</label>
                            <input type="text" value="0.00">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Payment type</label>
                            <select class="select">
                                <option>Cash</option>
                                <option>Online</option>
                                <option>Inprogress</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group mb-0">
                            <label>Note</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-submit">Submit</button>
                <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editpayment" tabindex="-1" aria-labelledby="editpayment" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Payment</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Customer</label>
                            <div class="input-groupicon">
                                <input type="text" value="2022-03-07" class="datetimepicker">
                                <div class="addonset">
                                    <img src="{% static 'assets/img/icons/datepicker.svg' %}" alt="img">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Reference</label>
                            <input type="text" value="INV/SL0101">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Received Amount</label>
                            <input type="text" value="0.00">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Paying Amount</label>
                            <input type="text" value="0.00">
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12 col-12">
                        <div class="form-group">
                            <label>Payment type</label>
                            <select class="select">
                                <option>Cash</option>
                                <option>Online</option>
                                <option>Inprogress</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group mb-0">
                            <label>Note</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-submit">Submit</button>
                <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock body %}