online.tbbank.gov.tm-laravel-nova/resources/js/vendor/nova/js/additional.js

window.LaravelNovaWizardStore = {
    data: {
        steps: 0,
        currentStep: 1,
    },

    fields: {
        buttonsContainerElement: {},
        cancelFormButton: {},
        createFormButton: {},
        prevButtonElement: {},
        nextButtonElement: {},
    },

    nextStep() {
        if (this.data.steps > 0 && this.data.currentStep < this.data.steps) {
            document.querySelector(`div[wizard-step="${this.data.currentStep}"]`).style.display = 'none';

            this.data.currentStep++;

            document.querySelector(`div[wizard-step="${this.data.currentStep}"]`).style.display = 'inherit';

            return;
        }

        if (this.data.currentStep === this.data.steps) {
            this.hideNextButton()
            this.showFormSubmitButton()
        } else {
            this.hideFormSubmitButton()
            this.showNextButton()
        }
    },

    prevStep() {
        if (this.data.currentStep > 1) {
            document.querySelector(`div[wizard-step="${this.data.currentStep}"]`).style.display = 'none';

            this.data.currentStep--;

            document.querySelector(`div[wizard-step="${this.data.currentStep}"]`).style.display = 'inherit';
        }
    },

    hideNovaFormButtons() {
        this.fields.cancelFormButton = document.querySelector('button[dusk="cancel-create-button"]');
        this.fields.createFormButton = document.querySelector('button[dusk="create-button"]');

        this.fields.buttonsContainerElement = this.fields.createFormButton.parentNode;
        this.hideFormSubmitButton();
        this.hideFormCancelButton();
    },

    addWizardButtons() {
        this.fields.buttonsContainerElement.insertAdjacentHTML('afterbegin', this.nextButtonTemplate());
        this.fields.buttonsContainerElement.insertAdjacentHTML('afterbegin', this.prevButtonTemplate());

        this.fields.nextButtonElement = document.getElementById('laravel-nova-wizard-next-button');
        this.fields.prevButtonElement = document.getElementById('laravel-nova-wizard-prev-button');

        this.fields.nextButtonElement.addEventListener('click', () => {
            this.nextStep()
        })

        this.fields.prevButtonElement.addEventListener('click', () => {
            this.prevStep()
        })
    },

    nextButtonTemplate() {
        return `
            <button type="button" id="laravel-nova-wizard-next-button" class="border text-left appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 relative disabled:cursor-not-allowed inline-flex items-center justify-center shadow h-9 px-3 bg-primary-500 border-primary-500 hover:[&amp;:not(:disabled)]:bg-primary-400 hover:[&amp;:not(:disabled)]:border-primary-400 text-white dark:text-gray-900">
                <span class="flex items-center gap-1">Next</span>
            </button>
        `;
    },

    prevButtonTemplate() {
        return `
            <button type="button" id="laravel-nova-wizard-prev-button" class="border text-left appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 relative disabled:cursor-not-allowed inline-flex items-center justify-center shadow h-9 px-3 bg-red-500 border-red-500 hover:[&amp;:not(:disabled)]:border-primary-400 text-white dark:text-gray-900">
                <span class="flex items-center gap-1">Previus</span>
            </button>
        `;
    },

    hidePrevButton() {
        this.fields.prevButtonElement.style.display = 'none'
    },

    showPrevButton() {
        this.fields.prevButtonElement.style.display = 'inherit'
    },

    hideNextButton() {
        this.fields.nextButtonElement.style.display = 'none'
    },

    showNextButton() {
        this.fields.nextButtonElement.style.display = 'inherit'
    },

    showFormSubmitButton() {
        this.fields.createFormButton.style.display = 'inherit';
    },

    hideFormSubmitButton() {
        this.fields.createFormButton.style.display = 'none';
    },

    hideFormCancelButton() {
        this.fields.cancelFormButton.style.display = 'none';
    }
};

function setupMultiStepWizard() {
    let refreshIntervalId = setInterval(() => {
        let formElement = document.querySelector('form');

        if (formElement) {
            clearInterval(refreshIntervalId)

            // Div container
            let fieldsContainerElement = formElement.firstChild;
            // Div elements
            let fieldElements = Array.from(fieldsContainerElement.children);

            // if there a less than 2 divs, no need to wizard it!
            if (fieldElements.length < 2) {
                return;
            }

            LaravelNovaWizardStore.data.steps = fieldElements.length;
            LaravelNovaWizardStore.hideNovaFormButtons()
            LaravelNovaWizardStore.addWizardButtons()

            let loopCount = 0;
            fieldElements.forEach(item => {
                loopCount++;
                item.setAttribute('wizard-step', loopCount)

                if (loopCount === 1) {
                    return;
                }

                item.style.display = 'none'
            })
        }
    }, 300);
}

Nova.$on('liftedOff', () => {
    if (Nova.$router.page.component === 'Nova.Create') {
        setupMultiStepWizard()
    }
})

Nova.$router.on('success', (event) => {
    if (event.detail.page.component === 'Nova.Create') {
        setupMultiStepWizard()
    }
})

document.addEventListener('inertia:navigate', () => {
  console.log('page is updating')
})

// when app is booting
Nova.booting((app, store) => {})