@extends('layouts.app')

@section('title', 'View Attachment')

@section('content')
<div class="w-full max-w-8xl mx-auto bg-white rounded-lg shadow-lg p-4 md:p-8">

    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-800">
         View Attachment
        </h1>
        <a href="javascript:history.back()" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
            ← Back
        </a>
    </div>

    <!-- Document Info -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <p class="text-sm text-gray-600">Student Name</p>
                <p class="font-semibold">{{ $leaveRequest->student->user->name ?? '-' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600">Leave Period</p>
                <p class="font-semibold">
                    @php
                        $from = $leaveRequest->from_date;
                        $to = $leaveRequest->to_date ?? $leaveRequest->from_date;
                    @endphp
                    {{ $from?->format('d M Y') ?? '-' }} to {{ $to?->format('d M Y') ?? '-' }}
                </p>
            </div>
            <div>
                <p class="text-sm text-gray-600">File Name</p>
                <p class="font-semibold text-sm">{{ basename($leaveRequest->attachment) }}</p>
            </div>
        </div>
    </div>

    <!-- File Display Area -->
    <div class="bg-gray-100 rounded-lg overflow-hidden mb-6">
        <div id="pdf-container" style="width: 100%; height: 600px; display: none;">
            <canvas id="pdf-canvas" style="width: 100%; border: 1px solid #ddd;"></canvas>
        </div>

        <div id="image-container" style="display: none;" class="text-center p-6">
            <img id="image-preview" src="" alt="Document Preview" class="max-w-full h-auto mx-auto" style="max-height: 600px;">
        </div>

        <div id="text-container" style="display: none;" class="p-6 bg-white">
            <pre id="text-preview" style="overflow-x: auto; font-family: monospace; font-size: 14px;"></pre>
        </div>

        <div id="unsupported-container" style="display: none;" class="p-6 text-center">
            <p class="text-gray-600 mb-4">Preview not available for this file type</p>
            <a href="{{ route('leave.download-attachment', $leaveRequest) }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                 Download Instead
            </a>
        </div>

        <div id="loading" class="p-6 text-center">
            <p class="text-gray-600">Loading document...</p>
        </div>
    </div>

    <!-- Download Button -->
    <div class="flex gap-3 justify-center">
        <a href="{{ route('leave.download-attachment', $leaveRequest) }}" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 font-semibold">
             Download
        </a>
        <a href="javascript:window.print()" class="bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-700 font-semibold">
         Print
        </a>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filePath = '{{ asset('storage/' . $leaveRequest->attachment) }}';
        const extension = filePath.split('.').pop().toLowerCase();

        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension)) {
            // Show image
            document.getElementById('loading').style.display = 'none';
            document.getElementById('image-container').style.display = 'block';
            document.getElementById('image-preview').src = filePath;
        } else if (extension === 'pdf') {
            // Show PDF
            showPDF(filePath);
        } else if (['txt', 'log', 'csv'].includes(extension)) {
            // Show text file
            showText(filePath);
        } else {
            // Unsupported
            document.getElementById('loading').style.display = 'none';
            document.getElementById('unsupported-container').style.display = 'block';
        }
    });

    function showPDF(url) {
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(pdf => {
            const canvas = document.getElementById('pdf-canvas');
            const context = canvas.getContext('2d');

            // Render first page
            pdf.getPage(1).then(page => {
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext).promise.then(() => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('pdf-container').style.display = 'block';
                });
            });
        }).catch(error => {
            console.error('Error loading PDF:', error);
            document.getElementById('loading').style.display = 'none';
            document.getElementById('unsupported-container').style.display = 'block';
        });
    }

    function showText(url) {
        fetch(url)
            .then(response => response.text())
            .then(text => {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('text-container').style.display = 'block';
                document.getElementById('text-preview').textContent = text.substring(0, 5000);
                if (text.length > 5000) {
                    document.getElementById('text-preview').textContent += '\n\n... (truncated)';
                }
            })
            .catch(() => {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('unsupported-container').style.display = 'block';
            });
    }
</script>

<style>
    @media print {
        .flex, #pdf-container, #image-container, #text-container, #unsupported-container {
            max-height: none;
            height: auto;
        }
        img {
            max-width: 100%;
        }
    }
</style>
@endsection