{% include 'AdminTemplates/adminDash.html' %} {% load static %}
<style>
    /* Optional: Add some styling to hide initially */
    .hidden {
        display: none;
    }

    .result-item {
        padding: 10px;
        border: 1px solid #ccc;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .result-item:hover {
        background-color: #f5f5f5;
    }
</style>
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Edit Invoice</h4>
                <h6>Edit Invoice details</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'invoiceList' %}" class="btn btn-added"><img
                        src="{% static 'assets/img/icons/eye.svg' %}" alt="img" class="me-1">View Invoices</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <form>
                    <div class="row">
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Invoice ID</label>
                                <input type="text" name="inv_id" id="inv_id" value="{{ inv_id }}" readonly>
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Biller Name</label>
                                <input type="text" name="bill_name" id="bill_name" value="{{bill_name}}" required>
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="address" id="address" value="{{address}}" required>
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Contact No.</label>
                                <input type="text" name="contact" id="contact" value="{{contact}}" required>
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" name="gemail" id="gemail" value="{{gemail}}" required>
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-6 col-12">
                            <div class="form-group">
                                <div class="home-search">
                                    <label>Product Name</label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="search-inputs"
                                            placeholder="Please type product code and select..." aria-label="Search"
                                            aria-describedby="search-btn">
                                    </div>
                                    <div id="search-results"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="table-responsive mb-3">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>QTY</th>
                                        <th>Price</th>
                                        <th>Product Code</th>
                                        <th>Discount(%)</th>
                                        <th>Tax</th>
                                        <th>Subtotal</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="col-lg-3 col-sm-6 col-12">
                        <div class="form-group">
                            <label>Status</label>
                            <select class="select" id="status" name="status" onchange="togglePaidDueFields()">
                                <option value="Due" {% if status == 'Due' %}selected{% endif %}>Due</option>
                                <option value="Paid" {% if status == 'Paid' %}selected{% endif %}>Completed</option>
                            </select><br />
                            <div class="error" id="rtsErr"></div>
                        </div>
                    </div>
                    
                    <div class="row" id="paidDueFields" style="display: {% if status == 'Paid' %}none{% else %}block{% endif %};">
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Paid Amount</label>
                                <input type="text" name="paidamount" id="paidamount" value="{{paid}}">
                                <div class="error" id="paidAmountErr"></div> <!-- Unique ID for error div -->
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Due Date</label>
                                <div class="input-groupicon">
                                    <input type="text" id="due_date" name="due_date" class="datetimepicker" value="{{due_date}}">
                                    <div class="addonset">
                                        <img src="{% static 'assets/img/icons/calendars.svg' %}" alt="img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 "></div>
                        <div class="col-lg-6 ">
                            <div class="total-order w-100 max-widthauto m-auto mb-4">
                                <ul>
                                    <li>
                                        <h4>Shipping</h4>
                                        <h5>0.00</h5>
                                    </li>
                                    <li>
                                        <h4>Discount </h4>
                                        <h5>0.00</h5>
                                    </li>
                                    <li class="total">
                                        <h4>Grand Total(QAR)</h4>
                                        <h5 id="grand-total">0.00</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-sm-6 col-12">
                            <button class="btn btn-primary" id="submit-btn">Update Sale</button>
                            <a href="{% url 'invoiceList' %}"><span class="btn btn-secondary">Cancel</span></a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    function togglePaidDueFields() {
        var status = document.getElementById("status").value;
        var paidDueFields = document.getElementById("paidDueFields");
        if (status === "Paid") {
            paidDueFields.style.display = "none";
        } else {
            paidDueFields.style.display = "block";
        }
    }
    // Call the function to set the initial state based on the current status
    togglePaidDueFields();
</script>
<script>
    // Define a JavaScript variable to hold product details
    var invoiceDetails = [
        {% for product in invoice_details %}
    {
        id: "{{ product.related_product_id }}",
            name: "{{ product.related_product_name }}",
                price: "{{ product.price }}",
                    code: "{{ product.related_product_code }}",
                        quantity: "{{ product.quantity }}",
            },
    {% endfor %}
    ];
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const searchInput = document.getElementById('search-inputs');
        const searchResult = document.getElementById('search-results');
        const tableBody = document.querySelector('table tbody');
        const submitBtn = document.getElementById('submit-btn');
        // Add data to the table on page load using Django context data

        // Loop through invoiceDetails variable and add products to the table
        for (const productData of invoiceDetails) {
            addProductToInvoice(productData.id, productData.name, parseFloat(productData.price), productData.code, parseFloat(productData.quantity));
        }
        submitBtn.addEventListener('click', function (event) { // Add event parameter
            event.preventDefault();
            // Check if the table has at least one product
            if (tableBody.children.length > 0) {
                // Check if all required fields have values
                if (validateForm()) {
                    submitSale();
                } else {
                    alert('Please fill in all the required fields before submitting.');
                    return false;
                }
            } else {
                alert('Please add at least one product to the table before submitting.');
                return false;
            }
        });
        $(document).ready(function () {
            // Function to show/hide fields based on the selected value
            function toggleFields() {
                var statusValue = $("#status").val();

                if (statusValue === "Due") {
                    $("#paidDueFields").show();
                } else {
                    $("#paidDueFields").hide();
                }
            }

            // Initial state
            toggleFields();

            // Attach change event to the status dropdown
            $("#status").change(function () {
                // Call the function on change
                toggleFields();
            });
        });

        function validateForm() {
            // Get values from input fields
            let bill_name = document.getElementById('bill_name').value;
            let address = document.getElementById('address').value;
            let contact = document.getElementById('contact').value;
            let gemail = document.getElementById('gemail').value;
            let due_date = document.getElementById('due_date').value;
            let paid = document.getElementById('paidamount').value;

            // Check if any of the required fields are empty
            if (!bill_name || !address || !contact || !gemail) {
                return false;
            }

            // Additional validation logic if needed

            // All required fields have values
            return true;
        }
        function submitSale() {
            let bill_name = document.getElementById('bill_name').value;
            let address = document.getElementById('address').value;
            let contact = document.getElementById('contact').value;
            let gemail = document.getElementById('gemail').value;
            let due_date = document.getElementById('due_date').value;
            let status = document.getElementById('status').value;
            let paid = parseFloat(document.getElementById('paidamount').value);
            let inv_id = document.getElementById('inv_id').value;
            const rows = tableBody.children;
            const products = [];
            let grandTotal = 0;

            // Collect data from each row in the table and calculate grand total
            for (const row of rows) {
                const productId = row.dataset.id;
                const productName = row.dataset.name;
                const productPrice = row.dataset.price;
                const productCode = row.dataset.code;
                const quantityElement = row.querySelector('[contenteditable="true"]');
                const discountElements = row.querySelectorAll('[contenteditable="true"]');

                let quantity = quantityElement ? parseFloat(quantityElement.innerText) : 1;
                const discount = discountElements.length > 1 ? parseFloat(discountElements[1].innerText) : 0;
                const tax = discountElements.length > 2 ? parseFloat(discountElements[2].innerText) : 0;

                quantity = isNaN(quantity) ? 1 : quantity;

                const subtotal = (quantity * parseFloat(productPrice)) - discount + tax;
                grandTotal += subtotal;

                const productData = {
                    id: productId,
                    name: productName,
                    price: productPrice,
                    code: productCode,
                    quantity: quantity,
                    discount: discount,
                    tax: tax,
                    bill_name: bill_name,
                    address: address,
                    contact: contact,
                    gemail: gemail,
                    due_date: due_date,
                    paid: paid,
                    status: status,
                    inv_id: inv_id,
                };

                products.push(productData);
            }

            // Check if the paid amount is greater than or equal to the grand total
            if (paid <= grandTotal || isNaN(paid)) {
                // Make an AJAX request to save the data to the server
                fetch('/update_sale/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken'),
                    },
                    body: JSON.stringify({ products: products }),
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('Sale Updated successfully!');
                            const redirectUrl = data.redirect_url;
                            if (redirectUrl) {
                                window.location.href = redirectUrl;
                            }
                        } else {
                            alert('Error submitting sale. Please try again.');
                        }
                    });
            } else {
                alert('Paid amount must be lower than or equal to the grand total.');
            }
        }
        searchInput.addEventListener('input', function () {
            const query = searchInput.value.trim();

            if (query !== '') {
                fetch(`/new_pro_search/?query=${query}`)
                    .then(response => response.json())
                    .then(data => {
                        const results = data.map(product => `<div class="result-item" data-id="${product.id}" data-name="${product.name}" data-price="${product.price}" data-code="${product.product_code}">${product.name}</div>`);
                        searchResult.innerHTML = results.join('');
                    });
            } else {
                searchResult.innerHTML = '';
            }
        });

        searchResult.addEventListener('click', function (event) {
            const resultItem = event.target.closest('.result-item');
            if (resultItem) {
                const productId = resultItem.dataset.id;
                const productName = resultItem.dataset.name;
                const productPrice = resultItem.dataset.price;
                const productCode = resultItem.dataset.code;
                const productQuantity = resultItem.dataset.quantity;
                addProductToInvoice(productId, productName, productPrice, productCode, productQuantity);
                searchInput.value = '';
                searchResult.innerHTML = '';
            }
        });
        const resultStyles = `
            .result-item {
                padding: 10px;
                border: 1px solid #ccc;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            .result-item:hover {
                background-color: #f5f5f5;
            }
        `;
        const styleElement = document.createElement('style');
        styleElement.innerHTML = resultStyles;
        document.head.appendChild(styleElement);
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                searchInput.value = '';
                searchResult.innerHTML = '';
            }
        });
        function addProductToInvoice(id, name, price, code, quantity) {
            quantity = typeof quantity !== 'undefined' ? parseFloat(quantity) : 1;
            const newRow = `<tr data-id="${id}" data-name="${name}" data-price="${price}" data-code="${code}" data-quantity="${quantity}" data-status-form="0">
          <td>${tableBody.children.length + 1}</td>
          <td>${name}</td>
          <td id="quantity" contenteditable="true">${quantity}</td>
          <td id="price" contenteditable="false">${price}</td>
          <td id="code" contenteditable="false">${code}</td>
          <td id="discount" contenteditable="false">0%</td>
          <td id="tax" contenteditable="false">0</td>
          <td id="subtotal" contenteditable="false">${price}</td>
          <td><button class="btn btn-sm btn-danger" onclick="removeRow(this)">Remove</button></td>
        </tr>`;
            tableBody.innerHTML += newRow;

            // Attach event listener for keyup on the quantity cell
            const quantityCell = tableBody.lastElementChild.querySelector('#quantity');
            quantityCell.addEventListener('keyup', function () {
                updateSubtotal(this);
            });
            updateGrandTotal();
        }

        function updateSubtotal(inputElement) {
            const row = inputElement.closest('tr');
            const quantityInput = row.querySelector('#quantity');
            const currentQuantity = parseFloat(quantityInput.innerText.trim()) || '';

            // Check if the quantity input is empty or not a valid number
            if (isNaN(currentQuantity) || currentQuantity < 0) {
                quantityInput.innerText = '';
                updateSubtotalValue(row, null);
                return;
            }

            const price = parseFloat(row.dataset.price);
            const discount = parseFloat(row.querySelector('#discount').innerText);
            const tax = parseFloat(row.querySelector('#tax').innerText);

            const subtotal = (currentQuantity * price) - discount + tax;

            // Update the quantity input value instead of inner text
            quantityInput.value = currentQuantity;

            row.querySelector('#subtotal').innerText = subtotal.toFixed(2);
            updateGrandTotal();
        }

        function updateSubtotalValue(row, quantity) {
            const price = parseFloat(row.dataset.price);
            const discount = parseFloat(row.querySelector('#discount').innerText);
            const tax = parseFloat(row.querySelector('#tax').innerText);

            const subtotal = quantity === null ? 0 : (quantity * price) - discount + tax;
            row.querySelector('#subtotal').innerText = subtotal.toFixed(2);
            updateGrandTotal();
        }
        function updateGrandTotal() {
            const rows = tableBody.children;
            let grandTotal = 0;

            for (const row of rows) {
                const subtotal = parseFloat(row.querySelector('#subtotal').innerText) || 0;
                grandTotal += subtotal;
            }

            // Format grandTotal without trailing zeros
            grandTotal = parseFloat(grandTotal.toFixed(2));

            document.getElementById('grand-total').innerText = grandTotal;
        }

        window.removeRow = function (button) {
            const row = button.closest('tr');
            const productId = row.dataset.id;
            row.remove();

            // Update grand total after removing the row
            updateGrandTotal();
        };

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    });
</script>


{% endblock body %}