<?php
$page_title = 'Print Resi';
require_once('includes/load.php');
require_once('libs/phpqrcode/qrlib.php');
page_require_level(3);

// Mengambil data dari tabel resi (misalnya: `resi` dan `product_id`)
$sql = "SELECT resi.resi_number, resi.product_id, products.name, products.new_code 
        FROM resi 
        LEFT JOIN products ON resi.product_id = products.part_number";
$resi_data = $db->query($sql);

?>

<?php include_once('layouts/header.php'); ?>

<div class="row">
    <div class="col-md-12">
        <?php echo display_msg($msg); ?>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <div class="pull-right">
                    <a href="resi.php" class="btn btn-success">Back to Resi</a>
                </div>
                <div class="panel-title">
                    <h4>Print Resi</h4>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Resi Number</th>
                            <th>Product Name</th>
                            <th>QR Code</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($resi_data as $resi) : ?>
                            <tr>
                                <td><?php echo htmlspecialchars($resi['resi_number']); ?></td>
                                <td><?php echo htmlspecialchars($resi['name']); ?></td>
                                <td>
                                    <?php
                                    $tempDir = 'qr_codes/';
                                    if (!file_exists($tempDir)) {
                                        mkdir($tempDir, 0755, true);
                                    }
                                    $fileName = $resi['resi_number'] . '.png';
                                    $filePath = $tempDir . $fileName;
                                    QRcode::png($resi['resi_number'], $filePath, QR_ECLEVEL_L, 10);
                                    ?>
                                    <button onclick="viewQRCode('<?php echo $filePath; ?>', '<?php echo htmlspecialchars($resi['name']); ?>')">View QR Code</button>
                                </td>
                                <td>
                                    <button onclick="printQRCode('<?php echo $filePath; ?>', '<?php echo htmlspecialchars($resi['resi_number']); ?>', '<?php echo htmlspecialchars($resi['name']); ?>', '<?php echo htmlspecialchars($resi['new_code']); ?>')">Print</button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Viewing QR Code -->
<div id="qrCodeModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h4>QR Code</h4>
        <img id="qrCodeImage" src="" alt="QR Code" style="max-width: 100%; height: auto;">
    </div>
</div>

<?php include_once('layouts/footer.php'); ?>

<script>
function viewQRCode(filePath, productName) {
    var modal = document.getElementById('qrCodeModal');
    var qrCodeImage = document.getElementById('qrCodeImage');
    qrCodeImage.src = filePath;
    modal.style.display = 'block';
}

var closeModal = document.getElementsByClassName('close')[0];
closeModal.onclick = function() {
    var modal = document.getElementById('qrCodeModal');
    modal.style.display = 'none';
}

window.onclick = function(event) {
    var modal = document.getElementById('qrCodeModal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}

function printQRCode(filePath, resiNumber, productName, newCode) {
    var printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>Print Resi</title>');
    printWindow.document.write('<style>@page { size: A5; margin: 10mm; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { width: 148mm; height: 210mm; margin: auto; padding: 10mm; border: 1px solid #ddd; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .qr-code { text-align: center; margin-bottom: 20px; } .qr-code img { max-width: 100%; height: auto; } .details { margin-bottom: 20px; } .details p { margin: 5px 0; } .footer { text-align: center; margin-top: 20px; } .title { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 10px; } </style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write('<div class="container">');
    printWindow.document.write('<div class="title">RESI</div>');
    printWindow.document.write('<div class="qr-code"><img src="' + filePath + '" alt="QR Code"></div>');
    printWindow.document.write('<div class="details"><p><strong>Resi Number:</strong> ' + resiNumber + '</p><p><strong>Product Name:</strong> ' + productName + '</p><p><strong>New Code:</strong> ' + newCode + '</p></div>');
    printWindow.document.write('<div class="footer">Please write any additional information here.</div>');
    printWindow.document.write('</div>');
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}
</script>

<style>
/* CSS khusus untuk tampilan print */
@media print {
    @page {
        size: A5; /* Ukuran kertas A5 */
        margin: 10mm; /* Margin untuk halaman cetak */
    }
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 148mm;
        height: 210mm;
        margin: auto;
        padding: 10mm;
        border: 1px solid #ddd;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .qr-code {
        text-align: center;
        margin-bottom: 20px;
    }
    .qr-code img {
        width: 80%; /* QR Code lebih besar */
        height: auto;
    }
    .details {
        margin-bottom: 20px;
    }
    .details p {
        margin: 5px 0;
    }
    .footer {
        text-align: center;
        margin-top: 20px;
    }
    .title {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
}
</style>
