@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_frames"
                label="{{ __('Quantity Frames') }}" placeholder="e.g. 4" 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. GENERAL ACCESSORIES --}}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_colors"
                        label="{{ __('Quantity of Colors') }}" placeholder="e.g. 8" maxlength="10" />
                    <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_weft_feeders"
                        label="{{ __('Quantity Weft-feeders') }}" placeholder="e.g. 4" maxlength="10" />
                    <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_droppers"
                        label="{{ __('Quantity Droppers') }}" placeholder="e.g. 8000" maxlength="10" />
                </div>

                {{-- 2. BEAMS AND ROLLERS --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
                    <div
                        class="space-y-4 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.has_cloth_roller"
                            label="{{ __('Includes Cloth Roller?') }}" lg
                            class="font-semibold text-gray-700 dark:text-gray-300" />
                        @if ($form->jacquardDetails['has_cloth_roller'] ?? false)
                            <div class="pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                <x-input inputmode="decimal"
                                    wire:model.defer="form.jacquardDetails.cloth_roller_quantity"
                                    label="{{ __('Quantity of Cloth Rollers') }}" placeholder="e.g. 2"
                                    maxlength="10" />
                            </div>
                        @endif
                        <div class="pt-4 border-t border-gray-100 dark:border-gray-800 mt-4">
                            <x-toggle wire:model.live="form.jacquardDetails.batching_motion"
                                label="{{ __('Batching Motion Included?') }}" lg
                                class="font-semibold text-gray-700 dark:text-gray-300" />
                        </div>
                    </div>

                    <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 required">
                        <div class="grid grid-cols-2 gap-4">
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_lower_beams"
                                label="{{ __('Lower Beam') }}" placeholder="e.g. 1.5" maxlength="10" />
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_upper_beams"
                                label="{{ __('Upper Beam') }}" placeholder="e.g. 1.5" maxlength="10" />
                        </div>
                        <div class="grid grid-cols-2 gap-4 pt-1">
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_lower_flange_diameter"
                                label="{{ __('Lower Flange (mm)') }}" placeholder="e.g. 1200" maxlength="10" />
                            <x-input inputmode="decimal" wire:model.defer="form.jacquardDetails.n_upper_flange_diameter"
                                label="{{ __('Upper Flange (mm)') }}" placeholder="e.g. 1200" maxlength="10" />
                        </div>
                    </div>
                </div>

                {{-- 3. 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. STRUCTURE & GANTRY --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <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_structure_included"
                            label="{{ __('Include Structure?') }}" lg
                            class="font-semibold text-gray-700 dark:text-gray-300" />
                        @if ($form->jacquardDetails['is_structure_included'] ?? false)
                            <div class="mt-4 animate-in fade-in slide-in-from-top-2 duration-300">
                                <x-select label="{{ __('Structure Type') }}"
                                    placeholder="{{ __('Select Structure') }}"
                                    wire:model.defer="form.jacquardDetails.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
                        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>