@props([
    'field' => null,
    'profileEnum' => null,
    'start' => 36,
    'end' => 420,
    'step' => 12,
    'type' => 'percent',
])

@php
    $fieldEnum = ProductFields::tryFrom($field['name']);
@endphp

<div class="d-flex justify-content-between">
    <h6 class="mb-2">Barèmes de Taux</h6>
    <x-ui.button click="addBound('{{ $fieldEnum }}')" :label="__('Add bound')" icon="plus-sm" color="lighter" class="btn-sm"/>
</div>
@foreach(($field['data']['bounds'] ?? []) as  $i => $bound)
<div class="form-group form-xs d-flex gx-1 mb-1">
    <x-ui.select model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.var" :options="$fieldEnum->bounds() ?? []" form-group-class="w-200px" placeholder="Champs"/>
    <x-ui.select wire:model.debounce.400ms="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.oplb" :options="['gte' => '>=', 'gt' => '>']" placeholder="Op."/>
    <x-ui.input wire:model.debounce.400ms="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.lb" mask="currency" class="w-120px"/>
    <x-ui.select wire:model.debounce.400ms="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.opub" :options="['lt' => '<', 'lte' => '<=']" placeholder="Op."/>
    <x-ui.input wire:model.debounce.400ms="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.ub" mask="currency" class="w-100px" />
    <x-ui.button icon="minus-sm" click="removeBound('{{ $fieldEnum }}', {{ $i }})" color="lighter" class="btn-xs"/>
</div>
@endforeach
<hr/>
@forelse(($field['data']['bounds'] ?? []) as $i => $bound)
<div class="card card-bordered card-inner mb-3 tw-bg-blue-gray-50">
    <span class="mb-3 fw-bolder">
        {{ __('Operation amount') }}
        <x-ui.nicon name="bullet" />
        @if($bound['lb'])
        {{ $bound['oplb'] === 'gt' ? 'Supérieur à' : 'Supérieur ou égal à' }} {{ $bound['lb'] }}€ &nbsp;
        @endif
        @if($bound['ub'])
        {{ $bound['opub'] === 'lt' ? 'Inférieur à' : 'Inférieur ou égal à' }} {{ $bound['ub'] }}€
        @endif
    </span>
    <div class="row gy-1">
        @foreach(range($start, $end, $step) as $month)
            <div class="col-sm-2">
                <x-ui.input 
                    model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.bounds.{{ $i }}.val.{{ $month }}"
                    :label="$month"
                    :icon="$type == 'percent'? 'percent' : 'sign-euro'"
                    :mask="$type == 'percent'? 'decimal-currency' : 'integer'"
                />
            </div>
        @endforeach
    </div>
</div>
@empty
<div class="row gy-1">
    @foreach(range($start, $end, $step) as $month)
        <div class="col-sm-2">
            <x-ui.input 
                model="fields.{{ $profileEnum }}.{{ $fieldEnum }}.data.static.{{ $month }}"
                :label="$month"
                :icon="$type == 'percent'? 'percent' : 'sign-euro'"
                :mask="$type == 'percent'? 'decimal-currency' : 'integer'"
            />
        </div>
    @endforeach
</div>
@endforelse