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

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

    <style>
        /* =========================================
               WIZARD & LOADING OVERLAY
        ========================================= */
        .wizard-step {
            display: none;
        }

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

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

        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .loading-overlay.show {
            display: flex;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #007BFF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* =========================================
               REUSABLE UTILITIES & BUTTONS
               ========================================= */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

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

        .btn-add-family {
            border: 2px solid #017678 !important;
            color: #017678 !important;
            background: white !important;
            font-weight: 600;
            padding: 8px 20px;
            border-radius: 25px;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .btn-add-family:hover {
            background: #017678 !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(1, 118, 120, 0.3);
        }

        .btn-add-family i {
            margin-right: 8px;
            font-size: 13px;
        }

        /* Select arrow icon */
        .select-arrow-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #6c757d;
            z-index: 2;
            font-size: 12px;
        }

        /* Reusable Form Section Box */
        .family-section,
        .education-section,
        .training-section,
        .language-section,
        .work-section,
        .org-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .family-section label,
        .education-section label,
        .training-section label,
        .language-section label,
        .work-section label,
        .org-section label {
            font-size: 13px;
            font-weight: 500;
            color: #495057;
        }
    </style>

    <div class="container-fluid py-4">
        {{-- Loading Overlay --}}
        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner"></div>
            <p class="mt-3 text-primary fw-bold">Menyimpan data...</p>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0">Form Biodata Pelamar</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('pages.biodat.partials.stepper')
                        @include('pages.biodat.partials.flash-messages')

                        {{-- Form --}}
                        <form method="POST" action="{{ url('biodat') }}" enctype="multipart/form-data" id="biodataForm" novalidate>
                            @csrf
                            <input type="hidden" name="current_step" id="currentStepInput"
                                value="{{ $current_step ?? 1 }}">
                            <input type="hidden" name="nav_action" id="navActionInput" value="">

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

                            @include('pages.biodat.partials.footer-buttons')
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // ==========================================
        // FUNGSI GLOBAL & UTILITY
        // ==========================================
        function upper(el) {
            el.value = el.value.toUpperCase();
        }

        function notspace(el) {
            el.value = el.value.replace(/\s/g, '');
        }

        function numonly(el) {
            el.value = el.value.replace(/[^0-9]/g, '');
        }

        function showCustomAlert(message) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: message,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#028284',
                });
                return;
            }
            // Fallback custom alert
            const existing = document.getElementById('customValidationAlert');
            if (existing) existing.remove();
            const alertBox = document.createElement('div');
            alertBox.id = 'customValidationAlert';
            alertBox.style.cssText =
                'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10000;background:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);font-size:14px;';
            alertBox.textContent = message;
            document.body.appendChild(alertBox);
            setTimeout(() => alertBox.remove(), 3000);
        }

        // ==========================================
        // SWEETALERT SUCCESS
        // ==========================================
        @if (Session::has('final_success'))
            document.addEventListener('DOMContentLoaded', function() {
                const successMessage = @json(Session::get('final_success'));
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: successMessage,
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#028284',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    }).then(() => window.location.href = '{{ url("daflow") }}');
                    return;
                }
                alert(successMessage);
                window.location.href = '{{ url("daflow") }}';
            });
        @endif
    </script>
@endpush