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

<div x-data="{ step: 1, total: 5 }">
    {{-- ===== Header ===== --}}
    <div class="modal-header border-bottom">
        <div class="d-flex align-items-center gap-3">
            <span class="badge bg-label-primary rounded-3 p-2 lh-1">
                <i class="ti tabler-settings-cog ti-md"></i>
            </span>
            <div>
                <h5 class="mb-0 fw-bold">{{ __('Create new used machine') }}</h5>
                <small class="text-muted">
                    {{ __('Register a new machine with all technical specifications and pricing.') }}
                </small>
            </div>
        </div>
        <button type="button" class="btn-close" aria-label="Close" wire:click="$dispatch('closeModal')"></button>
    </div>

    {{-- ===== Body (scrollable) ===== --}}
    <div class="modal-body py-4">

        {{-- Stepper header --}}
        <ul class="list-unstyled d-flex align-items-center justify-content-between mb-4 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')],
                    5 => ['icon' => 'tabler-photo', 'label' => __('Media')],
                ];
            @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>

        <form id="usedMachineForm" wire:submit.prevent="save" novalidate>

            {{-- STEP 1: General --}}
            <div x-show="step === 1" x-cloak>
                <x-used-machine.sections.general-fields :show-staff-extras="true" />
                @can('view_machine_owner')
                    <x-used-machine.sections.owner-field />
                @endcan
            </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 :form="$form" />
                    @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 />
                <x-used-machine.sections.custom-sections :show-staff-extras="true" />
                <x-used-machine.sections.decription :form="$form" />
            </div>

            {{-- STEP 5: Media --}}
            <div x-show="step === 5" x-cloak>
                <x-used-machine.sections.media-information />
            </div>

            {{-- 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-0" role="alert">
                    <i class="ti tabler-alert-triangle me-2 mt-1"></i>
                    <div>
                        <h6 class="alert-heading mb-1">{{ __('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>
    </div>

    {{-- ===== Footer ===== --}}
    <div class="modal-footer border-top d-flex justify-content-between">
        <div>
            <button type="button" class="btn btn-label-secondary" wire:click="$dispatch('closeModal')">
                <i class="ti tabler-x me-1"></i>{{ __('Cancel') }}
            </button>
            <button type="button" class="btn btn-label-secondary" x-show="step > 1" x-cloak @click="step--">
                <i class="ti tabler-arrow-left me-1"></i>{{ __('Back') }}
            </button>
        </div>

        <div class="d-flex align-items-center gap-2">
            <button type="submit" form="usedMachineForm" class="btn btn-primary"
                wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">
                    <i class="ti tabler-device-floppy me-1"></i>{{ __('Create machine') }}
                </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>

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
@endpush