@php
    $machineType = $form->type_of_machine;
    $movement = $form->machineSpecs['movement_type'] ?? '';
    $withMedia = $withMedia ?? true;
    $total = $withMedia ? 5 : 4;

    $wizardSteps = [
        1 => ['icon' => 'tabler-info-circle', 'label' => __('General')],
        2 => ['icon' => 'tabler-settings-2', 'label' => __('Specifications')],
        3 => ['icon' => 'tabler-currency-dollar', 'label' => __('Pricing')],
        4 => ['icon' => 'tabler-file-description', 'label' => __('Details')],
    ];
    if ($withMedia) {
        $wizardSteps[5] = ['icon' => 'tabler-photo', 'label' => __('Media')];
    }
@endphp

<div x-data="{ step: 1, total: {{ $total }} }" wire:loading.class="opacity-50 pointer-events-none" wire:target="save">

    {{-- Stepper header --}}
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <ul class="list-unstyled d-flex align-items-center justify-content-between mb-0 specs-stepper">
                @foreach ($wizardSteps as $n => $s)
                    <li class="step-item text-center" :class="{ 'active': step === {{ $n }}, 'done': step > {{ $n }} }"
                        @click="step = {{ $n }}">
                        <div class="d-flex flex-column align-items-center">
                            <span class="step-icon avatar-initial rounded-circle bg-label-secondary d-flex align-items-center justify-content-center">
                                <i class="ti {{ $s['icon'] }}"></i>
                            </span>
                            <span class="small fw-medium mt-2 d-none d-sm-block">{{ $s['label'] }}</span>
                        </div>
                    </li>
                    @if (! $loop->last)
                        <li class="step-line mx-2"></li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>

    {{-- Validation summary (visible on every step) --}}
    @if ($errors->any())
        <div class="alert alert-danger d-flex align-items-start mb-4 shadow-sm" role="alert">
            <i class="ti tabler-alert-triangle me-3 mt-1 ti-md"></i>
            <div>
                <h6 class="alert-heading mb-1 fw-bold">{{ __('Please review the form') }}</h6>
                <ul class="mb-0 ps-3 small">
                    @foreach ($errors->unique() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    {{-- Card MAESTRO: TODO el formulario en una sola tarjeta. Las tarjetas de sección internas se
         aplanan vía .um-form-card (sin borde/sombra/fondo/padding lateral) para que se lean como
         parte de la misma tarjeta; un <hr> divide los inputs de la barra de acciones. --}}
    <div class="card shadow-sm um-form-card">
    <div class="card-body">
    {{-- Editabilidad: un solo punto de control (customer editable sólo en DRAFT/RETURNED). --}}
    <fieldset class="border-0 p-0 m-0 um-wizard-fieldset" @disabled($this->isLocked())>
    @if ($this->formComponent)
        {{-- Form envolvente SIN acción: habilita el estilo de validación completo de Vuexy en
             los input-group-merge (requieren un <form> ancestro; ver gotcha en CLAUDE.md).
             - wire:submit.prevent sin acción → Enter no recarga; los botones siguen con wire:click.
             - novalidate → desactiva la validación nativa del navegador.
             - El paso de Media queda FUERA de este form: el <livewire:dropzone> ya renderiza
               su propio <form> y anidar forms es HTML inválido. --}}
        <form wire:submit.prevent novalidate>
        {{-- STEP 1: General --}}
        <div x-show="step === 1" x-cloak>
            <x-used-machine.sections.general-fields />
        </div>

        {{-- STEP 2: Type-specific specifications --}}
        <div x-show="step === 2" x-cloak>
            @if ($machineType === 'weaving')
                <x-used-machine.sections.machine-specs-fields :form="$form" />
                @if ($movement === 'cams')
                    <x-used-machine.sections.cam-details-fields />
                @endif
                @if ($movement === 'dobby')
                    <x-used-machine.sections.dobby-details-fields />
                @endif
                @if ($movement === 'jacquard')
                    <x-used-machine.sections.jacquard-details-fields :form="$form" />
                @endif
                <x-used-machine.sections.loom-accessories-fields />
                <x-used-machine.sections.beams-rollers-fields :form="$form" />
            @elseif ($machineType === 'knitting')
                <x-used-machine.sections.core-knitting />
            @else
                <x-used-machine.sections.type-of-machine />
            @endif
        </div>

        {{-- STEP 3: Pricing --}}
        <div x-show="step === 3" x-cloak>
            <x-used-machine.sections.price-info-fields />
        </div>

        {{-- STEP 4: Additional --}}
        <div x-show="step === 4" x-cloak>
            <x-used-machine.sections.additional-information />
        </div>
        </form>

        @if ($withMedia)
            {{-- STEP 5: Media --}}
            <div x-show="step === 5" x-cloak>
                <x-used-machine.sections.media-information />
            </div>
        @endif
    @else
        <div class="alert alert-warning">{{ __('Unknown form type.') }}</div>
    @endif
    </fieldset>

    {{-- Divisor entre inputs y acciones (ya no hay cards de sección que los separen). --}}
    <hr class="mt-2 mb-3">

    {{-- Barra de acciones, dentro del MISMO card-body del maestro.
         - Back a la izquierda; Save All + Next agrupados a la derecha.
         - Back y Next comparten diseño (btn-label-primary → letras verdes + fondo verde claro). --}}
    <div class="d-flex align-items-center justify-content-between gap-2">
        {{-- Back → izquierda --}}
        <button type="button" class="btn btn-label-primary" x-show="step > 1" x-cloak @click="step--">
            <i class="ti tabler-arrow-left me-1"></i>{{ __('Back') }}
        </button>

        {{-- Save All + Next → derecha (ms-auto empuja el grupo aunque Back esté oculto) --}}
        <div class="d-flex align-items-center gap-2 ms-auto">
            <button type="button" wire:click="save" class="btn btn-primary"
                wire:loading.attr="disabled" wire:target="save" @disabled($this->isLocked())>
                <span wire:loading.remove wire:target="save">
                    <i class="ti tabler-device-floppy me-1"></i>{{ __('Save all') }}
                </span>
                <span wire:loading wire:target="save">
                    <span class="spinner-border spinner-border-sm me-1"></span>{{ __('Saving...') }}
                </span>
            </button>

            <button type="button" class="btn btn-label-primary" x-show="step < total" x-cloak @click="step++">
                {{ __('Next') }}<i class="ti tabler-arrow-right ms-1"></i>
            </button>
        </div>
    </div>
    </div>{{-- /card-body --}}
    </div>{{-- /card maestro --}}
</div>