@foreach ($itemPriceSize as $key => $item)
    <div id="{{ 'item_size_price_template_' . $key }}" class="col-12 row item_size_price_template">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 form-group">
            <label for="{{ 'item[' . $key . '][item_size_id]' }}" class="form-label">{{ __('common.size') }}</label>
            <select id="{{ 'item[' . $key . '][item_size_id]' }}" name="{{ 'item[' . $key . '][item_size_id]' }}"
                onchange="selectSize({{ $key }})" data-size="{{ $key }}"
                class="{{ 'size_selection item_size_id_' . $key }} form-control custom-select @error("{{ 'item[' . $key . '][item_size_id]' }}") is-invalid @enderror">
                <option value="">
                    {{ __('common.selectItemSize') }}
                </option>
                @foreach ($itemSize as $index => $size)
                    <option value="{{ $index }}" {{ $item->size_id == $index ? 'selected' : '' }}>
                        {{ $size }}
                    </option>
                @endforeach
            </select>
            @error("{{ 'item[' . $key . '][item_size_id]' }}")
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12 form-group d-none">
            <input type="hidden" id="{{ 'item[' . $key . '][item_price_id]' }}"
                name="{{ 'item[' . $key . '][item_price_id]' }}" value="{{ $item->id }}" hidden>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 form-group">
            <label for="{{ 'item[' . $key . '][item_price]' }}" class="form-label">{{ __('common.price') }} (£)</label>
            <input type="number"
                class="form-control @error("{{ 'item[' . $key . '][item_price]' }}") is-invalid @enderror"
                id="{{ 'item[' . $key . '][item_price]' }}" name="{{ 'item[' . $key . '][item_price]' }}" data-size="{{ $key }}" maxlength="6"
                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                placeholder="{{ __('common.EnterItemPrice') }}"
                value="{{ isset($item->item_size_price) && $item->item_size_price != null ? $item->item_size_price : '' }}">
            @error("{{ 'item[' . $key . '][item_price]' }}")
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12 form-group delete_btn {{ 'delete_' . $key }}"
            style="display: none;">
            <button type="button" href class="btn danger-btn repeat" onclick={{ 'deleteItemSizeAndPrice(' . $key . ')' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </button>
        </div>
    </div>
@endforeach