@props([
    'col' => 12,
    'id' => null,
    'label' => null,
    'name' => null,
    'min' => 3,
    'max' => 255,
    'value' => null,
    'required' => false
])

@php
    $textareaId = $id ?? $name;
@endphp

<div class="row">
    <div class="col-md-{{ $col }} mb-3">

        <label class="form-label">
            {{ $label }}
            <span class="text-danger">
                {{ $required ? '*' : '' }}
            </span>
        </label>

        <textarea
            name="{{ $name }}"
            id="{{ $textareaId }}"
            class="form-control trans-input btn-square"
            rows="3"
            minlength="{{ $min ?? 0 }}"
            maxlength="{{ $max ?? 255 }}"
            placeholder="{{ __('dashboard.enter_your', ['attribute'=> $label]) }}"
        >{{ old($name, $value) }}</textarea>

        <div class="char-counter mt-1 text-end" style="font-size: 0.85rem; color: #6c757d;">
            <span class="char-count" data-textarea-id="{{ $textareaId }}">0</span>
            / <span class="char-max">{{ $max ?? 255 }}</span>
        </div>

        <div class="invalid-feedback"></div>

        @foreach($errors->get($name) as $message)
            <span class="text-danger"><small class="errorTxt">{{ $message }}</small></span>
        @endforeach

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const textareas = document.querySelectorAll('.trans-input');

        textareas.forEach(textarea => {
            const textareaId = textarea.id;
            const charCount = document.querySelector(`[data-textarea-id="${textareaId}"]`);

            if (charCount) {
                charCount.textContent = textarea.value.length;

                textarea.addEventListener('input', () => charCount.textContent = textarea.value.length);
                textarea.addEventListener('change', () => charCount.textContent = textarea.value.length);
            }
        });
    });
</script>