{% extends "base.html" %}
{% block content %}

<div id="mark_invoice_as_canceled_modal" tabindex="-1" class="modal fade" data-backdrop="static" xmlns="http://www.w3.org/1999/html">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mark invoice as canceled?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to mark invoice "<span id="markInvoiceCanceledModalValue"></span>" as canceled?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#mark_invoice_as_canceled_modal').modal('hide');">Close</button>
                <button id="MarkInvoiceAsCanceledActionButton" type="button" onclick="markInvoiceAsCanceled()" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

<div id="mark_invoice_as_paid_modal" tabindex="-1" class="modal fade" data-backdrop="static" xmlns="http://www.w3.org/1999/html">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mark invoice as paid?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to mark invoice "<span id="markInvoicePaidModalValue"></span>" as paid?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#mark_invoice_as_paid_modal').modal('hide');">Close</button>
                <button id="MarkInvoiceAsPaidActionButton" type="button" onclick="markInvoiceAsPaid()" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

<div id="mark_proposal_as_rejected_modal" tabindex="-1" class="modal fade" data-backdrop="static" xmlns="http://www.w3.org/1999/html">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mark proposal as accepted?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to mark proposal "<span id="markProposalRejectedModalValue"></span>" as rejected?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#mark_proposal_as_rejected_modal').modal('hide');">Close</button>
                <button id="MarkProposalAsRejectedActionButton" type="button" onclick="markProposalAsRejected()" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

<div id="mark_proposal_as_accepted_modal" tabindex="-1" class="modal fade" data-backdrop="static" xmlns="http://www.w3.org/1999/html">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mark proposal as accepted?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to mark proposal "<span id="markProposalAcceptedModalValue"></span>" as accepted?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#mark_proposal_as_accepted_modal').modal('hide');">Close</button>
                <button id="MarkProposalAsAcceptedActionButton" type="button" onclick="markProposalAsAccepted()" class="btn btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
    <h2>Active Invoices (<span id="active_invoices_count_value">0</span>)</h2>
    <div class="table-responsive">
        <table class="table table-striped" id="active_invoices_table">
            <thead class="thead-light">
            <tr>
                <th scope="col">Number</th>
                <th scope="col">Date</th>
                <th scope="col">Due Date</th>
                <th scope="col">Reference Number</th>
                <th scope="col">Customer Name</th>
                <th scope="col">Description</th>
                <th scope="col">Total Amount</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot style="border-top-width: thick;border-bottom-width: thick;">
            <tr>
                <td colspan="6"><b>Totals</b></td>
                <td><strong id="active_invoices_total_amount_value">0 {{ currency_name }}</strong></td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="container mt-4">
    <h2>Active Proposals (<span id="active_proposals_count_value">0</span>)</h2>
    <div class="table-responsive">
        <table class="table table-striped" id="active_proposals_table">
            <thead class="thead-light">
            <tr>
                <th scope="col">Number</th>
                <th scope="col">Date</th>
                <th scope="col">Due Date</th>
                <th scope="col">Reference Number</th>
                <th scope="col">Customer Name</th>
                <th scope="col">Description</th>
                <th scope="col">Total Amount</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot style="border-top-width: thick;border-bottom-width: thick;">
            <tr>
                <td colspan="6"><b>Totals</b></td>
                <td><strong id="active_proposals_total_amount_value">0 {{ currency_name }}</strong></td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<script type="text/javascript">

    function refreshData() {
        $('#loading_modal').modal('show');

        $.ajax({
            type: 'GET',
            url: '/active_invoices',
            success: function(data) {
                // Populate active invoices section
                const activeInvoicesTable = document.getElementById('active_invoices_table').getElementsByTagName('tbody')[0];
                // clear all the old rows first
                const activeInvoicesTableRowCount = activeInvoicesTable.rows.length;

                // Start from the last row and go backwards to avoid index shift
                for (let i = activeInvoicesTableRowCount - 1; i >= 0; i--) {
                    activeInvoicesTable.deleteRow(i);
                }

                activeInvoicesTotalAmount = 0;
                // Repopulate the table
                for (const [entry, values] of Object.entries(data)) {
                        const row = activeInvoicesTable.insertRow();
                        const cell1 = row.insertCell(0);
                        const cell2 = row.insertCell(1);
                        const cell3 = row.insertCell(2);
                        const cell4 = row.insertCell(3);
                        const cell5 = row.insertCell(4);
                        const cell6 = row.insertCell(5);
                        const cell7 = row.insertCell(6);
                        const cell8 = row.insertCell(7);

                        cell1.innerHTML = values.invoice_number;
                        cell2.innerHTML = values.invoice_date;
                        cell3.innerHTML = values.due_date;
                        cell4.innerHTML = values.reference_number;
                        cell5.innerHTML = values.customer_name;
                        cell6.innerHTML = values.description;
                        cell7.innerHTML = values.total_amount + ' ' + values.currency_symbol;
                        cell8.innerHTML = `<button type="button" class="btn btn-danger mark-canceled-button me-1" data-toggle="tooltip" data-placement="top" title="Cancel invoice" data-invoice-number="${values.invoice_number}"><i class="bi bi-x-square"></i></button><button type="button" class="btn btn-success mark-paid-button me-1" data-toggle="tooltip" data-placement="top" title="Mark invoice as paid" data-id="${values.id}" data-invoice-number="${values.invoice_number}"><i class="bi bi-cash-coin"></i></button><button type="button" class="btn btn-primary view-invoice-button me-1" data-toggle="tooltip" data-placement="top" title="View invoice" data-id="${values.id}" data-invoice-number="${values.invoice_number}"><i class="bi bi-zoom-in"></i></button><button type="button" class="btn btn-primary print-invoice-button me-1" data-toggle="tooltip" data-placement="top" title="Print invoice" data-id="${values.id}"><i class="bi bi-printer"></i></button><button type="button" class="btn btn-secondary duplicate-invoice-button" data-toggle="tooltip" data-placement="top" title="Duplicate invoice" data-id="${values.id}"><i class="bi bi-copy"></i></button>`;

                        activeInvoicesTotalAmount += values.total_amount;
                }

                document.getElementById('active_invoices_count_value').innerHTML = Object.entries(data).length;
                document.getElementById('active_invoices_total_amount_value').innerHTML = activeInvoicesTotalAmount + ' {{ currency_name }}';

                // Handle mark as canceled button clicks
                $('.mark-canceled-button').on('click', function () {
                    const invoice_number = $(this).data('invoice-number');

                    // Set the value in the modal's prompt text
                    $('#markInvoiceCanceledModalValue').text(invoice_number);

                    $('#mark_invoice_as_canceled_modal').modal('show');
                });

                // Handle mark as paid button clicks
                $('.mark-paid-button').on('click', function () {
                    const invoice_id = $(this).data('id');
                    const invoice_number = $(this).data('invoice-number');

                    // Set the value in the modal's prompt text
                    $('#markInvoicePaidModalValue').text(invoice_number);

                    $('#mark_invoice_as_paid_modal').modal('show');
                });

                // Handle view invoice button clicks
                $('.view-invoice-button').on('click', function () {
                    const invoice_id = $(this).data('id');

                    loadNewTabWithInvoiceID(invoice_id, false);
                });

                // Handle print invoice button clicks
                $('.print-invoice-button').on('click', function () {
                    const invoice_id = $(this).data('id');

                    loadNewTabWithInvoiceID(invoice_id, true);
                });

                // Handle duplicate invoice button clicks
                $('.duplicate-invoice-button').on('click', function () {
                    const invoice_id = $(this).data('id');

                    duplicateInvoiceWithInvoiceID(invoice_id);
                });
            },
            error: function (error) {
                $('#loading_modal').modal('hide');

                if (!connection_lost_dialog_shown) {
                    notify_warning('Error refreshing active invoices: ' + error);
                }
                return;
            }
        });

        $.ajax({
            type: 'GET',
            url: '/active_proposals',
            success: function(data) {
                // Populate active proposals section
                const activeProposalsTable = document.getElementById('active_proposals_table').getElementsByTagName('tbody')[0];
                // clear all the old rows first
                const activeProposalsTableRowCount = activeProposalsTable.rows.length;

                // Start from the last row and go backwards to avoid index shift
                for (let i = activeProposalsTableRowCount - 1; i >= 0; i--) {
                    activeProposalsTable.deleteRow(i);
                }

                activeProposalsTotalAmount = 0;
                // Repopulate the table
                for (const [entry, values] of Object.entries(data)) {
                        const row = activeProposalsTable.insertRow();
                        const cell1 = row.insertCell(0);
                        const cell2 = row.insertCell(1);
                        const cell3 = row.insertCell(2);
                        const cell4 = row.insertCell(3);
                        const cell5 = row.insertCell(4);
                        const cell6 = row.insertCell(5);
                        const cell7 = row.insertCell(6);
                        const cell8 = row.insertCell(7);

                        cell1.innerHTML = values.proposal_number;
                        cell2.innerHTML = values.proposal_date;
                        cell3.innerHTML = values.due_date;
                        cell4.innerHTML = values.reference_number;
                        cell5.innerHTML = values.customer_name;
                        cell6.innerHTML = values.description;
                        cell7.innerHTML = values.total_amount + ' ' + values.currency_symbol;
                        cell8.innerHTML = `<button type="button" class="btn btn-danger mark-rejected-button me-1" data-toggle="tooltip" data-placement="top" title="Mark proposal as rejected" data-proposal-number="${values.proposal_number}"><i class="bi bi-x-square"></i></button><button type="button" class="btn btn-success mark-accepted-button me-1" data-toggle="tooltip" data-placement="top" title="Mark proposal as accepted" data-proposal-number="${values.proposal_number}"><i class="bi bi-check2-square"></i></button><button type="button" class="btn btn-primary view-proposal-button me-1" data-toggle="tooltip" data-placement="top" title="View proposal" data-id="${values.id}" data-proposal-number="${values.proposal_number}"><i class="bi bi-zoom-in"></i></button><button type="button" class="btn btn-primary print-proposal-button me-1" data-toggle="tooltip" data-placement="top" title="Print proposal" data-id="${values.id}"><i class="bi bi-printer"></i></button><button type="button" class="btn btn-secondary duplicate-proposal-button" data-toggle="tooltip" data-placement="top" title="Duplicate proposal" data-id="${values.id}"><i class="bi bi-copy"></i></button>`;

                        activeProposalsTotalAmount += values.total_amount;
                }

                document.getElementById('active_proposals_count_value').innerHTML = Object.entries(data).length;
                document.getElementById('active_proposals_total_amount_value').innerHTML = activeProposalsTotalAmount + ' {{ currency_name }}';

                // Handle mark as rejected button clicks
                $('.mark-rejected-button').on('click', function () {
                    const proposal_number = $(this).data('proposal-number');

                    // Set the value in the modal's prompt text
                    $('#markProposalRejectedModalValue').text(proposal_number);

                    $('#mark_proposal_as_rejected_modal').modal('show');
                });

                // Handle mark as accepted button clicks
                $('.mark-accepted-button').on('click', function () {
                    const proposal_number = $(this).data('proposal-number');

                    // Set the value in the modal's prompt text
                    $('#markProposalAcceptedModalValue').text(proposal_number);

                    $('#mark_proposal_as_accepted_modal').modal('show');
                });

                // Handle view proposal button clicks
                $('.view-proposal-button').on('click', function () {
                    const proposal_id = $(this).data('id');

                    loadNewTabWithProposalID(proposal_id, false);
                });

                // Handle print proposal button clicks
                $('.print-proposal-button').on('click', function () {
                    const proposal_id = $(this).data('id');

                    loadNewTabWithProposalID(proposal_id, true);
                });

                // Handle duplicate proposal button clicks
                $('.duplicate-proposal-button').on('click', function () {
                    const proposal_id = $(this).data('id');

                    duplicateProposalWithProposalID(proposal_id);
                });
            },
            error: function (error) {
                $('#loading_modal').modal('hide');

                if (!connection_lost_dialog_shown) {
                    notify_warning('Error refreshing active proposals: ' + error);
                }
                return;
            }
        });

        $.ajax({
            url: '/past_invoices_count',
            method: 'GET',
            success: function(response) {
                $('#past_invoices_count').text(String(response));
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to retrieve past invoices count! Reason: ' + error);
            }
        });

        $.ajax({
            url: '/past_proposals_count',
            method: 'GET',
            success: function(response) {
                $('#past_proposals_count').text(String(response));
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to retrieve past proposals count! Reason: ' + error);
            }
        });

        $('#loading_modal').modal('hide');
    }

    $(document).ready(function() {
        $('#loading_modal').modal('show');

        refreshData();
    });

    function markInvoiceAsCanceled() {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/mark_invoice_canceled',
            method: 'POST',
            data: {
                invoice_number: $('#markInvoiceCanceledModalValue').text(),
            },
            success: function(response) {
                $('#loading_modal').modal('hide');
                if (!response)
                    notify_warning('Error while trying to mark invoice as canceled. Please try again!');
                else {
                    notify_success('Invoice successfully marked as canceled!');

                    $('#mark_invoice_as_canceled_modal').modal('hide');

                    refreshData();
                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to mark invoice as canceled! Reason: ' + error);
            }
        });
    }

    function markInvoiceAsPaid() {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/mark_invoice_paid',
            method: 'POST',
            data: {
                invoice_number: $('#markInvoicePaidModalValue').text(),
            },
            success: function(response) {
                $('#loading_modal').modal('hide');
                if (!response)
                    notify_warning('Error while trying to mark invoice as paid. Please try again!');
                else {
                    notify_success('Invoice successfully marked as paid!');

                    $('#mark_invoice_as_paid_modal').modal('hide');

                    refreshData();
                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to mark invoice as paid! Reason: ' + error);
            }
        });
    }

    function duplicateInvoiceWithInvoiceID(invoice_id) {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/get_invoice',
            method: 'POST',
            data: {
                invoice_id: invoice_id,
            },
            success: function(data) {
                $('#loading_modal').modal('hide');
                if (!data)
                    notify_warning('Error while trying to duplicate invoice. Please try again!');
                else {
                    showNewInvoiceModal();

                    // populate invoice form with the data retrieved
                    $('#new_invoice_customer_name').val(data['customer_name']);
                    $('#new_invoice_reference_number').val(data['reference_number']);
                    $('#new_invoice_description').val(data['description']);

                    if (data['items'] && data['items'].length > 0) {
                        var firstRow = $('#invoiceItemsContainer tr:first');
                        firstRow.find('input[name="title[]"]').val(data['items'][0]['title']);
                        firstRow.find('textarea[name="description[]"]').val(data['items'][0]['description']);
                        firstRow.find('input[name="quantity[]"]').val(data['items'][0]['quantity']);
                        firstRow.find('input[name="price[]"]').val(data['items'][0]['price']);

                        if (data['items'].length > 1) {
                            for(let i=1; i<data['items'].length; i++){
                                var newItem = $('<tr class="invoiceItem">' +
                                    '<td class="col-4"><input type="text" class="form-control itemTitleInput" list="predefinedItems" name="title[]" required></td>' +
                                    '<td class="col-5"><textarea class="form-control" name="description[]" rows="3"></textarea></td>' +
                                    '<td class="col-1"><input type="number" class="form-control" name="quantity[]" min="1" value="1" required></td>' +
                                    '<td class="col-1"><input type="number" class="form-control" name="price[]" step="1" min="0" value="0" required></td>' +
                                    '<td class="col-1" style="text-align: center;"><button type="button" class="btn btn-danger btn-sm removeItem"><span><i class="bi bi-trash"></i></span></button></td>' +
                                    '</tr>');
                                $('#invoiceItemsContainer').append(newItem);

                                var lastRow = $('#invoiceItemsContainer tr:last');
                                lastRow.find('input[name="title[]"]').val(data['items'][i]['title']);
                                lastRow.find('textarea[name="description[]"]').val(data['items'][i]['description']);
                                lastRow.find('input[name="quantity[]"]').val(data['items'][i]['quantity']);
                                lastRow.find('input[name="price[]"]').val(data['items'][i]['price']);
                            }
                        }

                        // Select all elements with the classname using querySelectorAll.
                        let elements = document.querySelectorAll('.itemTitleInput');

                        for(let i=0; i<elements.length; i++) {
                            // Add an event listener to each selected element.
                            elements[i].addEventListener('input', populateItemFields);
                        }
                    }

                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to duplicate selected invoice! Reason: ' + error);
            }
        });
    }

    function markProposalAsRejected() {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/mark_proposal_rejected',
            method: 'POST',
            data: {
                proposal_number: $('#markProposalRejectedModalValue').text(),
            },
            success: function(response) {
                $('#loading_modal').modal('hide');
                if (!response)
                    notify_warning('Error while trying to mark proposal as rejected. Please try again!');
                else {
                    notify_success('Proposal successfully marked as rejected!');

                    $('#mark_proposal_as_rejected_modal').modal('hide');

                    refreshData();
                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to mark proposal as rejected! Reason: ' + error);
            }
        });
    }

    function markProposalAsAccepted() {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/mark_proposal_accepted',
            method: 'POST',
            data: {
                proposal_number: $('#markProposalAcceptedModalValue').text(),
            },
            success: function(response) {
                $('#loading_modal').modal('hide');
                if (!response)
                    notify_warning('Error while trying to mark proposal as accepted. Please try again!');
                else {
                    notify_success('Proposal successfully marked as accepted!');

                    $('#mark_proposal_as_accepted_modal').modal('hide');

                    refreshData();
                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to mark proposal as accepted! Reason: ' + error);
            }
        });
    }

    function duplicateProposalWithProposalID(proposal_id) {
        $('#loading_modal').modal('show');
        $.ajax({
            url: '/get_proposal',
            method: 'POST',
            data: {
                proposal_id: proposal_id,
            },
            success: function(data) {
                $('#loading_modal').modal('hide');
                if (!data)
                    notify_warning('Error while trying to duplicate proposal. Please try again!');
                else {
                    showNewProposalModal();

                    // populate proposal form with the data retrieved
                    $('#new_proposal_customer_name').val(data['customer_name']);
                    $('#new_proposal_reference_number').val(data['reference_number']);
                    $('#new_proposal_description').val(data['description']);

                    if (data['items'] && data['items'].length > 0) {
                        var firstRow = $('#proposalItemsContainer tr:first');
                        firstRow.find('input[name="title[]"]').val(data['items'][0]['title']);
                        firstRow.find('textarea[name="description[]"]').val(data['items'][0]['description']);
                        firstRow.find('input[name="quantity[]"]').val(data['items'][0]['quantity']);
                        firstRow.find('input[name="price[]"]').val(data['items'][0]['price']);

                        if (data['items'].length > 1) {
                            for(let i=1; i<data['items'].length; i++){
                                var newItem = $('<tr class="proposalItem">' +
                                    '<td class="col-4"><input type="text" class="form-control itemTitleInput" list="predefinedItems" name="title[]" required></td>' +
                                    '<td class="col-5"><textarea class="form-control" name="description[]" rows="3"></textarea></td>' +
                                    '<td class="col-1"><input type="number" class="form-control" name="quantity[]" min="1" value="1" required></td>' +
                                    '<td class="col-1"><input type="number" class="form-control" name="price[]" step="1" min="0" value="0" required></td>' +
                                    '<td class="col-1" style="text-align: center;"><button type="button" class="btn btn-danger btn-sm removeItem"><span><i class="bi bi-trash"></i></span></button></td>' +
                                    '</tr>');
                                $('#proposalItemsContainer').append(newItem);

                                var lastRow = $('#proposalItemsContainer tr:last');
                                lastRow.find('input[name="title[]"]').val(data['items'][i]['title']);
                                lastRow.find('textarea[name="description[]"]').val(data['items'][i]['description']);
                                lastRow.find('input[name="quantity[]"]').val(data['items'][i]['quantity']);
                                lastRow.find('input[name="price[]"]').val(data['items'][i]['price']);
                            }
                        }

                        // Select all elements with the classname using querySelectorAll.
                        let elements = document.querySelectorAll('.itemTitleInput');

                        for(let i=0; i<elements.length; i++) {
                            // Add an event listener to each selected element.
                            elements[i].addEventListener('input', populateItemFields);
                        }
                    }

                }
            },
            error: function (error) {
                $('#loading_modal').modal('hide');
                notify_warning('Error while trying to duplicate selected proposal! Reason: ' + error);
            }
        });
    }
</script>

{% endblock %}