@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

                            @if ($resource && $resource->changed_fields)
                                @php
                                    $changes = json_decode($resource->changed_fields, true);

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

                                    function pretty($field, $value)
                                    {
                                        if ($value === null || $value === '') {
                                            return '-';
                                        }


                                        $dateFields = [
                                            'dob',
                                            'doj',
                                            'nominee_dob',
                                            'passport_validity',
                                            'spousedob',
                                            'ced',
                                            'dol',
                                            'visa_expiry_date',
                                            'nominee_dob'
                                        ];

                                        if (in_array($field, $dateFields) && 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;
                                        }

                                        if($field=='project_name'){
                                            return \App\Models\ProjectName::find($value)->name ?? $value;
                                        }

                                        if($field == 'team_name') {
                                            return \App\Models\TeamName::find($value)->name ?? $value;
                                        }

                                        if($field == 'reporting_manager') {
                                            return \App\Models\ManagerName::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-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