<?= $this->extend('layouts/main') ?>

<?= $this->section('title') ?>
Monitoring Chatbot WA
<?= $this->endSection() ?>

<?= $this->section('page_title') ?>
Log Notifikasi WhatsApp
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div class="row">
    <div class="col-lg-4">
        <div class="glass-card mb-4" style="border-top: 5px solid #25d366;">
            <h4 class="mb-4"><i class="bi bi-send-plus-fill text-success"></i> Tes Kirim Pesan</h4>
            <form action="<?= base_url('admin/chatbot/test') ?>" method="POST">
                <div class="mb-3">
                    <label class="form-label small fw-bold">NOMOR TUJUAN (WA)</label>
                    <input type="text" class="form-control rounded-pill px-4" name="target"
                        placeholder="Contoh: 08123456789" required>
                    <div class="form-text small">Gunakan format lokal atau internasional tanpa spasi.</div>
                </div>
                <button type="submit" class="btn btn-success d-block w-100 rounded-pill py-2 shadow-sm fw-bold">KIRIM
                    TES PESAN <i class="bi bi-chevron-right ms-1"></i></button>
            </form>
        </div>

        <div class="glass-card">
            <h5 class="mb-3"><i class="bi bi-info-circle text-primary"></i> Statistik Singkat</h5>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-secondary small">Terkirim Hari Ini</span>
                <span class="fw-bold"><?= count($logs) ?></span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-secondary small">Status API</span>
                <span class="badge bg-success bg-opacity-25 text-success rounded-pill px-3 py-1">Active</span>
            </div>
            <hr class="my-3 opacity-10">
            <p class="small text-muted mb-0">Sistem menggunakan provider <strong>Kirimi.id</strong> sebagai gateway
                default.</p>
        </div>
    </div>

    <div class="col-lg-8">
        <?php if (session()->getFlashdata('success')): ?>
            <div class="alert alert-success rounded-pill px-4 mb-4" role="alert">
                <?= session()->getFlashdata('success') ?>
            </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('error')): ?>
            <div class="alert alert-danger rounded-pill px-4 mb-4" role="alert">
                <?= session()->getFlashdata('error') ?>
            </div>
        <?php endif; ?>

        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">History Notifikasi</h4>
                <a href="<?= base_url('admin/chatbot/clear') ?>" class="btn btn-sm btn-outline-danger rounded-pill px-3"
                    onclick="return confirm('Hapus semua riwayat?')">
                    <i class="bi bi-trash-fill me-1"></i> Bersihkan Log
                </a>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr class="text-secondary small fw-bold opacity-75">
                            <th>#ID</th>
                            <th>PENERIMA</th>
                            <th>PESAN</th>
                            <th>STATUS</th>
                            <th>WAKTU</th>
                            <th class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($logs)): ?>
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">Belum ada riwayat pengiriman pesan.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($logs as $log): ?>
                                <tr>
                                    <td><?= $log['id'] ?></td>
                                    <td><span class="fw-bold"><?= $log['target'] ?></span></td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 250px;" title="<?= $log['message'] ?>">
                                            <?= $log['message'] ?>
                                        </div>
                                    </td>
                                    <td>
                                        <?php if (strpos($log['status'], 'SUCCESS') !== false): ?>
                                            <span class="badge bg-success bg-opacity-25 text-success rounded-pill px-3">OK</span>
                                        <?php else: ?>
                                            <span class="badge bg-danger bg-opacity-25 text-danger rounded-pill px-3">Failed</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="small text-muted">
                                        <?= date('H:i', strtotime($log['created_at'])) ?><br><?= date('d/m/Y', strtotime($log['created_at'])) ?>
                                    </td>
                                    <td class="text-center">
                                        <a href="<?= base_url('admin/chatbot/delete/' . $log['id']) ?>"
                                            class="btn btn-sm btn-light rounded-circle text-danger shadow-sm"
                                            onclick="return confirm('Hapus log ini?')">
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>