@php
    $machineType = $form->type_of_machine;
    $movement = $form->machineSpecs['movement_type'] ?? '';
@endphp

<div x-data="{ step: 1, total: 4 }">

    {{-- 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">
                @php
                    $steps = [
                        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')],
                    ];
                @endphp
                @foreach ($steps 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>

    {{-- Aviso de solo-lectura: el ticket está bloqueado por su estado actual (no editable en este momento) --}}
    @if ($this->isLocked())
        <div class="alert alert-secondary d-flex align-items-center mb-4" role="alert">
            <i class="ti tabler-lock me-2"></i>
            <span>{{ __('This ticket is locked by its current status (:status) and cannot be edited right now.', ['status' => $this->ticket->status->label()]) }}</span>
        </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">
    <form wire:submit.prevent="save" id="usedMachineForm" novalidate>

        {{-- Editabilidad: un solo punto de control. Bloqueado → todos los campos disabled. --}}
        <fieldset class="border-0 p-0 m-0 um-wizard-fieldset" @disabled($this->isLocked())>

        {{-- STEP 1: General --}}
        <div x-show="step === 1" x-cloak>
            <x-used-machine.sections.general-fields :show-staff-extras="$this->showStaffExtras()" />
            @if ($canManageOwner)
                <x-used-machine.sections.owner-field />
            @endif
        </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: Details / Marketing --}}
        <div x-show="step === 4" x-cloak>
            <x-used-machine.sections.additional-information />
            {{-- custom-sections: extras de staff (permiso + aprobado). --}}
            @if ($this->showStaffExtras())
                <x-used-machine.sections.custom-sections :show-staff-extras="true" />
            @endif
            <x-used-machine.sections.decription :form="$form" />
        </div>

        </fieldset>

        {{-- Validation summary al final del form (visible en cualquier paso).
             El auto-scroll (admin.js) lleva al primer campo .is-invalid igualmente. --}}
        @if ($errors->any())
            <div class="alert alert-danger d-flex align-items-start mt-4 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
    </form>

    {{-- 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 Specs + 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 Specs + Next → derecha (ms-auto empuja el grupo aunque Back esté oculto) --}}
        <div class="d-flex align-items-center gap-2 ms-auto">
            <button type="submit" form="usedMachineForm" 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 specs') }}
                </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>