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

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

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

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Approve 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

                 @if($OverseasResource && $OverseasResource->changed_fields)

@php
$changes = json_decode($OverseasResource->changed_fields, true);

$skipFields = ['resource_id','status','updated_by','created_at','updated_at'];

function pretty($field, $value) {

    if($value === null || $value === '') return '-';

    // Format dates
    if(strtotime($value)) {
        return date('d M Y', strtotime($value));
    }

    // Convert dropdown IDs to names
    if($field == 'region') return \App\Models\RegionName::find($value)->name ?? $value;
    if($field == 'department') return \App\Models\Department::find($value)->name ?? $value;
    if($field == 'designation') return \App\Models\Designation::find($value)->name ?? $value;
    if($field == 'employee_status') return \App\Models\ResourceStatus::find($value)->name ?? $value;

    // Show files nicely
    if(str_contains($value, 'uploads/')) {
        return '<a target="_blank" href="'.asset('storage/'.$value).'">View File</a>';
    }

    // Pretty print child JSON
    if($field == 'child_details') {
        return '<pre>'.json_encode(json_decode($value, true), JSON_PRETTY_PRINT).'</pre>';
    }

    return e($value);
}
@endphp

<div class="alert alert-warning border-start border-4 border-primary">
    <h5 class="mb-2">🔄 Pending Profile Changes</h5>

    <table class="table table-sm table-bordered bg-white">
        <thead>
            <tr>
                <th>Field</th>
                <th>Previous</th>
                <th>Requested</th>
            </tr>
        </thead>
        <tbody>
        @foreach($changes as $field => $value)

            @continue(in_array($field, $skipFields))

            <tr>
                <td><strong>{{ ucfirst(str_replace('_',' ',$field)) }}</strong></td>
                <td class="text-danger">{!! pretty($field, $value['old'] ?? '-') !!}</td>
                <td class="text-success">{!! pretty($field, $value['new'] ?? '-') !!}</td>
            </tr>

        @endforeach
        </tbody>
    </table>
</div>
@endif

                <form action="{{route('approve-overseas-onboarding', $OverseasResource->id)}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <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="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-overseas-onboarding', $OverseasResource->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 = 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