<?php
include('head.php');
include('header.php'); 
?>

<style>
:root {
    --primary-color: #3b82f6;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
}

.report-container {
    max-width: 100%;
    margin: 0;
    padding: 24px;
    background-color: var(--bg-color);
    min-height: 100vh;
}

.report-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
        margin-top: 80px;
}

.report-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(50px, -50px);
}

.report-header h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-header .subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

.header-actions {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    gap: 12px;
    z-index: 10;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
    color: white;
}

.btn-secondary {
    background-color: white;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: #f8fafc;
    color: var(--text-primary);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.report-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-header .icon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.card-body {
    padding: 0;
    position: relative;
}

.iframe-container {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background: white;
}

.iframe-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.report-iframe {
    width: 100%;
    min-height: 80vh;
    border: none;
    background: white;
    display: block;
}

.toolbar {
    background: white;
    padding: 16px 32px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator.loading {
    background: #fef3c7;
    color: #92400e;
}

.status-indicator.ready {
    background: #d1fae5;
    color: #065f46;
}

.status-indicator.error {
    background: #fee2e2;
    color: #991b1b;
}

.fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    backdrop-filter: blur(4px);
}

.fullscreen-modal.active {
    display: flex;
    flex-direction: column;
}

.fullscreen-header {
    background: rgba(0, 0, 0, 0.8);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.fullscreen-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.fullscreen-content {
    flex: 1;
    position: relative;
}

.fullscreen-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .report-container {
        padding: 16px;
    }
    
    .report-header {
        padding: 24px 20px;
        text-align: center;
    }
    
    .report-header h1 {
        font-size: 24px;
    }
    
    .header-actions {
        position: static;
        margin-top: 20px;
        justify-content: center;
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .toolbar-left,
    .toolbar-right {
        justify-content: center;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Print Styles */
@media print {
    .report-header,
    .toolbar,
    .header-actions {
        display: none !important;
    }
    
    .report-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .report-iframe {
        min-height: auto;
    }
}

/* Animation for smooth loading */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>

<div class="report-container">
    <!-- Report Header -->
    <div class="report-header fade-in">
        <h1><i class="fas fa-file-medical-alt"></i> Patient Detailed Report</h1>
        <p class="subtitle">Comprehensive patient information and analytics dashboard</p>
        
        <div class="header-actions">
            <a href="reports.php" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Reports
            </a>
            <!--<button class="btn btn-success" onclick="exportReport()">-->
            <!--    <i class="fas fa-download"></i> Export Report-->
            <!--</button>-->
            <button class="btn btn-primary" onclick="openFullscreen()">
                <i class="fas fa-expand"></i> Fullscreen
            </button>
        </div>
    </div>

    <!-- Report Card -->
    <div class="report-card fade-in">
        <!-- Toolbar -->
        <div class="toolbar">
            <div class="toolbar-left">
                <div class="status-indicator loading" id="loadingStatus">
                    <div class="spinner" style="width: 12px; height: 12px; border-width: 2px;"></div>
                    Loading Report
                </div>
            </div>
            <div class="toolbar-right">
                <button class="btn btn-secondary" onclick="refreshReport()" title="Refresh Report">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <button class="btn btn-secondary" onclick="printReport()" title="Print Report">
                    <i class="fas fa-print"></i>
                </button>
            </div>
        </div>

        <!-- Card Header -->
        <div class="card-header">
            <h2>
                <i class="fas fa-chart-bar icon"></i>
                Patient Data Analysis
            </h2>
        </div>

        <!-- Card Body -->
        <div class="card-body">
            <div class="iframe-container">
                <div class="iframe-loading" id="iframeLoading">
                    <div class="spinner"></div>
                    <p>Loading patient report data...</p>
                </div>
                <iframe 
                    id="reportIframe"
                    class="report-iframe" 
                    src="https://client.rxconnections.ca/client/detailed_report_export_kabi_frame.php"
                    onload="handleIframeLoad()"
                    onerror="handleIframeError()">
                </iframe>
            </div>
        </div>
    </div>
</div>

<!-- Fullscreen Modal -->
<div id="fullScreenModal" class="fullscreen-modal">
    <div class="fullscreen-header">
        <h3><i class="fas fa-file-medical-alt"></i> Patient Detailed Report - Fullscreen View</h3>
        <button class="btn btn-secondary" onclick="closeFullscreen()">
            <i class="fas fa-times"></i> Close
        </button>
    </div>
    <div class="fullscreen-content">
        <iframe id="fullscreenIframe" class="fullscreen-iframe" src=""></iframe>
    </div>
</div>

<script>
// Global variables
let reportLoaded = false;

// Handle iframe load
function handleIframeLoad() {
    setTimeout(() => {
        document.getElementById('iframeLoading').style.display = 'none';
        document.getElementById('reportIframe').style.opacity = '1';
        
        const statusIndicator = document.getElementById('loadingStatus');
        statusIndicator.className = 'status-indicator ready';
        statusIndicator.innerHTML = '<i class="fas fa-check-circle"></i> Report Ready';
        
        reportLoaded = true;
    }, 1000);
}

// Handle iframe error
function handleIframeError() {
    const statusIndicator = document.getElementById('loadingStatus');
    statusIndicator.className = 'status-indicator error';
    statusIndicator.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Load Error';
    
    document.getElementById('iframeLoading').innerHTML = `
        <div style="text-align: center; color: #ef4444;">
            <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
            <h3>Failed to Load Report</h3>
            <p>There was an error loading the patient report. Please try refreshing the page.</p>
            <button class="btn btn-primary" onclick="refreshReport()">
                <i class="fas fa-sync-alt"></i> Retry
            </button>
        </div>
    `;
}

// Refresh report
function refreshReport() {
    const iframe = document.getElementById('reportIframe');
    const loading = document.getElementById('iframeLoading');
    const statusIndicator = document.getElementById('loadingStatus');
    
    // Reset loading state
    loading.style.display = 'flex';
    iframe.style.opacity = '0.5';
    statusIndicator.className = 'status-indicator loading';
    statusIndicator.innerHTML = '<div class="spinner" style="width: 12px; height: 12px; border-width: 2px;"></div> Refreshing...';
    
    // Reload iframe
    iframe.src = iframe.src;
    reportLoaded = false;
}

// Export report
function exportReport() {
    if (!reportLoaded) {
        alert('Please wait for the report to load completely before exporting.');
        return;
    }
    
    // Show loading state
    const btn = event.target.closest('.btn');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Exporting...';
    btn.disabled = true;
    
    // Simulate export process (replace with actual export logic)
    setTimeout(() => {
        // Reset button
        btn.innerHTML = originalText;
        btn.disabled = false;
        
        // Open export URL
        window.open('detailed_report_export_kabi.php', '_blank');
    }, 2000);
}

// Print report
function printReport() {
    if (!reportLoaded) {
        alert('Please wait for the report to load completely before printing.');
        return;
    }
    
    try {
        const iframe = document.getElementById('reportIframe');
        iframe.contentWindow.print();
    } catch (e) {
        // Fallback to window print
        window.print();
    }
}

// Open fullscreen
function openFullscreen() {
    const modal = document.getElementById('fullScreenModal');
    const fullscreenIframe = document.getElementById('fullscreenIframe');
    const mainIframe = document.getElementById('reportIframe');
    
    fullscreenIframe.src = mainIframe.src;
    modal.classList.add('active');
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
}

// Close fullscreen
function closeFullscreen() {
    const modal = document.getElementById('fullScreenModal');
    modal.classList.remove('active');
    
    // Restore body scroll
    document.body.style.overflow = 'auto';
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // ESC to close fullscreen
    if (e.key === 'Escape') {
        closeFullscreen();
    }
    
    // F11 to toggle fullscreen
    if (e.key === 'F11') {
        e.preventDefault();
        const modal = document.getElementById('fullScreenModal');
        if (modal.classList.contains('active')) {
            closeFullscreen();
        } else {
            openFullscreen();
        }
    }
    
    // Ctrl+P to print
    if (e.ctrlKey && e.key === 'p') {
        e.preventDefault();
        printReport();
    }
    
    // Ctrl+R to refresh
    if (e.ctrlKey && e.key === 'r') {
        e.preventDefault();
        refreshReport();
    }
});

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Add fade-in animation to elements
    const elements = document.querySelectorAll('.fade-in');
    elements.forEach((el, index) => {
        el.style.animationDelay = `${index * 0.1}s`;
    });
    
    // Set initial iframe opacity
    document.getElementById('reportIframe').style.opacity = '0';
});

// Handle window resize
window.addEventListener('resize', function() {
    // Adjust iframe height if needed
    const iframe = document.getElementById('reportIframe');
    if (iframe && reportLoaded) {
        // Force iframe to recalculate dimensions
        iframe.style.height = 'auto';
        setTimeout(() => {
            iframe.style.height = '80vh';
        }, 100);
    }
});
</script>

<?php include('footer.php'); ?>
