<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">Pemantauan Suhu Ruangan Server</h1>

    <div class="row">
        <!-- Current Temperature & Humidity Card -->
        <div class="col-xl-6 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Suhu & Kelembapan Saat Ini</div>
                            <?php if ($latestReading): ?>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    Suhu: <?= htmlspecialchars($latestReading['temperature']) ?>°C
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    Kelembapan: <?= htmlspecialchars($latestReading['humidity']) ?>%
                                </div>
                                <div class="text-xs text-muted mt-1">
                                    Terakhir diperbarui: <?= date('d M Y H:i:s', strtotime($latestReading['recorded_at'])) ?>
                                </div>
                            <?php else: ?>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">Data suhu dan kelembapan belum tersedia.</div>
                            <?php endif; ?>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-thermometer-half fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- National Indicator Card -->
        <div class="col-xl-6 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Indikator Nasional Suhu Ruangan Server</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                Suhu Normal: <?= htmlspecialchars($nationalIndicator['normal_temperature_min']) ?>°C - <?= htmlspecialchars($nationalIndicator['normal_temperature_max']) ?>°C
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                Kelembapan Normal: <?= htmlspecialchars($nationalIndicator['normal_humidity_min']) ?>% - <?= htmlspecialchars($nationalIndicator['normal_humidity_max']) ?>%
                            </div>
                            <div class="text-xs text-muted mt-1">
                                (Sumber: Standar Nasional, jika ada. Ini adalah nilai contoh.)
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- History Link -->
    <div class="row">
        <div class="col-lg-12 mb-4">
            <a href="?page=room_temperature_history" class="btn btn-primary">Lihat Riwayat Suhu dan Kelembapan</a>
        </div>
    </div>

    <!-- Public Report QR Code Button -->
    <div class="row">
        <div class="col-lg-12 mb-4">
            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#qrPublicReportModal">
                <i class="bi bi-qr-code-scan me-2"></i> Tampilkan QR Laporan Publik
            </button>
        </div>
    </div>

    <!-- Modal for Public Report QR Code -->
    <div class="modal fade" id="qrPublicReportModal" tabindex="-1" aria-labelledby="qrPublicReportModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content card-neumorphic">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="qrPublicReportModalLabel">QR Code Laporan Suhu Bulanan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <?php
                    $currentMonth = date('m');
                    $currentYear = date('Y');
                    $publicReportUrl = BASE_URL . '?page=room_temperature_public_report&month=' . $currentMonth . '&year=' . $currentYear;
                    ?>
                    <p>Scan QR Code di bawah untuk melihat laporan suhu bulan <?php echo date('F Y'); ?>:</p>
                    <a href="<?php echo htmlspecialchars($publicReportUrl); ?>" target="_blank" id="publicReportQrLink">
                        <?php echo htmlspecialchars($publicReportUrl); ?>
                    </a>
                    <div class="my-3">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php echo urlencode($publicReportUrl); ?>" alt="QR Code Laporan Publik" class="img-fluid">
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('publicReportQrLink')"><i class="bi bi-copy me-2"></i> Salin Link</button>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-secondary btn-neumorphic-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Modal -->

<script>
    // Helper function to copy text to clipboard
    function copyToClipboard(elementId) {
        var copyText = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(copyText).then(function() {
            alert("Link berhasil disalin: " + copyText);
        }, function(err) {
            console.error('Gagal menyalin teks: ', err);
        });
    }
</script>
</div>
