{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Invoice List</h4>
                <h6>Manage your Invoice</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'addInvo' %}" class="btn btn-added"><img src="{% static 'assets/img/icons/plus.svg' %}" alt="img" class="me-1">Add Invoice</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>
                </div>

                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link filter-link {% if filter_type == 'all' or not filter_type %}active{% endif %}" href="" data-filter="all">All</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link filter-link {% if filter_type == 'due' %}active{% endif %}" href="" data-filter="due">Due</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link filter-link {% if filter_type == 'paid' %}active{% endif %}" href="" data-filter="paid">Paid</a>
                    </li>
                </ul>

                <div class="table-responsive">
                    <table class="table datanew">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Customer Name</th>
                                <th>Invoice ID</th>
                                <th>Status</th>
                                <th>Total(QAR)</th>
                                <th>Paid(QAR)</th>
                                <th>Due Date</th>
                                <th>Biller</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for invo in invo_lists %}
                            <tr>
                                <td>{{ invo.details.0.date }}</td>
                                <td>{{ invo.details.0.bill_name }}</td>
                                <td>{{ invo.inv_id }}</td>
                                <td><span class="badges {% if invo.details.0.status == 'Due' %}bg-warning{% else %}bg-lightgreen{% endif %}">{{ invo.details.0.status }}</span></td>
                                <td><strong>{{ invo.total }}</strong></td>
                                <td>{% if invo.details.0.status == 'Paid' %}{{ invo.total }}{% else %}{{ invo.details.0.paid }}{% endif %}</td>
                                <td>{{ invo.details.0.due_date }}</td>
                                <td>Admin</td>
                                <td class="text-center">
                                    <a class="action-set" href="javascript:void(0);" 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 'invoiceDetails' invo.inv_id %}" class="dropdown-item"><img src="{% static 'assets/img/icons/eye1.svg' %}" class="me-2" alt="img">Sale Detail</a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown-item delete-sale" data-invoice-id="{{ invo.inv_id }}">
                                                <img src="{% static 'assets/img/icons/delete1.svg' %}" class="me-2" alt="img">Delete Sale
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        const urlParams = new URLSearchParams(window.location.search);
        const filterType = urlParams.get('filter') || 'all';
        setActiveFilter(filterType);
        updateURL();  // Update the URL to remove query parameters

        $('.filter-link').click(function(e) {
            e.preventDefault();
            const filterType = $(this).data('filter');
            setActiveFilter(filterType);

            $.ajax({
                url: '{% url "invoiceList" %}',
                data: { 'filter': filterType },
                type: 'GET',
                success: function(data) {
                    const newTableBody = $(data.html).find('.table-responsive table tbody').html();
                    $('.table-responsive table tbody').html(newTableBody);
                    initializeDeleteButtons();
                    updateURL();  // Update the URL to remove query parameters
                },
                error: function(xhr, status, error) {
                    console.error("An error occurred: " + error);
                }
            });
        });

        function setActiveFilter(filterType) {
            $('.filter-link').removeClass('active');
            $(`.filter-link[data-filter="${filterType}"]`).addClass('active');
        }

        function updateURL() {
            const newURL = new URL(window.location.href);
            newURL.searchParams.delete('filter');
            window.history.replaceState({ path: newURL.href }, '', newURL.href);
        }

        initializeDeleteButtons();
    });

    function initializeDeleteButtons() {
        document.querySelectorAll('.delete-sale').forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                const invoiceId = this.getAttribute('data-invoice-id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'You won\'t be able to revert this!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = '{% url "invoiceDel" 0 %}'.replace('0', invoiceId);
                    }
                });
            });
        });
    }
</script>
{% endblock body %}