views/admin/TemplatesView.php

<?php
// Admin view for managing ticket templates
// Receives $templates from controller
require_once __DIR__ . '/../../middleware/SecurityHeadersMiddleware.php';
require_once __DIR__ . '/../../middleware/CsrfMiddleware.php';
$nonce = SecurityHeadersMiddleware::getNonce();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Management - Admin</title>
    <link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
    <link rel="stylesheet" href="/assets/css/base.css">
    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css">
    <script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
    <script nonce="<?php echo $nonce; ?>">
        window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
    </script>
</head>
<body>
    <div class="user-header">
        <div class="user-header-left">
            <a href="/" class="back-link">[ ← DASHBOARD ]</a>
            <span style="margin-left: 1rem; color: var(--terminal-amber);">Admin: Templates</span>
        </div>
        <div class="user-header-right">
            <?php if (isset($GLOBALS['currentUser'])): ?>
                <span class="user-name">[ <?php echo htmlspecialchars(strtoupper($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username'])); ?> ]</span>
                <span class="admin-badge">[ ADMIN ]</span>
            <?php endif; ?>
        </div>
    </div>

    <div class="ascii-frame-outer" style="max-width: 1200px; margin: 2rem auto;">
        <span class="bottom-left-corner">╚</span>
        <span class="bottom-right-corner">╝</span>

        <div class="ascii-section-header">Ticket Template Management</div>
        <div class="ascii-content">
            <div class="ascii-frame-inner">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                    <h2 style="margin: 0;">Ticket Templates</h2>
                    <button data-action="show-create-modal" class="btn">+ NEW TEMPLATE</button>
                </div>

                <p style="color: var(--terminal-green-dim); margin-bottom: 1rem;">
                    Templates pre-fill ticket creation forms with standard content for common ticket types.
                </p>

                <table style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Template Name</th>
                            <th>Category</th>
                            <th>Type</th>
                            <th>Priority</th>
                            <th>Active</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($templates)): ?>
                            <tr>
                                <td colspan="6" style="text-align: center; padding: 2rem; color: var(--terminal-green-dim);">
                                    No templates defined. Create templates to speed up ticket creation.
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($templates as $tpl): ?>
                                <tr>
                                    <td><strong><?php echo htmlspecialchars($tpl['template_name']); ?></strong></td>
                                    <td><?php echo htmlspecialchars($tpl['category'] ?? 'Any'); ?></td>
                                    <td><?php echo htmlspecialchars($tpl['type'] ?? 'Any'); ?></td>
                                    <td>P<?php echo $tpl['default_priority'] ?? '4'; ?></td>
                                    <td>
                                        <span style="color: <?php echo ($tpl['is_active'] ?? 1) ? 'var(--status-open)' : 'var(--status-closed)'; ?>;">
                                            <?php echo ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive'; ?>
                                        </span>
                                    </td>
                                    <td>
                                        <button data-action="edit-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small">EDIT</button>
                                        <button data-action="delete-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small btn-danger">DELETE</button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <div class="lt-modal-overlay" id="templateModal" aria-hidden="true">
        <div class="lt-modal" style="max-width: 800px; width: 90%;">
            <div class="lt-modal-header">
                <span class="lt-modal-title" id="modalTitle">Create Template</span>
                <button class="lt-modal-close" data-modal-close>✕</button>
            </div>
            <form id="templateForm">
                <input type="hidden" id="template_id" name="template_id">
                <div class="lt-modal-body">
                    <div class="setting-row">
                        <label for="template_name">Template Name *</label>
                        <input type="text" id="template_name" name="template_name" required style="width: 100%;">
                    </div>
                    <div class="setting-row">
                        <label for="title_template">Title Template</label>
                        <input type="text" id="title_template" name="title_template" style="width: 100%;" placeholder="Pre-filled title text">
                    </div>
                    <div class="setting-row">
                        <label for="description_template">Description Template</label>
                        <textarea id="description_template" name="description_template" rows="10" style="width: 100%; min-height: 200px;" placeholder="Pre-filled description content"></textarea>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
                        <div class="setting-row setting-row-compact">
                            <label for="category">Category</label>
                            <select id="category" name="category">
                                <option value="">Any</option>
                                <option value="General">General</option>
                                <option value="Hardware">Hardware</option>
                                <option value="Software">Software</option>
                                <option value="Network">Network</option>
                                <option value="Security">Security</option>
                            </select>
                        </div>
                        <div class="setting-row setting-row-compact">
                            <label for="type">Type</label>
                            <select id="type" name="type">
                                <option value="">Any</option>
                                <option value="Maintenance">Maintenance</option>
                                <option value="Install">Install</option>
                                <option value="Task">Task</option>
                                <option value="Upgrade">Upgrade</option>
                                <option value="Issue">Issue</option>
                                <option value="Problem">Problem</option>
                            </select>
                        </div>
                        <div class="setting-row setting-row-compact">
                            <label for="priority">Priority</label>
                            <select id="priority" name="priority">
                                <option value="1">P1</option>
                                <option value="2">P2</option>
                                <option value="3">P3</option>
                                <option value="4" selected>P4</option>
                                <option value="5">P5</option>
                            </select>
                        </div>
                    </div>
                    <div class="setting-row">
                        <label><input type="checkbox" id="is_active" name="is_active" checked> Active</label>
                    </div>
                </div>
                <div class="lt-modal-footer">
                    <button type="submit" class="lt-btn lt-btn-primary">SAVE</button>
                    <button type="button" class="lt-btn lt-btn-ghost" data-modal-close>CANCEL</button>
                </div>
            </form>
        </div>
    </div>

    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
    <script nonce="<?php echo $nonce; ?>">
        const templates = <?php echo json_encode($templates ?? []); ?>;

        function showCreateModal() {
            document.getElementById('modalTitle').textContent = 'Create Template';
            document.getElementById('templateForm').reset();
            document.getElementById('template_id').value = '';
            document.getElementById('is_active').checked = true;
            lt.modal.open('templateModal');
        }

        function closeModal() {
            lt.modal.close('templateModal');
        }

        // Event delegation for data-action handlers
        document.addEventListener('click', function(event) {
            const target = event.target.closest('[data-action]');
            if (!target) return;

            const action = target.dataset.action;
            switch (action) {
                case 'show-create-modal':
                    showCreateModal();
                    break;
                case 'edit-template':
                    editTemplate(target.dataset.id);
                    break;
                case 'delete-template':
                    deleteTemplate(target.dataset.id);
                    break;
            }
        });

        // Form submit handler
        document.getElementById('templateForm').addEventListener('submit', function(e) {
            saveTemplate(e);
        });

        if (window.lt) lt.keys.initDefaults();

        function saveTemplate(e) {
            e.preventDefault();
            const data = {
                template_id: document.getElementById('template_id').value,
                template_name: document.getElementById('template_name').value,
                title_template: document.getElementById('title_template').value,
                description_template: document.getElementById('description_template').value,
                category: document.getElementById('category').value || null,
                type: document.getElementById('type').value || null,
                default_priority: parseInt(document.getElementById('priority').value) || 4,
                is_active: document.getElementById('is_active').checked ? 1 : 0
            };

            const method = data.template_id ? 'PUT' : 'POST';
            const url = '/api/manage_templates.php' + (data.template_id ? '?id=' + data.template_id : '');

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': window.CSRF_TOKEN
                },
                body: JSON.stringify(data)
            })
            .then(r => r.json())
            .then(result => {
                if (result.success) {
                    window.location.reload();
                } else {
                    lt.toast.error(result.error || 'Failed to save');
                }
            });
        }

        function editTemplate(id) {
            const tpl = templates.find(t => t.template_id == id);
            if (!tpl) return;

            document.getElementById('template_id').value = tpl.template_id;
            document.getElementById('template_name').value = tpl.template_name;
            document.getElementById('title_template').value = tpl.title_template || '';
            document.getElementById('description_template').value = tpl.description_template || '';
            document.getElementById('category').value = tpl.category || '';
            document.getElementById('type').value = tpl.type || '';
            document.getElementById('priority').value = tpl.default_priority || 4;
            document.getElementById('is_active').checked = (tpl.is_active ?? 1) == 1;
            document.getElementById('modalTitle').textContent = 'Edit Template';
            lt.modal.open('templateModal');
        }

        function deleteTemplate(id) {
            if (!confirm('Delete this template?')) return;
            fetch('/api/manage_templates.php?id=' + id, {
                method: 'DELETE',
                headers: { 'X-CSRF-Token': window.CSRF_TOKEN }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) window.location.reload();
            });
        }
    </script>
</body>
</html>