@props([
    'field' => null,
    'group' => '',
    'index' => 0
])

@php
    $fieldEnum = NationalRateFields::MAX_RATE;
    $modelPre = "fields.$group.$index";
@endphp

@if($fieldEnum)
{{-- {{ dd($fieldEnum->label()); }} --}}
<div class="row form-group">
    <label class="form-label col-sm-3" for="{{ $fieldEnum }}">
        {{ $fieldEnum->label() }}
    </label>
    <div class="col-sm-9">
        
        <div class="d-flex justify-content-between align-items-center gx-1">
            <x-ui.select :id="uniqid()" :label="__('Rate type')" :options="RateType::selectOptions()" model="{{ $modelPre }}.type"/>
            <x-ui.button icon="minus-sm" click="removeField('{{ $group }}', {{ $index }})" color="lighter" class="btn-xs"/>
        </div>

        @if(! count(($field['data']['bounds'] ?? [])))
        <div class="input-group">
            <x-fields.field-input :field="$fieldEnum" model="{{ $modelPre }}.data.static" style="flex: 100"/>
            @if($fieldEnum->bounds())
            <div class="input-group-append">
                <x-ui.button click="addBound('{{ $group }}', {{ $index }})" icon="opt-alt" color="white" class="btn-outline-lighter btn-standard btn-sm text-muted" />
            </div>
            @endif
        </div>
        @endif

        @foreach(($field['data']['bounds'] ?? []) as $i => $bound)
        <div class="form-group form-xs d-flex gx-1 mb-1">
            <x-fields.field-input :field="$fieldEnum" model="{{ $modelPre }}.data.bounds.{{ $i }}.val" class="w-150px"/>
            <x-ui.nicon name="equal-sm" class="align-self-center"/>
            <x-ui.select :id="uniqid()" model="{{ $modelPre }}.data.bounds.{{ $i }}.var" :options="$fieldEnum->bounds() ?? []" form-group-class="w-150px" placeholder="Champs"/>
            <x-ui.select :id="uniqid()" model="{{ $modelPre }}.data.bounds.{{ $i }}.oplb" :options="['gte' => '>=', 'gt' => '>']" placeholder="Op."/>
            <x-ui.input :id="uniqid()" model="{{ $modelPre }}.data.bounds.{{ $i }}.lb" mask="integer" class="w-120px"/>
            <x-ui.select :id="uniqid()" model="{{ $modelPre }}.data.bounds.{{ $i }}.opub" :options="['lt' => '<', 'lte' => '<=']" placeholder="Op."/>
            <x-ui.input :id="uniqid()" model="{{ $modelPre }}.data.bounds.{{ $i }}.ub" mask="integer" class="w-100px" />
            <x-ui.button icon="minus-sm" click="removeBound('{{ $group }}', {{ $index }}, {{ $i }})" color="lighter" class="btn-xs"/>
        </div>
        @endforeach
        
        @if(count(($field['data']['bounds'] ?? [])))
            <x-ui.button icon="plus-sm" click="addBound('{{ $group }}', {{ $index }})" color="lighter" class="btn-xs"/>
        @endif
    </div>
</div>
@endif