<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kartu QR Guru — MTs Zumratul Muttaqin</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f1f5f9;
            padding: 28px 20px 80px;
            min-height: 100vh;
        }

        /* ── Toolbar ── */
        .toolbar {
            max-width: 960px;
            margin: 0 auto 22px;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 14px 18px;
        }
        .toolbar-top {
            display: flex; align-items: center;
            justify-content: space-between;
            gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
        }
        .toolbar-left { display: flex; align-items: center; gap: 10px; }
        .toolbar-title { font-size: 14px; font-weight: 700; color: #0f172a; }
        .toolbar-sub   { font-size: 11px; color: #94a3b8; margin-top: 2px; }

        .btn-t {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 8px 16px; border-radius: 9px;
            font-size: 13px; font-weight: 700; cursor: pointer; border: none;
            transition: all .15s; text-decoration: none; white-space: nowrap;
        }
        .btn-back        { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; }
        .btn-back:hover  { background: #f1f5f9; }
        .btn-print       { background: #0f172a; color: #fff; }
        .btn-print:hover { background: #1e293b; }
        .btn-pdf         { background: #dc2626; color: #fff; }
        .btn-pdf:hover   { background: #b91c1c; }
        .btn-apply       { background: #065f46; color: #fff; }
        .btn-apply:hover { background: #047857; }
        .btn-reset       { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; font-size: 12px; padding: 7px 13px; }
        .btn-reset:hover { background: #f1f5f9; }

        /* ── Filter ── */
        .filter-bar {
            border-top: 1px solid #f1f5f9; padding-top: 12px;
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        }
        .filter-bar label { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; }
        .filter-input { display: flex; align-items: center; gap: 8px; }
        .filter-input input[type="number"] {
            width: 62px; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
            font-size: 13px; font-weight: 700; color: #0f172a; text-align: center; outline: none; transition: border-color .15s;
        }
        .filter-input input[type="number"]:focus { border-color: #065f46; }
        .filter-sep  { font-size: 13px; color: #94a3b8; font-weight: 600; }
        .filter-info { font-size: 12px; color: #94a3b8; margin-left: auto; }

        .quick-ranges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .quick-label  { font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
        .pill {
            padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer;
            border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; transition: .15s;
        }
        .pill:hover, .pill.active { background: #065f46; color: #fff; border-color: #065f46; }

        /* Progress bar PDF */
        #pdf-progress {
            display: none; max-width: 960px; margin: 0 auto 16px;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 18px;
        }
        #pdf-progress .pg-label { font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 8px; display: flex; justify-content: space-between; }
        #pdf-progress .pg-bar-bg { height: 6px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
        #pdf-progress .pg-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #065f46, #10b981); transition: width 0.3s ease; }

        /* ── Screen grid ── */
        .print-grid {
            display: flex; flex-wrap: wrap;
            gap: 18px; justify-content: center;
            max-width: 960px; margin: 0 auto;
        }
        .card-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
        .card-wrap.hidden { display: none; }

        /* ── ID Card ── */
        .id-card {
            width: 58mm; height: 58mm; background: #fff; border: 0.8px solid #cbd5e1;
            border-radius: 5mm; display: flex; flex-direction: column; align-items: center;
            justify-content: space-between; padding: 3.5mm 4mm 3mm; position: relative;
            overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07);
        }
        .id-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 2.2mm; background: #065f46; border-radius: 5mm 5mm 0 0;
        }
        .no-urut-badge {
            position: absolute; top: 3.5mm; left: 2.5mm;
            font-size: 5pt; font-weight: 800; color: #fff; background: #065f46;
            border-radius: 2px; padding: 0 3px; line-height: 1.7;
        }
        .card-school {
            font-size: 5.5pt; font-weight: 800; color: #065f46; text-transform: uppercase;
            text-align: center; letter-spacing: .4px; width: 100%; padding-top: 1.5mm;
        }
        .card-qr { display: flex; align-items: center; justify-content: center; flex: 1; padding: 1mm 0; }
        .card-qr svg, .card-qr img {
            display: block; width: 33mm !important; height: 33mm !important;
            max-width: 33mm; max-height: 33mm; shape-rendering: crispEdges; image-rendering: pixelated;
        }
        .card-footer-area { width: 100%; text-align: center; }
        .card-name {
            font-size: 7pt; font-weight: 800; color: #0f172a; text-transform: uppercase;
            letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            width: 100%; display: block;
        }

        /* Tombol per kartu */
        .card-actions { display: flex; gap: 5px; width: 58mm; }
        .btn-dl {
            background: #fff; border: 1px solid #e2e8f0;
            padding: 5px 10px; border-radius: 6px; flex: 1;
            font-size: 11px; font-weight: 700; cursor: pointer; color: #475569;
            display: flex; align-items: center; justify-content: center; gap: 5px; transition: .15s;
        }
        .btn-dl:hover { background: #f8fafc; }
        .btn-dl.red   { color: #dc2626; border-color: #fca5a5; }
        .btn-dl.red:hover { background: #fef2f2; }

        .empty-filter {
            display: none; text-align: center; padding: 60px 20px;
            color: #94a3b8; font-size: 13px; font-weight: 600;
            max-width: 960px; margin: 0 auto;
        }

        /* ── MOBILE: toolbar & grid ── */
        @media (max-width: 600px) {
            body { padding: 16px 12px 60px; }
            .toolbar { padding: 12px 14px; border-radius: 12px; }
            .toolbar-top { flex-direction: column; align-items: flex-start; gap: 10px; }
            .toolbar-top > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
            .btn-t { justify-content: center; font-size: 12px; padding: 9px 10px; }
            #btnPDF { grid-column: 1 / -1; }
            .filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
            .filter-input { width: 100%; }
            .filter-input input[type="number"] { width: 72px; }
            .filter-info { margin-left: 0; font-size: 11px; }
            .quick-ranges { width: 100%; }
            .print-grid { gap: 12px; }
        }

        /* ── Print CSS ── */
        @media print {
            @page { size: A4 portrait; margin: 10mm 8mm; }
            body { background: #fff !important; padding: 0; }
            .toolbar, .card-actions, #pdf-progress { display: none !important; }
            .card-wrap.hidden { display: none !important; }
            .empty-filter { display: none !important; }
            .print-grid { display: grid; grid-template-columns: repeat(3, 58mm); gap: 5mm 8mm; justify-content: center; max-width: none; width: 100%; }
            .card-wrap { break-inside: avoid !important; }
            .id-card { box-shadow: none !important; border: 0.5px solid #000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
        }
    </style>
</head>
<body>

    <div class="toolbar">
        <div class="toolbar-top">
            <div class="toolbar-left">
                <button onclick="tutupHalaman()" class="btn-t btn-back">
                    <i class="bi bi-arrow-left"></i> Kembali
                </button>
                <div>
                    <div class="toolbar-title">Kartu QR Guru &amp; Staff</div>
                    <div class="toolbar-sub">MTs KH Zumratul Muttaqin &mdash; <?php echo e(count($gurus)); ?> kartu</div>
                </div>
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <button class="btn-t btn-reset" onclick="resetFilter()">
                    <i class="bi bi-x-circle"></i> Reset
                </button>
                <button onclick="window.print()" class="btn-t btn-print">
                    <i class="bi bi-printer-fill"></i> Cetak A4
                </button>
                <button onclick="downloadPDF()" class="btn-t btn-pdf" id="btnPDF">
                    <i class="bi bi-file-earmark-pdf-fill"></i> Unduh PDF
                </button>
            </div>
        </div>

        <div class="filter-bar">
            <label><i class="bi bi-funnel-fill" style="margin-right:4px;"></i>Tampilkan no:</label>
            <div class="filter-input">
                <input type="number" id="from" min="1" max="<?php echo e(count($gurus)); ?>" value="1">
                <span class="filter-sep">—</span>
                <input type="number" id="to" min="1" max="<?php echo e(count($gurus)); ?>" value="<?php echo e(count($gurus)); ?>">
                <button class="btn-t btn-apply" onclick="applyFilter()" style="padding:7px 14px;font-size:12px;">
                    <i class="bi bi-check2"></i> Terapkan
                </button>
            </div>

            <div class="quick-ranges">
                <span class="quick-label">Cepat:</span>
                <?php $total = count($gurus); $chunk = 10; ?>
                <?php for($i = 1; $i <= $total; $i += $chunk): ?>
                    <?php $end = min($i + $chunk - 1, $total); ?>
                    <button class="pill" onclick="quickRange(<?php echo e($i); ?>, <?php echo e($end); ?>, this)"><?php echo e($i); ?>–<?php echo e($end); ?></button>
                <?php endfor; ?>
                <button class="pill active" onclick="quickRange(1, <?php echo e($total); ?>, this)">Semua</button>
            </div>

            <span class="filter-info" id="filter-info">Menampilkan semua <?php echo e($total); ?> kartu</span>
        </div>
    </div>

    <div id="pdf-progress">
        <div class="pg-label">
            <span id="pg-text">Menyiapkan PDF...</span>
            <span id="pg-pct">0%</span>
        </div>
        <div class="pg-bar-bg">
            <div class="pg-bar" id="pg-bar" style="width:0%"></div>
        </div>
    </div>

    <div class="empty-filter" id="empty-msg">
        <i class="bi bi-search"></i>
        Tidak ada kartu dalam rentang tersebut.
    </div>

    <div class="print-grid" id="print-grid">
        <?php $__currentLoopData = $gurus; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $g): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="card-wrap" data-no="<?php echo e($loop->iteration); ?>">
            <div class="id-card" id="card-<?php echo e($index); ?>">
                <span class="no-urut-badge"><?php echo e($loop->iteration); ?></span>
                <div class="card-school">MTs KH Zumratul Muttaqin</div>

                <div class="card-qr">
                    <?php echo QrCode::size(256)->margin(1)->errorCorrection('H')->style('square')->generate('GURU-' . $g->nomor_identitas); ?>

                </div>

                <div class="card-footer-area">
                    <span class="card-name"><?php echo e($g->nama); ?></span>
                </div>
            </div>

            <div class="card-actions">
                <button class="btn-dl" onclick="downloadPNG('card-<?php echo e($index); ?>', '<?php echo e(Str::slug($g->nama)); ?>')">
                    <i class="bi bi-image"></i> PNG
                </button>
                <button class="btn-dl red" onclick="downloadSinglePDF('card-<?php echo e($index); ?>', '<?php echo e(Str::slug($g->nama)); ?>')">
                    <i class="bi bi-file-earmark-pdf"></i> PDF
                </button>
            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    <script>
        const { jsPDF } = window.jspdf;
        const totalCards = <?php echo e(count($gurus)); ?>;

        function tutupHalaman() {
            if (window.opener || window.history.length <= 1) {
                window.close();
            } else {
                window.history.back();
            }
        }

        function applyFilter() {
            const f = Math.max(1, Math.min(parseInt(document.getElementById('from').value) || 1, totalCards));
            const t = Math.max(f, Math.min(parseInt(document.getElementById('to').value)   || totalCards, totalCards));
            document.getElementById('from').value = f;
            document.getElementById('to').value   = t;

            let visible = 0;
            document.querySelectorAll('.card-wrap').forEach(el => {
                const show = parseInt(el.dataset.no) >= f && parseInt(el.dataset.no) <= t;
                el.classList.toggle('hidden', !show);
                if (show) visible++;
            });

            const info  = document.getElementById('filter-info');
            const empty = document.getElementById('empty-msg');
            const grid  = document.getElementById('print-grid');

            if (visible === 0) {
                info.textContent    = 'Tidak ada kartu ditampilkan';
                empty.style.display = 'block';
                grid.style.display  = 'none';
            } else {
                info.textContent    = `Menampilkan ${visible} kartu (no ${f}–${t})`;
                empty.style.display = 'none';
                grid.style.display  = 'flex';
            }
            document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
        }

        function quickRange(from, to, btn) {
            document.getElementById('from').value = from;
            document.getElementById('to').value   = to;
            applyFilter();
            document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
            btn.classList.add('active');
        }

        function resetFilter() {
            document.getElementById('from').value = 1;
            document.getElementById('to').value   = totalCards;
            applyFilter();
            const pills = document.querySelectorAll('.pill');
            pills[pills.length - 1].classList.add('active');
        }

        async function captureCard(cardEl) {
            return await html2canvas(cardEl, {
                scale: 6, /* Disamakan skalanya dengan siswa */
                useCORS: true,
                backgroundColor: '#ffffff',
                logging: false,
                imageTimeout: 0,
                allowTaint: false,
            });
        }

        async function downloadPNG(id, name) {
            const card = document.getElementById(id);
            const wrap = card.closest('.card-wrap');
            const btn  = wrap.querySelectorAll('.btn-dl')[0];
            const orig = btn.innerHTML;

            btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Proses...';
            btn.disabled  = true;

            const canvas = await captureCard(card);
            const a = document.createElement('a');
            a.download = `QR-Guru-${name}.png`;
            a.href = canvas.toDataURL('image/png', 1.0);
            a.click();

            btn.innerHTML = '<i class="bi bi-check-circle-fill" style="color:#10b981"></i> Tersimpan';
            setTimeout(() => { btn.innerHTML = orig; btn.disabled = false; }, 2000);
        }

        async function downloadSinglePDF(id, name) {
            const card = document.getElementById(id);
            const wrap = card.closest('.card-wrap');
            const btn  = wrap.querySelectorAll('.btn-dl')[1];
            const orig = btn.innerHTML;

            btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Proses...';
            btn.disabled  = true;

            const canvas  = await captureCard(card);
            const imgData = canvas.toDataURL('image/png', 1.0);
            const W = 58, H = 58;
            const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: [W, H] });
            pdf.addImage(imgData, 'PNG', 0, 0, W, H, '', 'FAST');
            pdf.save(`QR-Guru-${name}.pdf`);

            btn.innerHTML = '<i class="bi bi-check-circle-fill" style="color:#10b981"></i> Tersimpan';
            setTimeout(() => { btn.innerHTML = orig; btn.disabled = false; }, 2000);
        }

        async function downloadPDF() {
            const visibleCards = Array.from(document.querySelectorAll('.card-wrap:not(.hidden) .id-card'));
            if (visibleCards.length === 0) {
                alert('Tidak ada kartu yang ditampilkan.'); return;
            }

            const btnPDF   = document.getElementById('btnPDF');
            const progress = document.getElementById('pdf-progress');
            const pgBar    = document.getElementById('pg-bar');
            const pgText   = document.getElementById('pg-text');
            const pgPct    = document.getElementById('pg-pct');

            btnPDF.disabled  = true;
            btnPDF.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyiapkan...';
            progress.style.display = 'block';

            const PAGE_W = 210, PAGE_H = 297;
            const MARGIN_X = 10, MARGIN_Y = 12;
            const GAP_X = 8, GAP_Y = 6;
            const CARD_W = 58, CARD_H = 58;
            const COLS = 3;

            const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
            let col = 0, row = 0, page = 1;
            const usableH  = PAGE_H - MARGIN_Y * 2;
            const rowHeight = CARD_H + GAP_Y;
            const rowsPerPage = Math.floor((usableH + GAP_Y) / rowHeight);

            for (let i = 0; i < visibleCards.length; i++) {
                const card = visibleCards[i];
                const pct = Math.round(((i + 1) / visibleCards.length) * 100);
                pgBar.style.width  = pct + '%';
                pgPct.textContent  = pct + '%';
                pgText.textContent = `Memproses kartu ${i + 1} dari ${visibleCards.length}...`;

                const canvas  = await captureCard(card);
                const imgData = canvas.toDataURL('image/png', 1.0);
                const x = MARGIN_X + col * (CARD_W + GAP_X);
                const y = MARGIN_Y + row * rowHeight;

                pdf.addImage(imgData, 'PNG', x, y, CARD_W, CARD_H, '', 'FAST');

                col++;
                if (col >= COLS) {
                    col = 0;
                    row++;
                    if (row >= rowsPerPage && i < visibleCards.length - 1) {
                        pdf.addPage();
                        row = 0; page++;
                    }
                }
                if (i % 3 === 2) await new Promise(r => setTimeout(r, 10));
            }

            const fromVal = document.getElementById('from').value;
            const toVal   = document.getElementById('to').value;
            const fname   = `QR-Guru-${fromVal}-${toVal}_MTs-Zumratul.pdf`;
            pdf.save(fname);

            progress.style.display  = 'none';
            pgBar.style.width        = '0%';
            btnPDF.disabled          = false;
            btnPDF.innerHTML = '<i class="bi bi-file-earmark-pdf-fill"></i> Unduh PDF';
        }

        applyFilter();
        const pills = document.querySelectorAll('.pill');
        pills[pills.length - 1].classList.add('active');
    </script>

</body>
</html><?php /**PATH C:\laragon\www\absensi_muttaqin_v2\resources\views/guru/guru_cetak.blade.php ENDPATH**/ ?>