templates/admin/support.html

<div class="admin-section" id="section-support">
    <!-- Premium Welcome Banner -->
    <div class="welcome-banner compact admin-banner">
        <div class="welcome-text">
            <h1>Support & Complaints</h1>
            <p>Monitor, track, and resolve user tickets with professional efficiency.</p>
        </div>
        <div class="dashboard-controls">
            <button class="btn-premium small" onclick="loadTickets()">
                <i class="fa-solid fa-sync"></i> Refresh Tickets
            </button>
        </div>
        <div class="admin-banner-decoration"></div>
    </div>

    <!-- Main Support Split Layout -->
    <div class="support-split-layout animate-up">
        
        <!-- Left: Ticket Sidebar -->
        <div class="support-sidebar card-premium">
            <div class="sidebar-header">
                <div class="header-main">
                    <h4>Incoming Tickets</h4>
                    <span class="ticket-status-count" id="open-tkt-badge">0 Open</span>
                </div>
                <!-- Premium Search -->
                <div class="support-search-wrapper">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input type="text" id="tkt-search" placeholder="Search by name, ID or subject..." oninput="applyTicketSearch()">
                </div>
            </div>

            <!-- Modern Filter Tabs -->
            <div class="support-filters">
                <button class="s-filter-btn active" onclick="filterTkts('all', this)">All</button>
                <button class="s-filter-btn" onclick="filterTkts('open', this)">Open</button>
                <button class="s-filter-btn" onclick="filterTkts('pending', this)">Pending</button>
                <button class="s-filter-btn" onclick="filterTkts('resolved', this)">Resolved</button>
            </div>

            <div class="support-items-list" id="ticket-items">
                <!-- Tickets will be injected here via support.js -->
            </div>
        </div>

        <!-- Right: Detail Workspace -->
        <div class="support-workspace card-premium" id="ticket-detail-col">
            <div class="workspace-empty-state">
                <div class="empty-icon-box">
                    <i class="fa-solid fa-headset"></i>
                </div>
                <h3>Selection Pending</h3>
                <p>Choose a ticket from the list on the left to start resolving it.</p>
            </div>
        </div>

    </div>
</div>