{{-- Mismo mínimo que TrabajoRegistroDiarioFormRequest (strlen(trim(...)) >= 10). --}}
@php
    $minDescTrabajo = 10;
@endphp
<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex flex-wrap align-items-baseline justify-content-between gap-2 mb-1">
            <label for="descripcion_trabajo" class="form-label mb-0">Descripción del trabajo</label>
            <span class="small fw-medium" id="descripcion_trabajo_contador" data-min="{{ $minDescTrabajo }}" aria-live="polite">0 / {{ $minDescTrabajo }}</span>
        </div>
        <textarea
            class="form-control @error('descripcion_trabajo') is-invalid @enderror"
            id="descripcion_trabajo"
            name="descripcion_trabajo"
            rows="4"
            data-min="{{ $minDescTrabajo }}"
            @if(! empty($placeholder ?? null)) placeholder="{{ $placeholder }}" @endif
        >{{ $valor ?? '' }}</textarea>
        @error('descripcion_trabajo')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <p class="form-text small text-muted mb-0">Mínimo {{ $minDescTrabajo }} caracteres (sin contar espacios al inicio ni al final).</p>
    </div>
</div>

@once
    @push('scripts')
        <script>
        (function () {
            function minDesc(ta) {
                var m = parseInt(ta && ta.dataset ? ta.dataset.min : '10', 10);
                return Number.isNaN(m) ? 10 : m;
            }

            function actualizarContadorDescTrabajo() {
                var ta = document.getElementById('descripcion_trabajo');
                var cnt = document.getElementById('descripcion_trabajo_contador');
                if (!ta || !cnt) return;
                var min = minDesc(ta);
                var n = ta.value.trim().length;
                cnt.textContent = n + ' / ' + min;
                cnt.classList.remove('text-success', 'text-warning', 'text-muted');
                if (n >= min) {
                    cnt.classList.add('text-success');
                } else if (n > 0) {
                    cnt.classList.add('text-warning');
                } else {
                    cnt.classList.add('text-muted');
                }
            }

            /**
             * Primera letra de la primera palabra en mayúscula; recorta espacios al inicio y al final.
             */
            function formatearDescripcionTrabajoBlur(ta) {
                var raw = ta.value;
                var t = raw.trim();
                if (!t) {
                    ta.value = '';
                    return;
                }
                var ch = Array.from(t);
                var i = 0;
                while (i < ch.length && /\s/.test(ch[i])) i++;
                if (i >= ch.length) {
                    ta.value = '';
                    return;
                }
                ch[i] = ch[i].toLocaleUpperCase('es-ES');
                t = ch.join('');
                t = t.replace(/\s+$/g, '');
                ta.value = t;
            }

            function initDescripcionTrabajoRegistro() {
                var ta = document.getElementById('descripcion_trabajo');
                if (!ta || ta.dataset.descTrabajoInit === '1') return;
                ta.dataset.descTrabajoInit = '1';
                actualizarContadorDescTrabajo();
                ta.addEventListener('input', actualizarContadorDescTrabajo);
                ta.addEventListener('blur', function () {
                    formatearDescripcionTrabajoBlur(ta);
                    actualizarContadorDescTrabajo();
                });
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initDescripcionTrabajoRegistro);
            } else {
                initDescripcionTrabajoRegistro();
            }
        })();
        </script>
    @endpush
@endonce