@if((isset($educationReferenceVersions) && $educationReferenceVersions->count()) || !empty($showUnsavedEducationReferenceOriginalVersion))
    <style>
        .education-reference-version-history {
            width: 100%;
            margin: 0 0 25px;
            /* padding: 0 0 20px; */
            border-bottom: 1px solid #e5e5e5;
        }
        .education-reference-version-history .version-timeline {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            padding: 12px 0 18px;
            /* border-bottom: 1px solid #e5e5e5; */
        }
        .education-reference-version-history .version-item {
            min-width: 210px;
            padding-left: 24px;
            position: relative;
        }
        .education-reference-version-history .version-item:before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #8ec63f;
            position: absolute;
            left: 0;
            top: 5px;
        }
        .education-reference-version-history .version-item.active:before {
            background: #2663eb;
        }
        .education-reference-version-history .version-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .education-reference-version-history .version-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: .4rem 1rem;
            border: 1px solid #2a7fd6;
            border-radius: .5rem;
            background: #fff;
            color: #2a7fd6;
            font-size: 13px;
            line-height: 1.2;
            text-decoration: none;
            cursor: pointer;
        }
        .education-reference-version-history .version-action-button.primary {
            background: #2663eb;
            color: #fff;
        }
        .education-reference-version-history .audit-table {
            width: 100%;
            margin-top: 12px;
            border-collapse: collapse;
        }
        .education-reference-version-history .audit-table th,
        .education-reference-version-history .audit-table td {
            border: 1px solid #e5e5e5;
            padding: 8px;
            vertical-align: top;
            font-size: 13px;
        }
        .education-reference-version-history .audit-table th {
            background: #f7f7f7;
        }
        .education-reference-version-history .field-change-count {
            margin: 0 0 8px;
            font-size: 13px;
            color: #595959;
        }
    </style>

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

        <div class="version-timeline">
            @if(!empty($showUnsavedEducationReferenceOriginalVersion))
                <div class="version-item active">
                    <h4>Original Version</h4>
                    <p>{{ now()->format('d-m-Y H:i:s') }}</p>
                    <p>Candidate</p>
                    <p>Locked</p>
                </div>
            @else
                @foreach($educationReferenceVersions as $version)
                    <div class="version-item {{ !empty($selectedEducationReferenceVersionId) && $selectedEducationReferenceVersionId == $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>{{ $educationReferenceVersionEditors[$version->edited_by] ?? '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="{{ route('education.link', ['id' => $data->candidate_uuid, 'education_reference_version' => $version->version_number]) }}">View</a>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>

        @if(!empty($showEducationReferenceFieldChanges) && !empty($selectedEducationReferenceVersion))
            @php
                $fieldChangeRows = array_values($educationReferenceFieldChanges ?? []);
            @endphp
            <h4 class="mt-4 mb-2">
                {{ $selectedEducationReferenceVersion->is_final ? 'Field changes for final version' : 'Field Changes for Corrected Version ' . ($selectedEducationReferenceVersion->version_number - 1) }}
            </h4>
            @if(count($fieldChangeRows))
                <p class="field-change-count">Total field changes: {{ count($fieldChangeRows) }}</p>
            @endif
            <table class="audit-table">
                <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>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $change['field'] }}</td>
                            <td>{{ $change['old'] }}</td>
                            <td>{{ $change['new'] }}</td>
                            <td>{{ $change['editor'] }}</td>
                            <td>{{ $change['timestamp'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center">No field changes recorded for this version yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            @if($selectedEducationReferenceVersion->version_number > 1 && !empty($selectedEducationReferenceVersion->revision_notes))
                <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>{{ $selectedEducationReferenceVersion->revision_notes ?? 'Not recorded' }}</p>
                    <p><strong>Candidate confirmed by:</strong> {{ $selectedEducationReferenceVersion->revision_confirmation_method ?? 'Not recorded' }}</p>
                    <p><strong>Confirmation received date:</strong>
                        {{ !empty($selectedEducationReferenceVersion->revision_confirmation_received_at) ? date(config('choicescrm.date_format_forms'), strtotime($selectedEducationReferenceVersion->revision_confirmation_received_at)) : 'Not recorded' }}
                    </p>
                    @if(!empty($selectedEducationReferenceVersion->revision_evidence_file))
                        @php
                            $evidenceAllowed = ['doc', 'docx'];
                            $evidenceExt = pathinfo($selectedEducationReferenceVersion->revision_evidence_file, PATHINFO_EXTENSION);
                            $evidencePath = 'crm/candidates/' . $selectedEducationReferenceVersion->company_id . '/' . $selectedEducationReferenceVersion->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">
                                    {{ $selectedEducationReferenceVersion->revision_evidence_original_name ?? basename($selectedEducationReferenceVersion->revision_evidence_file) }}
                                </a>
                            @else
                                <a href="{{ url($evidencePath) }}" target="_blank">
                                    {{ $selectedEducationReferenceVersion->revision_evidence_original_name ?? basename($selectedEducationReferenceVersion->revision_evidence_file) }}
                                </a>
                            @endif
                        </p>
                    @endif
                </div>
            @endif
        @endif
    </div>
@endif