<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    @hotelSettings
    <title>View Document - {{ hotelName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-green: #198754;
            --dark-green: #0d6e3f;
            --light-green: #d1e7dd;
            --lighter-green: #f0f9f4;
            --accent-green: #20c997;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }
        
        .document-view-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .document-header {
            background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
            color: white;
            padding: 25px 30px;
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .document-header h2 {
            font-size: 2rem;
            margin-bottom: 5px;
        }
        
        .document-info-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            height: fit-content;
            position: sticky;
            top: 20px;
        }
        
        .document-preview-area {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            height: 800px; /* INCREASED from 600px to 800px */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: height 0.3s ease;
        }
        
        /* Fullscreen mode for preview */
        .document-preview-area.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100vh;
            z-index: 9999;
            border-radius: 0;
            padding: 30px;
            background: white;
        }
        
        .document-preview {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
            flex-grow: 1;
            background-color: #f8f9fa;
        }
        
        /* Image preview specific styling */
        .document-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            margin: 0 auto;
            display: block;
        }
        
        .info-label {
            font-weight: 600;
            color: var(--dark-green);
            margin-bottom: 5px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .info-value {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            font-size: 1rem;
        }
        
        .info-value:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .badge-category {
            background-color: var(--primary-green);
            color: white;
            padding: 6px 12px;
            font-size: 0.85rem;
            border-radius: 20px;
        }
        
        .badge-type {
            background-color: var(--accent-green);
            color: white;
            padding: 6px 12px;
            font-size: 0.85rem;
            border-radius: 20px;
        }
        
        .tag-badge {
            background-color: #e9ecef;
            color: #495057;
            padding: 4px 10px;
            margin-right: 5px;
            margin-bottom: 5px;
            font-size: 0.8rem;
            border-radius: 15px;
            display: inline-block;
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .action-buttons .btn {
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 8px;
            flex: 1;
        }
        
        .btn-primary {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-primary:hover {
            background-color: var(--dark-green);
            border-color: var(--dark-green);
        }
        
        .btn-outline-primary {
            color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
            color: white;
        }
        
        .file-icon-large {
            font-size: 5rem;
            color: var(--primary-green);
            text-align: center;
            margin: 30px 0;
        }
        
        .no-preview {
            text-align: center;
            padding: 60px 40px;
            color: #6c757d;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .no-preview h4 {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        
        .preview-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }
        
        .preview-btn {
            width: 100%;
            text-align: left;
            padding: 12px 15px;
        }
        
        .preview-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .preview-switcher {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .preview-switcher .btn-sm {
            padding: 6px 15px;
            font-size: 0.9rem;
            border-radius: 20px;
        }
        
        .viewer-note {
            font-size: 0.85rem;
            color: #6c757d;
            text-align: center;
            margin-top: 10px;
            padding: 5px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        
        .loading-preview {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            flex-direction: column;
            color: var(--primary-green);
        }
        
        .fullscreen-toggle {
            cursor: pointer;
            padding: 6px 12px;
            background: #f8f9fa;
            border-radius: 5px;
            color: var(--primary-green);
            transition: all 0.3s ease;
        }
        
        .fullscreen-toggle:hover {
            background: var(--light-green);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .document-view-container {
                padding: 10px;
            }
            
            .document-preview-area {
                height: 500px;
            }
            
            .document-header h2 {
                font-size: 1.5rem;
            }
            
            .action-buttons .btn {
                flex: auto;
                width: 100%;
            }
        }
        
        /* Text preview styling */
        #textPreview {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            height: 100%;
            overflow: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="document-view-container">
        <!-- Document Header -->
        <div class="document-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <h2 class="mb-2"><i class="fas fa-file-alt me-2"></i>{{ $document->name }}</h2>
                    @if($document->description)
                        <p class="mb-0 opacity-90">{{ $document->description }}</p>
                    @endif
                </div>
                <div class="text-end mt-2 mt-md-0">
                    <div class="fw-bold fs-5">{{ $document->created_at->format('F j, Y') }}</div>
                    <div class="small opacity-75">{{ $document->created_at->format('h:i A') }}</div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Document Information (Left Column) -->
            <div class="col-lg-4">
                <div class="document-info-card">
                    <h4 class="mb-4 d-flex align-items-center">
                        <i class="fas fa-info-circle me-2 text-primary"></i>
                        Document Information
                    </h4>
                    
                    <div class="info-label">
                        <i class="fas fa-file me-1 text-muted"></i> File Name
                    </div>
                    <div class="info-value text-break">
                        {{ $document->file_name }}
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-tag me-1 text-muted"></i> File Type
                    </div>
                    <div class="info-value">
                        <span class="badge badge-type me-2">{{ $document->file_type_label }}</span>
                        <span class="text-muted small">(.{{ $document->file_extension }})</span>
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-weight me-1 text-muted"></i> File Size
                    </div>
                    <div class="info-value">
                        {{ $document->formatted_file_size }}
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-folder me-1 text-muted"></i> Category
                    </div>
                    <div class="info-value">
                        <span class="badge badge-category">{{ $document->category_label }}</span>
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-file-signature me-1 text-muted"></i> Document Type
                    </div>
                    <div class="info-value">
                        <span class="badge badge-type">{{ $document->type_label }}</span>
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-user me-1 text-muted"></i> Owner
                    </div>
                    <div class="info-value">
                        <i class="fas fa-user-circle me-2 text-primary"></i>
                        {{ $document->owner_name ?? 'Unknown Owner' }}
                        @if($document->owner_email)
                            <br><small class="text-muted">{{ $document->owner_email }}</small>
                        @endif
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-upload me-1 text-muted"></i> Uploaded By
                    </div>
                    <div class="info-value">
                        <i class="fas fa-user-edit me-2 text-primary"></i>
                        {{ $document->uploader->name ?? 'Unknown User' }}
                    </div>
                    
                    <div class="info-label">
                        <i class="fas fa-calendar-alt me-1 text-muted"></i> Upload Date
                    </div>
                    <div class="info-value">
                        <i class="far fa-calendar me-2 text-primary"></i>
                        {{ $document->created_at->format('M j, Y \a\t h:i A') }}
                    </div>
                    
                    @if($document->tags && count($document->tags) > 0)
                    <div class="info-label">
                        <i class="fas fa-tags me-1 text-muted"></i> Tags
                    </div>
                    <div class="info-value">
                        @foreach($document->tags as $tag)
                            <span class="tag-badge"><i class="fas fa-hashtag fa-xs me-1"></i>{{ $tag }}</span>
                        @endforeach
                    </div>
                    @endif
                    
                    <div class="action-buttons">
                        <a href="{{ route('documents.download', $document->id) }}" class="btn btn-primary">
                            <i class="fas fa-download me-2"></i>Download
                        </a>
                        <a href="{{ route('documents.index') }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-left me-2"></i>Back
                        </a>
                    </div>
                    
                    @if($document->fileExists())
                    <div class="mt-3 small text-success text-center">
                        <i class="fas fa-check-circle me-1"></i> File is available in storage
                    </div>
                    @endif
                </div>
            </div>
            
            <!-- Document Preview (Right Column) - INCREASED HEIGHT -->
            <div class="col-lg-8">
                <div class="document-preview-area" id="previewArea">
                    @php
                        // Generate the public URL for this document
                        $publicUrl = route('documents.preview', $document->id);
                        $storageUrl = Storage::disk('public')->url($document->file_path);
                    @endphp
                    
                    <!-- Preview Controls -->
                    <div class="preview-controls">
                        <div class="preview-switcher">
                            <small class="text-muted me-2">Preview options:</small>
                            @if($document->can_preview)
                                @if($document->isOfficeDocument())
                                    <button class="btn btn-sm btn-outline-primary active" onclick="switchViewer('microsoft', '{{ $publicUrl }}')">
                                        <i class="fab fa-microsoft me-1"></i>Microsoft
                                    </button>
                                    <button class="btn btn-sm btn-outline-primary" onclick="switchViewer('google', '{{ $publicUrl }}')">
                                        <i class="fab fa-google me-1"></i>Google
                                    </button>
                                @endif
                            @endif
                        </div>
                        <div class="fullscreen-toggle" onclick="toggleFullscreen()" title="Toggle Fullscreen">
                            <i class="fas fa-expand" id="fullscreenIcon"></i>
                            <span class="d-none d-md-inline ms-1">Fullscreen</span>
                        </div>
                    </div>
                    
                    @if($document->is_image)
                        <!-- Image Preview -->
                        <img src="{{ $publicUrl }}" alt="{{ $document->name }}" 
                             class="document-preview" style="object-fit: contain;">
                             
                    @elseif($document->is_pdf)
                        <!-- PDF Preview -->
                        <iframe src="{{ $publicUrl }}#toolbar=0&navpanes=0&view=FitH" 
                                class="document-preview" title="{{ $document->name }}">
                        </iframe>
                        
                    @elseif($document->isOfficeDocument())
                        <!-- Office Document Preview with viewer options -->
                        <iframe id="officePreview" 
                                src="https://view.officeapps.live.com/op/embed.aspx?src={{ urlencode($publicUrl) }}" 
                                class="document-preview" title="{{ $document->name }}">
                        </iframe>
                        <div class="viewer-note">
                            <i class="fas fa-info-circle me-1"></i>
                            Preview powered by Microsoft Office Online
                        </div>
                        
                    @elseif(in_array($document->file_extension, ['txt', 'csv', 'log', 'json', 'xml', 'html', 'css', 'js']))
                        <!-- Text File Preview -->
                        <div id="textPreview">
                            <div class="loading-preview">
                                <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-3 text-muted">Loading text content...</p>
                            </div>
                        </div>
                        
                    @else
                        <!-- Fallback for other file types -->
                        <div class="no-preview">
                            <div class="file-icon-large">
                                <i class="fas {{ $document->file_icon }}"></i>
                            </div>
                            <h4>Preview Not Available</h4>
                            <p class="text-muted mb-3">This file type cannot be previewed in the browser.</p>
                            <p class="small text-muted mb-4">File type: {{ $document->file_type_label }} (.{{ $document->file_extension }})</p>
                            <a href="{{ route('documents.download', $document->id) }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-download me-2"></i>Download to View
                            </a>
                        </div>
                    @endif
                </div>
                
                @if($document->description)
                <div class="document-info-card mt-4">
                    <h5 class="mb-3 d-flex align-items-center">
                        <i class="fas fa-align-left me-2 text-primary"></i>
                        Description
                    </h5>
                    <p class="mb-0" style="line-height: 1.7;">{{ $document->description }}</p>
                </div>
                @endif
                
                <!-- Recent Activity (Optional) -->
                <div class="document-info-card mt-4">
                    <h5 class="mb-3 d-flex align-items-center">
                        <i class="fas fa-history me-2 text-primary"></i>
                        Recent Activity
                    </h5>
                    <div class="small">
                        <div class="d-flex justify-content-between mb-2">
                            <span><i class="fas fa-eye text-muted me-2"></i>Viewed {{ $document->created_at->diffForHumans() }}</span>
                            <span class="text-muted">{{ $document->created_at->format('M j, Y') }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span><i class="fas fa-upload text-muted me-2"></i>Uploaded {{ $document->created_at->diffForHumans() }}</span>
                            <span class="text-muted">{{ $document->created_at->format('M j, Y') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Auto-adjust iframe height
        document.addEventListener('DOMContentLoaded', function() {
            const iframe = document.querySelector('iframe');
            if (iframe) {
                iframe.style.height = '100%';
            }
            
            // Load text content for text files
            @if(in_array($document->file_extension, ['txt', 'csv', 'log', 'json', 'xml', 'html', 'css', 'js']))
                fetch("{{ $publicUrl }}")
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Failed to load file');
                        }
                        return response.text();
                    })
                    .then(text => {
                        const textPreview = document.getElementById('textPreview');
                        // Limit to first 100000 characters to avoid browser freezing
                        const maxLength = 100000;
                        let displayText = text.length > maxLength ? 
                            text.substring(0, maxLength) + '\n\n... (content truncated for performance)' : 
                            text;
                        
                        // Escape HTML for security
                        displayText = displayText.replace(/&/g, '&amp;')
                                               .replace(/</g, '&lt;')
                                               .replace(/>/g, '&gt;')
                                               .replace(/"/g, '&quot;')
                                               .replace(/'/g, '&#039;');
                        
                        textPreview.innerHTML = '<pre style="margin:0; font-family: inherit;">' + displayText + '</pre>';
                    })
                    .catch(error => {
                        document.getElementById('textPreview').innerHTML = 
                            '<div class="text-center text-muted p-5">' +
                            '<i class="fas fa-exclamation-triangle fa-3x mb-3 text-warning"></i><br>' +
                            '<h5>Unable to load text content</h5>' +
                            '<p class="mb-3">The file may be corrupted or inaccessible.</p>' +
                            '<a href="{{ route('documents.download', $document->id) }}" class="btn btn-outline-primary">' +
                            '<i class="fas fa-download me-2"></i>Download instead</a>' +
                            '</div>';
                    });
            @endif
        });
        
        // Function to switch between Office viewers
        function switchViewer(viewerType, documentUrl) {
            const iframe = document.getElementById('officePreview');
            const note = document.querySelector('.viewer-note');
            const microsoftBtn = document.querySelector('button[onclick*="microsoft"]');
            const googleBtn = document.querySelector('button[onclick*="google"]');
            
            if (!iframe || !note) return;
            
            if (viewerType === 'microsoft') {
                iframe.src = "https://view.officeapps.live.com/op/embed.aspx?src=" + encodeURIComponent(documentUrl);
                note.innerHTML = '<i class="fas fa-info-circle me-1"></i>Preview powered by Microsoft Office Online';
                if (microsoftBtn) microsoftBtn.classList.add('active');
                if (googleBtn) googleBtn.classList.remove('active');
            } else if (viewerType === 'google') {
                iframe.src = "https://docs.google.com/gview?url=" + encodeURIComponent(documentUrl) + "&embedded=true";
                note.innerHTML = '<i class="fas fa-info-circle me-1"></i>Preview powered by Google Docs Viewer';
                if (googleBtn) googleBtn.classList.add('active');
                if (microsoftBtn) microsoftBtn.classList.remove('active');
            }
        }
        
        // Toggle fullscreen mode
        function toggleFullscreen() {
            const previewArea = document.getElementById('previewArea');
            const icon = document.getElementById('fullscreenIcon');
            
            if (!previewArea.classList.contains('fullscreen')) {
                // Enter fullscreen
                previewArea.classList.add('fullscreen');
                icon.classList.remove('fa-expand');
                icon.classList.add('fa-compress');
                document.body.style.overflow = 'hidden';
            } else {
                // Exit fullscreen
                previewArea.classList.remove('fullscreen');
                icon.classList.remove('fa-compress');
                icon.classList.add('fa-expand');
                document.body.style.overflow = 'auto';
            }
        }
        
        // Handle escape key to exit fullscreen
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const previewArea = document.getElementById('previewArea');
                if (previewArea.classList.contains('fullscreen')) {
                    toggleFullscreen();
                }
            }
        });
        
        // Handle window resize for responsive adjustments
        window.addEventListener('resize', function() {
            const iframe = document.querySelector('iframe');
            if (iframe) {
                iframe.style.height = '100%';
            }
        });
    </script>
      <script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>

