<?php
/**
 * admin/notifications.php
 * Create, manage and broadcast notifications to users
 */
require_once '../includes/config.php';
requireLogin();
requireAdmin();

$success = '';
$error   = '';

/* ══════════════════════════════════════════════════════════════
   POST HANDLERS
   ══════════════════════════════════════════════════════════════ */

if (isset($_POST['send_notification'])) {
    $title      = sanitize($_POST['title']);
    $message    = sanitize($_POST['message']);
    $type       = in_array($_POST['type'], ['info','success','warning','failed','pending','deposit'])
                    ? $_POST['type'] : 'info';
    $target     = $_POST['target'];
    $target_uid = $target === 'user' ? (int)$_POST['target_user_id'] : null;

    if (empty($title) || empty($message)) {
        $error = 'Title and message are required.';
    } else {
        if ($target === 'all') {
            $stmt = $conn->prepare(
                "INSERT INTO notifications (user_id, type, title, message, is_active)
                 VALUES (NULL, ?, ?, ?, 1)"
            );
            $stmt->bind_param('sss', $type, $title, $message);
        } else {
            $stmt = $conn->prepare(
                "INSERT INTO notifications (user_id, type, title, message, is_active)
                 VALUES (?, ?, ?, ?, 1)"
            );
            $stmt->bind_param('isss', $target_uid, $type, $title, $message);
        }
        $success = $stmt->execute() ? 'Notification sent successfully!' : 'Failed to send notification.';
    }
}

if (isset($_POST['deactivate']) && is_numeric($_POST['notif_id'])) {
    $nid = (int)$_POST['notif_id'];
    $conn->query("UPDATE notifications SET is_active = 0 WHERE id = {$nid}");
    $success = 'Notification deactivated.';
}

if (isset($_POST['activate']) && is_numeric($_POST['notif_id'])) {
    $nid = (int)$_POST['notif_id'];
    $conn->query("UPDATE notifications SET is_active = 1 WHERE id = {$nid}");
    $success = 'Notification activated.';
}

if (isset($_POST['delete_notif']) && is_numeric($_POST['notif_id'])) {
    $nid = (int)$_POST['notif_id'];
    $conn->query("DELETE FROM notifications WHERE id = {$nid}");
    $success = 'Notification deleted.';
}

/* ══════════════════════════════════════════════════════════════
   FETCH DATA
   ══════════════════════════════════════════════════════════════ */
$filter       = isset($_GET['filter']) && $_GET['filter'] === 'inactive' ? 0 : 1;
$filter_label = $filter ? 'Active' : 'Inactive';

$rows = $conn->query(
    "SELECT n.id, n.user_id, n.type, n.title, n.message, n.is_active, n.created_at,
            u.username, u.email
     FROM notifications n
     LEFT JOIN users u ON n.user_id = u.id
     WHERE n.is_active = {$filter}
     ORDER BY n.created_at DESC
     LIMIT 100"
);

$stats = $conn->query(
    "SELECT
        COUNT(*) AS total,
        SUM(is_active = 1) AS active_count,
        SUM(is_active = 0) AS inactive_count,
        SUM(user_id IS NULL) AS broadcasts
     FROM notifications"
)->fetch_assoc();

$user_list = $conn->query(
    "SELECT id, username, email FROM users ORDER BY username ASC LIMIT 200"
);

/* ── SVG icon definitions ── */
$svg_bell   = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>';
$svg_send   = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>';
$svg_users  = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>';
$svg_user   = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
$svg_pause  = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';
$svg_play   = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
$svg_trash  = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>';
$svg_check  = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
$svg_minus  = '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>';

$type_svgs = [
    'info'    => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
    'success' => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 11 12 14 22 4"/></svg>',
    'warning' => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
    'failed'  => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
    'pending' => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
    'deposit' => '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>',
];

$type_colors = [
    'info'    => '#6366f1',
    'success' => '#22c55e',
    'warning' => '#f59e0b',
    'failed'  => '#ef4444',
    'pending' => '#94a3b8',
    'deposit' => '#f97316',
];

include '../includes/header.php';
?>

<style>
.icon-btn {
    display:inline-flex;align-items:center;gap:5px;
    background:none;border-radius:6px;cursor:pointer;font-size:11px;
    padding:4px 9px;font-family:inherit;transition:opacity .15s;line-height:1;
}
.icon-btn:hover { opacity:.75; }
.type-badge {
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;padding:2px 8px;border-radius:20px;line-height:1.6;
}
</style>

<div class="page-header">
    <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;background:linear-gradient(135deg,#4f46e5,#6366f1);
                    border-radius:10px;display:flex;align-items:center;justify-content:center;
                    color:#fff;flex-shrink:0">
            <?= $svg_bell ?>
        </div>
        <div>
            <h1 style="margin:0">Notifications</h1>
            <p style="margin:0;color:var(--text-light);font-size:13px">Create and manage system notifications for users</p>
        </div>
    </div>
</div>

<?php if ($success): ?><div class="alert alert-success"><?= $success ?></div><?php endif; ?>
<?php if ($error):   ?><div class="alert alert-danger"><?= $error ?></div><?php endif; ?>

<!-- ── Stats Bar ──────────────────────────────────────────────── -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem">
<?php
$stat_cards = [
    [
        'label' => 'Total',
        'val'   => number_format($stats['total']),
        'color' => '#6366f1',
        'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>',
    ],
    [
        'label' => 'Active',
        'val'   => number_format($stats['active_count']),
        'color' => '#22c55e',
        'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
    ],
    [
        'label' => 'Inactive',
        'val'   => number_format($stats['inactive_count']),
        'color' => '#94a3b8',
        'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
    ],
    [
        'label' => 'Broadcasts',
        'val'   => number_format($stats['broadcasts']),
        'color' => '#f97316',
        'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"/></svg>',
    ],
];
foreach ($stat_cards as $sc): ?>
    <div class="card" style="border-top:3px solid <?= $sc['color'] ?>;padding:.85rem 1rem">
        <div style="color:<?= $sc['color'] ?>;margin-bottom:6px"><?= $sc['icon'] ?></div>
        <div style="font-size:1.6rem;font-weight:700;color:<?= $sc['color'] ?>"><?= $sc['val'] ?></div>
        <div style="font-size:12px;color:var(--text-light)"><?= $sc['label'] ?></div>
    </div>
<?php endforeach; ?>
</div>

<div style="display:grid;grid-template-columns:1fr 1.5fr;gap:1.5rem;align-items:start">

    <!-- ══ Create Notification ══════════════════════════════════ -->
    <div class="card" style="border-top:3px solid #6366f1">
        <div class="card-header" style="display:flex;align-items:center;gap:8px">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
            <h2 style="margin:0">Send Notification</h2>
        </div>
        <div class="card-body">
            <form method="POST" id="notifForm">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control"
                           placeholder="e.g. Scheduled Maintenance" required maxlength="100">
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea name="message" class="form-control" rows="4"
                              placeholder="Write your notification message here..." required maxlength="500"></textarea>
                    <small style="color:var(--text-light)">Max 500 characters</small>
                </div>
                <div class="form-group">
                    <label>Type / Badge</label>
                    <select name="type" class="form-control" id="typeSelect" onchange="updateTypePreview(this.value)">
                        <option value="info">Info</option>
                        <option value="success">Success</option>
                        <option value="warning">Warning</option>
                        <option value="failed">Failed / Error</option>
                        <option value="pending">Pending</option>
                        <option value="deposit">Deposit / Funding</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Target Audience</label>
                    <div style="display:flex;gap:1rem;margin-top:.4rem">
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:normal">
                            <input type="radio" name="target" value="all" checked onchange="toggleUserField(false)">
                            <span style="display:inline-flex;align-items:center;gap:4px">
                                <?= $svg_users ?> All Users
                            </span>
                        </label>
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:normal">
                            <input type="radio" name="target" value="user" onchange="toggleUserField(true)">
                            <span style="display:inline-flex;align-items:center;gap:4px">
                                <?= $svg_user ?> Specific User
                            </span>
                        </label>
                    </div>
                </div>
                <div class="form-group" id="userSelectField" style="display:none">
                    <label>Select User</label>
                    <select name="target_user_id" class="form-control" id="userSelect">
                        <option value="">— choose a user —</option>
                        <?php if ($user_list): while ($u = $user_list->fetch_assoc()): ?>
                        <option value="<?= $u['id'] ?>">
                            <?= htmlspecialchars($u['username']) ?> (<?= htmlspecialchars($u['email']) ?>)
                        </option>
                        <?php endwhile; endif; ?>
                    </select>
                </div>

                <!-- Live preview -->
                <div style="margin:1rem 0;padding:12px 16px;border-radius:10px;
                     border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.06);font-size:13px">
                    <div style="font-weight:600;margin-bottom:4px" id="previewTitle">Preview title</div>
                    <div style="color:var(--text-light)" id="previewMsg">Your message will appear here...</div>
                    <div style="margin-top:8px">
                        <span id="previewBadge" class="type-badge"
                              style="background:#6366f122;color:#6366f1;border:1px solid #6366f155">
                            <span id="previewBadgeIcon"><?= $type_svgs['info'] ?></span>
                            <span id="previewBadgeText">info</span>
                        </span>
                    </div>
                </div>

                <button type="submit" name="send_notification" class="btn btn-primary"
                        style="width:100%;background:linear-gradient(135deg,#4f46e5,#6366f1);
                               display:flex;align-items:center;justify-content:center;gap:8px">
                    <?= $svg_send ?> Send Notification
                </button>
            </form>
        </div>
    </div>

    <!-- ══ Notification Log ═════════════════════════════════════ -->
    <div class="card">
        <div class="card-header" style="display:flex;align-items:center;justify-content:space-between">
            <h2 style="margin:0">Notification Log</h2>
            <div style="display:flex;gap:8px">
                <a href="?filter=active"
                   style="font-size:12px;padding:4px 12px;border-radius:6px;text-decoration:none;
                          display:inline-flex;align-items:center;gap:4px;
                          background:<?= $filter ? '#22c55e' : 'var(--bg-secondary)' ?>;
                          color:<?= $filter ? '#fff' : 'inherit' ?>;
                          border:1px solid <?= $filter ? '#22c55e' : 'var(--border-color)' ?>">
                    <?= $svg_check ?> Active
                </a>
                <a href="?filter=inactive"
                   style="font-size:12px;padding:4px 12px;border-radius:6px;text-decoration:none;
                          display:inline-flex;align-items:center;gap:4px;
                          background:<?= !$filter ? '#94a3b8' : 'var(--bg-secondary)' ?>;
                          color:<?= !$filter ? '#fff' : 'inherit' ?>;
                          border:1px solid <?= !$filter ? '#94a3b8' : 'var(--border-color)' ?>">
                    <?= $svg_minus ?> Inactive
                </a>
            </div>
        </div>
        <div class="card-body" style="padding:0;overflow-x:auto">
            <table style="width:100%;border-collapse:collapse;font-size:13px">
                <thead>
                    <tr style="background:var(--bg-secondary)">
                        <th style="padding:10px 14px;text-align:left">Title / Message</th>
                        <th style="padding:10px 14px;text-align:left">Type</th>
                        <th style="padding:10px 14px;text-align:left">Target</th>
                        <th style="padding:10px 14px;text-align:left">Sent</th>
                        <th style="padding:10px 14px;text-align:center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                if ($rows && $rows->num_rows > 0):
                    while ($n = $rows->fetch_assoc()):
                        $tc           = $type_colors[$n['type']] ?? '#6366f1';
                        $ti           = $type_svgs[$n['type']]   ?? $type_svgs['info'];
                        $is_broadcast = $n['user_id'] === null;
                ?>
                <tr style="border-bottom:1px solid var(--border-color)">
                    <td style="padding:10px 14px;max-width:220px">
                        <div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                            <?= htmlspecialchars($n['title']) ?>
                        </div>
                        <div style="color:var(--text-light);font-size:12px;margin-top:2px;
                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                            <?= htmlspecialchars(substr($n['message'], 0, 60)) . (strlen($n['message']) > 60 ? '…' : '') ?>
                        </div>
                    </td>
                    <td style="padding:10px 14px">
                        <span class="type-badge"
                              style="background:<?= $tc ?>22;color:<?= $tc ?>;border:1px solid <?= $tc ?>55">
                            <?= $ti ?> <?= $n['type'] ?>
                        </span>
                    </td>
                    <td style="padding:10px 14px">
                        <?php if ($is_broadcast): ?>
                            <span style="display:inline-flex;align-items:center;gap:4px;font-size:11px;
                                         background:#f97316;color:#fff;padding:2px 8px;border-radius:20px">
                                <?= $svg_users ?> All Users
                            </span>
                        <?php else: ?>
                            <div style="display:flex;align-items:center;gap:4px;font-size:12px">
                                <?= $svg_user ?>
                                <?= htmlspecialchars($n['username'] ?? 'Deleted') ?>
                            </div>
                            <div style="font-size:11px;color:var(--text-light);padding-left:17px">#<?= $n['user_id'] ?></div>
                        <?php endif; ?>
                    </td>
                    <td style="padding:10px 14px;white-space:nowrap;font-size:12px;color:var(--text-light)">
                        <?= date('M d, Y', strtotime($n['created_at'])) ?><br>
                        <span style="font-size:11px"><?= date('h:i A', strtotime($n['created_at'])) ?></span>
                    </td>
                    <td style="padding:10px 14px;text-align:center;white-space:nowrap">
                        <?php if ($n['is_active']): ?>
                        <form method="POST" style="display:inline">
                            <input type="hidden" name="notif_id" value="<?= $n['id'] ?>">
                            <button name="deactivate" title="Pause" class="icon-btn"
                                    style="border:1px solid #f59e0b;color:#f59e0b">
                                <?= $svg_pause ?> Pause
                            </button>
                        </form>
                        <?php else: ?>
                        <form method="POST" style="display:inline">
                            <input type="hidden" name="notif_id" value="<?= $n['id'] ?>">
                            <button name="activate" title="Activate" class="icon-btn"
                                    style="border:1px solid #22c55e;color:#22c55e">
                                <?= $svg_play ?> Activate
                            </button>
                        </form>
                        <?php endif; ?>
                        <form method="POST" style="display:inline"
                              onsubmit="return confirm('Delete this notification permanently?')">
                            <input type="hidden" name="notif_id" value="<?= $n['id'] ?>">
                            <button name="delete_notif" title="Delete" class="icon-btn"
                                    style="border:1px solid #ef4444;color:#ef4444;margin-left:4px">
                                <?= $svg_trash ?>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endwhile; else: ?>
                <tr>
                    <td colspan="5" style="padding:2rem;text-align:center;color:var(--text-light)">
                        No <?= strtolower($filter_label) ?> notifications found.
                    </td>
                </tr>
                <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div><!-- /grid -->

<script>
function toggleUserField(show) {
    document.getElementById('userSelectField').style.display = show ? 'block' : 'none';
    if (show) document.getElementById('userSelect').setAttribute('required','required');
    else      document.getElementById('userSelect').removeAttribute('required');
}

const badgeColors = {
    info:'#6366f1', success:'#22c55e', warning:'#f59e0b',
    failed:'#ef4444', pending:'#94a3b8', deposit:'#f97316'
};
const badgeIcons = {
    info:    '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
    success: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 11 12 14 22 4"/></svg>',
    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
    failed:  '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
    pending: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
    deposit: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>',
};

function updateTypePreview(val) {
    const color  = badgeColors[val] || '#6366f1';
    const badge  = document.getElementById('previewBadge');
    badge.style.background  = color + '22';
    badge.style.color       = color;
    badge.style.borderColor = color + '55';
    document.getElementById('previewBadgeIcon').innerHTML  = badgeIcons[val] || badgeIcons.info;
    document.getElementById('previewBadgeText').textContent = val;
}

document.querySelector('[name="title"]').addEventListener('input', function() {
    document.getElementById('previewTitle').textContent = this.value || 'Preview title';
});
document.querySelector('[name="message"]').addEventListener('input', function() {
    document.getElementById('previewMsg').textContent = this.value || 'Your message will appear here...';
});
</script>

<?php include '../includes/footer.php'; ?>
