@extends('layouts.app')
@section('title', 'Compare Plan Versions')

@push('stylesheets')
<style>
    .plan-compare-page { min-height: 100%; padding-bottom: 2rem; }
    .plan-compare-header-card { border-radius: 12px; margin-bottom: 1rem; }
    .plan-compare-toolbar { padding: 1.25rem 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; gap: 1.25rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); }
    .plan-compare-toolbar .form-inline select { min-width: 200px; border-radius: 8px; }
    .plan-compare-toolbar .version-arrow { font-size: 1.25rem; margin: 0 0.5rem; color: var(--app-primary, var(--bs-primary)); }
    .plan-compare-toolbar-toggle-group { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; padding-left: 1.5rem; border-left: 1px solid var(--bs-border-color, #dee2e6); }
    .plan-compare-toolbar-toggle-group .custom-control-label { font-weight: 600; margin-left: 0.25rem; min-width: 2rem; }
    .plan-compare-toolbar .custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--app-primary, var(--bs-primary)); border-color: var(--app-primary, var(--bs-primary)); }
    .plan-compare-toolbar .custom-control.custom-switch .custom-control-label::before { border-radius: 2rem; transition: background-color 0.2s, border-color 0.2s; }
    .plan-compare-toolbar .custom-control.custom-switch .custom-control-label::after { border-radius: 50%; transition: transform 0.2s; }
    .plan-compare-apply-btn { padding: 0.6rem 1.5rem !important; border-radius: 10px; font-weight: 600; font-size: 0.9rem; }
    .plan-compare-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
    .plan-compare-card { border-radius: 12px; border: 1px solid var(--bs-border-color, #dee2e6); background: var(--bs-body-bg, #fff); padding: 1.25rem; height: 100%; }
    .plan-compare-card-version-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; color: var(--app-primary, var(--bs-primary)); }
    .plan-compare-scheme-wrapper { margin-bottom: 1.5rem; }
    .plan-compare-scheme-title { font-size: 1rem; margin-bottom: 1rem; color: var(--bs-body-color); }
    .plan-compare-scheme-identifier { font-weight: 600; margin-right: 0.5rem; color: var(--app-primary, var(--bs-primary)); }
    .plan-compare-scheme-block[data-change-type="added"] .plan-compare-card { background: var(--bs-success-bg-subtle, rgba(40, 167, 69, 0.1)); border-color: var(--bs-success-border-subtle, rgba(40, 167, 69, 0.3)); }
    .plan-compare-scheme-block[data-change-type="removed"] .plan-compare-card { background: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.1)); border-color: var(--bs-danger-border-subtle, rgba(220, 53, 69, 0.3)); }
    .plan-compare-scheme-block[data-change-type="updated"] { position: relative; }
    .plan-compare-field-row { margin-bottom: 1rem; }
    .plan-compare-field-row:last-child { margin-bottom: 0; }
    .plan-compare-meta-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; color: var(--bs-secondary-color); }
    .plan-compare-field-value { padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.9rem; background: var(--bs-tertiary-bg, rgba(0,0,0,0.03)); color: var(--bs-body-color); border: 1px solid var(--bs-border-color-translucent, transparent); }
    .plan-compare-field-value.plan-compare-cell-changed { background: color-mix(in srgb, var(--app-primary, var(--bs-primary)) 18%, var(--bs-body-bg, #fff)); color: var(--bs-body-color); border-color: var(--app-primary, var(--bs-primary)); }
    .plan-compare-footer-section { margin-top: 2rem; padding: 1.5rem; border-radius: 12px; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); }
    .plan-compare-footer-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
    .plan-compare-footer-actions .btn { padding: 0.75rem 2rem; border-radius: 10px; font-weight: 600; min-width: 220px; }
    .dark-mode .plan-compare-toolbar,
    .dark-mode .plan-compare-footer-section { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
    .dark-mode .plan-compare-card { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
    .dark-mode .plan-compare-field-value { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
    .dark-mode .plan-compare-field-value.plan-compare-cell-changed { background: color-mix(in srgb, var(--app-primary, var(--bs-primary)) 25%, var(--bs-body-bg)); color: var(--bs-body-color); }
    .dark-mode .plan-compare-scheme-block[data-change-type="added"] .plan-compare-card { background: color-mix(in srgb, var(--bs-success) 15%, var(--bs-body-bg)); border-color: var(--bs-success); }
    .dark-mode .plan-compare-scheme-block[data-change-type="removed"] .plan-compare-card { background: color-mix(in srgb, var(--bs-danger) 15%, var(--bs-body-bg)); border-color: var(--bs-danger); }
</style>
@endpush

@section('contents')
<section class="content plan-compare-page">
    <div class="container-fluid">
        {{-- Header --}}
        <div class="card plan-compare-header-card">
            <div class="card-body d-flex flex-wrap align-items-center justify-content-between py-4 w-100">
                <div>
                    <h3 class="mb-1 font-weight-bold" style="font-size: 1.5rem;">Compare Plan Versions</h3>
                    <p class="mb-0 text-muted">Comparing differences for Plan #{{ $plan->id }}</p>
                </div>
                <a href="{{ route('plan.index') }}" class="btn btn-light btn-sm px-3 py-2 ml-auto" style="border-radius: 8px;"><i class="fas fa-arrow-left mr-2"></i>Back to Plans</a>
            </div>
        </div>

        {{-- Toolbar --}}
        <div class="plan-compare-toolbar d-flex flex-wrap align-items-center gap-3">
            <div class="form-inline align-items-center">
                <label for="compare-version-a" class="mr-2 font-weight-bold small text-uppercase text-secondary">Version A</label>
                <select id="compare-version-a" class="form-control form-control-sm">
                    @foreach($versions as $v)
                        <option value="{{ $v->id }}" {{ (int) $v->id === (int) $versionAId ? 'selected' : '' }}>Plan #{{ $v->plan_id }} · v{{ $v->version_no }} — {{ $v->created_at ? $v->created_at->format('d-m-y H:i:s') : '—' }}</option>
                    @endforeach
                </select>
            </div>
            <span class="version-arrow" aria-hidden="true">&raquo;&raquo;</span>
            <div class="form-inline align-items-center">
                <label for="compare-version-b" class="mr-2 font-weight-bold small text-uppercase text-secondary">Version B</label>
                <select id="compare-version-b" class="form-control form-control-sm">
                    @foreach($versions as $v)
                        <option value="{{ $v->id }}" {{ (int) $v->id === (int) $versionBId ? 'selected' : '' }}>Plan #{{ $v->plan_id }} · v{{ $v->version_no }} — {{ $v->created_at ? $v->created_at->format('d-m-y H:i:s') : '—' }}</option>
                    @endforeach
                </select>
            </div>
            <div class="plan-compare-toolbar-toggle-group">
                <label class="mb-0 small font-weight-bold text-secondary">Show changes only</label>
                <div class="custom-control custom-switch mb-0">
                    <input type="checkbox" class="custom-control-input" id="compare-changes-only">
                    <label class="custom-control-label" for="compare-changes-only">Off</label>
                </div>
                <div class="custom-control custom-switch mb-0 ml-2 pl-2 border-left border-secondary" style="border-left-width: 1px !important;">
                    <input type="checkbox" class="custom-control-input pms-scheme-full-name-toggle" id="pms_scheme_fn_plan_compare">
                    <label class="custom-control-label small font-weight-bold text-secondary" for="pms_scheme_fn_plan_compare">Full scheme name</label>
                </div>
                <a href="#" id="compare-apply-btn" class="btn btn-primary plan-compare-apply-btn ml-3">Apply Comparison</a>
            </div>
        </div>

        {{-- Schemes & Visits --}}
        <p class="plan-compare-section-title text-muted">Schemes &amp; visits</p>
        <div id="plan-compare-no-changes-msg" class="plan-compare-no-changes alert alert-info text-center py-4 mb-0" role="alert" style="display: none;">
            <i class="fas fa-info-circle mr-2"></i>No changes between the selected versions.
        </div>
        <div id="plan-compare-schemes-container">
        @php
            $schemesAById = collect($payload['schemes_a'])->keyBy('scheme_id');
            $schemesBById = collect($payload['schemes_b'])->keyBy('scheme_id');
            $allSchemeIds = $schemesAById->keys()->merge($schemesBById->keys())->unique()->sort()->values();
            $changeFlags = $payload['scheme_change_flags'] ?? [];
            $changes = collect($payload['changes'] ?? [])->keyBy('scheme_id');
        @endphp
        @foreach($allSchemeIds as $sid)
            @php
                $rowA = $schemesAById->get($sid);
                $rowB = $schemesBById->get($sid);
                $changeType = $changeFlags[$sid] ?? null;
                $changeEntry = $changes->get($sid);
                $badgeLabel = $changeType === 'added' ? 'ADDED IN ' . $versionALabel : ($changeType === 'removed' ? 'ADDED IN ' . $versionBLabel : 'UPDATED');
                $schemeCode = $rowA['scheme_code'] ?? $rowB['scheme_code'] ?? ('#' . $sid);
                $schemeName = $rowA['scheme_name'] ?? $rowB['scheme_name'] ?? '—';
                $delta = $changeEntry['delta'] ?? [];
            @endphp
            <div class="plan-compare-scheme-wrapper plan-compare-scheme-block" data-scheme-id="{{ $sid }}" data-change-type="{{ $changeType ?? '' }}">
                <div class="plan-compare-scheme-title d-flex align-items-center flex-wrap">
                    <span class="plan-compare-scheme-identifier">{{ $schemeCode }}</span>
                    <x-scheme-name-table-display :fullName="$schemeName" />
                    @if($changeType)
                        <span class="badge badge-{{ $changeType === 'added' ? 'success' : ($changeType === 'removed' ? 'danger' : 'warning') }} ml-2">{{ $badgeLabel }}</span>
                    @endif
                </div>

                @if($changeType === 'added')
                    <div class="row">
                        <div class="col-12">
                            <div class="plan-compare-card">
                                <p class="mb-0 text-muted">This scheme was not present in {{ $versionBLabel }}.</p>
                            </div>
                        </div>
                    </div>
                @elseif($changeType === 'removed')
                    <div class="row">
                        <div class="col-12">
                            <div class="plan-compare-card">
                                <p class="mb-0 text-muted">This scheme was not present in {{ $versionALabel }}.</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0 position-relative">
                            <!-- @if($changeType === 'updated')
                                <span class="badge badge-warning plan-compare-badge-updated">UPDATED</span>
                            @endif -->
                            <div class="plan-compare-card">
                                <div class="plan-compare-card-version-label">{{ $versionALabel }}</div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visit_location']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visit location</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visit_location']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowA['visit_location'] ?? '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visit_date']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visit date</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visit_date']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowA['visit_date'] ?? '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['remarks']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Remarks</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['remarks']) ? 'plan-compare-cell-changed' : '' }}">@if(filled($rowA['remarks'] ?? null)){!! nl2br(e((string) $rowA['remarks'])) !!}@else—@endif</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['physical_progress']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Physical progress</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['physical_progress']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowA['physical_progress'] !== null ? $rowA['physical_progress'] . '%' : '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['financial_progress']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Financial progress</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['financial_progress']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowA['financial_progress'] !== null ? $rowA['financial_progress'] . '%' : '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visiting_team']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visiting team</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visiting_team']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowA['visiting_team_names'] ?? '—' }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="plan-compare-card">
                                <div class="plan-compare-card-version-label">{{ $versionBLabel }}</div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visit_location']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visit location</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visit_location']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowB['visit_location'] ?? '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visit_date']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visit date</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visit_date']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowB['visit_date'] ?? '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['remarks']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Remarks</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['remarks']) ? 'plan-compare-cell-changed' : '' }}">@if(filled($rowB['remarks'] ?? null)){!! nl2br(e((string) $rowB['remarks'])) !!}@else—@endif</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['physical_progress']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Physical progress</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['physical_progress']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowB['physical_progress'] !== null ? $rowB['physical_progress'] . '%' : '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['financial_progress']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Financial progress</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['financial_progress']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowB['financial_progress'] !== null ? $rowB['financial_progress'] . '%' : '—' }}</div>
                                </div>
                                <div class="plan-compare-field-row plan-compare-scheme-row {{ !empty($delta['visiting_team']) ? 'plan-compare-row-has-change' : '' }}">
                                    <span class="plan-compare-meta-label d-block mb-1">Visiting team</span>
                                    <div class="plan-compare-field-value {{ !empty($delta['visiting_team']) ? 'plan-compare-cell-changed' : '' }}">{{ $rowB['visiting_team_names'] ?? '—' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endforeach

        @if($allSchemeIds->isEmpty())
            <div class="plan-compare-card py-4">
                <p class="text-muted mb-0 text-center">No schemes in either version.</p>
            </div>
        @endif
        </div>

        {{-- Footer: Proceed buttons (visibility and action set from permissions / controller) --}}
        @if($showApproveA || $showApproveB)
            <div class="plan-compare-footer-section">
                <div class="plan-compare-footer-actions">
                    @if($showApproveA)
                        <form method="POST" action="{{ route('plan.' . $submitAction, $compareSideA['plan_id']) }}" class="d-inline">
                            @csrf
                            <input type="hidden" name="version_no" value="{{ $compareSideA['version_no'] }}">
                            <button type="submit" class="btn btn-primary">Proceed with side A ({{ $versionALabel }})</button>
                        </form>
                    @endif
                    @if($showApproveB)
                        <form method="POST" action="{{ route('plan.' . $submitAction, $compareSideB['plan_id']) }}" class="d-inline">
                            @csrf
                            <input type="hidden" name="version_no" value="{{ $compareSideB['version_no'] }}">
                            <button type="submit" class="btn btn-primary">Proceed with side B ({{ $versionBLabel }})</button>
                        </form>
                    @endif
                </div>
            </div>
        @endif
    </div>
</section>
@endsection

@push('scripts')
<script>
(function() {
    var applyBtn = document.getElementById('compare-apply-btn');
    var selectA = document.getElementById('compare-version-a');
    var selectB = document.getElementById('compare-version-b');
    var changesOnly = document.getElementById('compare-changes-only');
    var changesOnlyLabel = document.querySelector('label[for="compare-changes-only"]');

    if (applyBtn && selectA && selectB) {
        applyBtn.addEventListener('click', function(e) {
            e.preventDefault();
            var url = '{{ route("plan.compare", $plan->id) }}';
            var params = new URLSearchParams();
            params.set('va', selectA.value);
            params.set('vb', selectB.value);
            window.location.href = url + '?' + params.toString();
        });
    }

    if (changesOnly && changesOnlyLabel) {
        var noChangesMsg = document.getElementById('plan-compare-no-changes-msg');
        changesOnly.addEventListener('change', function() {
            var showChangesOnly = this.checked;
            changesOnlyLabel.textContent = showChangesOnly ? 'On' : 'Off';
            document.querySelectorAll('.plan-compare-scheme-block').forEach(function(el) {
                var changeType = el.getAttribute('data-change-type');
                el.style.display = showChangesOnly ? (changeType ? '' : 'none') : '';
            });
            document.querySelectorAll('.plan-compare-scheme-row').forEach(function(row) {
                var block = row.closest('.plan-compare-scheme-block');
                if (block && (block.getAttribute('data-change-type') === 'added' || block.getAttribute('data-change-type') === 'removed')) return;
                row.style.display = showChangesOnly ? (row.classList.contains('plan-compare-row-has-change') ? '' : 'none') : '';
            });
            if (noChangesMsg) {
                if (showChangesOnly) {
                    var hasVisible = false;
                    document.querySelectorAll('.plan-compare-scheme-block').forEach(function(el) {
                        if (el.style.display !== 'none') hasVisible = true;
                    });
                    noChangesMsg.style.display = hasVisible ? 'none' : 'block';
                } else {
                    noChangesMsg.style.display = 'none';
                }
            }
        });
    }
})();
</script>
@endpush