{% extends 'sales/base.html' %}

{% block title %}Credit Note Page{% endblock %}

{% block content %}
<style>
    .select2-container {
        width: 100% !important;  
    }
    .modal-body {
        max-height: 400px;  
        overflow-y: auto; 
    }
    .attachment-label {
        font-weight: bold;
    }
    .btn-custom {
        margin: 5px; /* Add margin to buttons */
    }
    .table-responsive {
        margin-top: 20px; /* Space between the button and table */
    }
</style>

<div class="row pl-4 pr-4">
    <div class="col-lg-12 pt-3 pb-2">
        <button class="btn btn-primary" data-toggle="modal" data-target="#creditNoteModal">Create Credit Note</button>
    </div>
</div>

<!-- Modal for creating/updating credit note -->
<div class="modal fade" id="creditNoteModal" tabindex="-1" role="dialog" aria-labelledby="creditNoteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="creditNoteModalLabel">Create Credit Note</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="creditNoteForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="credit_note_id">Credit Note Id :</label>
                        <input type="text" id="credit_note_id" name="credit_note_id" class="form-control" required>
                    </div> 
                    <div class="form-group">
                        <label for="amount">Amount:</label>
                        <input type="number" id="amount" name="amount" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="reference">Reference:</label>
                        <input type="text" id="reference" name="reference" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="reason">Reason:</label>
                        <input type="text" id="reason" name="reason" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="discount">Discount:</label>
                        <input type="number" id="discount" name="discount" class="form-control" value="0" min="0">
                    </div>
                    <div class="form-group">
                        <label for="credit_period">Credit Period:</label>
                        <select id="credit_period" name="credit_period" class="form-control">
                            <option value="">-- Select Credit Period --</option>
                            <option value="7_days">7 Days</option>
                            <option value="15_days">15 Days</option>
                            <option value="30_days">30 Days</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="amount_paid">Amount Paid:</label>
                        <input type="number" id="amount_paid" name="amount_paid" class="form-control" value="0">
                    </div> 
                    <div class="form-group">
                        <label for="invoiceSelect">Select Invoice:</label>
                        <select id="invoiceSelect" name="invoice" class="form-control select2" required>
                            <option value="">-- Select Invoice --</option>
                            {% for invoice in invoices %}
                                <option value="{{ invoice.id }}">{{ invoice.qid }} ({{ invoice.amount }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="attachment-label" for="documents">Attach Documents (optional):</label>
                        <input type="file" id="documents" name="documents" class="form-control" multiple>
                    </div>
                    <input type="hidden" id="invoice" name="invoice" value="1"> <!-- Hardcoded for example -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Credit Note</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Table for listing credit notes -->
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Credit Note ID</th>
                <th>Transaction Date</th> 
                <th>Amount</th>
                <th>Reference</th>
                <th>Customer Name</th>
                <th>Reason</th>
                <th>Discount</th>
                <th>Amount Paid</th> 
                <th>Days Remaining</th>
                <th>Amount Outstanding</th> <!-- New column for amount outstanding -->
                <th>Attached Request</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="creditNoteTableBody">
            <!-- Dynamic data will be populated here -->
        </tbody>
    </table>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  $(document).ready(function () {
    loadCreditNotes();

    $('#creditNoteForm').on('submit', function (event) {
        event.preventDefault();
        
        // Get the values of amount and amount_paid
        var amount = parseFloat($('#amount').val());
        var amount_paid = parseFloat($('#amount_paid').val());

        // Check if Amount Paid is greater than Amount
        if (amount_paid > amount) {
            // Use SweetAlert to show an error message
            Swal.fire({
                title: 'Error!',
                text: 'Amount Paid cannot be greater than Amount.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
            return; // Stop form submission
        }

        // Collect the form data
        var creditNoteData = {
            credit_note_id: $('#credit_note_id').val(),
            amount: amount,
            reference: $('#reference').val(),
            reason: $('#reason').val(),
            discount: parseFloat($('#discount').val()) || 0,
            credit_period: $('#credit_period').val(),
            amount_paid: amount_paid,
            invoice: $('#invoiceSelect').val(), // Make sure this is the correct invoice ID
            documents: $('#documents')[0].files // Get files if there are any
        };

        // Prepare FormData for file upload if necessary
        var formData = new FormData();
        for (var key in creditNoteData) {
            if (creditNoteData[key] !== undefined) {
                formData.append(key, creditNoteData[key]);
            }
        }

        // Add files to formData
        if (creditNoteData.documents.length > 0) {
            for (var i = 0; i < creditNoteData.documents.length; i++) {
                formData.append('documents', creditNoteData.documents[i]);
            }
        }

        // Make AJAX request
        $.ajax({
            url: '/sales/api/credit-notes/', // Your API endpoint
            type: 'POST',
            contentType: false, // FormData does not need a content type
            processData: false, // FormData does not need to be processed
            data: formData,
            success: function (response) {
                console.log(response);
                if (response.success) {
                    // Use SweetAlert for success message
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        $('#creditNoteModal').modal('hide');
                        loadCreditNotes(); // Reload or update credit notes list
                    });
                } else {
                    const errorMessages = response.errors || [response.error || 'An unexpected error occurred.'];
                    // Use SweetAlert for error message
                    Swal.fire({
                        title: 'Error!',
                        text: errorMessages.join(', '),
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function (xhr) {
                const errorMessage = xhr.responseJSON && xhr.responseJSON.error
                    ? xhr.responseJSON.error
                    : 'An unexpected error occurred. Please try again.';
                // Use SweetAlert for unexpected error
                Swal.fire({
                    title: 'Error!',
                    text: errorMessage,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
});



    function loadCreditNotes() {
    $.ajax({
        url: '/sales/api/credit-notes/', 
        type: 'GET',
        success: function (response) {
            console.log(response)
            let creditNotesHtml = '';
            response.data.forEach(function (note) {
                // Check if attached request exists 
                 // <button class="btn btn-warning btn-custom" onclick="editCreditNote(${note.id})">Edit</button>
                let attachedRequest = note.documents.length > 0 
                    ? `<a href="${note.documents[0].file}" target="_blank">View</a>` 
                    : 'None';

                creditNotesHtml += `
                    <tr>
                        <td>${note.id}</td>
                        <td><a href="/sales/invoice/${note.invoice}/">${note.credit_note_id}</a></td>
                        <td>${note.trn_date}</td>
                        <td>${note.amount}</td>
                        <td>${note.reference}</td>
                        <td>${note.customer ? note.customer.customer_name : 'N/A'}</td> <!-- Fetch customer name -->
                        <td>${note.reason}</td>
                        <td>${note.discount}</td>
                        <td>${note.amount_paid}</td> <!-- Display amount paid -->
                        <td>${note.days_remaining}</td> 
                        <td>${note.amount_outstanding}</td> <!-- Display amount outstanding -->
                        <td>${attachedRequest}</td>
                        <td>
                           
                            <button class="btn btn-danger btn-custom" onclick="deleteCreditNote(${note.id})">Delete</button>
                        </td>
                    </tr>`;
            });
            $('#creditNoteTableBody').html(creditNotesHtml);
        },
        error: function (xhr) {
            alert('Failed to load credit notes.');
        }
    });
}

function editCreditNote(id) {
    $.ajax({
        url: `/sales/api/credit-notes/${id}/`,
        type: 'GET',
        success: function (note) {
            $('#credit_note_id').val(note.credit_note_id);
            // Adjusting for current date and time as input
            var currentDate = new Date().toISOString().slice(0, 10);
            $('#trn_date').val(currentDate);  // Assuming you want current date
            // $('#trn_time').val(note.trn_time); // Assuming you want to disable or set another value
            $('#invoiceSelect').val(note.invoice);
            $('#amount').val(note.amount);
            $('#reference').val(note.reference);
            // $('#customer_name').val(note.customer_name); // Assuming you want to disable or set another value
            $('#reason').val(note.reason);
            $('#discount').val(note.discount);
            // $('#attached_request').val(null); // Assuming you want to clear any previously attached file
            $('#creditNoteModalLabel').text('Edit Credit Note');
            $('#creditNoteModal').modal('show');
            
            // Handling form submission for update
            $('#creditNoteForm').off('submit').on('submit', function (event) {
                event.preventDefault();
                updateCreditNote(id);
            });
        },
        error: function (xhr) {
            alert('Failed to load credit note for editing.');
        }
    });
}

    function updateCreditNote(id) {
        var formData = new FormData($('#creditNoteForm')[0]);
        $.ajax({
            url: `/sales/api/credit-notes/${id}/`,
            type: 'PUT',
            contentType: false,
            processData: false,
            data: formData,
            success: function (response) {
                alert(response.message);
                $('#creditNoteModal').modal('hide');
                loadCreditNotes();
            },
            error: function (xhr) {
                alert('Failed to update credit note.');
            }
        });
    }

    function deleteCreditNote(id) {
    // Use SweetAlert for the confirmation dialog
    Swal.fire({
        title: 'Are you sure?',
        text: 'You won’t be able to undo this action!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            // If confirmed, make the AJAX DELETE request
            $.ajax({
                url: `/sales/api/credit-notes/${id}/`,
                type: 'DELETE',
                success: function (response) {
                    // Use SweetAlert to show a success message
                    Swal.fire(
                        'Deleted!',
                        'The credit note has been deleted.',
                        'success'
                    );
                    loadCreditNotes();
                },
                error: function (xhr) {
                    // Use SweetAlert to show an error message
                    Swal.fire(
                        'Error!',
                        'Failed to delete credit note. Please try again.',
                        'error'
                    );
                }
            });
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            // If the user cancels the action
            Swal.fire(
                'Cancelled',
                'The credit note is safe :)',
                'info'
            );
        }
    });
}

</script>
{% endblock %}