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

{% block content %}

<div class="container-fluid">

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

        <h3 class="mb-0">
            Category Account Mapping
        </h3>

    </div>

    {% if messages %}

        {% for message in messages %}

            <div class="alert alert-warning alert-dismissible fade show"
                 role="alert">

                {{ message }}

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="alert">
                </button>

            </div>

        {% endfor %}

    {% endif %}


    <div class="card shadow-sm">

        <div class="card-body">

            <!-- SEARCH -->

            <form method="GET"
                  class="row mb-3">

                <div class="col-md-5">

                    <input
                        type="text"
                        name="search"
                        class="form-control"
                        placeholder="Search Category..."
                        value="{{ search }}"
                    >

                </div>

                <div class="col-md-auto">

                    <button type="submit"
                            class="btn btn-secondary">

                        <i class="bi bi-search"></i>
                        Search

                    </button>

                </div>

                {% if search %}

                <div class="col-md-auto">

                    <a href="{% url 'category_account_mapping' %}"
                       class="btn btn-outline-secondary">

                        Clear

                    </a>

                </div>

                {% endif %}

            </form>


            <!-- MAPPING FORM -->

            <form method="POST"
                  action="{% url 'save_category_account_mapping' %}">

                {% csrf_token %}

                <div class="table-responsive">

                    <table class="table table-bordered table-hover align-middle">

                        <thead class="table-dark">

                            <tr>

                                <th style="width: 10%;">
                                    No.
                                </th>

                                <th style="width: 45%;">
                                    Category
                                </th>

                                <th style="width: 45%;">
                                    Account No
                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            {% for item in categories %}

                            <tr>

                                <input
                                    type="hidden"
                                    name="category_id"
                                    value="{{ item.id }}"
                                >

                                <td>
                                    {{ forloop.counter0|add:page_obj.start_index }}
                                </td>

                                <td>
                                    {{ item.category }}
                                </td>

                                <td>

                                    <select
                                        name="acct_no_{{ item.id }}"
                                        class="form-select form-select-sm"
                                    >

                                        <option value="">
                                            -- Select Account --
                                        </option>

                                        {% for account in accounts %}

                                            <option
                                                value="{{ account.acct_no }}"
                                                {% if item.acct_no == account.acct_no %}
                                                    selected
                                                {% endif %}
                                            >

                                                {{ account.acct_no }}
                                                -
                                                {{ account.acct_name }}

                                            </option>

                                        {% endfor %}

                                    </select>

                                </td>

                            </tr>

                            {% empty %}

                            <tr>

                                <td colspan="3"
                                    class="text-center">

                                    No category data found.

                                </td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>


                <!-- PAGINATION -->

                {% if page_obj.paginator.num_pages > 1 %}

                <div class="d-flex justify-content-between align-items-center mt-3">

                    <div class="text-muted">

                        Showing
                        {{ page_obj.start_index }}
                        -
                        {{ page_obj.end_index }}
                        of
                        {{ page_obj.paginator.count }}
                        categories

                    </div>


                    <nav aria-label="Category pagination">

                        <ul class="pagination">

                            {% if page_obj.has_previous %}

                            <li class="page-item">

                                <a class="page-link"
                                   href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                    Previous

                                </a>

                            </li>

                            {% else %}

                            <li class="page-item disabled">

                                <span class="page-link">
                                    Previous
                                </span>

                            </li>

                            {% endif %}


                            {% for num in page_obj.paginator.page_range %}

                                {% if num == page_obj.number %}

                                <li class="page-item active">

                                    <span class="page-link">
                                        {{ num }}
                                    </span>

                                </li>

                                {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}

                                <li class="page-item">

                                    <a class="page-link"
                                       href="?page={{ num }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                        {{ num }}

                                    </a>

                                </li>

                                {% endif %}

                            {% endfor %}


                            {% if page_obj.has_next %}

                            <li class="page-item">

                                <a class="page-link"
                                   href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}">

                                    Next

                                </a>

                            </li>

                            {% else %}

                            <li class="page-item disabled">

                                <span class="page-link">
                                    Next
                                </span>

                            </li>

                            {% endif %}

                        </ul>

                    </nav>

                </div>

                {% endif %}


                <!-- SAVE -->

                <div class="d-flex justify-content-end mt-3">

                    <button type="submit"
                            class="btn btn-primary">

                        <i class="bi bi-save"></i>
                        Save All Mapping

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}