Class EditModal

class EditModal {
    constructor() {
        this.modal = null;
        this.btnSave = null;
        this.btnCancel = null;
        this.saveConfirmModal = null;
        this.isDirty = false;
        this.init();
    }

    init() {
        // Modal HTML
        const modalHtml = `
      <div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="edit-modal-label" aria-hidden="true">
        <!-- Modal content goes here -->
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="edit-modal-label">Edit Item</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="mb-3">
                  <label for="item-code" class="form-label">Item Code</label>
                  <input type="text" class="form-control" id="item-code">
                </div>
                <div class="mb-3">
                  <label for="item-description" class="form-label">Item Description</label>
                  <input type="text" class="form-control" id="item-description">
                </div>
                <div class="mb-3">
                  <label for="item-price" class="form-label">Item Price</label>
                  <input type="number" class="form-control" id="item-price">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btn-cancel">Cancel</button>
              <button type="button" class="btn btn-primary" id="btn-save">Save Changes</button>
            </div>
          </div>
        </div>
      </div>
    `;

        // Save Confirmation Modal HTML
        const saveConfirmModalHtml = `
      <div class="modal fade" id="save-confirm-modal" tabindex="-1" aria-labelledby="save-confirm-modal-label" aria-hidden="true">
        <!-- Save confirmation modal content goes here -->
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="save-confirm-modal-label">Save Confirmation</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="save-confirm-modal-body">
              You have unsaved changes. Are you sure you want to cancel without saving?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
              <button type="button" class="btn btn-primary" id="btn-save-yes">Yes</button>
            </div>
          </div>
        </div>
      </div>
    `;

        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = modalHtml + saveConfirmModalHtml;

        this.modal = tempDiv.querySelector('#edit-modal');
        this.btnSave = this.modal.querySelector('#btn-save');
        this.btnCancel = this.modal.querySelector('#btn-cancel');
        this.saveConfirmModal = tempDiv.querySelector('#save-confirm-modal');
        this.btnSaveYes = this.saveConfirmModal.querySelector('#btn-save-yes');

        document.body.appendChild(this.modal);

        document.body.appendChild(this.saveConfirmModal);

        // Initialize the modals using bootstrap.Modal
        this.modalInstance = new bootstrap.Modal(this.modal);
        this.saveConfirmModalInstance = new bootstrap.Modal(this.saveConfirmModal);

        // Attach change event listener to each field
        const fields = this.modal.querySelectorAll('.form-control');
        fields.forEach((field) => {
            field.addEventListener('change', () => {
                this.isDirty = true;
            });
        });

        // Attach click event listener to the Cancel button
        this.btnCancel.addEventListener('click', () => {
            if (this.isDirty) {
                this.showSaveConfirmation();
            } else {
                this.modalInstance.hide();
            }
        });

    }

    show(item, onSave) {
        this.isDirty = false;

        const itemCodeInput = document.getElementById('item-code');
        const itemDescriptionInput = document.getElementById('item-description');
        const itemPriceInput = document.getElementById('item-price');

        const originalItem = {
            code: itemCodeInput.value,
            description: itemDescriptionInput.value,
            price: parseFloat(itemPriceInput.value),
        };

        const modalInstance = new bootstrap.Modal(this.modal);

        itemCodeInput.value = item.code;
        itemDescriptionInput.value = item.description;
        itemPriceInput.value = item.price;

        const handleSave = () => {
            const updatedItem = {
                code: itemCodeInput.value,
                description: itemDescriptionInput.value,
                price: parseFloat(itemPriceInput.value),
            };

            onSave(updatedItem);
            modalInstance.hide();
        };

        const handleCancel = () => {
            if (this.isDirty) {
                saveConfirmModalInstance.show();
            } else {
                modalInstance.hide();
            }
        };

        this.modal.addEventListener('hidden.bs.modal', event => {
            handleHide();
        });

        const handleHide = () => {
            removeEventListeners();
        };

        const removeEventListeners = () => {
            this.btnSave.removeEventListener('click', handleSave);
            this.btnCancel.removeEventListener('click', handleCancel);
        };

        const addEventListeners = () => {
            this.btnSave.addEventListener('click', handleSave);
            this.btnCancel.addEventListener('click', handleCancel);
        };

        const updateDirtyFlag = () => {
            this.isDirty =
                itemCodeInput.value !== originalItem.code ||
                itemDescriptionInput.value !== originalItem.description ||
                parseFloat(itemPriceInput.value) !== originalItem.price;
        };

        itemCodeInput.addEventListener('change', updateDirtyFlag);
        itemDescriptionInput.addEventListener('change', updateDirtyFlag);
        itemPriceInput.addEventListener('change', updateDirtyFlag);

        removeEventListeners();
        addEventListeners();

        modalInstance.show();
    }

    showSaveConfirmation() {
        this.saveConfirmModalInstance.show();
    }
}