views/CreateTicketView.php

<?php
// This file contains the HTML template for creating a new ticket
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>Create New Ticket</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?v=20260320">
    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260320">
    <script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/utils.js?v=20260320"></script>
    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260320"></script>
    <script nonce="<?php echo $nonce; ?>">
    // CSRF Token for AJAX requests
    window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
    </script>
</head>
<body>
    <div class="user-header">
        <div class="user-header-left">
            <a href="/" class="back-link">[ &larr; DASHBOARD ]</a>
        </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>
                <?php if ($GLOBALS['currentUser']['is_admin']): ?>
                    <span class="admin-badge">[ ADMIN ]</span>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- OUTER FRAME: Create Ticket Form Container -->
    <div class="ascii-frame-outer">
        <span class="bottom-left-corner">╚</span>
        <span class="bottom-right-corner">╝</span>

        <!-- SECTION 1: Form Header -->
        <div class="ascii-section-header">Create New Ticket</div>
        <div class="ascii-content">
            <div class="ascii-frame-inner">
                <div class="ticket-header">
                    <h2>New Ticket Form</h2>
                    <p class="form-hint">
                        Complete the form below to create a new ticket
                    </p>
                </div>
            </div>
        </div>

        <?php if (isset($error)): ?>
        <!-- DIVIDER -->
        <div class="ascii-divider"></div>

        <!-- ERROR SECTION -->
        <div class="ascii-content">
            <div class="ascii-frame-inner">
                <div class="error-message inline-error">
                    <strong>[ ! ] ERROR:</strong> <?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- DIVIDER -->
        <div class="ascii-divider"></div>

        <form method="POST" action="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="ticket-form">

            <!-- SECTION 2: Template Selection -->
            <div class="ascii-section-header">Template Selection</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group">
                        <label for="templateSelect">Use Template (Optional)</label>
                        <select id="templateSelect" class="editable" data-action="load-template">
                            <option value="">-- No Template --</option>
                            <?php if (isset($templates) && !empty($templates)): ?>
                                <?php foreach ($templates as $template): ?>
                                    <option value="<?php echo $template['template_id']; ?>">
                                        <?php echo htmlspecialchars($template['template_name']); ?>
                                    </option>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                        <p class="form-hint">
                            Select a template to auto-fill form fields
                        </p>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 3: Basic Information -->
            <div class="ascii-section-header">Basic Information</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group">
                        <label for="title">Ticket Title *</label>
                        <input type="text" id="title" name="title" class="editable" required placeholder="Enter a descriptive title for this ticket">
                    </div>
                    <!-- Duplicate Warning Area -->
                    <div id="duplicateWarning" class="inline-warning" role="alert" aria-live="polite" aria-atomic="true" style="display: none;">
                        <div class="text-amber fw-bold duplicate-heading">
                            Possible Duplicates Found
                        </div>
                        <div id="duplicatesList" aria-live="polite"></div>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 4: Ticket Metadata -->
            <div class="ascii-section-header">Ticket Metadata</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group status-priority-row">
                        <div class="detail-quarter">
                            <label for="status">Status</label>
                            <select id="status" name="status" class="editable">
                                <option value="Open" selected>Open</option>
                                <option value="Closed">Closed</option>
                            </select>
                        </div>
                        <div class="detail-quarter">
                            <label for="priority">Priority</label>
                            <select id="priority" name="priority" class="editable">
                                <option value="1">P1 - Critical Impact</option>
                                <option value="2">P2 - High Impact</option>
                                <option value="3">P3 - Medium Impact</option>
                                <option value="4" selected>P4 - Low Impact</option>
                            </select>
                        </div>
                        <div class="detail-quarter">
                            <label for="category">Category</label>
                            <select id="category" name="category" class="editable">
                                <option value="Hardware">Hardware</option>
                                <option value="Software">Software</option>
                                <option value="Network">Network</option>
                                <option value="Security">Security</option>
                                <option value="General" selected>General</option>
                            </select>
                        </div>
                        <div class="detail-quarter">
                            <label for="type">Type</label>
                            <select id="type" name="type" class="editable">
                                <option value="Maintenance">Maintenance</option>
                                <option value="Install">Install</option>
                                <option value="Task">Task</option>
                                <option value="Upgrade">Upgrade</option>
                                <option value="Issue" selected>Issue</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 4b: Assignment -->
            <div class="ascii-section-header">Assignment</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group">
                        <label for="assigned_to">Assign To (Optional)</label>
                        <select id="assigned_to" name="assigned_to" class="editable">
                            <option value="">-- Unassigned --</option>
                            <?php if (isset($allUsers) && !empty($allUsers)): ?>
                                <?php foreach ($allUsers as $user): ?>
                                    <option value="<?php echo $user['user_id']; ?>">
                                        <?php echo htmlspecialchars($user['display_name'] ?? $user['username']); ?>
                                    </option>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                        <p class="form-hint">
                            Select a user to assign this ticket to
                        </p>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 5: Visibility Settings -->
            <div class="ascii-section-header">Visibility Settings</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group">
                        <label for="visibility">Ticket Visibility</label>
                        <select id="visibility" name="visibility" class="editable" data-action="toggle-visibility-groups">
                            <option value="public" selected>Public - All authenticated users</option>
                            <option value="internal">Internal - Specific groups only</option>
                            <option value="confidential">Confidential - Creator, assignee, admins only</option>
                        </select>
                        <p class="form-hint">
                            Controls who can view this ticket
                        </p>
                    </div>
                    <div id="visibilityGroupsContainer" class="detail-group" style="display: none;">
                        <label>Allowed Groups</label>
                        <div class="visibility-groups-list">
                            <?php
                            // Get all available groups
                            require_once __DIR__ . '/../models/UserModel.php';
                            $userModel = new UserModel($conn);
                            $allGroups = $userModel->getAllGroups();
                            foreach ($allGroups as $group):
                            ?>
                                <label class="group-checkbox-label">
                                    <input type="checkbox" name="visibility_groups[]" value="<?php echo htmlspecialchars($group); ?>" class="visibility-group-checkbox">
                                    <span class="group-badge"><?php echo htmlspecialchars($group); ?></span>
                                </label>
                            <?php endforeach; ?>
                            <?php if (empty($allGroups)): ?>
                                <span class="text-muted">No groups available</span>
                            <?php endif; ?>
                        </div>
                        <p class="form-hint-warning">
                            Select which groups can view this ticket
                        </p>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 6: Detailed Description -->
            <div class="ascii-section-header">Detailed Description</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="detail-group full-width">
                        <label for="description">Description *</label>
                        <textarea id="description" name="description" class="editable" rows="15" required placeholder="Provide a detailed description of the ticket..."></textarea>
                    </div>
                </div>
            </div>

            <!-- DIVIDER -->
            <div class="ascii-divider"></div>

            <!-- SECTION 6: Form Actions -->
            <div class="ascii-section-header">Form Actions</div>
            <div class="ascii-content">
                <div class="ascii-frame-inner">
                    <div class="ticket-footer">
                        <button type="submit" class="btn primary">CREATE TICKET</button>
                        <button type="button" data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/" class="btn back-btn">CANCEL</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <!-- END OUTER FRAME -->

    <script nonce="<?php echo $nonce; ?>">
    // Duplicate detection with debounce
    let duplicateCheckTimeout = null;

    document.getElementById('title').addEventListener('input', function() {
        clearTimeout(duplicateCheckTimeout);
        const title = this.value.trim();

        if (title.length < 5) {
            document.getElementById('duplicateWarning').style.display = 'none';
            return;
        }

        // Debounce: wait 500ms after user stops typing
        duplicateCheckTimeout = setTimeout(() => {
            checkForDuplicates(title);
        }, 500);
    });

    function checkForDuplicates(title) {
        lt.api.get('/api/check_duplicates.php?title=' + encodeURIComponent(title))
            .then(data => {
                const warningDiv = document.getElementById('duplicateWarning');
                const listDiv = document.getElementById('duplicatesList');

                if (data.success && data.duplicates && data.duplicates.length > 0) {
                    let html = '<ul class="duplicate-list">';
                    data.duplicates.forEach(dup => {
                        html += `<li>
                            <a href="/ticket/${escapeHtml(dup.ticket_id)}" target="_blank">
                                #${escapeHtml(dup.ticket_id)}
                            </a>
                            - ${escapeHtml(dup.title)}
                            <span class="duplicate-meta">(${dup.similarity}% match, ${escapeHtml(dup.status)})</span>
                        </li>`;
                    });
                    html += '</ul>';
                    html += '<p class="duplicate-hint">Consider checking these tickets before creating a new one.</p>';

                    listDiv.innerHTML = html;
                    warningDiv.style.display = 'block';
                } else {
                    warningDiv.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Error checking duplicates:', error);
            });
    }

    function toggleVisibilityGroups() {
        const visibility = document.getElementById('visibility').value;
        const groupsContainer = document.getElementById('visibilityGroupsContainer');
        if (visibility === 'internal') {
            groupsContainer.style.display = 'block';
        } else {
            groupsContainer.style.display = 'none';
            document.querySelectorAll('.visibility-group-checkbox').forEach(cb => cb.checked = false);
        }
    }

    // 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;
        if (action === 'navigate') {
            window.location.href = target.dataset.url;
        }
    });

    document.addEventListener('change', function(event) {
        const target = event.target.closest('[data-action]');
        if (!target) return;

        const action = target.dataset.action;
        if (action === 'load-template') {
            loadTemplate();
        } else if (action === 'toggle-visibility-groups') {
            toggleVisibilityGroups();
        }
    });

    if (window.lt) lt.keys.initDefaults();
    </script>
</body>
</html>