<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Report Card - Print Version</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            font-size: 12px;
            line-height: 1.3;
        }
        
        @media print {
            body {
                margin: 0;
                padding: 15px;
            }
            
            .no-print {
                display: none;
            }
            
            .report-card {
                page-break-after: always;
            }
        }
        
        .report-card {
            border: 3px solid #007bff;
            border-left: 25px solid #28a745;
            width: 100%;
            min-height: 800px;
            position: relative;
            background: white;
            margin-bottom: 20px;
        }
        
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            color: rgba(0, 123, 255, 0.08);
            font-weight: bold;
            z-index: 0;
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }
        
        .content {
            padding: 15px;
            position: relative;
            z-index: 1;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        
        .header-table td {
            vertical-align: top;
            padding: 5px;
            border: none;
        }
        
        .school-name {
            font-size: 20px;
            font-weight: bold;
            color: #007bff;
            text-align: center;
            margin-bottom: 5px;
        }
        
        .school-info {
            text-align: center;
            font-size: 11px;
            color: #666;
        }
        
        .motto {
            border: 2px solid #007bff;
            padding: 8px;
            text-align: center;
            font-weight: bold;
            color: #007bff;
            border-radius: 5px;
        }
        
        .info-table td,
        .subjects-table td,
        .subjects-table th {
            border: 1px solid #ddd;
            padding: 6px;
        }
        
        .info-table .label {
            background-color: #f8f9fa;
            font-weight: bold;
            width: 120px;
        }
        
        .subjects-table th {
            background-color: #007bff;
            color: white;
            text-align: center;
        }
        
        .subjects-table .subject-name {
            text-align: left;
            font-weight: bold;
        }
        
        .chart-area {
            height: 100px;
            border: 1px solid #ddd;
            background: #f8f9fa;
            text-align: center;
            padding-top: 40px;
            margin: 10px 0;
            color: #666;
        }
        
        .signatures {
            position: absolute;
            bottom: 40px;
            left: 15px;
            right: 15px;
        }
        
        .signatures td {
            text-align: center;
            padding: 15px 5px;
            border-top: 1px solid #000;
            font-weight: bold;
        }
        
        .print-button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="no-print">
        <h2>Report Card - Print Version</h2>
        <p>Click the button below to print or save as PDF:</p>
        <button class="print-button" onclick="window.print()">Print / Save as PDF</button>
        <button class="print-button" onclick="window.close()">Close</button>
    </div>

    <div class="report-card">
        <div class="watermark">EXCELLENCE</div>
        
        <div class="content">
            <!-- Header -->
            <table class="header-table">
                <tr>
                    <td style="width: 80px; text-align: center;">
                        <div style="width: 60px; height: 60px; border: 2px solid #007bff; border-radius: 50%; margin: 0 auto; text-align: center; line-height: 56px; font-size: 10px;">LOGO</div>
                    </td>
                    <td>
                        <div class="school-name">GREENFIELD ACADEMY</div>
                        <div class="school-info">
                            123 Education Street, Learning City<br>
                            Tel: +1-234-567-8900 | Email: info@greenfield.edu
                        </div>
                    </td>
                    <td style="width: 150px;">
                        <div class="motto">STRIVING FOR<br>EXCELLENCE</div>
                    </td>
                </tr>
            </table>
            
            <!-- Student Info -->
            <table class="info-table">
                <tr>
                    <td class="label">Student Name:</td>
                    <td>John Doe</td>
                    <td class="label">Class:</td>
                    <td>Grade 10A</td>
                </tr>
                <tr>
                    <td class="label">Admission No:</td>
                    <td>ADM001</td>
                    <td class="label">Term:</td>
                    <td>Term 1, 2025</td>
                </tr>
                <tr>
                    <td class="label">Position:</td>
                    <td>1 out of 50</td>
                    <td class="label">Average:</td>
                    <td>97.0%</td>
                </tr>
            </table>
            
            <!-- Subjects -->
            <table class="subjects-table">
                <thead>
                    <tr>
                        <th>Subject</th>
                        <th>Marks</th>
                        <th>Grade</th>
                        <th>Teacher Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="subject-name">Mathematics</td>
                        <td style="text-align: center;">98/100</td>
                        <td style="text-align: center;">A</td>
                        <td>Excellent performance</td>
                    </tr>
                    <tr>
                        <td class="subject-name">English</td>
                        <td style="text-align: center;">95/100</td>
                        <td style="text-align: center;">A</td>
                        <td>Very good work</td>
                    </tr>
                    <tr>
                        <td class="subject-name">Science</td>
                        <td style="text-align: center;">99/100</td>
                        <td style="text-align: center;">A</td>
                        <td>Outstanding</td>
                    </tr>
                    <tr>
                        <td class="subject-name">History</td>
                        <td style="text-align: center;">94/100</td>
                        <td style="text-align: center;">A</td>
                        <td>Good effort</td>
                    </tr>
                    <tr>
                        <td class="subject-name">Geography</td>
                        <td style="text-align: center;">99/100</td>
                        <td style="text-align: center;">A</td>
                        <td>Excellent</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- Performance Chart -->
            <div style="text-align: center; font-weight: bold; color: #007bff; margin: 10px 0 5px 0;">
                Student Performance Over Time
            </div>
            <div class="chart-area">
                Performance Chart Area<br>
                <small>(Chart visualization would appear here)</small>
            </div>
            
            <!-- Summary -->
            <table class="info-table">
                <tr>
                    <td class="label">Total Marks:</td>
                    <td>485/500</td>
                    <td class="label">Overall Grade:</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td class="label">Class Average:</td>
                    <td>82.5%</td>
                    <td class="label">Remarks:</td>
                    <td>Excellent student, keep it up!</td>
                </tr>
            </table>
        </div>
        
        <!-- Signatures -->
        <table class="signatures">
            <tr>
                <td style="width: 33.33%;">Class Teacher</td>
                <td style="width: 33.33%;">Principal</td>
                <td style="width: 33.33%;">Parent/Guardian</td>
            </tr>
        </table>
    </div>

    <script>
        // Auto-focus for print dialog
        window.onload = function() {
            setTimeout(function() {
                // Auto-open print dialog after 1 second
                // window.print();
            }, 1000);
        };
    </script>
</body>
</html>