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

<?= $this->section('content') ?>
<div class="container-fluid px-4">
    <h1 class="mt-4">Notifications</h1>
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-bell me-1"></i>
            Create New Notification
        </div>
        <div class="card-body">
            <form id="notificationForm">
                <?= csrf_field() ?>
                <div class="mb-3">
                    <label for="title" class="form-label">Title</label>
                    <input type="text" class="form-control" id="title" name="title" required>
                </div>
                <div class="mb-3">
                    <label for="message" class="form-label">Message</label>
                    <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Create Notification</button>
            </form>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            All Notifications
        </div>
        <div class="card-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($notifications as $notification): ?>
                    <tr>
                        <td><?= esc($notification['title']) ?></td>
                        <td><?= esc($notification['message']) ?></td>
                        <td>
                            <?php if ($notification['is_dismissed']): ?>
                                <span class="badge bg-secondary">Dismissed</span>
                            <?php else: ?>
                                <span class="badge bg-success">Active</span>
                            <?php endif; ?>
                        </td>
                        <td><?= date('Y-m-d H:i:s', strtotime($notification['created_at'])) ?></td>
                        <td>
                            <?php if (!$notification['is_dismissed']): ?>
                                <button class="btn btn-sm btn-warning dismiss-btn" data-id="<?= $notification['id'] ?>">
                                    Dismiss
                                </button>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
// Get CSRF token from the form
const csrfToken = document.querySelector('input[name="csrf_test_name"]').value;

document.getElementById('notificationForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    try {
        const response = await fetch('<?= base_url('admin/notifications/create') ?>', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'success') {
            alert('Notification created successfully');
            location.reload();
        } else {
            alert(result.message || 'Failed to create notification');
        }
    } catch (error) {
        alert('An error occurred while creating the notification');
    }
});

document.querySelectorAll('.dismiss-btn').forEach(button => {
    button.addEventListener('click', async function() {
        const id = this.dataset.id;
        
        try {
            const response = await fetch(`<?= base_url('admin/notifications/dismiss') ?>/${id}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            const result = await response.json();
            
            if (result.status === 'success') {
                location.reload();
            } else {
                alert(result.message || 'Failed to dismiss notification');
            }
        } catch (error) {
            alert('An error occurred while dismissing the notification');
        }
    });
});
</script>
<?= $this->endSection() ?> 