{% extends 'base.html' %}
{% csrf_token %}

{% block title %}Chart of Accounts{% endblock %}

{% block content %}
<div class="coa-container" id="coaContent" style="display: none;">
    <div class="container-fluid px-4">
        <h1 class="mt-4">Chart of Accounts</h1>
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <div>
                        <button class="btn btn-bluegrey" data-bs-toggle="modal" data-bs-target="#newAccountModal">
                            <i class="fas fa-plus"></i> New Account
                        </button>
                        <button class="btn btn-bluegrey ms-2" onclick="generatePDF()">
                            <i class="fas fa-file-pdf"></i> Export PDF
                        </button>
                        <button class="btn btn-bluegrey ms-2" onclick="exportToExcel()">
                            <i class="fas fa-file-excel"></i> Export Excel
                        </button>
                    </div>
                    <div class="search-box">
                        <input type="text" id="searchInput" class="form-control" placeholder="Search accounts...">
                    </div>
                </div>

                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Account No</th>
                            <th>Account Name</th>
                            <th>Account Type</th>
                            <th>Status</th>
                            <th style="min-width: 120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for account in accounts %}
                        <tr>
                            <td>{{ account.acct_no }}</td>
                            <td>{{ account.acct_name }}</td>
                            <td>{{ account.acct_type }}</td>
                            <td>
                                {% if account.active %}
                                    {% if account.closed %}
                                        <span class="badge bg-warning">Closed</span>
                                    {% else %}
                                        <span class="badge bg-success">Active</span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                            <td class="text-nowrap text-center">
                                <button class="btn btn-sm btn-primary"
                                        onclick="editAccount('{{ account.acct_no }}', '{{ account.acct_name }}', '{{ account.acct_type }}', {{ account.active|lower }}, {{ account.closed|lower }})"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editModal"
                                        title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-danger"
                                        onclick="confirmDelete('{{ account.acct_no }}', '{{ account.acct_name }}')"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal"
                                        title="Delete">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="edit_acct_no" name="acct_no">
                    <div class="mb-3">
                        <label class="form-label">Account Name</label>
                        <input type="text" class="form-control" id="edit_acct_name" name="acct_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Account Type</label>
                        <select class="form-select" id="edit_acct_type" name="acct_type" required>
                            <option value="Asset">Asset</option>
                            <option value="Liability">Liability</option>
                            <option value="Equity">Equity</option>
                            <option value="Revenue">Revenue</option>
                            <option value="Expense">Expense</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit_active" name="active">
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="edit_closed" name="closed">
                            <label class="form-check-label">Closed</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveAccount()">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete account: <span id="delete_acct_name"></span>?</p>
                <input type="hidden" id="delete_acct_no">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="deleteAccount()">Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Add New Account Modal -->
<div class="modal fade" id="newAccountModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="newAccountForm">
                    <div class="mb-3">
                        <label class="form-label">Account Number</label>
                        <input type="text" class="form-control" id="new_acct_no" name="acct_no" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Account Name</label>
                        <input type="text" class="form-control" id="new_acct_name" name="acct_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Account Type</label>
                        <select class="form-select" id="new_acct_type" name="acct_type" required>
                            <option value="">Select Type</option>
                            <option value="Asset">Asset</option>
                            <option value="Liability">Liability</option>
                            <option value="Equity">Equity</option>
                            <option value="Revenue">Revenue</option>
                            <option value="Expense">Expense</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="new_active" name="active" checked>
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveNewAccount()">Create Account</button>
            </div>
        </div>
    </div>
</div>

<style>
    .mt-4 {
        margin-top: 0 !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .coa-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 250px;
        /* Align with sidebar */
        background-color: #f8f9fa;
        padding: 20px;
        overflow-y: auto;
        /* Enable scrolling */
    }

    .card {
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1.25rem;
    }

    .table {
        margin-bottom: 0;
    }

    .badge {
        padding: 0.5em 0.75em;
        font-weight: 500;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        width: 32px;
        /* Fixed width for consistent sizing */
    }

    .btn-sm i {
        font-size: 0.875rem;
        /* Match icon size to button */
    }

    /* Ensure buttons stay in one line */
    .text-nowrap {
        white-space: nowrap;
        text-align: center;
        /* Center the buttons */
    }

    .search-box {
        width: 300px;
    }

    .search-box input {
        padding-right: 30px;
    }

    .btn-bluegrey {
        background-color: #495057;
        border-color: #424a51;
    }

    .btn-bluegrey:hover {
        background-color: #212529;
        border-color: #1a1e21;
        color: white !important;
    }

    .btn-bluegrey:active {
        background-color: #1a1e21 !important;
        border-color: #141619 !important;
        color: white !important;
    }

    .btn-primary {
        background-color: #495057 !important;
        border-color: #424a51 !important;
    }

    .btn-primary:hover {
        background-color: #212529 !important;
        border-color: #1a1e21 !important;
        color: white !important;
    }

    .btn-primary:active {
        background-color: #1a1e21 !important;
        border-color: #141619 !important;
        color: white !important;
    }

    /* Update any other blue colors in the table or badges if needed */
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

<script>
    function generatePDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        doc.autoTable({ html: '.table' });
        doc.save('chart_of_accounts.pdf');
    }

    function exportToExcel() {
        const table = document.querySelector('.table');
        const wb = XLSX.utils.table_to_book(table);
        XLSX.writeFile(wb, 'chart_of_accounts.xlsx');
    }

    function editAccount(acct_no, acct_name, acct_type, active, closed) {
        document.getElementById('edit_acct_no').value = acct_no;
        document.getElementById('edit_acct_name').value = acct_name;
        document.getElementById('edit_acct_type').value = acct_type;
        document.getElementById('edit_active').checked = active;
        document.getElementById('edit_closed').checked = closed;
    }

    function saveAccount() {
        const formData = {
            acct_no: document.getElementById('edit_acct_no').value,
            acct_name: document.getElementById('edit_acct_name').value,
            acct_type: document.getElementById('edit_acct_type').value,
            active: document.getElementById('edit_active').checked,
            closed: document.getElementById('edit_closed').checked
        };

        fetch('/accounts/update_account/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error updating account: ' + data.error);
            }
        });
    }

    function confirmDelete(acct_no, acct_name) {
        document.getElementById('delete_acct_no').value = acct_no;
        document.getElementById('delete_acct_name').textContent = acct_name;
    }

    function deleteAccount() {
        const acct_no = document.getElementById('delete_acct_no').value;

        fetch('/accounts/delete_account/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ acct_no: acct_no })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deleting account: ' + data.error);
            }
        });
    }

    // Helper function to get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    $(document).ready(function() {
        $("#searchInput").on("keydown", function(event) {
            if (event.key === "Enter" || event.key === "Tab") {
                event.preventDefault(); // Prevent form submission on Enter

                var value = $(this).val().toLowerCase();
                $("table tbody tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            }
        });
    });
</script>
{% endblock %}