@extends('layouts.app')

@section('title', 'Version Comparison · ' . $document->title . ' · ' . config('app.name'))
@section('page-title', 'Version Comparison')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h2 class="h5 fw-semibold mb-1">{{ $document->title }} &middot; Version Comparison</h2>
            <span class="text-secondary small">
                Original vs Version {{ $currentVersion->version_number }} (Edited by {{ $currentVersion->editor->name }} on {{ $currentVersion->created_at->format('d M Y, h:i A') }})
            </span>
        </div>
        <a href="{{ route('documents.show', $document) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i> Back to Document</a>
    </div>

    <div class="d-flex align-items-center gap-3 small text-secondary mb-3">
        <span><span class="d-inline-block rounded-1" style="width:.7rem;height:.7rem;background:#1e824c;"></span> Added</span>
        <span><span class="d-inline-block rounded-1" style="width:.7rem;height:.7rem;background:#c0392b;"></span> Removed</span>
        <span class="fst-italic">Left: Original document | Right: Edited version with tracked changes</span>
    </div>

    <div id="compare-status" class="text-secondary small mb-2">Loading documents…</div>
    
    <div class="compare-container d-flex gap-2" style="height: 75vh;">
        <!-- Left Panel: Original Document -->
        <div class="compare-panel border rounded bg-white" style="flex: 1; overflow: auto;">
            <div class="p-2 border-bottom bg-light sticky-top">
                <h6 class="mb-0 small fw-semibold">Original Document</h6>
            </div>
            <div id="compare-original"
                 class="compare-panel-content"
                 data-document-url="{{ route('documents.download', [$document, $originalVersion->version_number]) }}"
                 data-file-name="{{ \Illuminate\Support\Str::slug($document->title) }}_original.docx"
            ></div>
        </div>

        <!-- Right Panel: Edited Version with Track Changes -->
        <div class="compare-panel border rounded bg-white" style="flex: 1; overflow: auto;">
            <div class="p-2 border-bottom bg-light sticky-top">
                <h6 class="mb-0 small fw-semibold">Edited Version (v{{ $currentVersion->version_number }})</h6>
            </div>
            <div id="compare-edited"
                 class="compare-panel-content"
                 data-document-url="{{ route('documents.download', [$document, $currentVersion->version_number]) }}"
                 data-file-name="{{ \Illuminate\Support\Str::slug($document->title) }}_v{{ $currentVersion->version_number }}.docx"
            ></div>
        </div>
    </div>

    @push('scripts')
        @vite(['resources/js/document-compare.js'])
    @endpush

    <style>
        .compare-container {
            display: flex;
            gap: 0.5rem;
        }

        .compare-panel {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .compare-panel-content {
            flex: 1;
            overflow: auto;
        }

        @media (max-width: 1024px) {
            .compare-container {
                flex-direction: column;
                height: auto;
            }

            .compare-panel {
                min-height: 400px;
            }
        }

        /* Ensure text doesn't overflow in panels */
        .compare-panel-content :deep(p),
        .compare-panel-content :deep(div) {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
    </style>
@endsection