@props(['form' => null])

<div class="card border shadow-none mb-4 border-start border-primary border-3">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-4">
            <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-grid-pattern ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Jacquard specifications') }}</h6>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_brand">{{ __('Jacquard brand') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-tag"></i></span>
                    <input type="text" id="jq_brand" class="form-control @error('form.jacquardDetails.brand') is-invalid @enderror"
                        wire:model.defer="form.jacquardDetails.brand" placeholder="{{ __('e.g. Stäubli') }}">
                </div>
                @error('form.jacquardDetails.brand') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_model">{{ __('Jacquard model') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-versions"></i></span>
                    <input type="text" id="jq_model" class="form-control @error('form.jacquardDetails.model') is-invalid @enderror"
                        wire:model.defer="form.jacquardDetails.model" placeholder="{{ __('e.g. LX 1602') }}">
                </div>
                @error('form.jacquardDetails.model') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_year">{{ __('Year of model') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-calendar"></i></span>
                    <input type="text" id="jq_year" inputmode="decimal" maxlength="4" class="form-control @error('form.jacquardDetails.year') is-invalid @enderror"
                        wire:model.defer="form.jacquardDetails.year" placeholder="{{ __('e.g. 2020') }}">
                </div>
                @error('form.jacquardDetails.year') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_controller">{{ __('Controller brand/model') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-device-desktop"></i></span>
                    <input type="text" id="jq_controller" class="form-control @error('form.jacquardDetails.controller_brand_model') is-invalid @enderror"
                        wire:model.defer="form.jacquardDetails.controller_brand_model" placeholder="{{ __('e.g. Jacquard 1000') }}">
                </div>
                @error('form.jacquardDetails.controller_brand_model') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_total_hooks">{{ __('Total capacity hooks') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-hash"></i></span>
                    <select id="jq_total_hooks" class="form-select @error('form.jacquardDetails.total_hooks') is-invalid @enderror" wire:model.defer="form.jacquardDetails.total_hooks">
                        <option value="">{{ __('Select number of hooks') }}</option>
                        @foreach ([1344, 2688, 5376, 6144, 8448, 10240, 12288] as $hooks)
                            <option value="{{ $hooks }}">{{ $hooks }}</option>
                        @endforeach
                    </select>
                </div>
                @error('form.jacquardDetails.total_hooks') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 col-lg-4">
                <label class="form-label" for="jq_installed_hooks">{{ __('Qty. installed hooks') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-hash"></i></span>
                    <input type="text" id="jq_installed_hooks" inputmode="decimal" maxlength="10" class="form-control @error('form.jacquardDetails.n_installed_hooks') is-invalid @enderror"
                        wire:model.defer="form.jacquardDetails.n_installed_hooks" placeholder="{{ __('e.g. 2688') }}">
                </div>
                @error('form.jacquardDetails.n_installed_hooks') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
        </div>

        <hr class="my-4">
        <h6 class="fw-bold text-uppercase text-primary mb-3">{{ __('Jacquard accessories & structures') }}</h6>

        <div class="row g-4">
            {{-- Harness --}}
            <div class="col-12">
                <div class="border rounded p-3">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="jq_harness"
                            wire:model.live="form.jacquardDetails.is_harness_included">
                        <label class="form-check-label fw-medium" for="jq_harness">{{ __('Include harness?') }}</label>
                    </div>

                    @if ($form->jacquardDetails['is_harness_included'] ?? false)
                        <div class="row g-4 mt-1 pt-3 border-top">
                            <div class="col-md-6">
                                <label class="form-label" for="jq_pavilion">{{ __('Number of strings (Pavilion)') }} <span class="text-danger">*</span></label>
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text"><i class="ti tabler-line-dashed"></i></span>
                                    <input type="text" id="jq_pavilion" inputmode="decimal" maxlength="10" class="form-control @error('form.jacquardDetails.number_pavilion') is-invalid @enderror"
                                        wire:model.defer="form.jacquardDetails.number_pavilion" placeholder="{{ __('e.g. 5536') }}">
                                </div>
                                @error('form.jacquardDetails.number_pavilion') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="jq_density">{{ __('Density') }} <span class="text-danger">*</span></label>
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text"><i class="ti tabler-chart-dots"></i></span>
                                    <input type="text" id="jq_density" inputmode="decimal" maxlength="10" class="form-control @error('form.jacquardDetails.density') is-invalid @enderror"
                                        wire:model.defer="form.jacquardDetails.density" placeholder="{{ __('e.g. 35') }}">
                                </div>
                                @error('form.jacquardDetails.density') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Gantry --}}
            <div class="col-12">
                <div class="border rounded p-3">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="jq_gantry"
                            wire:model.live="form.jacquardDetails.is_gantry_included">
                        <label class="form-check-label fw-medium" for="jq_gantry">{{ __('Include gantry?') }}</label>
                    </div>

                    @if ($form->jacquardDetails['is_gantry_included'] ?? false)
                        <div class="mt-3 pt-3 border-top">
                            <label class="form-label" for="jq_gantry_type">{{ __('Gantry type') }} <span class="text-danger">*</span></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text"><i class="ti tabler-building-bridge"></i></span>
                                <select id="jq_gantry_type" class="form-select @error('form.jacquardDetails.gantry_structure') is-invalid @enderror"
                                    wire:model.defer="form.jacquardDetails.gantry_structure">
                                    <option value="">{{ __('Select gantry') }}</option>
                                    <option value="double">{{ __('Double') }}</option>
                                    <option value="single">{{ __('Single') }}</option>
                                    <option value="quadruple">{{ __('Quadruple') }}</option>
                                </select>
                            </div>
                            @error('form.jacquardDetails.gantry_structure') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>