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

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

    .container-fluid {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }
       .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-current,
    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-current:hover,
    .pagination-current:focus,
    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }

    .pagination-disabled {
        opacity: 0.55;
        pointer-events: none;
    } 
</style>

<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3 pb-2 border-bottom">

    <!-- LEFT SIDE -->
    <div class="d-flex flex-wrap align-items-center gap-3">

        <h4 style="font-size: 2rem; font-weight: 400; margin: 0;">
            Detail Transaction - Monthly
        </h4>

        <form method="GET" id="searchForm" class="d-flex flex-wrap align-items-center gap-2">

            <input type="text" name="search" id="searchInput" value="{{ query|default:'' }}"
                class="form-control form-control-sm" placeholder="Search..." style="width:220px;">

            <select name="month" class="form-select form-select-sm" style="width:120px;">
                <option value="">Month</option>
                {% for m, name in months %}
                <option value="{{ m }}" {% if month == m %}selected{% endif %}>
                    {{ name }}
                </option>
                {% endfor %}
            </select>

            <select name="year" class="form-select form-select-sm" style="width:100px;">
                <option value="">Year</option>
                {% for y in years %}
                <option value="{{ y }}" {% if year == y %}selected{% endif %}>
                    {{ y }}
                </option>
                {% endfor %}
            </select>

            <select name="status" class="form-select form-select-sm" style="width:130px;">
                <option value="all" {% if status == 'all' %}selected{% endif %}>All</option>
                <option value="approved" {% if status == 'approved' %}selected{% endif %}>Approved</option>
                <option value="not_approved" {% if status == 'not_approved' %}selected{% endif %}>Not Approved</option>
                <option value="void" {% if status == 'void' %}selected{% endif %}>Void</option>
            </select>

            <button class="btn btn-secondary">
                Filter
            </button>

        </form>
    </div>

    <!-- RIGHT SIDE -->
    <div class="d-flex gap-2">

        <a href="{% url 'generate_pdf_detail_monthly' %}?search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}"
            class="btn btn-secondary">
            Generate PDF
        </a>
        <a href="{% url 'export_to_excel_detail_monthly' %}?search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}"
            class="btn btn-secondary">
            Export to Excel
        </a>
    </div>

</div>
    <!-- PAGINATION TOP -->

    <div class="d-flex justify-content-between align-items-center mb-2">

        <div class="text-muted small">

            Showing
            {{ paginator_obj.start_index }}
            -
            {{ paginator_obj.end_index }}
            of
            {{ paginator_obj.paginator.count }}

        </div>

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

            {% if paginator_obj.has_previous %}

                <a class="btn btn-sm pagination-page-btn"
                   href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    First
                </a>

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Previous
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    First
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Previous
                </span>

            {% endif %}

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

            {% if paginator_obj.has_next %}

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Next
                </a>

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Last
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Next
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Last
                </span>

            {% endif %}

            <form method="get" class="d-flex align-items-center gap-1 ms-2">

                <input type="hidden"
                       name="search"
                       value="{{ query|default:'' }}">

                <input type="hidden"
                       name="month"
                       value="{{ month|default:'' }}">

                <input type="hidden"
                       name="year"
                       value="{{ year|default:'' }}">

                <input type="hidden"
                       name="status"
                       value="{{ status|default:'all' }}">

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

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

                <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>Account</th>
                <th>Ref No</th>
                <th>Date</th>
                <th>JV Code</th>
                <th>Vendor</th>
                <th>Contract No</th>
                <th>Invoice No</th>
                <th>Description</th>
                <th>Curr</th>
                <th class="text-end">Ori Amt</th>
                <th class="text-end">USD Amt</th>
            </tr>
        </thead>
        <tbody>
            {% for j in page_obj %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ j.acct_no|format_acct_no }} - {{ j.acct_name }}</td>
                <td>{{ j.header.ref_no|format_ref_no }}</td>
                <td>{{ j.header.date|date:"d-m-Y" }}</td>
                <td>{{ j.header.jvcode }}</td>
                <td>
                    {{ j.vendorcode }} - {{ j.vendorname }}
                </td>
                <td>{{ j.contractno }}</td>
                <td>{{ j.invno }}</td>
                <td>{{ j.descript }}</td>
                <td>{{ j.header.currsign }}</td>
                <td class="text-end">{{ j.oriamt|floatformat:2|intcomma }}</td>
                <td class="text-end">{{ j.usdamt|floatformat:2|intcomma }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="12" class="text-center">
                    No data found.
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- TOTAL SECTION -->
<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>Total Ori</th>
                <td class="text-end">
                    {{ total_ori|floatformat:2|intcomma }}
                </td>
            </tr>
            <tr>
                <th>Total USD</th>
                <td class="text-end">
                    {{ total_usd|floatformat:2|intcomma }}
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- PAGINATION BOTTOM -->

    <div class="d-flex justify-content-between align-items-center mb-2">

        <div class="text-muted small">

            Showing
            {{ paginator_obj.start_index }}
            -
            {{ paginator_obj.end_index }}
            of
            {{ paginator_obj.paginator.count }}

        </div>

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

            {% if paginator_obj.has_previous %}

                <a class="btn btn-sm pagination-page-btn"
                   href="?page=1&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    First
                </a>

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.previous_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Previous
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    First
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Previous
                </span>

            {% endif %}

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

            {% if paginator_obj.has_next %}

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.next_page_number }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Next
                </a>

                <a class="btn btn-sm pagination-page-btn"
                   href="?page={{ paginator_obj.paginator.num_pages }}&search={{ query|default:'' }}&month={{ month|default:'' }}&year={{ year|default:'' }}&status={{ status|default:'all' }}">
                    Last
                </a>

            {% else %}

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Next
                </span>

                <span class="btn btn-sm pagination-page-btn pagination-disabled">
                    Last
                </span>

            {% endif %}

            <form method="get" class="d-flex align-items-center gap-1 ms-2">

                <input type="hidden"
                       name="search"
                       value="{{ query|default:'' }}">

                <input type="hidden"
                       name="month"
                       value="{{ month|default:'' }}">

                <input type="hidden"
                       name="year"
                       value="{{ year|default:'' }}">

                <input type="hidden"
                       name="status"
                       value="{{ status|default:'all' }}">

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

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

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

            </form>

        </div>

    </div>
</div>


{% endblock %}