@php
$pdfUrls = [
    'original' => !empty($surat['file_current']) ? route('surat-keluar-workflow.view-pdf', ['surat' => $surat['id'], 'version' => 'current']) : null,
    'annotated' => !empty($surat['file_annotated']) ? route('surat-keluar-workflow.view-pdf', ['surat' => $surat['id'], 'version' => 'annotated']) : null,
    'numbered' => !empty($surat['file_numbered']) ? route('surat-keluar-workflow.view-pdf', ['surat' => $surat['id'], 'version' => 'numbered']) : null,
];

if (!empty($surat['file_numbered'])) {
    $pdfToShow = 'numbered';
    $pdfVersionLabel = 'Versi Final (dengan Nomor Surat)';
} elseif (!empty($surat['file_annotated'])) {
    if (!empty($surat['signed_at'])) {
        $pdfToShow = 'annotated';
        $pdfVersionLabel = 'Versi Ditandatangani';
    } else {
        $pdfToShow = 'annotated';
        $pdfVersionLabel = 'Anotasi/Koreksi';
    }
} else {
    $pdfToShow = 'current';
    $pdfVersionLabel = 'Versi Asli';
}
@endphp

<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
        <h5 class="mb-0">
            <i class="bi bi-file-earmark-pdf"></i> Dokumen Surat
            @if($pdfToShow === 'numbered')
            <span class="badge bg-success ms-2">
                <i class="bi bi-check-circle"></i> {{ $pdfVersionLabel }}
            </span>
            @elseif($pdfToShow === 'annotated')
            <span class="badge bg-warning text-dark ms-2">
                <i class="bi bi-pencil-square"></i> {{ $pdfVersionLabel }}
            </span>
            @endif
        </h5>
        <div class="btn-group btn-group-sm">
            @if(!empty($surat['file_current']) || !empty($surat['file_annotated']) || !empty($surat['file_numbered']))
            <a href="{{ route('surat-keluar-workflow.download-pdf', $surat) }}"
                class="btn btn-light"
                title="Download">
                <i class="bi bi-download"></i> Download
            </a>
            @endif
        </div>
    </div>

    {{-- Toggle versi (jika ada lebih dari satu) --}}
    @if((!empty($surat->file_annotated) && !empty($surat->file_current)) || !empty($surat->file_numbered))
    <div class="card-header bg-light py-2 border-bottom">
        <div class="btn-group btn-group-sm w-100" role="group">
            
            {{-- Check dengan $surat->property --}}
            @if(!empty($surat->file_numbered))
            <input type="radio" class="btn-check" name="pdfVersionReadonly" id="roShowNumbered" value="numbered" {{ $pdfToShow === 'numbered' ? 'checked' : '' }}>
            <label class="btn btn-outline-success" for="roShowNumbered">
                <i class="bi bi-check-circle"></i> Final (Bernomor)
            </label>
            @endif

            @if(!empty($surat->file_annotated))
            <input type="radio" class="btn-check" name="pdfVersionReadonly" id="roShowAnnotated" value="annotated" {{ $pdfToShow === 'annotated' ? 'checked' : '' }}>
            <label class="btn btn-outline-warning" for="roShowAnnotated">
                <i class="bi bi-pencil-square"></i> Anotasi/Koreksi
            </label>
            @endif

            <input type="radio" class="btn-check" name="pdfVersionReadonly" id="roShowOriginal" value="current" {{ $pdfToShow === 'current' ? 'checked' : '' }}>
            <label class="btn btn-outline-secondary" for="roShowOriginal">
                <i class="bi bi-file-earmark"></i> File Asli
            </label>
        </div>
    </div>
@endif

    <div class="card-body p-0" style="background-color: #525659;">
        @if(!empty($surat['file_current']) || !empty($surat['file_annotated']) || !empty($surat['file_numbered']))
        <div class="pdf-preview-container text-center" style="max-height: 80vh; overflow-y: auto;">
            <div id="ro-pdf-pages-container" class="d-flex flex-column align-items-center py-3"></div>
        </div>
        @else
        <div class="text-center d-flex align-items-center justify-content-center" style="height: 300px;">
            <div class="text-white-50">
                <i class="bi bi-file-earmark-x" style="font-size: 4rem;"></i>
                <p class="mt-3">Tidak ada file yang tersedia</p>
            </div>
        </div>
        @endif
    </div>

    @if(!empty($surat['file_current']) || !empty($surat['file_annotated']) || !empty($surat['file_numbered']))
    <div class="card-footer bg-white">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="ro-pdf-zoom-out">
                    <i class="bi bi-zoom-out"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="ro-pdf-zoom-in">
                    <i class="bi bi-zoom-in"></i>
                </button>
            </div>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
    .ro-pdf-page-canvas {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin: 10px auto;
        display: block;
        max-width: 100%;
        height: auto;
        background: #fff;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        {
            {
                --Sebelum: $surat - > file_current(Eloquent) --
            }
        } {
            {
                --Sesudah: $surat['file_current'](array) --
            }
        }
        @if(empty($surat['file_current']) && empty($surat['file_annotated']) && empty($surat['file_numbered']))
        return;
        @endif

        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        {
            {
                --Sebelum: route('surat-keluar-workflow.view-pdf', ...) --
            }
        } {
            {
                --Sesudah: URL langsung ke S3--
            }
        }
        const pdfUrlOriginal = @json($pdfUrls['original']);
        const pdfUrlAnnotated = @json($pdfUrls['annotated']);
        const pdfUrlNumbered = @json($pdfUrls['numbered']);

        let currentPdfVersion = '{{ $pdfToShow }}';
        let pdfUrl;

        if (currentPdfVersion === 'numbered' && pdfUrlNumbered) {
            pdfUrl = pdfUrlNumbered;
        } else if (currentPdfVersion === 'annotated' && pdfUrlAnnotated) {
            pdfUrl = pdfUrlAnnotated;
        } else {
            pdfUrl = pdfUrlOriginal;
        }

        const pagesContainer = document.getElementById('ro-pdf-pages-container');
        let pdfDoc = null;
        let scale = 1.25;

        function renderAllPages() {
            if (!pdfDoc || !pagesContainer) return;
            pagesContainer.innerHTML = '';

            for (let pageNumber = 1; pageNumber <= pdfDoc.numPages; pageNumber++) {
                pdfDoc.getPage(pageNumber).then(function(page) {
                    const viewport = page.getViewport({
                        scale: scale
                    });

                    const canvas = document.createElement('canvas');
                    canvas.className = 'ro-pdf-page-canvas';
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    pagesContainer.appendChild(canvas);

                    page.render({
                        canvasContext: canvas.getContext('2d'),
                        viewport: viewport
                    });
                });
            }
        }

        function loadPdf(url) {
            if (!url) {
                pagesContainer.innerHTML = '<div class="alert alert-warning m-3">File PDF tidak tersedia.</div>';
                return;
            }

            pagesContainer.innerHTML = '<div class="text-white-50 py-5">Memuat PDF...</div>';

            pdfjsLib.getDocument(url).promise
                .then(function(pdfDoc_) {
                    pdfDoc = pdfDoc_;
                    renderAllPages();
                })
                .catch(function(error) {
                    console.error('Error loading PDF:', error);
                    pagesContainer.innerHTML =
                        '<div class="alert alert-danger m-3">Gagal memuat PDF. ' +
                        '<a href="' + url + '" target="_blank">Klik di sini untuk membuka PDF</a></div>';
                });
        }

        // Version toggle
        document.querySelectorAll('input[name="pdfVersionReadonly"]').forEach(function(radio) {
            radio.addEventListener('change', function() {
                if (this.value === 'numbered' && pdfUrlNumbered) {
                    pdfUrl = pdfUrlNumbered;
                    currentPdfVersion = 'numbered';
                } else if (this.value === 'annotated' && pdfUrlAnnotated) {
                    pdfUrl = pdfUrlAnnotated;
                    currentPdfVersion = 'annotated';
                } else {
                    pdfUrl = pdfUrlOriginal;
                    currentPdfVersion = 'current';
                }
                loadPdf(pdfUrl);
            });
        });

        document.getElementById('ro-pdf-zoom-in')?.addEventListener('click', function() {
            scale += 0.25;
            renderAllPages();
        });

        document.getElementById('ro-pdf-zoom-out')?.addEventListener('click', function() {
            if (scale <= 0.5) return;
            scale -= 0.25;
            renderAllPages();
        });

        loadPdf(pdfUrl);
    });
</script>
@endpush