<?= $this->extend('layout/admin') ?>

<?= $this->section('content') ?>
<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="fw-bold mb-0">Pusat Notifikasi</h3>
    <!-- Tombol ini nantinya akan kita sambungkan ke fungsi proses antrian -->
    <button class="btn btn-primary fw-bold" id="btn-proses-antrian">
        <i class="bi bi-send"></i> Proses Antrian Sekarang
    </button>
</div>

<div class="card border-0 shadow-sm" style="border-radius: 10px;">
    <div class="card-body p-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Waktu Masuk</th>
                        <th>Penerima</th>
                        <th>No. Tujuan</th>
                        <th>Isi Pesan</th>
                        <th>Percobaan</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $no = 1; foreach($notifikasi as $row): ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td><?= date('d/m/Y H:i', strtotime($row['created_at'])) ?></td>
                        <td><span class="fw-bold"><?= $row['nama_staff'] ?></span></td>
                        <td><?= $row['no_tujuan'] ?></td>
                        <td>
                            <!-- Tombol untuk melihat teks penuh agar tabel tidak terlalu lebar -->
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#pesanModal<?= $row['id'] ?>">
                                <i class="bi bi-chat-text"></i> Lihat Teks
                            </button>
                        </td>
                        <td>
                            <?php if($row['coba_kirim'] == 0): ?>
                                <span class="badge bg-secondary">0 / 3</span>
                            <?php elseif($row['coba_kirim'] < 2): ?>
                                <span class="badge bg-warning text-dark"><?= $row['coba_kirim'] ?> / 3</span>
                            <?php else: ?>
                                <span class="badge bg-danger">Maks (2/3)</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if($row['status'] == 0): ?>
                                <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split"></i> Antrian</span>
                            <?php elseif($row['status'] == 1): ?>
                                <span class="badge bg-success"><i class="bi bi-check-circle"></i> Sukses</span>
                            <?php elseif($row['status'] == 3): ?>
                                <span class="badge bg-danger"><i class="bi bi-x-circle"></i> Gagal</span>
                            <?php endif; ?>
                        </td>
                    </tr>

                    <!-- Modal Lihat Pesan -->
                    <div class="modal fade" id="pesanModal<?= $row['id'] ?>" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title fw-bold">Detail Pesan</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <pre style="white-space: pre-wrap; font-family: inherit;"><?= $row['pesan'] ?></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    
                    <?php if(empty($notifikasi)): ?>
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">Belum ada data antrian notifikasi.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<?= $this->endSection() ?> <!-- Pindahkan satu penutup ke sini untuk menutup section 'content' -->

<?= $this->section('scripts') ?>
<script>
document.getElementById('btn-proses-antrian').addEventListener('click', function() {
    let btn = this;
    let originalText = btn.innerHTML;
    
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Memproses...';
    btn.disabled = true;

    fetch('<?= base_url('admin/notifikasi/proses') ?>')
        .then(response => response.json())
        .then(res => {
            alert(res.pesan);
            location.reload(); 
        })
        .catch(err => {
            alert("Terjadi kesalahan saat memproses antrian.");
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
});
</script>
<?= $this->endSection() ?> <!-- Penutup untuk section 'scripts' -->