{% 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;">Contract List Report</h3>

        <form method="GET" id="searchForm">
            <input type="text" name="search" id="searchInput" value="{{ query|default:'' }}"
                class="form-control" placeholder="Search Contract..." style="max-width: 300px;">
        </form>

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

            <a href="{% url 'export_to_excel_contracts' %}" 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>Contract No</th>
                    <th>Date</th>
                    <th>Title</th>
                    <th>MSR No</th>
                    <th>Curr</th>
                    <th>Amount</th>
                    <th>Add Amt</th>
                </tr>
            </thead>
            <tbody>
                {% for c in contracts %}
                <tr>
                    <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                    <td>{{ c.vendorcode.vendorcode }}</td>
                    <td>{{ c.vendorcode.vendorname }}</td>
                    <td>{{ c.contracttype }}</td>
                    <td>{{ c.contractno }}</td>
                    <td>{{ c.contractdate|date:"d-m-Y" }}</td>
                    <td>{{ c.title }}</td>
                    <td>{{ c.nosrmr }}</td>
                    <td>
                        {% if c.currsign %}
                        {{ c.currsign.currsign }}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="text-end">
                        {% if c.currsign %}
                        {{ c.orgamt|format_currency_dynamic:c.currsign.currsign }}
                        {% else %}
                        {{ c.orgamt|default:"0.00" }}
                        {% endif %}
                    </td>
                    <td class="text-end">
                        {% if c.currsign %}
                        {{ c.addendumamt|format_currency_dynamic:c.currsign.currsign }}
                        {% else %}
                        {{ c.addendumamt|default:"0.00" }}
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <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 -->
        <!-- 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>

</div>

<script>
    let timer;

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

        timer = setTimeout(() => {
            document.getElementById('searchForm').submit();
        }, 500);
    });
</script>

{% endblock %}