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

{% block content %}

<style>
    .finance-table th {
        background: linear-gradient(to right, #1f2328, #2c3136);
        color: white;
        font-weight: 600;
    }

    .finance-table td {
        vertical-align: middle;
    }

    .total-row {
        border-top: 2px solid #000;
        font-weight: bold;
        background-color: #f8f9fa;
    }

    .grand-total {
        border-top: 3px double #000;
        font-weight: bold;
        background-color: #fff3cd;
    }

    .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="container mt-4">

    <h3>Trial Balance ({{ currency|default:"IDR" }})</h3>

    {% if from_date %}
    <p>
        Period: {{ from_date|date:"d M Y" }} - {{ to_date|date:"d M Y" }}
    </p>
    {% endif %}

    <form method="get" class="row g-2 mb-3">

        <div class="col-auto">
            <input type="date"
                name="from"
                value="{{ from_date|date:'Y-m-d' }}"
                required
                class="form-control">
        </div>

        <div class="col-auto">
            <input type="date"
                name="to"
                value="{{ to_date|date:'Y-m-d' }}"
                required
                class="form-control">
        </div>

        <div class="col-auto">
            <select name="currency" class="form-select">
                <option value="IDR"
                    {% if currency == "IDR" %}selected{% endif %}>
                    IDR
                </option>

                <option value="USD"
                    {% if currency == "USD" %}selected{% endif %}>
                    USD
                </option>
            </select>
        </div>

        <div class="col-auto form-check mt-2">
            <input type="checkbox"
                name="hide_zero"
                class="form-check-input"
                {% if hide_zero %}checked{% endif %}>

            <label class="form-check-label">
                Hide Zero Balance
            </label>
        </div>

        <div class="col-auto">

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

            <button name="export"
                value="pdf"
                formtarget="_blank"
                class="btn btn-secondary">
                PDF
            </button>

            <button name="export"
                value="excel"
                class="btn btn-secondary">
                Export to Excel
            </button>

        </div>

    </form>


    {% if trial_data %}

    <!-- 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&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                First
            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                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 }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                Next
            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                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="from"
                    value="{{ from_date|date:'Y-m-d' }}">

                <input type="hidden"
                    name="to"
                    value="{{ to_date|date:'Y-m-d' }}">

                <input type="hidden"
                    name="currency"
                    value="{{ currency }}">

                {% if hide_zero %}
                <input type="hidden"
                    name="hide_zero"
                    value="on">
                {% endif %}

                <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-sm finance-table">

            <thead class="table-dark">
                <tr>
                    <th>Account</th>
                    <th class="text-end">Opening</th>
                    <th class="text-end">Debit</th>
                    <th class="text-end">Credit</th>
                    <th class="text-end">Ending</th>
                </tr>
            </thead>

            <tbody>

                {% for row in trial_data %}

                <tr>

                    <td>
                        {{ row.acct_no|format_acct_no }} -
                        {{ row.acct_name }}
                    </td>

                    <td class="text-end">
                        {{ row.opening|floatformat:2|intcomma }}
                    </td>

                    <td class="text-end">
                        {{ row.debit|floatformat:2|intcomma }}
                    </td>

                    <td class="text-end">
                        {{ row.credit|floatformat:2|intcomma }}
                    </td>

                    <td class="text-end fw-bold
                        {% if row.ending < 0 %}text-danger{% endif %}">

                        {{ row.ending|floatformat:2|intcomma }}

                    </td>

                </tr>

                {% endfor %}

                <tr class="total-row">

                    <td>TOTAL</td>

                    <td></td>

                    <td class="text-end">
                        {{ total_debit|floatformat:2|intcomma }}
                    </td>

                    <td class="text-end">
                        {{ total_credit|floatformat:2|intcomma }}
                    </td>

                    <td></td>

                </tr>

                <tr class="grand-total">

                    <td colspan="2">
                        Difference (Must Be 0)
                    </td>

                    <td colspan="3"
                        class="text-end
                        {% if difference != 0 %}text-danger{% endif %}">

                        {{ difference|floatformat:2|intcomma }}

                    </td>

                </tr>

            </tbody>

        </table>

    </div>


    <!-- PAGINATION BOTTOM -->

    <div class="d-flex justify-content-between align-items-center mt-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&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                First
            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.previous_page_number }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                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 }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                Next
            </a>

            <a class="btn btn-sm pagination-page-btn"
                href="?page={{ paginator_obj.paginator.num_pages }}&from={{ from_date|date:'Y-m-d' }}&to={{ to_date|date:'Y-m-d' }}&currency={{ currency }}{% if hide_zero %}&hide_zero=on{% endif %}">
                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="from"
                    value="{{ from_date|date:'Y-m-d' }}">

                <input type="hidden"
                    name="to"
                    value="{{ to_date|date:'Y-m-d' }}">

                <input type="hidden"
                    name="currency"
                    value="{{ currency }}">

                {% if hide_zero %}
                <input type="hidden"
                    name="hide_zero"
                    value="on">
                {% endif %}

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

    {% endif %}

</div>

{% endblock %}