@props([
    'type' => 'text',
    'clearValue' => true,
    'name',
    'autocomplete' => 'off',
    'placeholder' => '',
    'icon' => null,
    'value' => '',
    'focus' => '',
    'autofocus' => false,
    'errorsBag' => null,
    'showErrorSpace' => true,
    'maxLength' => null,
    'disabled' => false,
])

@php
    $inputId = $attributes->get('id') ?? $name;
    $bag = $errorsBag ?? $errors ?? session('errors');
    $hasError = $bag && $bag->has($name);
@endphp

<div class="fluent-input-wrapper">

    {{-- INPUT GROUP --}}
    <div class="input-group {{ $hasError ? 'is-invalid' : '' }}">

        @if($icon)
            <span class="input-prefix">
                <x-fluent-icon :name="$icon" class="text-muted" />
            </span>
        @endif

        {{-- FILE TYPE --}}
        @if($type === 'file')

            <input 
                id="display_{{ $name }}"
                type="text"
                autocomplete="{{ $autocomplete }}"
                class="form-control {{ $focus }}"
                placeholder="{{ $placeholder }}"
                readonly
                value="{{ $value }}"
                {{ $disabled ? 'disabled' : '' }}
            />
            <input 
                type="file"
                name="{{ $name }}"
                id="{{ $inputId }}"
                class="d-none file-input"
                {{ $disabled ? 'disabled' : '' }}
                {{ $attributes }}
            />
            <x-fluent-button
                variant="subtle"
                icon="more_horizontal"
                title="Pilih file"
                class="btn browse-file-btn"
                :disabled=$disabled
            />

        @else

            {{-- NORMAL INPUT --}}
            <input 
                type="{{ $type }}"
                name="{{ $name }}"
                id="{{ $inputId }}"
                placeholder="{{ $placeholder }}"
                value="{{ old($name, $value) }}"
                {{ $autofocus ? 'autofocus' : '' }}
                {{ $disabled ? 'disabled' : '' }}

                @if($type !== 'password')
                    autocomplete="off"
                    maxlength="{{ $maxLength ?? 192 }}"
                @else
                    autocomplete="new-password"
                @endif

                {{ $attributes->merge([
                    'class' => 'form-control ' . $focus
                ]) }}
            />

            {{-- PASSWORD TOGGLE --}}
            @if($type === 'password')
                <x-fluent-button
                    variant="subtle"
                    class="btn toggle-password"
                    title="Show/Hint Password"
                    :disabled=$disabled
                >
                    <x-fluent-icon name="eye_off" title="Tampilkan password" class="text-disabled icon-eye-off pointer-event-none" />
                    <x-fluent-icon name="eye" title="Sembunyikan password" class="text-primary icon-eye pointer-event-none" />
                </x-fluent-button>

            {{-- CLEAR BUTTON --}}
            @elseif($clearValue)
                <x-fluent-button
                    variant="subtle"
                    icon="dismiss"
                    title="Hapus"
                    class="btn clear-value-btn"
                    :disabled=$disabled
                />
            @endif

        @endif

    </div>

    {{-- FLUENT ERROR MESSAGE --}}
    @if($showErrorSpace)
        <div class="fluent-input-error">
            @if($hasError)
                @foreach($bag->get($name) as $message)
                    <div class="fluent-input-error-item">
                        <x-fluent-icon name="warning" class="text-danger" size="sm" />
                        <span>{{ $message }}</span>
                    </div>
                @endforeach
            @endif
        </div>
    @endif

</div>