@props([
    'value' => '',
    'class' => 'form-control form-icon-input',
    'id' => 'short_description',
    'style' => 'height: 115px;',
    'placeholder' => 'Short Description About Me',
    'name' => 'short_description',
    'label' => 'Short Description About Me',
    'icon' => 'fa-info-circle'
])

<div x-data="shortDescription('{{ $value }}')" class="form-icon-container">
    <div class="form-floating">
        <textarea
            x-model="info"
            x-on:input="handleInput"
            x-on:focus="isFocused = true"
            x-on:blur="isFocused = false"
            x-bind:class="{
                'is-invalid': isOverLimit,
                'shake-animation': shake,
                'border-danger': isOverLimit && shake,
                'border-danger': shake
            }"
            class="{{ $class }}"
            id="{{ $id }}"
            style="{{ $style }}"
            placeholder="{{ $placeholder }}"
            name="{{ $name }}"
        >{{ $slot }}</textarea>
        <label class="text-body-tertiary form-icon-label" for="{{ $id }}">
            {{ $label }}
        </label>
    </div>

    <!-- Conditionally render the FontAwesome icon -->
    @if ($icon)
        <span class="fas {{ $icon }} text-body fs-9 form-icon"></span>
    @endif

    <p x-bind:class="{ 'text-danger': isOverLimit }" class="text-sm mt-1" x-text="`${characterCount}/${maxLength} characters`"></p>

    <!-- Validation Error Component -->
    <x-input-error :field="$name" class="mt-2"/>
</div>

<script>
    function shortDescription(initialValue) {
        return {
            info: initialValue,
            characterCount: initialValue.length,
            maxLength: 255,
            isOverLimit: false,
            shake: false,
            isFocused: false,
            handleInput(event) {
                // Prevent input if character limit is exceeded
                if (event.target.value.length > this.maxLength) {
                    event.target.value = event.target.value.slice(0, this.maxLength);
                    this.info = event.target.value;
                    this.characterCount = this.info.length;
                    this.isOverLimit = true;
                    this.shake = true;
                    setTimeout(() => {
                        this.shake = false;
                        this.isOverLimit = false;
                    }, 500);
                } else {
                    this.info = event.target.value;
                    this.characterCount = this.info.length;
                    this.isOverLimit = this.characterCount >= this.maxLength;
                }
            },
            init() {
                this.characterCount = this.info.length;
                this.isOverLimit = this.characterCount > this.maxLength;
            }
        }
    }
</script>

<style>
    .shake-animation {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }

    @keyframes shake {
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(2px, 0, 0); }
        30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(4px, 0, 0); }
    }
</style>