{{-- Wizard Navigation Buttons --}}
<div class="wizard-buttons">
    <div class="row">
        <div class="col-12 d-flex justify-content-between">
            <button type="button" class="btn btn-secondary" id="prevBtn" style="display: none;">
                <i class="fas fa-arrow-left"></i> Sebelumnya
            </button>
            <button type="button" class="btn btn-primary" id="nextBtn">
                Selanjutnya <i class="fas fa-arrow-right"></i>
            </button>
            <button type="submit" class="btn btn-primary" id="submitBtn" style="display: none;">
                <i class="fas fa-save"></i> Submit
            </button>
        </div>
    </div>
</div>

<script>
    let currentStep = {{ $current_step ?? 1 }};
    const totalSteps = 10;

    function showStep(step) {
        document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
        const currentStepEl = document.querySelector(`.wizard-step[data-step="${step}"]`);
        if (currentStepEl) currentStepEl.classList.add('active');

        document.querySelectorAll('.stepper-item').forEach(el => {
            const stepNum = parseInt(el.getAttribute('data-step'));
            el.classList.remove('active', 'completed');
            if (stepNum === step) el.classList.add('active');
            else if (stepNum < step) el.classList.add('completed');
        });

        const scrollContainer = document.querySelector('.stepper-scroll-container');
        const activeStepItem = document.querySelector('.stepper-item.active');
        if (scrollContainer && activeStepItem) {
            const containerWidth = scrollContainer.offsetWidth;
            const itemLeft = activeStepItem.offsetLeft;
            const itemWidth = activeStepItem.offsetWidth;
            scrollContainer.scrollLeft = itemLeft - (containerWidth / 2) + (itemWidth / 2);
        }

        document.getElementById('prevBtn').style.display = step === 1 ? 'none' : 'inline-block';
        document.getElementById('nextBtn').style.display = step === totalSteps ? 'none' : 'inline-block';
        document.getElementById('submitBtn').style.display = step === totalSteps ? 'inline-block' : 'none';
        document.getElementById('currentStepInput').value = step;
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }

    document.getElementById('nextBtn').addEventListener('click', function() {
        const currentStepEl = document.querySelector(`.wizard-step[data-step="${currentStep}"]`);
        const requiredFields = currentStepEl.querySelectorAll('[required]');
        let isValid = true;

        let hasConstraintViolation = false;

        requiredFields.forEach(field => {
            if (!field.offsetParent && field.type !== 'hidden') {
                field.classList.remove('is-invalid');
                return;
            }

            const educationItem = field.closest('.education-item');
            if (educationItem) {
                const tingkatInput = educationItem.querySelector('.tingkat-input');
                const tingkat = tingkatInput ? tingkatInput.value : '';
                const sekolahInput = educationItem.querySelector('[name$="[sekolah]"]');
                const sekolah = sekolahInput ? sekolahInput.value.trim() : '';

                if ((tingkat === 'SD' || tingkat === 'SMP') && sekolah === '') {
                    field.classList.remove('is-invalid');
                    return;
                }
            }

            const val        = field.value.trim();
            const minLen     = parseInt(field.getAttribute('minlength') || '0');

            if (!val) {
                isValid = false;
                field.classList.add('is-invalid');
            } else if (minLen > 0 && val.length < minLen) {
                isValid = false;
                hasConstraintViolation = true;
                field.classList.add('is-invalid');
            } else {
                field.classList.remove('is-invalid');
            }
        });

        if (!isValid) {
            if (hasConstraintViolation) {
                showCustomAlert('Periksa kembali input Anda: pastikan minimal 20 karakter dan tidak menggunakan karakter spesial.');
            } else {
                showCustomAlert('Mohon lengkapi semua field yang wajib diisi!');
            }
            const firstInvalid = currentStepEl.querySelector('.is-invalid');
            if (firstInvalid) firstInvalid.focus();
            return;
        }

        // Validasi foto
        if (currentStep === 1) {
            const fotoInput = document.getElementById('FotoInput');
            const fotoPreview = document.getElementById('fotoPreview');
            const hasExistingFoto = fotoPreview && fotoPreview.tagName === 'IMG';
            const hasNewFile = fotoInput && fotoInput.files && fotoInput.files.length > 0;

            if (!hasExistingFoto && !hasNewFile) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian',
                        text: 'Foto wajib diisi.',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#028284',
                    });
                } else {
                    alert('Foto wajib diisi.');
                }
                return;
            }
        }

        document.getElementById('currentStepInput').value = currentStep;
        document.getElementById('loadingOverlay').classList.add('show');
        document.getElementById('biodataForm').submit();
    });

    document.getElementById('prevBtn').addEventListener('click', function() {
        if (currentStep > 1) {
            document.getElementById('currentStepInput').value = currentStep - 1;
            document.getElementById('navActionInput').value = 'navigate';
            document.getElementById('loadingOverlay').classList.add('show');
            document.getElementById('biodataForm').submit();
        }
    });

    document.getElementById('biodataForm').addEventListener('submit', function(e) {
        const currentStepEl = document.querySelector(`.wizard-step[data-step="${currentStep}"]`);
        if (currentStepEl) {
            const fields = currentStepEl.querySelectorAll('input, select, textarea');
            let isValid = true;
            fields.forEach(field => {
                if (!field.offsetParent && field.type !== 'hidden') return;
                if (!field.checkValidity()) isValid = false;
            });
            if (!isValid) {
                e.preventDefault();
                showCustomAlert('Mohon lengkapi semua field yang wajib diisi!');
                document.getElementById('loadingOverlay').classList.remove('show');
                return;
            }
        }
        document.getElementById('loadingOverlay').classList.add('show');
    });

    showStep(currentStep);
</script>