views/DashboardView.php

<?php
// This file contains the HTML template for the dashboard
// It receives $tickets, $totalTickets, $totalPages, $page, $status, $categories, $types variables from the controller
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ticket Dashboard</title>
    <link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
</head>
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>

    <!-- Terminal Boot Sequence -->
    <div id="boot-sequence" class="boot-overlay">
        <pre id="boot-text"></pre>
    </div>
    <script>
        function showBootSequence() {
            const bootText = document.getElementById('boot-text');
            const bootOverlay = document.getElementById('boot-sequence');
            const messages = [
                '╔═══════════════════════════════════════╗',
                '║   TINKER TICKETS TERMINAL v1.0       ║',
                '║   BOOTING SYSTEM...                  ║',
                '╚═══════════════════════════════════════╝',
                '',
                '[ OK ] Loading kernel modules...',
                '[ OK ] Initializing ticket database...',
                '[ OK ] Mounting user session...',
                '[ OK ] Starting dashboard services...',
                '[ OK ] Rendering ASCII frames...',
                '',
                '> SYSTEM READY ✓',
                ''
            ];

            let i = 0;
            const interval = setInterval(() => {
                if (i < messages.length) {
                    bootText.textContent += messages[i] + '\n';
                    i++;
                } else {
                    setTimeout(() => {
                        bootOverlay.style.opacity = '0';
                        setTimeout(() => bootOverlay.remove(), 500);
                    }, 500);
                    clearInterval(interval);
                }
            }, 80);
        }

        // Run on first visit only (per session)
        if (!sessionStorage.getItem('booted')) {
            showBootSequence();
            sessionStorage.setItem('booted', 'true');
        } else {
            document.getElementById('boot-sequence').remove();
        }
    </script>
    <div class="user-header">
        <div class="user-header-left">
            <span class="app-title">🎫 Tinker Tickets</span>
        </div>
        <div class="user-header-right">
            <?php if (isset($GLOBALS['currentUser'])): ?>
                <span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
                <?php if ($GLOBALS['currentUser']['is_admin']): ?>
                    <span class="admin-badge">Admin</span>
                <?php endif; ?>
                <button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
            <?php endif; ?>
        </div>
    </div>

    <!-- Collapsible ASCII Banner -->
    <div class="ascii-banner-wrapper collapsed">
        <button class="banner-toggle" onclick="toggleBanner()">
            <span class="toggle-icon">▼</span> ASCII Banner
        </button>
        <div id="ascii-banner-container" class="banner-content"></div>
    </div>
    <script>
        function toggleBanner() {
            const wrapper = document.querySelector('.ascii-banner-wrapper');
            const icon = document.querySelector('.toggle-icon');
            wrapper.classList.toggle('collapsed');
            icon.textContent = wrapper.classList.contains('collapsed') ? '▼' : '▲';

            // Render banner on first expand (no animation for instant display)
            if (!wrapper.classList.contains('collapsed') && !wrapper.dataset.rendered) {
                renderResponsiveBanner('#ascii-banner-container', 0); // Speed 0 = no animation
                wrapper.dataset.rendered = 'true';
            }
        }
    </script>

    <!-- Dashboard Layout with Sidebar -->
    <div class="dashboard-layout">
        <!-- Left Sidebar with Filters -->
        <aside class="dashboard-sidebar">
            <div class="ascii-frame-inner">
                <div class="ascii-subsection-header">Filters</div>

                <!-- Status Filter -->
                <div class="filter-group">
                    <h4>Status</h4>
                    <?php
                    $currentStatus = isset($_GET['status']) ? explode(',', $_GET['status']) : ['Open', 'Pending', 'In Progress'];
                    $allStatuses = ['Open', 'Pending', 'In Progress', 'Closed'];
                    foreach ($allStatuses as $status):
                    ?>
                        <label>
                            <input type="checkbox"
                                   name="status"
                                   value="<?php echo $status; ?>"
                                   <?php echo in_array($status, $currentStatus) ? 'checked' : ''; ?>>
                            <?php echo $status; ?>
                        </label>
                    <?php endforeach; ?>
                </div>

                <!-- Category Filter -->
                <div class="filter-group">
                    <h4>Category</h4>
                    <?php
                    $currentCategories = isset($_GET['category']) ? explode(',', $_GET['category']) : [];
                    foreach ($categories as $cat):
                    ?>
                        <label>
                            <input type="checkbox"
                                   name="category"
                                   value="<?php echo $cat; ?>"
                                   <?php echo in_array($cat, $currentCategories) ? 'checked' : ''; ?>>
                            <?php echo htmlspecialchars($cat); ?>
                        </label>
                    <?php endforeach; ?>
                </div>

                <!-- Type Filter -->
                <div class="filter-group">
                    <h4>Type</h4>
                    <?php
                    $currentTypes = isset($_GET['type']) ? explode(',', $_GET['type']) : [];
                    foreach ($types as $type):
                    ?>
                        <label>
                            <input type="checkbox"
                                   name="type"
                                   value="<?php echo $type; ?>"
                                   <?php echo in_array($type, $currentTypes) ? 'checked' : ''; ?>>
                            <?php echo htmlspecialchars($type); ?>
                        </label>
                    <?php endforeach; ?>
                </div>

                <button id="apply-filters-btn" class="btn">Apply Filters</button>
                <button id="clear-filters-btn" class="btn btn-secondary">Clear All</button>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="dashboard-main">

    <!-- CONDENSED TOOLBAR: Combined Header, Search, Actions, Pagination -->
    <div class="dashboard-toolbar">
        <!-- Left: Title + Search -->
        <div class="toolbar-left">
            <h1 class="dashboard-title">🎫 Tickets</h1>
            <form method="GET" action="" class="toolbar-search">
                <!-- Preserve existing parameters -->
                <?php if (isset($_GET['status'])): ?>
                    <input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
                <?php endif; ?>
                <?php if (isset($_GET['category'])): ?>
                    <input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
                <?php endif; ?>
                <?php if (isset($_GET['type'])): ?>
                    <input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
                <?php endif; ?>
                <?php if (isset($_GET['sort'])): ?>
                    <input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
                <?php endif; ?>
                <?php if (isset($_GET['dir'])): ?>
                    <input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
                <?php endif; ?>

                <input type="text"
                    name="search"
                    placeholder="🔍 Search tickets..."
                    class="search-box"
                    value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
                <button type="submit" class="btn search-btn">Search</button>
                <?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
                    <a href="?" class="clear-search-btn">✗</a>
                <?php endif; ?>
            </form>
        </div>

        <!-- Center: Actions + Count -->
        <div class="toolbar-center">
            <button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
            <span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
        </div>

        <!-- Right: Pagination -->
        <div class="toolbar-right">
            <div class="pagination">
                <?php
                $currentParams = $_GET;

                // Previous page button
                if ($page > 1) {
                    $currentParams['page'] = $page - 1;
                    $prevUrl = '?' . http_build_query($currentParams);
                    echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
                }

                // Page number buttons
                for ($i = 1; $i <= $totalPages; $i++) {
                    $activeClass = ($i === $page) ? 'active' : '';
                    $currentParams['page'] = $i;
                    $pageUrl = '?' . http_build_query($currentParams);
                    echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
                }

                // Next page button
                if ($page < $totalPages) {
                    $currentParams['page'] = $page + 1;
                    $nextUrl = '?' . http_build_query($currentParams);
                    echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
                }
                ?>
            </div>
        </div>
    </div>

    <?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
    <div class="search-results-info">
        Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
        (<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
    </div>
    <?php endif; ?>

    <!-- TICKET TABLE WITH INLINE BULK ACTIONS -->
    <div class="ascii-frame-outer">
        <span class="bottom-left-corner">╚</span>
        <span class="bottom-right-corner">╝</span>

        <div class="ascii-section-header">Ticket List</div>
        <div class="ascii-content">
            <div class="ascii-frame-inner">
                <!-- Inline Bulk Actions (appears above table when items selected) -->
                <?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
                <div class="bulk-actions-inline" style="display: none;">
                    <span id="selected-count">0</span> tickets selected
                    <button onclick="bulkClose()" class="btn btn-bulk">Close</button>
                    <button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
                    <button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
                    <button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
                </div>
                <?php endif; ?>

                <!-- Table -->
                <table>
        <thead>
            <tr>
                <?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
                    <th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"></th>
                <?php endif; ?>
                <?php
                $currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
                $currentDir = isset($_GET['dir']) ? $_GET['dir'] : 'desc';
                
                $columns = [
                    'ticket_id' => 'Ticket ID',
                    'priority' => 'Priority',
                    'title' => 'Title',
                    'category' => 'Category',
                    'type' => 'Type',
                    'status' => 'Status',
                    'created_by' => 'Created By',
                    'assigned_to' => 'Assigned To',
                    'created_at' => 'Created',
                    'updated_at' => 'Updated'
                ];
                
                foreach($columns as $col => $label) {
                    $newDir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc';
                    $sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
                    $sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
                    $sortUrl = '?' . http_build_query($sortParams);
                    
                    echo "<th class='$sortClass' onclick='window.location.href=\"$sortUrl\"'>$label</th>";
                }
                ?>
            </tr>
        </thead>
        <tbody>
            <?php
            if (count($tickets) > 0) {
                foreach($tickets as $row) {
                    $creator = $row['creator_display_name'] ?? $row['creator_username'] ?? 'System';
                    $assignedTo = $row['assigned_display_name'] ?? $row['assigned_username'] ?? 'Unassigned';
                    echo "<tr class='priority-{$row['priority']}'>";

                    // Add checkbox column for admins
                    if ($GLOBALS['currentUser']['is_admin'] ?? false) {
                        echo "<td><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></td>";
                    }

                    echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
                    echo "<td><span>{$row['priority']}</span></td>";
                    echo "<td>" . htmlspecialchars($row['title']) . "</td>";
                    echo "<td>{$row['category']}</td>";
                    echo "<td>{$row['type']}</td>";
                    echo "<td><span class='status-" . str_replace(' ', '-', $row['status']) . "'>{$row['status']}</span></td>";
                    echo "<td>" . htmlspecialchars($creator) . "</td>";
                    echo "<td>" . htmlspecialchars($assignedTo) . "</td>";
                    echo "<td>" . date('Y-m-d H:i', strtotime($row['created_at'])) . "</td>";
                    echo "<td>" . date('Y-m-d H:i', strtotime($row['updated_at'])) . "</td>";
                    echo "</tr>";
                }
} else {
                $colspan = ($GLOBALS['currentUser']['is_admin'] ?? false) ? '11' : '10';
                echo "<tr><td colspan='$colspan' style='text-align: center; padding: 3rem;'>";
                echo "<pre style='color: var(--terminal-green); text-shadow: var(--glow-green); font-size: 0.8rem; line-height: 1.2;'>";
                echo "╔════════════════════════════════════════╗\n";
                echo "║                                        ║\n";
                echo "║          NO TICKETS FOUND              ║\n";
                echo "║                                        ║\n";
                echo "║    [ ]  Empty queue - all clear!      ║\n";
                echo "║                                        ║\n";
                echo "╚════════════════════════════════════════╝";
                echo "</pre>";
                echo "</td></tr>";
            }
            ?>
        </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- END OUTER FRAME -->

    <!-- Settings Modal -->
    <div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
        <div class="settings-content">
            <span class="bottom-left-corner">╚</span>
            <span class="bottom-right-corner">╝</span>

            <div class="settings-header">
                <h3>⚙ System Preferences</h3>
                <button class="close-settings" onclick="closeSettingsModal()">✗</button>
            </div>

            <div class="settings-body">
                <!-- Display Preferences -->
                <div class="settings-section">
                    <h4>╔══ Display Preferences ══╗</h4>

                    <div class="setting-row">
                        <label for="rowsPerPage">Rows per page:</label>
                        <select id="rowsPerPage" class="setting-select">
                            <option value="15">15</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>

                    <div class="setting-row">
                        <label for="defaultFilters">Default status filters:</label>
                        <div class="checkbox-group">
                            <label><input type="checkbox" name="defaultFilters" value="Open" checked> Open</label>
                            <label><input type="checkbox" name="defaultFilters" value="Pending" checked> Pending</label>
                            <label><input type="checkbox" name="defaultFilters" value="In Progress" checked> In Progress</label>
                            <label><input type="checkbox" name="defaultFilters" value="Closed"> Closed</label>
                        </div>
                    </div>

                    <div class="setting-row">
                        <label for="tableDensity">Table density:</label>
                        <select id="tableDensity" class="setting-select">
                            <option value="compact">Compact</option>
                            <option value="normal" selected>Normal</option>
                            <option value="comfortable">Comfortable</option>
                        </select>
                    </div>
                </div>

                <!-- Notifications -->
                <div class="settings-section">
                    <h4>╔══ Notifications ══╗</h4>

                    <div class="setting-row">
                        <label>
                            <input type="checkbox" id="notificationsEnabled" checked>
                            Enable browser notifications
                        </label>
                    </div>

                    <div class="setting-row">
                        <label>
                            <input type="checkbox" id="soundEffects" checked>
                            Sound effects
                        </label>
                    </div>

                    <div class="setting-row">
                        <label for="toastDuration">Toast duration:</label>
                        <select id="toastDuration" class="setting-select">
                            <option value="3000" selected>3 seconds</option>
                            <option value="5000">5 seconds</option>
                            <option value="10000">10 seconds</option>
                        </select>
                    </div>
                </div>

                <!-- Keyboard Shortcuts -->
                <div class="settings-section">
                    <h4>╔══ Keyboard Shortcuts ══╗</h4>
                    <div class="shortcuts-list">
                        <div class="shortcut-item">
                            <kbd>Ctrl/Cmd + K</kbd> <span>Focus search</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>Alt + S</kbd> <span>Open settings</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>ESC</kbd> <span>Close modal</span>
                        </div>
                        <div class="shortcut-item">
                            <kbd>?</kbd> <span>Show shortcuts</span>
                        </div>
                    </div>
                </div>

                <!-- User Info (Read-only) -->
                <div class="settings-section">
                    <h4>╔══ User Information ══╗</h4>
                    <div class="user-info-grid">
                        <div><strong>Display Name:</strong></div>
                        <div><?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? 'N/A'); ?></div>

                        <div><strong>Username:</strong></div>
                        <div><?php echo htmlspecialchars($GLOBALS['currentUser']['username']); ?></div>

                        <div><strong>Email:</strong></div>
                        <div><?php echo htmlspecialchars($GLOBALS['currentUser']['email'] ?? 'N/A'); ?></div>

                        <div><strong>Role:</strong></div>
                        <div><?php echo $GLOBALS['currentUser']['is_admin'] ? 'Administrator' : 'User'; ?></div>
                    </div>
                </div>
            </div>

            <div class="settings-footer">
                <button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
                <button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
            </div>
        </div>
    </div>

    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/settings.js"></script>
    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
</body>
</html>