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

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

@component('components.breadcrumb')
@slot('title')
Overseas Resource Profile
@endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Overseas Resource 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="{{ isset($OverseasResource) ? route('update-overseas-resource', $OverseasResource->id) : route('create-overseas-resource') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if(isset($OverseasResource))
                        @method('PUT')
                    @endif
                    @php $OverseasResource = $OverseasResource ?? null; @endphp

                    <div class="progress mb-4">
                        <div class="progress-bar" role="progressbar" style="width: 50%;" 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>
                              <button type="button" class="btn btn-secondary" disabled>Read-Only</button>
                        </div>
                    </div>

                </form>

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

</div>
</div>

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

    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', () => {
            overlayLoader.style.display = 'flex';
        });
    });
</script>
@endpush

@endsection