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

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

    <style>
        .readonly-field {
            background-color: #f8f9fa !important;
            border: 1px solid #dee2e6 !important;
            color: #495057 !important;
            cursor: default !important;
        }

        .wizard-step {
            display: none;
        }

        .wizard-step.active {
            display: block;
        }

        .wizard-buttons {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #dee2e6;
        }

        .bg-teal {
            background-color: #017678 !important;
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        .family-section,
        .education-section,
        .training-section,
        .language-section,
        .work-section,
        .org-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>

    <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 flex-wrap gap-2">
                        <h6 class="mb-0">Data Pelamar — {{ $applicant->nama ?? '-' }}</h6>
                        <div class="d-flex gap-2 flex-wrap">
                            <form id="formKonfirmasi" method="POST" action="{{ url('/tsappl') }}" target="_blank">
                                @csrf
                                <input type="hidden" name="custom_action" value="generateFormulir">
                                <input type="hidden" name="application_id" value="{{ $applicant->application_id }}">
                                <button type="submit" class="btn btn-primary btn-sm mb-0">
                                    <i class="fas fa-print me-1"></i> Print
                                </button>
                            </form>
                            <a href="javascript:history.back()" class="btn btn-secondary btn-sm mb-0">
                                <i class="fas fa-arrow-left me-1"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <div class="card-body">

                        @include('transc.tsappl.partials.stepper')

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

                        <div class="wizard-buttons">
                            <div class="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 ms-auto" id="nextBtn">
                                    Selanjutnya <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <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 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);
            }

            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');

            prevBtn.style.display = step === 1 ? 'none' : 'inline-block';
            nextBtn.style.display = step === totalSteps ? 'none' : 'inline-block';

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

        document.getElementById('nextBtn').addEventListener('click', function() {
            if (currentStep < totalSteps) {
                currentStep++;
                showStep(currentStep);
            }
        });

        document.getElementById('prevBtn').addEventListener('click', function() {
            if (currentStep > 1) {
                currentStep--;
                showStep(currentStep);
            }
        });

        document.querySelectorAll('.stepper-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const step = parseInt(this.getAttribute('data-step'));
                if (!isNaN(step)) {
                    currentStep = step;
                    showStep(currentStep);
                }
            });
        });

        showStep(currentStep);
    </script>
@endpush