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

<div class="page-wrapper cardhead">
    <div class="content container-fluid">

@component('components.breadcrumb')
@slot('title')
Complete Onboarding/Update Profile
@endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Complete Onboarding/Update Profile</h5>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @elseif(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{route('approve-onboarding', $resource->id)}}" method="POST" enctype="multipart/form-data">
                    @csrf
                  
                    <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-resource.basicinfoform')
                        <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-resource.personalinfoform')
                        <div class="d-flex justify-content-between mt-3">
                            <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                            <button type="button" class="btn btn-primary next-btn">Next</button>
                        </div>
                    </div>

                    <div class="step step-3 d-none">
                        @include('resource.form-sections.manage-resource.employmentinfoform')
                        <div class="d-flex justify-content-between mt-3">
                            <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                            <button type="button" class="btn btn-primary next-btn">Next</button>
                        </div>
                    </div>

                    <div class="step step-4 d-none">
                        @include('resource.form-sections.manage-resource.attachementinfoform')
                        <div class="d-flex justify-content-between mt-3">
                            <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                            <button type="submit" class="btn btn-success">Approve Onboarding</button>
                        </div>
                    </div>
                </form>

                <!-- Place the Reject Onboarding button below the form -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" class="btn btn-danger btn-lg" data-bs-toggle="modal" data-bs-target="#rejectOnboardingModal">
                        Reject Onboarding
                    </button>
                </div>

                <!-- Reject Onboarding Modal -->
                <div class="modal fade" id="rejectOnboardingModal" tabindex="-1" aria-labelledby="rejectOnboardingModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('reject-onboarding', $resource->id) }}" method="POST">
                                @csrf
                                @method('POST')
                                <div class="modal-header">
                                    <h5 class="modal-title" id="rejectOnboardingModalLabel">Reject Onboarding</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="rejection_comment">Rejection Comment</label>
                                        <textarea name="rejection_comment" id="rejection_comment" class="form-control" rows="4" required></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-danger">Reject</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </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);
    }

    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);
                }
            });
        });

         // Add loader GIF on form submission
         const overlayLoader = document.createElement('div');
        overlayLoader.id = 'overlay-loader';
        overlayLoader.style.cssText = `
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        `;
        overlayLoader.innerHTML = `<img src="{{ asset('loader.gif') }}" alt="Loading..." style="width: 100px; height: 100px;">`;
        document.body.appendChild(overlayLoader);

        document.querySelector('form').addEventListener('submit', (event) => {
            overlayLoader.style.display = 'flex';
            return true; // Ensure the form submission proceeds
        });
        
    });
</script>
<!-- Add this to visually disable the button after submit -->
{{-- <script>
    const approveBtn = document.querySelector('.btn-success');
    approveBtn?.addEventListener('click', () => {
        approveBtn.disabled = true;
        approveBtn.innerHTML = 'Processing...';
    });
</script> --}}
@endpush

@endsection