{% extends "base.html" %}
{% load i18n custom_filters %}
{% block title %}
    {% trans "Accounts" %}
{% endblock title %}
{% block accounts %}
    <a class="nav-link active fw-bold">
        {% trans "Accounts"|capfirst %}
        <span class="visually-hidden">(current)</span>
    </a>
{% endblock %}
{% block content %}
    <div class="row mt-4">
        <div class="d-flex justify-content-between mb-2">
            <h3 class="">
                {% trans "Accounts" %}<i class="fa-solid fa-book ms-2 text-primary"></i>
            </h3>
            {% if perms.django_ledger.add_chartofaccountmodel %}
                <a href="{% url 'account_create' request.dealer.slug url_kwargs.coa_pk %}"
                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Account' %}</a>
            {% endif %}
        </div>
            <!-- Account Type Tabs -->
        <div class="mb-4">
            <ul class="nav nav-tabs" id="accountTypeTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active"
                            id="assets-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#assets"
                            type="button"
                            role="tab"
                            aria-controls="assets"
                            aria-selected="true">
                        <i class="fas fa-wallet me-2"></i>{% trans "Assets" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="cogs-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#cogs"
                            type="button"
                            role="tab"
                            aria-controls="cogs"
                            aria-selected="false">
                        <i class="fas fa-boxes me-2"></i>{% trans "COGS" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="capital-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#capital"
                            type="button"
                            role="tab"
                            aria-controls="capital"
                            aria-selected="false">
                        <i class="fas fa-landmark me-2"></i>{% trans "Capital" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="income-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#income"
                            type="button"
                            role="tab"
                            aria-controls="income"
                            aria-selected="false">
                        <i class="fas fa-money-bill-wave me-2"></i>{% trans "Income" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="expenses-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#expenses"
                            type="button"
                            role="tab"
                            aria-controls="expenses"
                            aria-selected="false">
                        <i class="fas fa-receipt me-2"></i>{% trans "Expenses" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="liabilities-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#liabilities"
                            type="button"
                            role="tab"
                            aria-controls="liabilities"
                            aria-selected="false">
                        <i class="fas fa-receipt me-2"></i>{% trans "Liabilities" %}
                    </button>
                </li>
            </ul>
            <div class="tab-content p-3 border border-top-0 rounded-bottom"
                 id="accountTypeTabsContent">
                    <!-- Assets Tab -->
                <div class="tab-pane fade show active"
                     id="assets"
                     role="tabpanel"
                     aria-labelledby="assets-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"asset_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                    <!-- COGS Tab -->
                <div class="tab-pane fade"
                     id="cogs"
                     role="tabpanel"
                     aria-labelledby="cogs-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"cogs" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                    <!-- Capital Tab -->
                <div class="tab-pane fade"
                     id="capital"
                     role="tabpanel"
                     aria-labelledby="capital-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"eq_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                    <!-- Income Tab -->
                <div class="tab-pane fade"
                     id="income"
                     role="tabpanel"
                     aria-labelledby="income-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"in_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                    <!-- Expenses Tab -->
                <div class="tab-pane fade"
                     id="expenses"
                     role="tabpanel"
                     aria-labelledby="expenses-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"ex_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
                    <!-- Liabilities Tab -->
                <div class="tab-pane fade"
                     id="liabilities"
                     role="tabpanel"
                     aria-labelledby="liabilities-tab">
                    {% include "partials/search_box.html" %}
                    {% with accounts=accounts|filter_by_role:"lia_" %}
                        {% include "ledger/coa_accounts/partials/account_table.html" %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
        <!-- Delete Modal (moved outside tables) -->
    <div class="modal fade"
         id="deleteModal"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         tabindex="-1"
         aria-labelledby="deleteModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    {% if perms.django_ledger.delete_chartofaccountmodel %}
                        <h5 class="modal-title" id="deleteModalLabel">
                            {% trans "Delete Account" %}
                            <span data-feather="alert-circle"></span>
                        </h5>
                    {% endif %}
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-0 text-danger fw-bold">{% trans "Are you sure you want to delete this Account?" %}</p>
                    <div class="d-grid gap-2">
                        <button type="button"
                                class="btn btn-phoenix-secondary btn-sm"
                                data-bs-dismiss="modal">{% trans "No" %}</button>
                        <a id="deleteAccountBtn"
                           type="button"
                           class="btn btn-phoenix-danger btn-sm"
                           href="#">{% trans "Yes" %}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block customerJS %}
    <script>
    // Handle delete modal for all tables
        document.addEventListener('DOMContentLoaded', function() {
            var deleteModal = document.getElementById('deleteModal');
            deleteModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var accountId = button.closest('tr').getAttribute('data-account-id');
                document.getElementById('deleteAccountBtn').href = `/accounts/delete/${accountId}/`;
            });
        });
    </script>
{% endblock %}