<?php
 require_once('includes/auth_check.php');
require_once("includes/config.php");
// Fetch classes for the dropdown
$classes = $pdo->query("SELECT * FROM classes")->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Smart Card Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* CSS for the Smart Card Dimensions */
        @media screen {
            body {
                background: #f0f2f5;
                padding: 20px;
            }

            .print-area {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                justify-content: center;
            }
        }

        /* THE SMART CARD (CR-80 Standard: 85.6mm x 53.98mm) */
        .smart-card {
            width: 85.6mm;
            height: 53.98mm;
            background: white;
            border: 1px solid #d1d1d1;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            color: #000;
            page-break-after: always;
        }

        @media print {
            .no-print {
                display: none !important;
            }

            body {
                margin: 0;
                padding: 0;
                background: none;
            }

            @page {
                size: 85.6mm 53.98mm;
                margin: 0;
            }

            .smart-card {
                border: none;
                margin: 0;
            }
        }

        /* Internal Card Styling */
        .card-header {
            height: 12mm;
            background: #1a237e; /* Fallback color */
            color: white;
            display: flex;
            align-items: center;
            padding: 0 8px;
        }

        .card-body {
            display: flex;
            padding: 5px 8px;
        }

        .student-photo {
            width: 18mm;
            height: 22mm;
            object-fit: cover;
            border: 1px solid #eee;
            border-radius: 2px;
        }

        .student-info {
            padding-left: 8px;
            font-size: 9px;
            flex: 1;
            line-height: 1.2;
        }

        .student-info h6 {
            margin: 0 0 2px 0;
            font-size: 11px;
            color: #1a237e;
            text-transform: uppercase;
            font-weight: bold;
        }

        /* Signature & Footer Section */
        .card-footer {
            position: absolute;
            bottom: 4px;
            width: 100%;
            padding: 0 8px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .sig-container {
            text-align: center;
        }

        .sig-img {
            height: 7mm;
            mix-blend-mode: multiply; /* Makes white background of signature transparent */
        }

        .sig-text {
            border-top: 0.5px solid #000;
            font-size: 6px;
            width: 20mm;
            margin-top: 2px;
        }

        .qr-code-img {
            width: 9mm;
            height: 9mm;
        }

        /* Fix for background colors in Chrome printing */
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    </style>
</head>

<body>

    <div class="no-print container bg-white p-4 shadow-sm mb-4 rounded">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4><i class="bi bi-card-checklist"></i> Batch Smart Card Generation</h4>
            <a href="dashboard.php" class="btn btn-sm btn-outline-secondary">Back to Dashboard</a>
        </div>
        
        <div class="row align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-bold">Select Scope</label>
                <select id="classSelect" class="form-select">
                    <option value="">-- Choose Class --</option>
                    <option value="all" style="font-weight: bold; color: #2c3e50;">全 PRINT ALL STUDENTS (Whole School)</option>
                    <hr>
                    <?php foreach ($classes as $c): ?>
                        <option value="<?= $c['id'] ?>"><?= $c['class_name'] ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary w-100" onclick="fetchStudents()">
                    <span id="btnLoader" class="spinner-border spinner-border-sm d-none"></span>
                    Generate Cards
                </button>
            </div>
            <div class="col-md-4">
                <button class="btn btn-success w-100" onclick="window.print()">
                    Print to PVC Printer
                </button>
            </div>
        </div>
    </div>

    <div id="printArea" class="print-area">
        <div class="text-muted no-print">Select a class and click generate to preview cards...</div>
    </div>

    <script src="js/bulk-id-generator.js"></script>
</body>

</html>