DarkflameServer/dDashboardServer/templates/playkeys/index.html

<div class="row">
    <div class="col-12">
        <h1 class="mb-4"><i class="bi bi-key"></i> Play Keys</h1>
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Create Play Keys</div>
            <div class="card-body">
                <form id="create-keys-form" class="row g-2">
                    <div class="col-auto">
                        <label class="form-label">Count</label>
                        <input type="number" id="key-count" class="form-control" value="1" min="1" max="100">
                    </div>
                    <div class="col-auto">
                        <label class="form-label">Uses</label>
                        <input type="number" id="key-uses" class="form-control" value="1" min="1">
                    </div>
                    <div class="col-6">
                        <label class="form-label">Notes</label>
                        <input type="text" id="key-notes" class="form-control" placeholder="Optional notes">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>
                <div id="created-keys" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">Existing Play Keys</div>
            <div class="card-body">
                <table id="playkeys-table" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Key</th>
                            <th>Uses</th>
                            <th>Times Used</th>
                            <th>Active</th>
                            <th>Notes</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
let playkeysTable = null;

function loadPlaykeys() {
    API.get('/api/playkeys').then(res => {
        const data = Array.isArray(res.data) ? res.data : (res || []);

        if ($.fn.DataTable.isDataTable('#playkeys-table')) {
            const table = $('#playkeys-table').DataTable();
            table.clear();
            table.rows.add(data);
            table.draw(false);
            playkeysTable = table;
        } else {
            playkeysTable = $('#playkeys-table').DataTable({
                data: data,
                columns: [
                    { data: 'id' },
                    { data: 'key_string' },
                    { data: 'key_uses' },
                    { data: 'times_used' },
                    { data: 'active', render: d => d ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' },
                    { data: 'notes' },
                    { data: 'created_at', render: d => d ? new Date(d * 1000).toLocaleString() : '-' },
                    { data: null, orderable: false, render: function(data, type, row) {
                        return `
                            <button class="btn btn-sm btn-danger" onclick="deleteKey(${row.id})">Delete</button>
                            <button class="btn btn-sm btn-info" onclick="viewKey(${row.id})">View</button>
                        `;
                    } }
                ],
                order: [[0, 'desc']],
                pageLength: 25
            });

            // Create keys form handler
            $('#create-keys-form').on('submit', async function(e) {
                e.preventDefault();
                const count = parseInt($('#key-count').val()) || 1;
                const uses = parseInt($('#key-uses').val()) || 1;
                const notes = $('#key-notes').val() || '';

                try {
                    const res = await API.post('/api/playkeys/create', { count: count, uses: uses, notes: notes });
                    if (res && res.success) {
                        $('#created-keys').html(`<div class="alert alert-success">Created ${res.count} key(s): <pre>${JSON.stringify(res.keys)}</pre></div>`);
                        loadPlaykeys();
                    } else {
                        $('#created-keys').html(`<div class="alert alert-danger">${res.error || 'Failed to create keys'}</div>`);
                    }
                } catch (err) {
                    $('#created-keys').html(`<div class="alert alert-danger">${err.message}</div>`);
                }
            });
        }

    }).catch(err => {
        const msg = err && err.message ? err.message : 'Failed to load play keys';
        document.getElementById('created-keys').innerHTML = `<div class="alert alert-danger">${msg}</div>`;
    });
}

// Use safeInit to ensure jQuery/DataTables and API are present
safeInit(function($) {
    loadPlaykeys();
}, { requireApi: true, timeout: 8000 });

async function deleteKey(id) {
    if (!confirm('Delete this play key?')) return;
    try {
        const res = await API.delete(`/api/playkeys/${id}`);
        if (res && res.success) {
            loadPlaykeys();
            alert('Play key deleted');
        } else {
            alert(res.error || 'Failed to delete key');
        }
    } catch (err) {
        alert(err.message);
    }
}

async function viewKey(id) {
    try {
        const res = await API.get(`/api/playkeys/${id}`);
        if (res && res.success) {
            const info = `ID: ${res.id}\nKey: ${res.key_string}\nUses: ${res.key_uses}\nTimes used: ${res.times_used}\nActive: ${res.active}\nNotes: ${res.notes}`;
            alert(info);
        } else {
            alert(res.error || 'Failed to get key');
        }
    } catch (err) {
        alert(err.message);
    }
}
</script>