<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Accounting System{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

</head>
<body class="bg-light">

    <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="{% url 'accounting_dashboard' %}">Allied Construction</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <!-- Dashboard -->
                    <li class="nav-item"><a class="nav-link" href="{% url 'accounting_dashboard' %}">Dashboard</a></li>

                    <!-- Transactions Menu -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="transactionsDropdown" role="button" data-bs-toggle="dropdown">
                            Transactions
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'create_journal_entry' %}">New Journal Entry</a></li>
                            <li><a class="dropdown-item" href="{% url 'journal_entry_list' %}">Journal Entry List</a></li>                            
                            <li><a class="dropdown-item" href="{% url 'account_list' %}">Accounts</a></li>                            
                        </ul>
                    </li>

                    <!-- Purchase Orders Menu -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="pordersDropdown" role="button" data-bs-toggle="dropdown">
                            Purchases
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'create_purchase_order' %}">New Order</a></li>
                            <li><a class="dropdown-item" href="{% url 'purchase_order_list' %}">All Orders</a></li>
                            <li><a class="dropdown-item" href="{% url 'supplier_list' %}">Suppliers</a></li>
                            <li><a class="dropdown-item" href="{% url 'company_list' %}">Company</a></li>
                        </ul>
                    </li>
                    

                    <!-- Inventory -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="masterDataDropdown" role="button" data-bs-toggle="dropdown">
                            Stocks
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'product_list' %}">Products</a></li>
                            <li><a class="dropdown-item" href="{% url 'add_product' %}">New Product</a></li>    
                            <li><a class="dropdown-item" href="{% url 'create_material_consumption' %}">Material Consumption</a></li>                                                    
                        </ul>
                    </li>

                    <!-- projects -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="masterDataDropdown" role="button" data-bs-toggle="dropdown">
                            Projects
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'project_list' %}">Projects</a></li>
                            <li><a class="dropdown-item" href="{% url 'add_project' %}">New project</a></li>                            
                            {% comment %} <li><a class="dropdown-item" href="{% url 'transporter_list' %}">Trasporter</a></li>    {% endcomment %}
                        </ul>
                    </li>


                     <!-- Reports Menu -->
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="reportsDropdown" role="button" data-bs-toggle="dropdown">
                            Reports
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'general_ledger' %}">General Ledger</a></li>
                            <li><a class="dropdown-item" href="{% url 'trial_balance' %}">Trial Balance</a></li>
                            <li><a class="dropdown-item" href="{% url 'income_statement' %}">Income Statement</a></li>                            
                        </ul>
                    </li>
                    
                </ul>
            </div>
            <div class="text-end">
                {% if user.is_authenticated %}
                    <a href="{% url 'logout' %}" class="btn btn-outline-danger">Logout</a>
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // JavaScript for enhanced functionality
        document.addEventListener('DOMContentLoaded', function() {
    function highlightMatch(text, search) {
        if (!search) return text;
        const regex = new RegExp(`(${search})`, 'gi');
        return text.replace(regex, '<mark>$1</mark>');
    }

    function debounce(func, delay) {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), delay);
        };
    }

    function setupTableSearch(searchInput) {
        const tableId = searchInput.dataset.table;
        const table = document.getElementById(tableId);

        if (!table) return;

        const rows = table.querySelectorAll('tbody tr');

        const clearBtn = document.createElement('span');
        clearBtn.innerHTML = '&times;';
        clearBtn.style.cursor = 'pointer';
        clearBtn.style.position = 'absolute';
        clearBtn.style.right = '15px';
        clearBtn.style.top = '50%';
        clearBtn.style.transform = 'translateY(-50%)';
        clearBtn.style.fontSize = '20px';
        clearBtn.style.color = '#aaa';
        clearBtn.style.display = 'none';

        const inputGroup = searchInput.parentElement;
        inputGroup.style.position = 'relative';
        inputGroup.appendChild(clearBtn);

        clearBtn.addEventListener('click', () => {
            searchInput.value = '';
            clearBtn.style.display = 'none';
            searchInput.dispatchEvent(new Event('input'));
        });

        searchInput.addEventListener('input', debounce(function() {
            const filter = searchInput.value.trim().toLowerCase();

            if (filter.length > 0) {
                clearBtn.style.display = 'block';
            } else {
                clearBtn.style.display = 'none';
            }

            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                let found = false;

                cells.forEach(cell => {
                    // ✅ Before anything, remove previous <mark>
                    let originalContent = cell.innerHTML.replace(/<\/?mark>/g, '');

                    const rawText = Array.from(cell.childNodes)
                        .filter(node => node.nodeType === Node.TEXT_NODE)
                        .map(node => node.textContent.trim())
                        .join(' ');

                    const text = rawText.toLowerCase();

                    if (text.includes(filter)) {
                        found = true;
                        if (filter) {
                            cell.innerHTML = highlightMatch(originalContent, filter);
                        } else {
                            cell.innerHTML = originalContent;
                        }
                    } else {
                        cell.innerHTML = originalContent;
                    }
                });

                row.style.display = found ? '' : 'none';
            });

        }, 300));
    }

    document.querySelectorAll('input.table-search').forEach(setupTableSearch);
});

        </script>
</body>
</html>
