<?php
include('head.php');
include('header.php');
requirePermission($pdo, $_SESSION['clientId'], 'reports');

$pspId = $_SESSION['pspId'];
?>

<style>
    .reports-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 30px;
    }
    
    .reports-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 32px;
        margin-top: 32px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .report-card {
        background: white;
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .report-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        border-color: #1a70b8;
        transform: translateY(-4px);
    }
    
    .report-icon {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: white;
        margin-bottom: 20px;
    }
    
    .report-icon.blue {
        background: linear-gradient(135deg, #1a70b8 0%, #2b8fd9 100%);
    }
    
    .report-icon.green {
        background: linear-gradient(135deg, #60e438 0%, #4ade80 100%);
    }
    
    .report-icon.orange {
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    }
    
    .report-icon.purple {
        background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    }
    
    .report-title {
        font-size: 18px;
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 8px;
    }
    
    .report-description {
        font-size: 14px;
        color: #718096;
        margin-bottom: 20px;
        line-height: 1.6;
    }
    
    .report-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, #1a70b8 0%, #60e438 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .report-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 112, 184, 0.4);
    }
</style>

<script>
function generatePatientDetailedReport(event) {
  // Use currentTarget so the button element is always referenced
  const btn = event.currentTarget;
  const originalText = btn.innerHTML;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
  btn.disabled = true;

  // Simulate report generation (replace setTimeout with real logic)
  setTimeout(() => {
    // Reset button
    btn.innerHTML = originalText;
    btn.disabled = false;

    // Open the report page in a new tab/window
    const url = 'kabi-patient-detailed-report.php';
    const win = window.open(url, '_blank', 'noopener,noreferrer');
    if (win) win.opener = null; // extra safety
  }, 2000);
}





function generateEnrollmentProcessReport() {
    // Show loading state
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
    btn.disabled = true;
    
    // Simulate report generation (replace with actual implementation)
    setTimeout(() => {
        // Reset button
        btn.innerHTML = originalText;
        btn.disabled = false;
        
        // You can redirect to actual report generation page or trigger download
      const url = 'kabi-skpi-report.php';
    const win = window.open(url, '_blank', 'noopener,noreferrer');
    if (win) win.opener = null; // extra safety
  }, 2000);
}
</script>

<div class="main-content">
    <div class="reports-container container">
        <div class="page-header">
            <h1 class="page-title">Patient Reports</h1>
            <p class="page-subtitle">Generate detailed patient and enrollment reports</p>
        </div>

        <div class="reports-grid row">
            <div class="report-card col-md-6">
                <div class="report-icon blue">
                    <i class="fas fa-user-md"></i>
                </div>
                <div class="report-title">Patient Detailed Report</div>
                <div class="report-description">
                    Comprehensive patient information including demographics, treatment status, and complete journey details
                </div>
                <button class="report-btn" onclick="generatePatientDetailedReport(event)">
                    <i class="fas fa-file-download"></i> Generate Report
                </button>
            </div>

            <!--<div class="report-card">-->
            <!--    <div class="report-icon green">-->
            <!--        <i class="fas fa-clipboard-check"></i>-->
            <!--    </div>-->
            <!--    <div class="report-title">Enrollment Form Received To Enrollment Form Complete Report</div>-->
            <!--    <div class="report-description">-->
            <!--        Track enrollment process from form receipt to completion with timelines and status updates-->
            <!--    </div>-->
            <!--    <button class="report-btn" onclick="generateEnrollmentProcessReport()">-->
            <!--        <i class="fas fa-file-download"></i> Generate Report-->
            <!--    </button>-->
            <!--</div>-->
        </div>
    </div>
</div>

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