<div>
    <x-form::stepper.full-screen.layout data-custom-stepper="true" wire:ignore="">
        <x-slot:sidebar>
            <x-form::stepper.full-screen.sidebar>
                <x-form::stepper.full-screen.sidebar-step
                    step="1"
                    title="{{ __('basic::setup.wizard.sidebar.step1.title') }}"
                    description="{{ __('basic::setup.wizard.sidebar.step1.subtitle') }}"
                />
                <x-form::stepper.full-screen.sidebar-step
                    step="2"
                    title="{{ __('basic::setup.wizard.sidebar.step2.title') }}"
                    description="{{ __('basic::setup.wizard.sidebar.step2.subtitle') }}"
                />
                <x-form::stepper.full-screen.sidebar-step
                    step="3"
                    title="{{ __('basic::setup.wizard.sidebar.step3.title') }}"
                    description="{{ __('basic::setup.wizard.sidebar.step3.subtitle') }}"
                />
                <x-form::stepper.full-screen.sidebar-step
                    step="4"
                    title="{{ __('basic::setup.wizard.sidebar.step4.title') }}"
                    description="{{ __('basic::setup.wizard.sidebar.step4.subtitle') }}"
                />
                <x-form::stepper.full-screen.sidebar-step
                    step="5"
                    title="{{ __('basic::setup.wizard.sidebar.step5.title') }}"
                    description="{{ __('basic::setup.wizard.sidebar.step5.subtitle') }}"
                    :last-step="true"
                />
            </x-form::stepper.full-screen.sidebar>
        </x-slot:sidebar>
        <x-form::stepper.full-screen.step step="1">
            <div class="w-100 d-flex align-items-center flex-column text-center">
                <div class="mb-0">
                    <img
                        src="{{ Vite::mediaAsset('resources/assets/media/illustrations/unitedpalms-1/2.png') }}"
                        class="mw-100 mh-300px theme-light-show"
                        alt=""/>
                    <img
                        src="{{ Vite::mediaAsset('resources/assets/media/illustrations/unitedpalms-1/2-dark.png') }}"
                        class="mw-100 mh-300px theme-dark-show" alt=""/>
                </div>
                <h1 class="text-gray-900 mt-10">{{ __('basic::setup.wizard.step1.heading') }}</h1>
                <div class="fw-semibold fs-4 text-gray-600">
                    {{ __('basic::setup.wizard.step1.subheading') }}
                </div>
            </div>
        </x-form::stepper.full-screen.step>
        <x-form::stepper.full-screen.step step="2">
            <div class="w-100">
                <div class="pb-10 pb-lg-15">
                    <h2 class="fw-bold text-dark">{{ __('basic::setup.wizard.sidebar.step2.title') }}</h2>
                    <div class="text-muted fw-semibold fs-6">
                        {{ __('basic::setup.wizard.sidebar.step2.subtitle') }}
                    </div>
                </div>
                <x-form::inputs.input
                    name="company_name"
                    :required="true"
                    label="ERP Name"
                    wire:model="name"
                    help-text="Dieser Name wird in Ihrem ERP System angezeigt"
                    outer-class="fv-row mb-10"
                />
                <x-form::inputs.select
                    name="language"
                    label="Sprache"
                    :required="true"
                    help-text="Diese Sprache kann von den jeweiligen Benutzern überschrieben werden"
                    data-image-prepend="true"
                    wire:model="language"
                    outer-class="mb-10 fv-row">
                    @foreach(config('locale.supported_languages') as $localeCode)
                        <option
                            value="{{ $localeCode }}"
                            data-image-src="{{ Vite::mediaAsset('resources/assets/media/flags/' . config('locale.flag_mapping.' . $localeCode) . '.svg') }}">
                            {{ __('basic::locale.' . $localeCode) }}
                        </option>
                    @endforeach
                </x-form::inputs.select>
            </div>
        </x-form::stepper.full-screen.step>
    </x-form::stepper.full-screen.layout>
</div>@push('scripts')
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            // DOM elements
            let stepper = document.querySelector('#create_erp_stepper');
            let formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
            let formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]'); // Initialize Stepper
            let stepperObj = new KTStepper(stepper, {
                startIndex: @this.currentStep,
            }); // Stepper change event
            stepperObj.on('kt.stepper.changed', function () {
                if (stepperObj.getCurrentStepIndex() === 4) {
                    formSubmitButton.classList.remove('d-none');
                    formSubmitButton.classList.add('d-inline-block');
                    formContinueButton.classList.add('d-none');
                } else if (stepperObj.getCurrentStepIndex() === 5) {
                    formSubmitButton.classList.add('d-none');
                    formContinueButton.classList.add('d-none');
                } else {
                    formSubmitButton.classList.remove('d-inline-block');
                    formSubmitButton.classList.remove('d-none');
                    formContinueButton.classList.remove('d-none');
                }
            }); // Next page
            stepperObj.on('kt.stepper.next', function (stepper) {
                stepper.goNext();
                KTUtil.scrollTop();
            }); // Previous page
            stepperObj.on('kt.stepper.previous', function (stepper) {
                stepper.goPrevious();
                KTUtil.scrollTop();
            }); // Form submit
            formSubmitButton.addEventListener('click', function (e) {
                // Prevent default button action
                e.preventDefault(); // Disable button to avoid multiple click
                formSubmitButton.disabled = true; // Show loading indication
                formSubmitButton.setAttribute('data-kt-indicator', 'on'); // Simulate form submission
                setTimeout(function () {
                    // Hide loading indication
                    formSubmitButton.removeAttribute('data-kt-indicator'); // Enable button
                    formSubmitButton.disabled = false;

                    stepperObj.goNext();
                }, 2000);
            });
        });
    </script>
@endpush