<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800 fw-bold">Hasil Evaluasi dan Masukan Pengguna</h1>

    <!-- Tombol untuk menampilkan QR Code dan Download -->
    <div class="d-flex justify-content-end gap-2 mb-3">
        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#qrEvaluationModal">
            <i class="bi bi-qr-code-scan me-2"></i> QR Code Evaluasi
        </button>
        <a href="?page=evaluation_download" class="btn btn-success">
            <i class="bi bi-download me-2"></i> Download CSV
        </a>
    </div>

    <!-- Modal untuk QR Code Evaluasi -->
    <div class="modal fade" id="qrEvaluationModal" tabindex="-1" aria-labelledby="qrEvaluationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="qrEvaluationModalLabel">QR Code Formulir Evaluasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>Scan QR Code di bawah atau gunakan link berikut untuk mengisi formulir:</p>
                    <?php
                        // Assuming BASE_URL is defined and correctly points to index.php
                        $evaluation_url = str_replace('index.php', '', BASE_URL) . '?page=evaluation_form';
                    ?>
                    <a href="<?php echo $evaluation_url; ?>" target="_blank" id="evaluationLink"><?php echo $evaluation_url; ?></a>
                    <div class="my-3">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=<?php echo urlencode($evaluation_url); ?>" alt="QR Code Formulir Evaluasi" class="img-fluid">
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('evaluationLink')">
                        <i class="bi bi-copy me-2"></i> Salin Link
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-neumorphic mb-4">
        <div class="card-header bg-transparent border-0 py-3">
            <h6 class="m-0 fw-bold text-dark">Semua Masukan yang Diterima</h6>
        </div>
        <div class="card-body">
            <?php if (!empty($results)): ?>
                <div class="table-responsive">
                    <table class="table table-hover" id="evaluationsTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Unit / Jabatan</th>
                                <th>Waktu Submit</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($results as $index => $row): ?>
                                <tr>
                                    <td><?php echo $index + 1; ?></td>
                                    <td><?php echo htmlspecialchars($row['nama']); ?></td>
                                    <td><?php echo htmlspecialchars($row['email']); ?></td>
                                    <td><?php echo htmlspecialchars($row['unit'] . ' / ' . $row['jabatan']); ?></td>
                                    <td><?php echo htmlspecialchars(date('d-m-Y H:i', strtotime($row['created_at']))); ?></td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#detailModal"
                                            data-details='<?php echo htmlspecialchars(json_encode($row), ENT_QUOTES, 'UTF-8'); ?>'>
                                            <i class="bi bi-eye"></i> Detail
                                        </button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php else: ?>
                <div class="alert alert-info">Belum ada data evaluasi dan masukan yang diterima.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Modal untuk Detail -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalLabel">Detail Masukan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="detailContent">
                    <!-- Detail akan diisi oleh JavaScript -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var detailModal = document.getElementById('detailModal');
    detailModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var detailContent = detailModal.querySelector('#detailContent');
        var modalTitle = detailModal.querySelector('.modal-title');
        
        var rawDetails = button.getAttribute('data-details');
        console.log('Raw data-details attribute:', rawDetails); // Debugging: Log raw attribute
        
        let details = {};
        try {
            details = JSON.parse(rawDetails);
            console.log('Parsed details object:', details); // Debugging: Log parsed object
            
            modalTitle.textContent = 'Detail Masukan dari ' + (details.nama || 'Pengguna Tidak Diketahui');

            // Fungsi untuk format teks agar newline menjadi <br>
            const formatText = (text) => text ? text.replace(/\n/g, '<br>') : '<em class="text-muted">Tidak diisi</em>';

            detailContent.innerHTML = `
                <dl class="row">
                    <dt class="col-sm-4">Nama</dt>
                    <dd class="col-sm-8">${details.nama || '<em class="text-muted">Tidak diisi</em>'}</dd>
                    
                    <dt class="col-sm-4">Email</dt>
                    <dd class="col-sm-8">${details.email || '<em class="text-muted">Tidak diisi</em>'}</dd>
                    
                    <dt class="col-sm-4">Unit</dt>
                    <dd class="col-sm-8">${details.unit || '<em class="text-muted">Tidak diisi</em>'}</dd>
                    
                    <dt class="col-sm-4">Jabatan</dt>
                    <dd class="col-sm-8">${details.jabatan || '<em class="text-muted">Tidak diisi</em>'}</dd>
                    
                    <dt class="col-sm-4">Lama Penggunaan SIMRS</dt>
                    <dd class="col-sm-8">${details.lama_penggunaan || '<em class="text-muted">Tidak diisi</em>'}</dd>
                    
                    <hr class="my-3">

                    <dt class="col-sm-12">Pengalaman Pengguna</dt>
                    <dd class="col-sm-12">${formatText(details.pengalaman_pengguna)}</dd>
                    
                    <dt class="col-sm-12">Pemahaman Unit</dt>
                    <dd class="col-sm-12">${formatText(details.pemahaman_unit)}</dd>

                    <hr class="my-3">
                    
                    <dt class="col-sm-12">Usulan Fitur & Deskripsi</dt>
                    <dd class="col-sm-12">${formatText(details.usulan_fitur)}</dd>
                    
                    <hr class="my-3">
                    
                    <dt class="col-sm-12">Saran Pengembangan Lainnya</dt>
                    <dd class="col-sm-12">${formatText(details.saran_pengembangan)}</dd>
                </dl>
            `;
        } catch (e) {
            console.error('Error parsing JSON from data-details:', e);
            console.error('Data that caused error:', rawDetails);
            modalTitle.textContent = 'Error Memuat Detail';
            detailContent.innerHTML = '<p class="text-danger">Terjadi kesalahan saat memuat data. Mohon periksa konsol browser untuk detail lebih lanjut.</p>';
        }
    });
});
</script>