@props([
    'label' => null,
    'type' => 'text',
    'icon' => null,
    'prepend' => null,
    'append' => null,
    'rounded' => false,
    'size' => null,
    'help' => null,
    'model' => null,
    'debounce' => false,
    'defer' => true,
    'lazy' => false,
    'mask' => null,
    'direction' => 'col',
    'outlined' => null,
    'autocompleteResults' => [],
    'autocompleteModel' => null,
    'svg' => null,
    'svgRight' => false
])
@php
    if ($type == 'number') $inputmode = 'decimal';
    else if (in_array($type, ['tel', 'search', 'email', 'url'])) $inputmode = $type;
    else $inputmode = 'text';

    $bind = '';
    if ($debounce) $bind = '.debounce.' . (ctype_digit($debounce) ? $debounce : 150) . 'ms';
    else if ($lazy) $bind = '.lazy';
    else if ($defer) $bind = '.defer';

    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $key = $attributes->get('name', $model ?? $wireModel);
    $id = $attributes->get('id', $model ?? $wireModel) ?? uniqid();
    $isRow = $direction === 'row';

    if($mask == 'date' && empty($placeholder)) {
        $placeholder= "jj/mm/aaaa";
    }

    $mask = match($mask) {
        'numeric' => [
            'numeral' => true,
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'integer' => [
            'numeral' => true,
            'delimiter' => '',
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'currency' => [
            'numeral' => true,
            'delimiter' => ' ',
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'decimal-currency' => [
            'numeral' => true,
            'delimiter' => ' ',
            'numeralDecimalScale' => 2,
            'numeralPositiveOnly' => true
        ],
        'decimal' => [
            'numeral' => true,
            'numeralDecimalScale' => 2,
            'numeralPositiveOnly' => true
        ],
        'date' => [
            'date' => true,
            'delimiter' => "/",
            'datePattern' => ['d', 'm', 'Y']
        ],
        'time' => [
            'time' => true,
            'timePattern' => ['h', 'm']
        ],
        default => null
    };

    $attributes = $attributes->class([
        'form-control',
        'form-control-' . $size => $size,
        'form-round' => $rounded,
        'rounded-end' => !$append && !$rounded,
        'is-invalid' => $errors->has($key),
        'form-control-outlined' => $outlined,
        'ps-5' => ! $svgRight
    ])->merge([
        'type' => $type,
        'inputmode' => $inputmode,
        'id' => $id,
        'wire:model' . $bind => $model,
        'col-sm-9' => $isRow,
        'id' => $id,
    ]);
@endphp

<x-ui.form-group :label="$label" :direction="$direction" :outlined="$outlined" :forid="$id">

    <div class="position-relative">

        @if($svg && ! $svgRight)
        <div class="position-absolute translate-middle-y top-50 start-0 ms-1">
            <!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
            <span class="svg-icon">
                @svg($svg)
            </span>
            <!--end::Svg Icon-->
        </div>
        @endif

        <input 
            {{ $attributes }}

            x-ref="input"
            x-on:focus="focus = true"

            @if($outlined)
                x-on:change="input = $el.value"
            @endif

            @if($mask)
                @if($mask == 'money')
                    x-mask:dynamic="$money($input, ' ')"
                @else
                    x-mask='@json($mask)'
                @endif
            @endif
        >

        @if($svg && $svgRight)
        <div class="position-absolute translate-middle-y top-50 end-0 me-1 pb-1">
            <!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
            <span class="svg-icon">
                @svg($svg)
            </span>
            <!--end::Svg Icon-->
        </div>
        @endif
    </div>

    <x-ui.error :key="$key"/>

    <x-ui.help :label="$help"/>

    <x-ui.autocomplete-results 
        :data="$autocompleteResults" 
        :value-model="$autocompleteModel?? $wireModel" 
        :term-model="$wireModel" 
    />
</x-ui.form-group>