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

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }
    .actions {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    .actions form {
        margin: 0;
        padding: 0;
        display: inline;
    }
    .table-container {
        width: 100%;
        overflow-x: auto;
    }
    
    .table {
        table-layout: fixed;
        width: 100%;
    }
    .table th:nth-child(1), .table td:nth-child(1) { width: 5%; } /* Row Numbers */
    .table th:nth-child(2), .table td:nth-child(2) { width: 20%; } /* Account No */
    .table th:nth-child(3), .table td:nth-child(3) { width: 55%; } /* Account Name */
    .table th:nth-child(4), .table td:nth-child(4) { width: 5%; } /* Account Type */
    .table th:nth-child(5), .table td:nth-child(5) { width: 7%; } /* Status */
    .table th:nth-child(6), .table td:nth-child(6) { width: 7%; } /* Actions */
</style>
<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Accounts</h2>
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#userModal" onclick="resetForm()">
        Add New Account
    </button>
</div>

<!-- Search input -->
<div class="mb-3">
    <input type="text" id="searchInput" class="form-control" placeholder="Search accounts..." onkeyup="searchTable()">
</div>

<div class="table-container">
    <table class="table table-striped table-hover" id="accountsTable">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th> <!-- Added row number column -->
                <th scope="col">Account No</th>
                <th scope="col">Account Name</th>
                <th scope="col">Type</th>
                <th scope="col">Status</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if accounts %}
            {% for account in accounts %}
            <tr>
                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>{{ account.acct_no }}</td>
                <td>{{ account.acct_name }}</td>
                <td>{{ account.acct_type }}</td>
                <td>{% if account.closed %}Closed{% else %}Active{% endif %}</td>
                <td>
                    <div class="actions">
                        <form method="POST" action="{% url 'update_account' account.id %}">
                            {% csrf_token %}
                            <button type="button" class="btn btn-sm btn-secondary" onclick="editUser({{ account.id }})">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                        </form>
                        <form method="POST" action="{% url 'delete_account' account.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this account?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="5" class="text-center">No accounts found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    function searchTable() {
        var input = document.getElementById("searchInput");
        var filter = input.value.toLowerCase();
        var table = document.getElementById("accountsTable");
        var tr = table.getElementsByTagName("tr");

        for (var i = 1; i < tr.length; i++) { // Start from 1 to skip header row
            var td = tr[i].getElementsByTagName("td");
            var rowContainsFilter = false;
            
            for (var j = 0; j < td.length - 1; j++) { // Exclude actions column
                if (td[j] && td[j].textContent.toLowerCase().includes(filter)) {
                    rowContainsFilter = true;
                    break;
                }
            }
            tr[i].style.display = rowContainsFilter ? "" : "none";
        }
    }
</script>
{% endblock %}