@php
    $isDraft = $ticket->status === \App\Enums\SaleTicketStatusEnum::DRAFT;
@endphp

@if ($isDraft)
    {{-- ============================= DRAFT: TABBED LAYOUT ============================= --}}
    {{-- El componente posee los tabs: el upload de media vive en "Media"
         (los inputs están enlazados a $form), no en el wizard. --}}
    {{-- Tabs manejados por Alpine (NO Bootstrap data-bs-toggle): el estado vive en `tab`
         y así sobrevive al morph de Livewire tras `save` (Bootstrap solo guarda el estado
         en el DOM y el re-render lo reseteaba al primer tab). --}}
    <div class="row g-4" x-data="{ tab: 'details' }">
        {{-- ----------- Sidebar (tabs) ----------- --}}
        <div class="col-xl-3 col-lg-4">
            <div class="position-sticky" style="top: 1.5rem;">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-4">
                            <div class="avatar avatar-lg me-3">
                                <span class="avatar-initial rounded bg-label-primary"><i class="ti tabler-engine ti-lg"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">{{ __('Draft setup') }}</h5>
                                <small class="text-muted">{{ __('Control panel') }}</small>
                            </div>
                        </div>

                        <ul class="nav nav-pills flex-column gap-1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" :class="{ active: tab === 'details' }" href="#" @click.prevent="tab = 'details'" role="tab">
                                    <i class="ti tabler-list-details me-2"></i>{{ __('Ticket details') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" :class="{ active: tab === 'media' }" href="#" @click.prevent="tab = 'media'" role="tab">
                                    <i class="ti tabler-photo-star me-2"></i>{{ __('Machine media') }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- ----------- Tab content ----------- --}}
        <div class="col-xl-9 col-lg-8">
            <div class="tab-content p-0 bg-transparent shadow-none border-0">

                {{-- TAB 1: Ticket Details (wizard sin paso de media) --}}
                <div class="tab-pane fade show active" :class="{ 'show active': tab === 'details' }" id="se-details" role="tabpanel">
                    @include('livewire.sale-used-machine.partials.used-machine-customer-wizard-steps', ['withMedia' => false])
                </div>

                {{-- TAB 2: Media & Assets (upload + listas existentes) --}}
                <div class="tab-pane fade" :class="{ 'show active': tab === 'media' }" id="se-media" role="tabpanel">
                    <div class="card shadow-sm mb-4">
                        <div class="card-header border-bottom">
                            <h5 class="card-title mb-0"><i class="ti tabler-photo-star text-primary me-2"></i>{{ __('Machine photos & video') }}</h5>
                        </div>
                        <div class="card-body mt-3">

                            {{-- Upload (movido desde el wizard) --}}
                            <div class="divider divider-start">
                                <div class="divider-text fw-bold text-uppercase text-primary">
                                    <i class="ti tabler-cloud-upload me-1"></i>{{ __('Upload new content') }}
                                </div>
                            </div>
                            <x-used-machine.sections.media-information />

                            @if ($errors->any())
                                <div class="alert alert-danger d-flex align-items-start mt-3 mb-0 shadow-sm" role="alert">
                                    <i class="ti tabler-alert-triangle me-3 mt-1"></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

                            {{-- Imágenes ya subidas --}}
                            <div class="divider divider-start mt-4">
                                <div class="divider-text fw-bold text-uppercase text-primary">
                                    <i class="ti tabler-photo me-1"></i>{{ __('Gallery images') }}
                                </div>
                            </div>
                            <livewire:sale-ticket.edit.sections.sale-ticket-photo-list :ticket="$ticket" status="draft" />

                            {{-- Video ya subido --}}
                            <div class="divider divider-start mt-4">
                                <div class="divider-text fw-bold text-uppercase text-primary">
                                    <i class="ti tabler-video me-1"></i>{{ __('Machine video') }}
                                </div>
                            </div>
                            <livewire:sale-ticket.edit.sections.sale-ticket-video-list :ticket="$ticket" status="draft" />

                            {{-- Save de la sección de media (persiste el upload; misma acción save),
                                 DENTRO del mismo card-body, separado de los inputs por un <hr>
                                 (mismo diseño que el form: media + acciones en una sola tarjeta). --}}
                            <hr class="mt-4 mb-3">
                            <div class="d-flex justify-content-end">
                                <button type="button" wire:click="save" 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>{{ __('Save media') }}
                                    </span>
                                    <span wire:loading wire:target="save">
                                        <span class="spinner-border spinner-border-sm me-1"></span>{{ __('Saving...') }}
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@else
    {{-- ============================= NON-DRAFT: wizard de 5 pasos (incluye media) ============================= --}}
    @include('livewire.sale-used-machine.partials.used-machine-customer-wizard-steps', ['withMedia' => true])
@endif