@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper cardhead">
    <div class="content container-fluid">
        @component('components.breadcrumb')
            @slot('title') Profile Settings @endslot
        @endcomponent

        <div class="row">
            <div class="col-xl-3 col-lg-12 theiaStickySidebar">
                <!-- Sidebar -->
                <div class="card">
                    <div class="card-body">
                        <div class="settings-sidebar">
                            <h4 class="fw-semibold mb-3">General Settings</h4>
                            <div class="list-group list-group-flush settings-sidebar">
                                <a href="javascript:void(0);" class="fw-medium nav-tab active" data-tab="profileTab">Profile</a>
                                {{-- <a href="javascript:void(0);" class="fw-medium nav-tab" data-tab="securityTab">Security</a>
                                <a href="javascript:void(0);" class="fw-medium nav-tab" data-tab="notificationsTab">Notifications</a> --}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Sidebar -->
            </div>

            <div class="col-xl-9 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <!-- Profile Form -->
                        <div class="tab-section" id="profileTab">
							@if(session('success'))
							<div class="alert alert-success">{{ session('success') }}</div>
							@endif
							@if(session('error'))
								<div class="alert alert-danger">{{ session('error') }}</div>
							@endif
							@if($errors->any())
								<div class="alert alert-danger">
									<ul class="mb-0">
										@foreach($errors->all() as $error)
											<li>{{ $error }}</li>
										@endforeach
									</ul>
								</div>
							@endif

                           <div>
                              
                                <div class="progress mb-4">
                                    <div class="progress-bar" role="progressbar" style="width: 25%;" id="formProgress"></div>
                                </div>

                                <div class="step step-1">
                                    @include('resource.form-sections.manage-overseas.personalInfoForm')
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" class="btn btn-primary next-btn">Next</button>
                                    </div>
                                </div>

                                <div class="step step-2 d-none">
                                    @include('resource.form-sections.manage-overseas.professionalInfoForm')
                                    <div class="d-flex justify-content-between mt-3">
                                        <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                                        <!-- Optional: remove this or show disabled -->
                                        <button type="button" class="btn btn-secondary" disabled>Read-Only</button>

                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- <!-- Security Form -->
                        <div class="tab-section d-none" id="securityTab">
                            <form method="POST" action="{{ route('update-password') }}">
                                @csrf
                                <h5 class="fw-semibold mb-3">Change Password</h5>
                                <div class="mb-3">
                                    <label class="form-label">Current Password</label>
                                    <input type="password" name="current_password" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">New Password</label>
                                    <input type="password" name="new_password" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Confirm Password</label>
                                    <input type="password" name="new_password_confirmation" class="form-control" required>
                                </div>
                                <button type="submit" class="btn btn-primary">Update Password</button>
                            </div>
                        </div> --}}

                        <!-- Notifications -->
                        {{-- <div class="tab-section d-none" id="notificationsTab">
                            <h5 class="fw-semibold mb-3">Notifications Settings</h5>
                            <p>You can customize this section to manage email/push alerts.</p>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
<script>
    let currentStep = 1;
    const totalSteps = 4;

    function updateProgressBar(step) {
        const percent = (step / totalSteps) * 100;
        document.getElementById('formProgress').style.width = percent + '%';
    }

    function showStep(step) {
        document.querySelectorAll('.step').forEach(el => el.classList.add('d-none'));
        document.querySelector('.step-' + step).classList.remove('d-none');
        updateProgressBar(step);
    }

    function switchTab(tabId) {
        document.querySelectorAll('.tab-section').forEach(tab => tab.classList.add('d-none'));
        document.querySelector(`#${tabId}`).classList.remove('d-none');

        document.querySelectorAll('.nav-tab').forEach(link => link.classList.remove('active'));
        document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');

        // Reset step to 1 if on profile tab
        if (tabId === 'profileTab') {
            currentStep = 1;
            showStep(currentStep);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        showStep(currentStep);

        document.querySelectorAll('.next-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep < totalSteps) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });

        document.querySelectorAll('.prev-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep > 1) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        document.querySelectorAll('.nav-tab').forEach(link => {
            link.addEventListener('click', () => {
                switchTab(link.dataset.tab);
            });
        });
    });
</script>
@endpush

@endsection