{{-- STEP 7: DESKRIPSI DIRI --}}
<div class="wizard-step {{ ($current_step ?? 1) == 7 ? 'active' : '' }}" data-step="7">
    <h5 class="mb-4">Deskripsi Diri</h5>

    <div class="language-section mb-4 p-4">
        <div class="row">
            {{-- Deskripsi Diri --}}
            <div class="col-md-12">
                <div class="form-group mb-4">
                    <label class="form-control-label">Deskripsi Diri Anda <span class="text-danger">*</span></label>
                    <textarea name="desk_diri" class="form-control" rows="4" required>{{ old('desk_diri', $applicant->desk_diri ?? '') }}</textarea>
                </div>
            </div>

            {{-- Kelebihan --}}
            <div class="col-md-12">
                <div class="form-group mb-4">
                    <label class="form-control-label">Sebutkan 3 (tiga) Kelebihan Anda <span
                            class="text-danger">*</span></label>
                    <small class="form-text text-muted mb-2 d-block">
                        <i class="fas fa-info-circle"></i>
                        Minimal 20 karakter per poin. Tidak boleh menggunakan karakter spesial (@#$%^&*).
                    </small>
                    <input type="text" name="kelebihan[]" class="form-control mb-2 kelebihan-input"
                        placeholder="1. Kelebihan pertama"
                        value="{{ old('kelebihan.0', $applicant->kelebihan[0] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>

                    <input type="text" name="kelebihan[]" class="form-control mb-2 kelebihan-input"
                        placeholder="2. Kelebihan kedua"
                        value="{{ old('kelebihan.1', $applicant->kelebihan[1] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>

                    <input type="text" name="kelebihan[]" class="form-control kelebihan-input"
                        placeholder="3. Kelebihan ketiga"
                        value="{{ old('kelebihan.2', $applicant->kelebihan[2] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>
                </div>
            </div>

            {{-- Kelemahan --}}
            <div class="col-md-12">
                <div class="form-group">
                    <label class="form-control-label">Sebutkan 3 (tiga) Kelemahan Anda <span
                            class="text-danger">*</span></label>
                    <small class="form-text text-muted mb-2 d-block">
                        <i class="fas fa-info-circle"></i>
                        Minimal 20 karakter per poin. Tidak boleh menggunakan karakter spesial (@#$%^&*).
                    </small>
                    <input type="text" name="kelemahan[]" class="form-control mb-2 kelemahan-input"
                        placeholder="1. Kelemahan pertama"
                        value="{{ old('kelemahan.0', $applicant->kelemahan[0] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>

                    <input type="text" name="kelemahan[]" class="form-control mb-2 kelemahan-input"
                        placeholder="2. Kelemahan kedua"
                        value="{{ old('kelemahan.1', $applicant->kelemahan[1] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>

                    <input type="text" name="kelemahan[]" class="form-control kelemahan-input"
                        placeholder="3. Kelemahan ketiga"
                        value="{{ old('kelemahan.2', $applicant->kelemahan[2] ?? '') }}" minlength="20"
                        oninput="blockSpecialChars(this)" required>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        // Minimal 20 karakter per poin. Karakter yang diperbolehkan: huruf, angka, spasi, dan tanda baca umum ( . , - ' ? ! : ; ( ) / ).
        function blockSpecialChars(input) {
            const cleaned = input.value.replace(/[^A-Za-z0-9\s\.\,\-\'\?\!\:\;\(\)\/]/g, '');
            if (cleaned !== input.value) {
                input.value = cleaned;
            }
        }
    </script>
@endpush