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

<div class="card border shadow-none mb-4">
    <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-cylinder ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Beams, flanges & rollers') }}</h6>
        </div>

        <div class="row g-4">
            {{-- Rollers / batcher toggles --}}
            <div class="col-md-6">
                <div class="border rounded p-3 h-100">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="br_cloth_roller"
                            wire:model.live="form.beamsAndRollers.has_cloth_roller">
                        <label class="form-check-label fw-medium" for="br_cloth_roller">{{ __('Includes cloth roller?') }}</label>
                    </div>

                    @if ($form->beamsAndRollers['has_cloth_roller'] ?? false)
                        <div class="mt-3">
                            <label class="form-label" for="br_roller_qty">{{ __('Quantity rollers') }} <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="br_roller_qty" inputmode="decimal" maxlength="10" class="form-control @error('form.beamsAndRollers.cloth_roller_quantity') is-invalid @enderror"
                                    wire:model.defer="form.beamsAndRollers.cloth_roller_quantity" placeholder="{{ __('e.g. 2.00') }}">
                            </div>
                            @error('form.beamsAndRollers.cloth_roller_quantity') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                    @endif

                    <div class="form-check form-switch mt-3 mb-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="br_batching"
                            wire:model.live="form.beamsAndRollers.batching_motion">
                        <label class="form-check-label fw-medium" for="br_batching">{{ __('Big batcher included?') }}</label>
                    </div>
                </div>
            </div>

            {{-- Beams & flanges --}}
            <div class="col-md-6">
                <div class="border rounded p-3 h-100">
                    <div class="row g-4">
                        <div class="col-6">
                            <label class="form-label" for="br_lower_beams">{{ __('Qty. lower beams') }} <span class="text-danger">*</span></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text"><i class="ti tabler-cylinder"></i></span>
                                <input type="text" id="br_lower_beams" inputmode="decimal" maxlength="10" class="form-control @error('form.beamsAndRollers.n_lower_beams') is-invalid @enderror"
                                    wire:model.defer="form.beamsAndRollers.n_lower_beams" placeholder="{{ __('e.g. 1.00') }}">
                            </div>
                            @error('form.beamsAndRollers.n_lower_beams') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="br_upper_beams">{{ __('Qty. upper beams') }} <span class="text-danger">*</span></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text"><i class="ti tabler-cylinder"></i></span>
                                <input type="text" id="br_upper_beams" inputmode="decimal" maxlength="10" class="form-control @error('form.beamsAndRollers.n_upper_beams') is-invalid @enderror"
                                    wire:model.defer="form.beamsAndRollers.n_upper_beams" placeholder="{{ __('e.g. 1.00') }}">
                            </div>
                            @error('form.beamsAndRollers.n_upper_beams') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="br_lower_flange">{{ __('Lower flange diam.') }} <span class="text-danger">*</span></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text"><i class="ti tabler-circle-dot"></i></span>
                                <input type="text" id="br_lower_flange" inputmode="decimal" maxlength="10" class="form-control @error('form.beamsAndRollers.n_lower_flange_diameter') is-invalid @enderror"
                                    wire:model.defer="form.beamsAndRollers.n_lower_flange_diameter" placeholder="{{ __('e.g. 800.00') }}">
                            </div>
                            @error('form.beamsAndRollers.n_lower_flange_diameter') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="br_upper_flange">{{ __('Upper flange diam.') }} <span class="text-danger">*</span></label>
                            <div class="input-group input-group-merge">
                                <span class="input-group-text"><i class="ti tabler-circle-dot"></i></span>
                                <input type="text" id="br_upper_flange" inputmode="decimal" maxlength="10" class="form-control @error('form.beamsAndRollers.n_upper_flange_diameter') is-invalid @enderror"
                                    wire:model.defer="form.beamsAndRollers.n_upper_flange_diameter" placeholder="{{ __('e.g. 800.00') }}">
                            </div>
                            @error('form.beamsAndRollers.n_upper_flange_diameter') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>