@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Detail Data Pelamar'])

@include('master.msappl.partials.step-styles')

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Detail Data Pelamar — {{ $applicant->nama ?? '-' }}</h6>
                    <a href="javascript:history.back()" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Kembali
                    </a>
                </div>

                <div class="card-body">
                    @include('master.msappl.partials.stepper')

                    @include('master.msappl.step.1_data_diri')
                    @include('master.msappl.step.2_kesehatan')
                    @include('master.msappl.step.3_keluarga')
                    @include('master.msappl.step.4_pendidikan')
                    @include('master.msappl.step.5_pelatihan')
                    @include('master.msappl.step.6_bahasa')
                    @include('master.msappl.step.7_deskripsi')
                    @include('master.msappl.step.8_pekerjaan')
                    @include('master.msappl.step.9_organisasi')
                    @include('master.msappl.step.10_pertanyaan')

                    @include('master.msappl.partials.footer-buttons')
                </div>
            </div>
        </div>
    </div>
</div>




<script>
    let currentStep = 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 prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        if (prevBtn) prevBtn.style.display = step === 1 ? 'none' : 'inline-block';
        if (nextBtn) nextBtn.style.display = step === totalSteps ? 'none' : 'inline-block';

        currentStep = step;
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    document.addEventListener('DOMContentLoaded', function() {
        showStep(1);
        document.getElementById('prevBtn').addEventListener('click', function() {
            if (currentStep > 1) showStep(currentStep - 1);
        });
        document.getElementById('nextBtn').addEventListener('click', function() {
            if (currentStep < totalSteps) showStep(currentStep + 1);
        });
    });
</script>

@endsection