<div class="right_col mt-sm-3" role="main">
    <div class="settings_content max-w-1440">
        <a class="back-link" href="<%= tutorId ? '/staff-invoices/staff/' + tutorId + '#invoices' : '/staff-invoices#Invoices' %>">
            <span class="fa fa-chevron-left mr-2"></span>Back to invoices
        </a>
        <h2 class="title-text mt-3 mb-4 size-22">New Invoice</h2>
        <div class="card card_style">
            <div class="card-body form-wizard">
                <form class="form-design" action="/staff-invoices/invoices/store" id="new-invoice-form" method="post">

                    <!-- Add this hidden field at the top of the form -->
                    <input type="hidden" name="redirect_to" value="<%= tutorId ? '/staff-invoices/staff/' + tutorId + '#invoices' : '/staff-invoices#Invoices' %>">
                    
                    <h2 class="title-text mb-20" id="">Who do you want to create an invoice for?</h2>
                    <div class="form-group mb-2 select2-default-height">
                        <div class="d-flex justify-content-between">
                            
                        </div>
                        
                        <label class="form-label" for="tutor_id">Staff<span class="required">*</span></label>
                        <select class="form-control select2" name="tutor_id" id="tutor_id">
                            <option value="">Select</option>
                            <% staffs.forEach(staff => { %>
                                <option value="<%= staff._id || staff.id %>" <%= ((tutorId == staff._id || tutorId == staff.id) || (transaction && transaction?.tutor_id == staff._id)) ? 'selected' : '' %>>
                                <%= (staff.first_name) + " " + (staff.last_name) %>
                                </option>
                            <% }); %>
                        </select>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="skip_staffs" name="skip_staff_zero_invoice" value="1" />
                        <label class="form-check-label" for="skip_staffs">Skip staffs with <%= currency.symbol %>0.00 invoices.</label>
                    </div>

                    <%- include('./partials/_form') %>
                    
                    <div class="d-flex flex-wrap justify-content-end bottom_btns">
                        <button type="button" class="btn form-button cancel-btn theme-btn cancel-event mr-sm-2 min-w-200">Cancel</button>
                        <button type="submit" id="submit-btn" class="btn theme-btn min-w-200 mt-2 mt-sm-0">Create Invoice</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<%- include('./partials/form_script'); %>
<%- include('./partials/modals'); %>

<script>
     function handleFormErrors(response) {
        if (response.responseJSON?.errors) {
            $.each(response.responseJSON.errors, function (i, error) {
                let param = error.param;
                let $field = $(`[name="${param}"], [name="${param}[]"]`);

                if ($field.length) {
                    if ($field.hasClass("select2")) {
                        $field.siblings(".select2-container")
                            .after(`<span class="text-danger">${error.msg}</span>`);
                    } else {
                        $field.after(`<span class="text-danger">${error.msg}</span>`);
                    }
                } else {
                    console.warn(`No field found for param: ${param}`);
                }
            });
        } else {
            alert("Something went wrong. Please try again.");
        }
    }

    // Function to create invoice
    function createInvoice(storeUrl, formData, voidOld = false) {
        const dataObj = {};
        $('.loader').show();

        formData.forEach(item => {
            let name = item.name;

            // Normalize families[] → families
            if (name.endsWith("[]")) {
                name = name.replace("[]", "");
            }

            if (dataObj[name]) {
                if (!Array.isArray(dataObj[name])) {
                    dataObj[name] = [dataObj[name]];
                }
                dataObj[name].push(item.value);
            } else {
                // Force arrays for multi-select fields
                if (name === "staffs") {
                    dataObj[name] = [item.value];
                } else {
                    dataObj[name] = item.value;
                }
            }
        });

        dataObj.voidOld = voidOld;
        
        $.ajax({
            type: "POST",
            url: storeUrl,
            contentType: "application/json",
            data: JSON.stringify(dataObj),
            success: function (response) {
                if (response.success) {
                    window.location.href = response.redirectUrl || '/staff-invoices#Invoices';
                }
            },
            error: function (response) {
                handleFormErrors(response);
            },
            complete: function (response) {
                $('.loader').hide();
            }
        });
    }


    $(document).ready(function () {
        $('#invoice_date').val(`<%= moment().format('YYYY-MM-DD') %>`);
        $('#previousBalance').prop('checked',true);
        $('#no_due_date').prop('checked',true);

        $('#new-invoice-form').submit(function (e) {
            e.preventDefault();
            $(document).find("span.text-danger").remove();
            
            const form = $(this);
            const storeUrl = form.attr('action');
            let formData = $(this).serializeArray(); // use array form so we can push extra fields

            $('#submit-btn').attr('disabled',true);
            $.ajax({
                type: "POST",
                url: "/staff-invoices/invoices/check-existing", // endpoint for checkExistingInvoices
                data: $.param(formData),
                success: function (response) {
                    if (response.exists) {
                        // Show modal
                        $("#existingInvoicesModal span.selected-date-range").text($('#date_range_block').val());
                        $("#existingInvoicesModal").modal("show");

                        // Handle Yes
                        $("#existingInvoicesModal .confirm-void").off("click").on("click", function () {
                            $("#existingInvoicesModal").modal("hide");
                            createInvoice(storeUrl, formData, true); // pass flag to void old invoices
                        });

                        // Handle No
                        $("#existingInvoicesModal .no-btn").off("click").on("click", function () {
                            $("#existingInvoicesModal").modal("hide");
                            createInvoice(storeUrl, formData, false);
                        });

                        // Handle cancel
                        $("#existingInvoicesModal .cancel-btn").off("click").on("click", function () {
                        $('#submit-btn').removeAttr('disabled');
                        });
                    } else {
                        // No existing invoices → just create
                        createInvoice(storeUrl, formData, false);
                    }
                },
                error: function (response) {
                    $('#submit-btn').removeAttr('disabled');
                    handleFormErrors(response);
                }
            });
        });
        
    });

    $(document).ready(function () {
        // Cancel button
        $('.cancel-event').on('click', function () {
            window.location.href = '<%= tutorId ? "/staff-invoices/staff/" + tutorId + "#invoices" : "/staff-invoices#Invoices" %>';
        });
    });

</script>