@extends('layouts.app')

@section('title', $document->title)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $document->title }}</h1>
                <div class="flex items-center space-x-2">
                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                        {{ $document->category_label }}
                    </span>
                    @if($document->subcategory)
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                        {{ $document->subcategory_label }}
                    </span>
                    @endif
                </div>
            </div>
            <i class="fas fa-file-pdf text-red-600 text-5xl"></i>
        </div>

        @if($document->description)
        <p class="text-gray-600 mb-4">{{ $document->description }}</p>
        @endif

        <div class="flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-6">
            @if($document->document_date)
            <span><i class="fas fa-calendar-alt mr-1"></i>{{ $document->document_date->locale('id')->translatedFormat('d F Y') }}</span>
            @endif
            <span><i class="fas fa-eye mr-1"></i>{{ $document->views }} views</span>
            <span><i class="fas fa-download mr-1"></i>{{ $document->downloads }} downloads</span>
            <span><i class="fas fa-file mr-1"></i>{{ $document->formatted_file_size }}</span>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('documents.share', $document->id) }}"
               class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                <i class="fas fa-share-alt mr-2"></i>Share dengan QR Code
            </a>
            <a href="{{ route('documents.view', $document->id) }}" target="_blank"
               class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-eye mr-2"></i>Lihat PDF
            </a>
            <a href="{{ route('documents.download', $document->id) }}"
               class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-download mr-2"></i>Download PDF
            </a>
            <a href="{{ route('documents.index', ['category' => $document->category]) }}"
               class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Share Section with QR Code -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">
            <i class="fas fa-share-alt text-blue-600 mr-2"></i>Bagikan Dokumen
        </h2>
        
        <div class="grid md:grid-cols-2 gap-6 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Link Share</label>
                <div class="flex">
                    <input type="text" 
                           id="shareUrl" 
                           value="{{ $shareUrl }}" 
                           readonly
                           class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button onclick="copyToClipboard()" 
                            class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-2">Klik tombol copy untuk menyalin link</p>
            </div>
            
            <div class="text-center">
                <label class="block text-sm font-medium text-gray-700 mb-2">QR Code</label>
                <div class="bg-white p-4 rounded-lg border-2 border-gray-200 inline-block">
                    <div class="w-48 h-48 flex items-center justify-center">
                        <div style="width: 192px; height: 192px;">
                            {!! $qrCode !!}
                        </div>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-2">Scan QR code untuk membuka dokumen</p>
            </div>
        </div>
        
        <div class="text-center">
            <a href="{{ route('documents.share', $document->id) }}"
               class="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                <i class="fas fa-external-link-alt mr-2"></i>Buka Halaman Share (PDF + QR Code)
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyToClipboard() {
    const input = document.getElementById('shareUrl');
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices
    
    navigator.clipboard.writeText(input.value).then(function() {
        alert('Link berhasil disalin!');
    }, function(err) {
        // Fallback for older browsers
        document.execCommand('copy');
        alert('Link berhasil disalin!');
    });
}
</script>
@endpush
@endsection