{% extends "finance/base.html" %}
{% load custom_filters %}

{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }
    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }
    .pagination-page-btn:disabled {
        background-color: #ffffff !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        opacity: 0.65;
    }
    .pagination-current {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }
    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }
</style>

<div class="container-fluid mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 style="font-size: 3rem; font-weight: 500; margin: 0;">Invoice List Report</h3>
        <form method="GET" id="searchForm">
            <input type="text" name="search" id="searchInput" value="{{ query|default:'' }}" class="form-control"
                placeholder="Search Invoice..." style="max-width: 300px;">
        </form>

        <div>
            <a href="{% url 'generate_pdf_invoices' %}{% if query %}?search={{ query }}{% endif %}"
                class="btn btn-secondary">
                Generate PDF
            </a>

            <a href="{% url 'export_to_excel_invoices' %}" class="btn btn-secondary">
                Export to Excel
            </a>
        </div>
    </div>

    <!-- Pagination TOP -->
    <div class="d-flex justify-content-between align-items-center mt-2 mb-2"
        style="padding: 0 1rem;">

        <div>
            <small class="text-muted">
                Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
                of {{ page_obj.paginator.count }}
            </small>
        </div>

        <div class="d-flex align-items-center gap-1">

            <a class="btn btn-sm pagination-page-btn"
               href="?page=1{% if query %}&search={{ query|urlencode }}{% endif %}">
                First
            </a>

            {% if page_obj.has_previous %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.previous_page_number }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Previous
            </a>
            {% else %}
            <button class="btn btn-sm pagination-page-btn" disabled>
                Previous
            </button>
            {% endif %}

            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.next_page_number }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Next
            </a>
            {% else %}
            <button class="btn btn-sm pagination-page-btn" disabled>
                Next
            </button>
            {% endif %}

            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.paginator.num_pages }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Last
            </a>

            <span class="ms-2 small text-muted">Go to Page</span>

            <form method="GET" class="d-flex align-items-center gap-1 m-0">
                {% if query %}
                <input type="hidden" name="search" value="{{ query }}">
                {% endif %}

                <input type="number" name="page" min="1"
                       max="{{ page_obj.paginator.num_pages }}"
                       class="form-control form-control-sm"
                       style="width: 70px;" required>

                <button type="submit" class="btn btn-sm pagination-go">Go</button>
            </form>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-striped table-sm">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>Vendor Code</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Invoice No</th>
                    <th>Date</th>
                    <th>Due Date</th>
                    <th>Log Date</th>
                    <th>Contract No</th>
                    <th>Description</th>
                    <th>Curr</th>
                    <th>Total Amount</th>
                    <th>Sent to User</th>
                    <th>Return from User</th>
                    <th>Payable Date</th>
                    <th>Payable Ref#</th>
                </tr>
            </thead>
            <tbody>
                {% for c in page_obj %}
                <tr>
                    <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                    <td>{{ c.vendorcode.vendorcode }}</td>
                    <td>{{ c.vendorcode.vendorname }}</td>
                    <td>{{ c.kodeinv }}</td>
                    <td>{{ c.invno }}</td>
                    <td>{{ c.invdate|date:"d-m-Y" }}</td>
                    <td>{{ c.duedate|date:"d-m-Y" }}</td>
                    <td>{{ c.logdate|date:"d-m-Y" }}</td>
                    <td>{{ c.contractno }}</td>
                    <td>{{ c.description }}</td>
                    <td>{{ c.currsign.currsign }}</td>
                    <td class="text-end">
                        {{ c.totalamount|format_currency_dynamic:c.currsign.currsign }}
                    </td>
                    <td>{{ c.findate|date:"d-m-Y" }}</td>
                    <td>{{ c.userdate|date:"d-m-Y" }}</td>
                    <td>{{ c.daterefno1|date:"d-m-Y" }}</td>
                    <td>{{ c.refno1|format_journalno }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="row mt-3">
        <div class="col-md-6"></div>
        <div class="col-md-6">
            <table class="table table-bordered table-sm">
                <tr>
                    <th style="width:50%">Total IDR</th>
                    <td class="text-end">
                        {{ total_idr|format_currency_dynamic:"IDR" }}
                    </td>
                </tr>
                <tr>
                    <th>Total USD</th>
                    <td class="text-end">
                        {{ total_usd|format_currency_dynamic:"USD" }}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Pagination BOTTOM -->
    <div class="d-flex justify-content-between align-items-center mt-2 mb-2"
        style="padding: 0 1rem;">

        <div>
            <small class="text-muted">
                Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
                of {{ page_obj.paginator.count }}
            </small>
        </div>

        <div class="d-flex align-items-center gap-1">

            <a class="btn btn-sm pagination-page-btn"
               href="?page=1{% if query %}&search={{ query|urlencode }}{% endif %}">
                First
            </a>

            {% if page_obj.has_previous %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.previous_page_number }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Previous
            </a>
            {% else %}
            <button class="btn btn-sm pagination-page-btn" disabled>
                Previous
            </button>
            {% endif %}

            <span class="btn btn-sm pagination-current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.next_page_number }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Next
            </a>
            {% else %}
            <button class="btn btn-sm pagination-page-btn" disabled>
                Next
            </button>
            {% endif %}

            <a class="btn btn-sm pagination-page-btn"
               href="?page={{ page_obj.paginator.num_pages }}{% if query %}&search={{ query|urlencode }}{% endif %}">
                Last
            </a>

            <span class="ms-2 small text-muted">Go to Page</span>

            <form method="GET" class="d-flex align-items-center gap-1 m-0">
                {% if query %}
                <input type="hidden" name="search" value="{{ query }}">
                {% endif %}

                <input type="number" name="page" min="1"
                       max="{{ page_obj.paginator.num_pages }}"
                       class="form-control form-control-sm"
                       style="width: 70px;" required>

                <button type="submit" class="btn btn-sm pagination-go">Go</button>
            </form>
        </div>
    </div>

</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });

</script>
<script>
    let timer;

    document.getElementById('searchInput').addEventListener('keyup', function () {
        clearTimeout(timer);

        timer = setTimeout(() => {
            document.getElementById('searchForm').submit();
        }, 500); // delay 500ms supaya tidak submit tiap huruf
    });
</script>

{% endblock %}