@extends('layouts.app')

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

@section('content')
    @php
        $ext = strtolower($document->original_file_extension);
        $latestVersionNumber = $document->latestVersion()?->version_number;
    @endphp

    <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 }}</h2>
            <span class="text-secondary small">
                Read-only preview
                @if($latestVersionNumber) &middot; Version {{ $latestVersionNumber }} @endif
            </span>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('documents.download', $document) }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-download"></i> Download
            </a>
            <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>

    @if($ext === 'pdf')
        <iframe src="{{ route('documents.stream', $document) }}"
                title="{{ $document->title }}"
                class="border rounded bg-white w-100"
                style="height: 82vh;"></iframe>
    @elseif($ext === 'docx')
        <div id="changes-status" class="text-secondary small mb-2">Loading document&hellip;</div>
        <div id="changes-root"
             class="border rounded bg-white"
             style="height: 82vh; overflow: auto;"
             data-document-url="{{ route('documents.download', [$document, $latestVersionNumber]) }}"
             data-file-name="{{ \Illuminate\Support\Str::slug($document->title) }}.docx"></div>
    @else
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="bi bi-file-earmark-text text-secondary" style="font-size: 2.5rem;"></i>
                <p class="mb-3 mt-2 text-secondary">This file type ({{ strtoupper($ext) }}) can&rsquo;t be previewed in the browser.</p>
                <a href="{{ route('documents.download', $document) }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-download"></i> Download to view
                </a>
            </div>
        </div>
    @endif
@endsection

@if(strtolower($document->original_file_extension) === 'docx')
    @push('scripts')
        @vite(['resources/js/document-changes.js'])
    @endpush
@endif