document.addEventListener('DOMContentLoaded', function () {
    const addItemForm = document.getElementById('addItemForm');
    const estimateItems = document.getElementById('estimateItems').getElementsByTagName('tbody')[0];
    const summarySubtotal = document.getElementById('summarySubtotal');
    const summaryTax = document.getElementById('summaryTax');
    const summaryTotal = document.getElementById('summaryTotal');
    const taxRate = 0.10; // 10%

    // Set current date
    document.getElementById('estimateDate').valueAsDate = new Date();

    addItemForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const description = document.getElementById('itemDescription').value;
        const quantity = parseFloat(document.getElementById('itemQuantity').value);
        const price = parseFloat(document.getElementById('itemPrice').value);

        if (description && quantity > 0 && price >= 0) {
            addItem(description, quantity, price);
            addItemForm.reset();
            document.getElementById('itemQuantity').value = 1;
            document.getElementById('itemPrice').value = "0.00";
        }
    });

    function addItem(description, quantity, price) {
        const row = estimateItems.insertRow();
        const total = quantity * price;

        row.innerHTML = `
            <td><input type="text" class="form-control border-0" value="${description}"></td>
            <td><input type="number" class="form-control border-0 item-quantity" value="${quantity}" min="1"></td>
            <td><input type="number" class="form-control border-0 item-price text-end" value="${price.toFixed(2)}" step="0.01" min="0"></td>
            <td class="text-end item-total">${total.toFixed(2)}</td>
            <td class="text-center"><button class="btn btn-sm btn-outline-danger remove-item">&times;</button></td>
        `;

        row.querySelector('.remove-item').addEventListener('click', function () {
            row.remove();
            updateSummary();
        });

        row.querySelectorAll('.item-quantity, .item-price').forEach(input => {
            input.addEventListener('input', function () {
                const newQuantity = parseFloat(row.querySelector('.item-quantity').value);
                const newPrice = parseFloat(row.querySelector('.item-price').value);
                const newTotal = newQuantity * newPrice;
                row.querySelector('.item-total').textContent = newTotal.toFixed(2);
                updateSummary();
            });
        });

        updateSummary();
    }

    function updateSummary() {
        let subtotal = 0;
        estimateItems.querySelectorAll('tr').forEach(row => {
            subtotal += parseFloat(row.querySelector('.item-total').textContent);
        });

        const tax = subtotal * taxRate;
        const total = subtotal + tax;

        summarySubtotal.textContent = `$${subtotal.toFixed(2)}`;
        summaryTax.textContent = `$${tax.toFixed(2)}`;
        summaryTotal.textContent = `$${total.toFixed(2)}`;
    }
    
    // Add a default item to get started
    addItem('Example Item', 1, 100);
});