@if((isset($jobApplicationVersions) && $jobApplicationVersions->count()) || !empty($showUnsavedOriginalVersion))
    <style>
        .job-application-version-history {
            width: 100%;
            margin: 0 0 25px;
            padding: 0 0 20px;
            border-bottom: 1px solid #e5e5e5;
            background: transparent;
        }
        .job-application-version-history .version-timeline {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            padding: 12px 0 18px;
            /* border-bottom: 1px solid #e5e5e5; */
        }
        .job-application-version-history .version-item {
            min-width: 210px;
            padding-left: 24px;
            position: relative;
        }
        .job-application-version-history .version-item:before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #8ec63f;
            position: absolute;
            left: 0;
            top: 5px;
        }
        .job-application-version-history .version-item.active:before {
            background: #2663eb;
        }
        .job-application-version-history .audit-table {
            width: 100%;
            margin-top: 12px;
            border-collapse: collapse;
        }
        .job-application-version-history .audit-table th,
        .job-application-version-history .audit-table td {
            border: 1px solid #e5e5e5;
            padding: 8px;
            vertical-align: top;
            font-size: 13px;
        }
        .job-application-version-history .audit-table th {
            background: #f7f7f7;
        }
        .job-application-version-history .audit-table tbody {
            display: table-row-group;
        }
        .job-application-version-history .field-change-pagination {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
            width: 100%;
            clear: both;
            position: static;
            background: #fff;
        }
        .job-application-version-history .field-change-pagination button {
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border: 1px solid #d7d7d7;
            background: #fff;
            color: #1a1a1a;
            cursor: pointer;
            font-size: 13px;
        }
        .job-application-version-history .field-change-pagination button.active {
            background: #1a75bc;
            border-color: #1a75bc;
            color: #fff;
        }
        .job-application-version-history .field-change-pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .job-application-version-history .field-change-count {
            margin: 0 0 8px;
            font-size: 13px;
            color: #595959;
        }
        .job-application-version-history .version-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .job-application-version-history .version-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .4rem 1rem;
            border: 1px solid #2a7fd6;
            border-radius: .4rem;
            background: #fff;
            color: #2a7fd6;
            font-size: 13px;
            line-height: 1.2;
            text-decoration: none;
            cursor: pointer;
        }
        .job-application-version-history .version-action-button.primary {
            background: #2663eb;
            color: #fff;
        }
        .job-application-version-history .version-header-button {
            width: auto;
            min-height: 42px;
            padding: 9px 24px;
            font-size: 15px;
            line-height: 1.2;
        }
    </style>

    <div class="job-application-version-history">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="m-0"><b>Version History</b></h3>
            <div class="d-flex gap-2 flex-wrap">
                @if(!empty($showCreateCorrectedVersionButton))
                    <button type="submit"
                        form="create-corrected-version-form"
                        class="blue-big-button version-header-button"
                        data-keep-enabled="true">
                        Create Corrected Version
                    </button>
                @endif
                @if(!empty($showMarkFinalVersionButton) && !empty($selectedJobApplicationVersionId))
                    <button type="submit"
                        form="mark-final-version-form-{{ $selectedJobApplicationVersionId }}"
                        class="blue-outline-big-button version-header-button"
                        data-keep-enabled="true">
                        Mark as Final
                    </button>
                @endif
            </div>
        </div>

        <div class="version-timeline">
            @if(!empty($showUnsavedOriginalVersion))
                <div class="version-item active">
                    <h4>Original Version</h4>
                    <p>{{ optional($rootJobApplication->updated_at ?? $rootJobApplication->created_at)->format('d-m-Y H:i:s') }}</p>
                    <p>Candidate</p>
                    <p>Locked</p>
                </div>
            @else
                @foreach($jobApplicationVersions as $version)
                    <div class="version-item {{ !empty($selectedJobApplicationVersionId) && $selectedJobApplicationVersionId == $version->id ? 'active' : '' }}">
                        <h4>{{ $version->is_final ? 'Final Version' : ($version->version_number == 1 ? 'Original Version' : 'Corrected Version ' . ($version->version_number - 1)) }}</h4>
                        <p>{{ optional($version->edited_at ?? $version->updated_at)->format('d-m-Y H:i:s') }}</p>
                        <p>{{ optional($version->editor)->name ?? 'Candidate' }}</p>
                        <p>{{ $version->is_final ? 'Final locked copy' : ($version->is_locked ? 'Locked' : 'Editable correction') }}</p>
                        <div class="version-actions">
                            <a class="version-action-button primary" href="{{ url('/recruitment/candidates/job/' . $data->candidate_uuid . '?application_version=' . $version->version_number) }}">View</a>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>

        @if(!empty($showFieldChanges) && !empty($selectedJobApplicationVersion))
            @php
                $fieldChangeRows = array_values($fieldChanges ?? []);
                $fieldChangesTableId = 'field-changes-table-' . $selectedJobApplicationVersion->id;
                $fieldChangesPaginationId = 'field-changes-pagination-' . $selectedJobApplicationVersion->id;
                $dateFields = ['dob', 'date_of_birth', 'date'];
                $yesNoFields = [
                    'current_dbs',
                    'work_with_children',
                    'any_member_exist',
                    'disqualified',
                    'safeguarding_concerns',
                    'risk_register',
                    'disciplinary_actions',
                    'shift_work',
                    'disadvantage',
                    'criminal_prosecution',
                    'criminal_history_disclosure',
                ];
                $fieldValueLabels = [
                    'driver_licence' => [
                        '0' => 'No',
                        '1' => 'Yes - Manual Only',
                        '2' => 'Yes - Automatically Only',
                        '3' => 'Yes - Both Manual & Automatic',
                    ],
                ];
                $formatChangeValue = function ($field, $value) use ($dateFields, $yesNoFields, $fieldValueLabels) {
                    if (is_array($value)) {
                        return json_encode($value);
                    }

                    if (isset($fieldValueLabels[$field][(string) $value])) {
                        return $fieldValueLabels[$field][(string) $value];
                    }

                    if (in_array($field, $yesNoFields, true)) {
                        if ((string) $value === '1') {
                            return 'Yes';
                        }

                        if ((string) $value === '0') {
                            return 'No';
                        }
                    }

                    if (in_array($field, $dateFields, true) && !empty($value) && $value !== '0000-00-00') {
                        try {
                            return \Carbon\Carbon::parse($value)->format('d-m-Y');
                        } catch (\Exception $e) {
                            return $value;
                        }
                    }

                    return $value;
                };
            @endphp

            <h4 class="mt-4 mb-2">
                {{ $selectedJobApplicationVersion->is_final ? 'Overall changes for final version' : 'Field Changes for ' . ($selectedJobApplicationVersion->version_number == 1 ? 'Original Version' : 'Corrected Version ' . ($selectedJobApplicationVersion->version_number - 1)) }}
            </h4>
            @if(count($fieldChangeRows))
                <p class="field-change-count">Total field changes: {{ count($fieldChangeRows) }}</p>
            @endif
            <table class="audit-table" id="{{ $fieldChangesTableId }}">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Field</th>
                        <th>Old Value</th>
                        <th>New Value</th>
                        <th>Editor</th>
                        <th>Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($fieldChangeRows as $index => $change)
                        <tr data-field-change-row>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ ucwords(str_replace('_', ' ', $change['field'])) }}</td>
                            <td>{{ $formatChangeValue($change['field'], $change['old']) }}</td>
                            <td>{{ $formatChangeValue($change['field'], $change['new']) }}</td>
                            <td>{{ $change['editor'] }}</td>
                            <td>{{ $change['timestamp'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">No field changes recorded for this version yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            @if($selectedJobApplicationVersion->version_number > 1)
                <div class="mt-4 p-3" style="border: 1px solid #e5e5e5; border-radius: 6px;text-align: justify;">
                    <h4 class="mb-3">Revision Notes</h4>
                    <p><strong>Reason and confirmation details:</strong><br>{{ $selectedJobApplicationVersion->revision_notes ?? 'Not recorded' }}</p>
                    <p><strong>Candidate confirmed by:</strong> {{ $selectedJobApplicationVersion->revision_confirmation_method ?? 'Not recorded' }}</p>
                    <p><strong>Confirmation received date:</strong>
                        {{ !empty($selectedJobApplicationVersion->revision_confirmation_received_at) ? date(config('choicescrm.date_format_forms'), strtotime($selectedJobApplicationVersion->revision_confirmation_received_at)) : 'Not recorded' }}
                    </p>
                    @if(!empty($selectedJobApplicationVersion->revision_evidence_file))
                        @php
                            $evidenceAllowed = ['doc', 'docx'];
                            $evidenceExt = pathinfo($selectedJobApplicationVersion->revision_evidence_file, PATHINFO_EXTENSION);
                            $evidencePath = 'crm/candidates/' . $selectedJobApplicationVersion->company_id . '/' . $selectedJobApplicationVersion->revision_evidence_file;
                        @endphp
                        <p class="mb-0">
                            <strong>Evidence:</strong>
                            @if(in_array($evidenceExt, $evidenceAllowed))
                                <a href="http://view.officeapps.live.com/op/view.aspx?src={{ url($evidencePath) }}" target="_blank">
                                    {{ $selectedJobApplicationVersion->revision_evidence_original_name ?? basename($selectedJobApplicationVersion->revision_evidence_file) }}
                                </a>
                            @else
                                <a href="{{ url($evidencePath) }}" target="_blank">
                                    {{ $selectedJobApplicationVersion->revision_evidence_original_name ?? basename($selectedJobApplicationVersion->revision_evidence_file) }}
                                </a>
                            @endif
                        </p>
                    @endif
                </div>
            @endif
            @if(count($fieldChangeRows) > 5)
                <div class="field-change-pagination" id="{{ $fieldChangesPaginationId }}"></div>
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        var table = document.getElementById(@json($fieldChangesTableId));
                        var pagination = document.getElementById(@json($fieldChangesPaginationId));

                        if (!table || !pagination) {
                            return;
                        }

                        var rows = Array.prototype.slice.call(table.querySelectorAll('[data-field-change-row]'));
                        var perPage = 5;
                        var currentPage = 1;
                        var totalPages = Math.ceil(rows.length / perPage);

                        function makeButton(label, page, disabled, active) {
                            var element = document.createElement('button');
                            element.type = 'button';
                            element.textContent = label;
                            element.disabled = disabled;

                            if (active) {
                                element.className = 'active';
                            }

                            element.addEventListener('click', function () {
                                currentPage = page;
                                render();
                            });

                            return element;
                        }

                        function render() {
                            var start = (currentPage - 1) * perPage;
                            var end = start + perPage;

                            rows.forEach(function (row, index) {
                                row.style.display = index >= start && index < end ? 'table-row' : 'none';
                            });

                            pagination.innerHTML = '';
                            pagination.appendChild(makeButton('Previous', Math.max(currentPage - 1, 1), currentPage === 1, false));

                            for (var page = 1; page <= totalPages; page++) {
                                pagination.appendChild(makeButton(page, page, false, page === currentPage));
                            }

                            pagination.appendChild(makeButton('Next', Math.min(currentPage + 1, totalPages), currentPage === totalPages, false));
                        }

                        render();
                    });
                </script>
            @endif
        @endif
    </div>
@endif