@php
    $isContained = $isContained();
    $statePath = $getStatePath();
@endphp

<div
    wire:ignore.self
    x-cloak
    x-data="{
        step: null,

        nextStep: function () {
            let nextStepIndex = this.getStepIndex(this.step) + 1

            if (nextStepIndex >= this.getSteps().length) {
                return
            }

            this.step = this.getSteps()[nextStepIndex]

            this.autofocusFields()
            this.scrollToTop()
        },

        previousStep: function () {
            let previousStepIndex = this.getStepIndex(this.step) - 1

            if (previousStepIndex < 0) {
                return
            }

            this.step = this.getSteps()[previousStepIndex]

            this.autofocusFields()
            this.scrollToTop()
        },

        scrollToTop: function () {
            this.$root.scrollIntoView({ behavior: 'smooth', block: 'start' })
        },

        autofocusFields: function () {
            $nextTick(() =>
                this.$refs[`step-${this.step}`]
                    .querySelector('[autofocus]')
                    ?.focus(),
            )
        },

        getStepIndex: function (step) {
            return this.getSteps().findIndex((indexedStep) => indexedStep === step)
        },

        getSteps: function () {
            return JSON.parse(this.$refs.stepsData.value)
        },

        isFirstStep: function () {
            return this.getStepIndex(this.step) <= 0
        },

        isSecondStep: function () {
            return this.getStepIndex(this.step) == 1
        },

        isThirdStep: function () {
            return this.getStepIndex(this.step) == 2
        },

        isLastStep: function () {
            return this.getStepIndex(this.step) + 1 >= this.getSteps().length
        },

        isStepAccessible: function (stepId) {
            return (
                @js($isSkippable()) || this.getStepIndex(this.step) > this.getStepIndex(stepId)
            )
        },

        updateQueryString: function () {
            if (! @js($isStepPersistedInQueryString())) {
                return
            }

            const url = new URL(window.location.href)
            url.searchParams.set(@js($getStepQueryStringKey()), this.step)

            history.pushState(null, document.title, url.toString())
        },
    }"
    x-init="
        $watch('step', () => updateQueryString())

        step = getSteps().at({{ $getStartStep() - 1 }})

        autofocusFields()
    "
    x-on:next-wizard-step.window="if ($event.detail.statePath === '{{ $statePath }}') nextStep()"
    {{
        $attributes
            ->merge([
                'id' => $getId(),
            ], escape: false)
            ->merge($getExtraAttributes(), escape: false)
            ->merge($getExtraAlpineAttributes(), escape: false)
            ->class(['fi-fo-custom-wizard'])
    }}
>
    <input
        type="hidden"
        value="{{
            collect($getChildComponentContainer()->getComponents())
                ->filter(static fn (\Filament\Forms\Components\Wizard\Step $step): bool => $step->isVisible())
                ->map(static fn (\Filament\Forms\Components\Wizard\Step $step) => $step->getId())
                ->values()
                ->toJson()
        }}"
        x-ref="stepsData"
    />

    <ol
        @if (filled($label = $getLabel()))
            aria-label="{{ $label }}"
        @endif
        role="list"
        class="fi-fo-wizard-header flex items-center justify-center"
    >
        @foreach ($getChildComponentContainer()->getComponents() as $step)
            <li
                @class([
                    'fi-fo-wizard-header-step relative',
                    'pr-20 sm:pr-28 md:pr-32 lg:pr-40' => ! $loop->last
                ])
                x-bind:class="{
                    'fi-active': getStepIndex(step) === {{ $loop->index }},
                    'fi-completed': getStepIndex(step) > {{ $loop->index }}
                }"
            >
                @if (! $loop->last)
                    <div class="absolute inset-0 flex items-center" aria-hidden="true">
                        <div
                            class="h-0.5 w-full bg-gray-200"
                            x-bind:class="{'bg-primary-700': getStepIndex(step) > {{ $loop->index }}}"
                        >
                        </div>
                    </div>
                @endif
                <button
                    type="button"
                    x-bind:aria-current="getStepIndex(step) === {{ $loop->index }} ? 'step' : null"
                    x-on:click="step = @js($step->getId())"
                    x-bind:disabled="! isStepAccessible(@js($step->getId()))"
                    role="step"
                    class="fi-fo-wizard-header-step-button relative flex h-full w-full items-center"
                >
                    <div
                        class="fi-fo-wizard-header-step-icon-ctn group relative flex size-9 items-center justify-center rounded-full bg-white"
                        x-bind:class="{
                            'bg-primary-700 hover:bg-primary-700 dark:bg-primary-500':
                                getStepIndex(step) > {{ $loop->index }},
                            'border-2 bg-white': getStepIndex(step) <= {{ $loop->index }},
                            'border-primary-700 dark:border-primary-500':
                                getStepIndex(step) === {{ $loop->index }},
                            'border-gray-300 dark:border-gray-600':
                                getStepIndex(step) < {{ $loop->index }}
                        }"
                    >
                        <x-filament::icon
                            alias="forms::components.wizard.completed-step"
                            icon="heroicon-o-check"
                            x-cloak="x-cloak"
                            x-show="getStepIndex(step) > {{ $loop->index }}"
                            class="fi-fo-wizard-header-step-icon size-5 text-white"
                        />

                        @if (filled($icon = $step->getIcon()))
                            <x-filament::icon
                                :icon="$icon"
                                x-cloak="x-cloak"
                                x-show="getStepIndex(step) <= {{ $loop->index }}"
                                class="fi-fo-wizard-header-step-icon h-6 w-6"
                                x-bind:class="{
                                                            'text-gray-500 dark:text-gray-400': getStepIndex(step) !== {{ $loop->index }},
                                                            'text-primary-700 dark:text-primary-500': getStepIndex(step) === {{ $loop->index }},
                                                        }"
                            />
                        @else
                            {{--                            <span--}}
                            {{--                                x-show="getStepIndex(step) <= {{ $loop->index }}"--}}
                            {{--                                class="h-2.5 w-2.5 rounded-full" aria-hidden="true"--}}
                            {{--                                x-bind:class="{--}}
                            {{--                                'bg-primary-700': getStepIndex(step) === {{ $loop->index }},--}}
                            {{--                                'bg-transparent group-hover:bg-gray-300': getStepIndex(step) < {{ $loop->index }},--}}
                            {{--                            }"--}}
                            {{--                            ></span>--}}
                            <span
                                x-show="getStepIndex(step) <= {{ $loop->index }}"
                                class="fi-fo-wizard-header-step-indicator text-sm font-medium"
                                x-bind:class="{
                                                                'text-gray-500 dark:text-gray-400':
                                                                    getStepIndex(step) !== {{ $loop->index }},
                                                                'text-primary-700 dark:text-primary-500':
                                                                    getStepIndex(step) === {{ $loop->index }}
                                                            }"
                            >
                                                            {{ str_pad($loop->index + 1, 2, '0', STR_PAD_LEFT) }}
                                                        </span>
                        @endif
                    </div>
                </button>
            </li>
        @endforeach
    </ol>

    @foreach ($getChildComponentContainer()->getComponents() as $step)
        <div
            x-show="getStepIndex(step) === {{ $loop->index }}"
            class="mt-4 flex flex-col text-center border-b pb-4">
            @if (! $step->isLabelHidden())
                <span
                    class="fi-fo-wizard-header-step-label text-lg font-semibold text-gray-700 dark:text-white"
                >
                    {{ $step->getLabel() }}
                </span>
            @endif

            @if (filled($description = $step->getDescription()))
                <span
                    class="fi-fo-wizard-header-step-description text-center text-sm text-gray-500 dark:text-gray-400"
                >
                    {{ $description }}
                </span>
            @endif
        </div>

        <div class="">
            {{ $step }}
        </div>

    @endforeach

    <div
        class="flex my-4 pt-4 border-t items-center gap-x-3"
        x-bind:class="{
            'justify-between': isSecondStep(),
            'justify-end': isFirstStep() || isThirdStep() || isLastStep()
        }"
    >
        <span x-cloak x-on:click="previousStep"
              x-show="isSecondStep()"
        >
            {{ $getAction('previous') }}
        </span>

        <span
            x-cloak
            x-on:click="
                $wire.dispatchFormEvent(
                    'wizard::nextStep',
                    '{{ $statePath }}',
                    getStepIndex(step),
                )
            "
            x-show="! isLastStep()"
        >
            {{ $getAction('next') }}
        </span>

        <span x-show="isLastStep()">
            {{ $getSubmitAction() }}
        </span>
    </div>
</div>