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

<div class="tw-wrapper">
    <div
        class="bg-gray-50/30 dark:bg-gray-800 rounded-2xl shadow-sm border-y border-r border-gray-100 dark:border-gray-700 border-l-4 border-l-main-two dark:border-l-main-one p-6 mb-8 transition-all duration-500 ease-in-out">

        {{-- Header de Secció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">
                    {{ __('Jacquard Specifications') }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>
        </div>

        {{-- Grid Principal de Especificaciones --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 required">
            <x-input wire:model.defer="form.jacquardDetails.brand" label="{{ __('Jacquard Brand') }}"
                placeholder="e.g. Stäubli" />

            <x-input wire:model.defer="form.jacquardDetails.model" label="{{ __('Jacquard Model') }}"
                placeholder="e.g. LX 1602" />

            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.year" label="{{ __('Year of model') }}"
                placeholder="e.g. 2020" maxlength="4" />

            <x-input wire:model.defer="form.jacquardDetails.controller_brand_model"
                label="{{ __('Controller Brand/Model') }}" placeholder="e.g. Jacquard 1000" />

            <x-select wire:model.defer="form.jacquardDetails.total_hooks" label="{{ __('Total Capacity Hooks') }}"
                placeholder="{{ __('Select number of Hooks') }}" :options="[
                    ['id' => 1344, 'name' => '1344'],
                    ['id' => 2688, 'name' => '2688'],
                    ['id' => 5376, 'name' => '5376'],
                    ['id' => 6144, 'name' => '6144'],
                    ['id' => 8448, 'name' => '8448'],
                    ['id' => 10240, 'name' => '10240'],
                    ['id' => 12288, 'name' => '12288'],
                ]" option-label="name"
                option-value="id" />

            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_installed_hooks"
                label="{{ __('Qty. Installed Hooks') }}" placeholder="e.g. 2688" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_healds"
                label="{{ __('Quantity Healds') }}" placeholder="e.g. 8" maxlength="10" />
        </div>

        <div class="mt-10 pt-8 border-t border-gray-100 dark:border-gray-700">
            <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one mb-6">
                {{ __('Jacquard Accessories & Structures') }}
            </h2>

            <div class="space-y-8">
                {{-- 1. HARNESS SECTION --}}
                <div
                    class="bg-white/40 dark:bg-gray-900/40 p-5 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                    <x-toggle wire:model.live="form.jacquardDetails.is_harness_included"
                        label="{{ __('Include Harness?') }}" lg
                        class="font-semibold text-gray-700 dark:text-gray-300" />
                    @if ($form->jacquardDetails['is_harness_included'] ?? false)
                        <div
                            class="mt-5 pt-5 border-t border-gray-100 dark:border-gray-800 grid grid-cols-1 md:grid-cols-2 gap-6 animate-in fade-in slide-in-from-top-2 duration-300">
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.number_pavilion"
                                label="{{ __('Number of strings (Pavilion)') }}" placeholder="e.g. 5536"
                                maxlength="10" />
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.density"
                                label="{{ __('Density') }}" placeholder="e.g. 35" maxlength="10" />
                        </div>
                    @endif
                </div>

                {{-- 4. GANTRY --}}
                <div>
                    <div
                        class="bg-white/40 dark:bg-gray-900/40 p-5 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                        <x-toggle wire:model.live="form.jacquardDetails.is_gantry_included"
                            label="{{ __('Include Gantry?') }}" lg
                            class="font-semibold text-gray-700 dark:text-gray-300" />
                        @if ($form->jacquardDetails['is_gantry_included'] ?? false)
                            <div class="mt-4 animate-in fade-in slide-in-from-top-2 duration-300">
                                <x-select label="{{ __('Gantry Type') }}" placeholder="{{ __('Select Gantry') }}"
                                    wire:model.defer="form.jacquardDetails.gantry_structure" :errorless="true"
                                    :options="[
                                        ['name' => 'Double', 'id' => 'double'],
                                        ['name' => 'Single', 'id' => 'single'],
                                        ['name' => 'Quadruple', 'id' => 'quadruple'],
                                    ]" option-label="name" option-value="id" />
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>