@props(['mode' => 'user', 'form' => null])

<div class="tw-wrapper">
    <div
        class="bg-white/50 dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm transition-colors duration-300">

        {{-- Header de Sección con Descripción --}}
        <div class="mb-8">
            <div class="flex items-center gap-4">
                <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                    {{ __('Machine Status & Core Specifications') }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">
                {{ __('Basic operational details and power requirements.') }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 required">

            {{-- Status Column con Inputs Condicionales --}}
            <div
                class="space-y-5 bg-white/40 dark:bg-gray-900/40 p-5 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                <x-select :errorless="true" wire:model.live="form.machineSpecs.status"
                    placeholder="{{ __('Select Machine Status') }}" label="{{ __('Machine Status') }}" :options="[
                        ['name' => 'In working condition', 'id' => 'working'],
                        ['name' => 'Not connected/Off', 'id' => 'stopped'],
                        ['name' => 'Other', 'id' => 'other'],
                    ]"
                    option-label="name" option-value="id" />

                @if (($form->machineSpecs['status'] ?? '') === 'other')
                    <div class="animate-in fade-in slide-in-from-top-2 duration-300">
                        <x-textarea wire:model.defer="form.machineSpecs.other_status_description"
                            label="{{ __('Describe Other Status') }}" placeholder="{{ __('Enter status description') }}"
                            class="dark:bg-gray-800" />
                    </div>
                @endif

                @if (($form->machineSpecs['status'] ?? '') === 'stopped')
                    <div class="animate-in fade-in slide-in-from-top-2 duration-300">
                        <x-input type="date" wire:model.defer="form.machineSpecs.stopped_since"
                            label="{{ __('Stopped Since') }}" placeholder="{{ __('Since when?') }}" />
                    </div>
                @endif
            </div>

            {{-- Core Specs Column --}}
            <div class="space-y-6">
                <x-select :errorless="true" wire:model.live="form.machineSpecs.movement_type"
                    placeholder="{{ __('Select Movement Type') }}" label="{{ __('Movement Type') }}" :options="[
                        ['name' => 'Dobby', 'id' => 'dobby'],
                        ['name' => 'Crank', 'id' => 'crank'],
                        ['name' => 'Cams', 'id' => 'cams'],
                        ['name' => 'Jacquard', 'id' => 'jacquard'],
                        ['name' => 'E-sheet', 'id' => 'e-sheet'],
                    ]"
                    option-label="name" option-value="id" />

                <div class="grid grid-cols-2 gap-4">
                    <x-input inputmode="decimal" wire:model.defer="form.machineSpecs.voltage"
                        label="{{ __('Voltage (V)') }}" placeholder="{{ __('e.g. 380') }}" maxlength="10" />

                    <x-input inputmode="decimal" wire:model.defer="form.machineSpecs.frequency"
                        label="{{ __('Frequency (Hz)') }}" placeholder="{{ __('e.g. 50') }}" maxlength="10" />
                </div>
            </div>

            <div class="md:col-span-2 pt-2">
                <x-input wire:model.defer="form.machineSpecs.fabric_type" label="{{ __('Type of Fabric Produced') }}"
                    placeholder="{{ __('e.g. Cotton, Denim, Silk') }}" />
            </div>
        </div>
    </div>
</div>