@extends('layouts.app')

@section('title', 'Wallboard')

@push('styles')
<style>
    /* Wallboard Custom Styles */
    .wallboard-section {
        font-size: 0.875rem;
    }
    
    .wallboard-header {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        padding: 15px 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .wallboard-header h1 {
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 5px;
    }
    
    .wallboard-header p {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.8rem;
        margin-bottom: 0;
    }
    
    .wallboard-card {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    
    .wallboard-card .card-header {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .wallboard-card .card-header h5 {
        font-size: 0.95rem;
        font-weight: 600;
    }
    
    .wallboard-table {
        font-size: 0.8rem;
    }
    
    .wallboard-table thead th {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 12px;
        background-color: #f8f9fa;
        color: #495057;
        white-space: nowrap;
    }
    
    .wallboard-table tbody td {
        padding: 8px 12px;
        vertical-align: middle;
        font-size: 0.8rem;
    }
    
    .wallboard-table tbody tr:hover {
        background-color: #f1f5f9;
    }
    
    .wallboard-table .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
        font-weight: 500;
    }
    
    .wallboard-filters .form-control,
    .wallboard-filters .form-select {
        font-size: 0.8rem;
        padding: 6px 12px;
        height: auto;
    }
    
    .wallboard-filters .form-control::placeholder {
        font-size: 0.8rem;
    }
    
    .ticket-count-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
        font-weight: 600;
    }
    
    .btn-refresh {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    
    .notification-card .table {
        font-size: 0.8rem;
    }
    
    .notification-card .table th {
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .notification-card .table td {
        padding: 10px 12px;
    }
    
    .empty-state {
        padding: 30px 20px;
    }
    
    .empty-state i {
        font-size: 2.5rem;
        opacity: 0.5;
    }
    
    .empty-state p {
        font-size: 0.85rem;
    }

    /* Filter Modal Enhancements */
    .filter-modal .modal-content {
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        border: none;
        overflow: hidden;
    }

    .filter-modal .modal-header {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        color: white;
        border-bottom: none;
        padding: 20px 25px;
        border-radius: 15px 15px 0 0;
    }

    .filter-modal .modal-header .modal-title {
        font-weight: 600;
        font-size: 1.1rem;
    }

    .filter-modal .modal-body {
        padding: 25px;
        background: #f8f9fa;
    }

    .filter-modal .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

    .filter-modal .form-label i {
        margin-right: 8px;
        color: #3498db;
        font-size: 1rem;
    }

    .filter-modal .form-select,
    .filter-modal .form-control {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 10px 15px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .filter-modal .form-select:focus,
    .filter-modal .form-control:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        outline: none;
    }

    .filter-modal .modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 20px 25px;
        background: white;
        border-radius: 0 0 15px 15px;
    }

    .filter-modal .btn {
        border-radius: 8px;
        padding: 8px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .filter-modal .btn-primary {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
        border: none;
    }

    .filter-modal .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
    }

    .filter-modal .btn-outline-secondary {
        border-color: #6c757d;
        color: #6c757d;
    }

    .filter-modal .btn-outline-secondary:hover {
        background-color: #6c757d;
        border-color: #6c757d;
        transform: translateY(-1px);
    }

    .filter-modal .btn-secondary {
        background: #6c757d;
        border: none;
    }

    .filter-modal .btn-secondary:hover {
        background: #5a6268;
        transform: translateY(-1px);
    }

</style>
@endpush

@section('content')
    <section class="py-4 bg-light agent-page wallboard-section">
        <div class="wallboard-content">
            <div class="wallboard-header">
                <h1><i class="bi bi-kanban me-2"></i>{{ auth()->user()->name }}'s Wallboard</h1>
                <p><i class="bi bi-person-badge me-1"></i>Role: {{ auth()->user()->getRoleNames()->first() }} | Customer Relationship Management & Case Tracking</p>
            </div>

            {{-- Flash Messages --}}
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Error Messages --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Mention Notifications -->
            <div id="mentionNotifications" class="container mt-3" style="display: none;">
                <div class="card border-0 wallboard-card notification-card">
                    <div class="card-header bg-primary text-white d-flex align-items-center">
                        <i class="bi bi-bell-fill me-2"></i>
                        <h5 class="mb-0">Notifications</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="mentionsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th class="border-0">Mentioned By</th>
                                        <th class="border-0">Ticket & Time</th>
                                        <th class="border-0">Message</th>
                                        <th class="border-0 text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="mentionsTableBody">
                                    <!-- Mention rows will be inserted here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="noMentionsMessage" class="text-center text-muted empty-state">
                            <i class="bi bi-bell-slash d-block mb-2"></i>
                            <p class="mb-0">No new Notifications</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="openTickets" class="container mt-3">
                <div class="card border-0 wallboard-card">
                    <div class="card-header bg-primary text-white d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-ticket-detailed me-2"></i>
                            <h5 class="mb-0">Active Tickets</h5>
                            <span id="ticketCount" class="badge bg-light text-primary ms-2 ticket-count-badge">0</span>
                        </div>
                        <button class="btn btn-light btn-refresh" onclick="refreshTickets()">
                            <i class="bi bi-arrow-clockwise me-1"></i>Refresh
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="p-2 border-bottom bg-light wallboard-filters">
                            <div class="row g-2">
                                <div class="col-md-12">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                                        <input type="text" id="ticketSearch" class="form-control border-start-0" placeholder="Search ticket or complaint...">
                                        <button class="btn btn-outline-secondary" type="button" id="filterBtn" data-bs-toggle="modal" data-bs-target="#filterModal">
                                            <i class="bi bi-funnel-fill"></i> Filters
                                            <span id="filterCount" class="badge bg-primary ms-1" style="display: none;">0</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover mb-0 wallboard-table" id="openTicketsTable">
                                <thead>
                                    <tr>
                                        <th class="border-0">Ticket No.</th>
                                        <th class="border-0">Complaint No.</th>
                                        <th class="border-0">Customer</th>
                                        <th class="border-0">Escalation</th>
                                        <th class="border-0">Status</th>
                                        <th class="border-0">Service Center</th>
                                        <th class="border-0">Aging</th>
                                    </tr>
                                </thead>
                                <tbody id="openTicketsBody">
                                    <!-- Open tickets will be inserted here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="noOpenTickets" class="text-center text-muted empty-state" style="display: none;">
                            <i class="bi bi-check-circle-fill text-success d-block mb-2"></i>
                            <p class="mb-0">No active tickets! 🎉</p>
                        </div>
                        <div id="ticketsLoading" class="text-center text-muted py-3">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mb-0 mt-1" style="font-size: 0.8rem;">Loading tickets...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Filter Modal -->
    <div class="modal fade filter-modal" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Tickets</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="modalStatusFilter" class="form-label">
                                        <i class="bi bi-check-circle-fill"></i>Status
                                    </label>
                                    <select id="modalStatusFilter" class="form-select">
                                        <option value="">All Statuses</option>
                                        @foreach(\App\Models\CaseStatus::orderBy('status')->get() as $status)
                                            <option value="{{ $status->status }}">{{ $status->status }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="modalEscalationFilter" class="form-label">
                                        <i class="bi bi-exclamation-triangle-fill"></i>Escalation Level
                                    </label>
                                    <select id="modalEscalationFilter" class="form-select">
                                        <option value="">All Escalation Levels</option>
                                        <option value="High">High</option>
                                        <option value="Medium">Medium</option>
                                        <option value="Low">Low</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="modalAgingFilter" class="form-label">
                                        <i class="bi bi-clock-fill"></i>Aging
                                    </label>
                                    <select id="modalAgingFilter" class="form-select">
                                        <option value="">All Aging</option>
                                        <option value="0">0-Days</option>
                                        <option value="1">>= 1-Days</option>
                                        <option value="2">>= 2-Days</option>
                                        <option value="3">>= 3-Days</option>
                                        <option value="4">>= 4-Days</option>
                                        <option value="5">>= 5-Days</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        @if(!auth()->user()->hasRole('ServiceCenter'))
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="modalZoneFilter" class="form-label">
                                        <i class="bi bi-geo-alt-fill"></i>Zone
                                    </label>
                                    <select id="modalZoneFilter" class="form-select">
                                        <option value="">All Zones</option>
                                        @foreach(\App\Models\ServiceCenter::distinct('zone')->orderBy('zone')->pluck('zone') as $zone)
                                            <option value="{{ $zone }}">{{ $zone }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="modalServiceCenterFilter" class="form-label">
                                        <i class="bi bi-building-fill"></i>Service Center
                                    </label>
                                    <select id="modalServiceCenterFilter" class="form-select">
                                        <option value="">All Service Centers</option>
                                        @foreach(\App\Models\ServiceCenter::orderBy('service_center')->get() as $serviceCenter)
                                            <option value="{{ $serviceCenter->coms_sc }}">{{ $serviceCenter->service_center }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="mb-3">
                            <label for="modalCustomerNameFilter" class="form-label">
                                <i class="bi bi-person-fill"></i>Customer Name
                            </label>
                            <input type="text" id="modalCustomerNameFilter" class="form-control" placeholder="Enter customer name">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" id="resetFiltersBtn">Reset</button>
                    <button type="button" class="btn btn-primary" id="applyFiltersBtn">Apply Filters</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let mentionCheckInterval;

            // Current filter values
            let currentStatus = '';
            let currentZone = '';
            let currentServiceCenter = '';
            let currentCustomerName = '';
            let currentEscalationLevel = '';
            let currentAging = '';

            // Update filter count display
            function updateFilterCount() {
                let count = 0;
                if (currentStatus) count++;
                if (currentZone) count++;
                if (currentServiceCenter) count++;
                if (currentCustomerName) count++;
                if (currentEscalationLevel) count++;
                if (currentAging) count++;

                const filterCount = document.getElementById('filterCount');
                if (count > 0) {
                    filterCount.textContent = count;
                    filterCount.style.display = 'inline';
                } else {
                    filterCount.style.display = 'none';
                }
            }

            // Initialize the page by loading tickets (only for Agent/ServiceCenter)
            if (document.getElementById('openTickets')) {
                loadTickets();
            }

            function checkMentions() {
                fetch('{{ route('mentions.get') }}', {
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.count > 0) {
                            showMentionNotification(data.mentions);
                        } else {
                            // Hide notifications if no mentions
                            const mentionNotifications = document.getElementById('mentionNotifications');
                            if (mentionNotifications) {
                                mentionNotifications.style.display = 'none';
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error checking mentions:', error);
                    });
            }

            function showMentionNotification(mentions) {
                const mentionNotifications = document.getElementById('mentionNotifications');
                const mentionsTableBody = document.getElementById('mentionsTableBody');
                const noMentionsMessage = document.getElementById('noMentionsMessage');

                if (mentions.length === 0) {
                    mentionsTableBody.innerHTML = '';
                    noMentionsMessage.style.display = 'block';
                    mentionNotifications.style.display = 'none';
                    return;
                }

                // Clear existing rows
                mentionsTableBody.innerHTML = '';

                // Add mention rows
                mentions.forEach(mention => {
                    const row = document.createElement('tr');
                    row.className = 'mention-row';

                    // Format the date and time
                    const mentionDate = new Date(mention.created_at);
                    const formattedDate = mentionDate.toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });

                    row.innerHTML = `
                <td class="align-middle">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-person-circle text-primary me-2"></i>
                        <strong>${mention.mentioner_name}</strong>
                    </div>
                </td>
                <td class="align-middle">
                    <div>
                        <span class="badge bg-info">${mention.ticket_number}</span>
                        <br>
                        <small class="text-muted">${formattedDate}</small>
                    </div>
                </td>
                <td class="align-middle">
                    <div class="text-truncate" style="max-width: 300px;" title="${mention.message}">
                        ${mention.message}
                    </div>
                </td>
                <td class="align-middle text-center">
                    <button class="btn btn-primary open-mention-btn" style="font-size: 0.7rem; padding: 3px 8px;" data-mention-id="${mention.id}" data-ticket-no="${mention.ticket_number}">
                        <i class="bi bi-eye me-1"></i>Open
                    </button>
                </td>
            `;

                    mentionsTableBody.appendChild(row);
                });

                // Add event listeners to open buttons
                document.querySelectorAll('.open-mention-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const mentionId = this.getAttribute('data-mention-id');
                        const ticketNo = this.getAttribute('data-ticket-no');

                        // Mark as read first
                        fetch(`{{ url('/mentions') }}/${mentionId}/read`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        }).then(() => {
                            // Redirect to the ticket page (same route for all users in view-only mode)
                            window.location.href = `{{ url('/') }}/home-agent/ticket/${ticketNo}`;
                        });
                    });
                });

                noMentionsMessage.style.display = 'none';
                mentionNotifications.style.display = 'block';

                // Scroll to notification
                mentionNotifications.scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest'
                });
            }

            // Load tickets function
            function loadTickets(search = '', status = '', zone = '', serviceCenter = '', customerName = '', escalationLevel = '', aging = '') {
                showTicketsLoading(true);

                const url = new URL('{{ route('open.tickets') }}');
                if (search) url.searchParams.append('search', search);
                if (status) url.searchParams.append('status', status);
                if (zone) url.searchParams.append('zone', zone);
                if (serviceCenter) url.searchParams.append('service_center', serviceCenter);
                if (customerName) url.searchParams.append('customer_name', customerName);
                if (escalationLevel) url.searchParams.append('escalation_level', escalationLevel);
                if (aging) url.searchParams.append('aging', aging);

                fetch(url, {
                        method: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        showTicketsLoading(false);
                        if (data.success) {
                            displayTickets(data.tickets);
                            updateTicketCount(data.count);
                        } else {
                            console.error('Error loading tickets:', data.error);
                            showTicketsError();
                        }
                    })
                    .catch(error => {
                        showTicketsLoading(false);
                        console.error('Error fetching tickets:', error);
                        showTicketsError();
                    });
            }

            // Event listeners for search and filter (only for Agent/ServiceCenter)
            if (document.getElementById('openTickets')) {
                document.getElementById('ticketSearch').addEventListener('input', function() {
                    const search = this.value.trim();
                    loadTickets(search, currentStatus, currentZone, currentServiceCenter, currentCustomerName, currentEscalationLevel, currentAging);
                });

                // Apply filters button
                document.getElementById('applyFiltersBtn').addEventListener('click', function() {
                    currentStatus = document.getElementById('modalStatusFilter').value;
                    currentZone = document.getElementById('modalZoneFilter') ? document.getElementById('modalZoneFilter').value : '';
                    currentServiceCenter = document.getElementById('modalServiceCenterFilter') ? document.getElementById('modalServiceCenterFilter').value : '';
                    currentCustomerName = document.getElementById('modalCustomerNameFilter').value.trim();
                    currentEscalationLevel = document.getElementById('modalEscalationFilter').value;
                    currentAging = document.getElementById('modalAgingFilter').value;
                    updateFilterCount();
                    const search = document.getElementById('ticketSearch').value.trim();
                    loadTickets(search, currentStatus, currentZone, currentServiceCenter, currentCustomerName, currentEscalationLevel, currentAging);
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('filterModal'));
                    modal.hide();
                });

                // Reset filters button
                document.getElementById('resetFiltersBtn').addEventListener('click', function() {
                    currentStatus = '';
                    currentZone = '';
                    currentServiceCenter = '';
                    currentCustomerName = '';
                    currentEscalationLevel = '';
                    currentAging = '';
                    updateFilterCount();
                    document.getElementById('modalStatusFilter').value = '';
                    if (document.getElementById('modalZoneFilter')) {
                        document.getElementById('modalZoneFilter').value = '';
                    }
                    if (document.getElementById('modalServiceCenterFilter')) {
                        document.getElementById('modalServiceCenterFilter').value = '';
                    }
                    document.getElementById('modalCustomerNameFilter').value = '';
                    document.getElementById('modalEscalationFilter').value = '';
                    document.getElementById('modalAgingFilter').value = '';
                    document.getElementById('ticketSearch').value = '';
                    loadTickets('', '', '', '', '', '', '');
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('filterModal'));
                    modal.hide();
                });

                // Populate modal with current filter values when shown
                document.getElementById('filterModal').addEventListener('show.bs.modal', function() {
                    document.getElementById('modalStatusFilter').value = currentStatus;
                    if (document.getElementById('modalZoneFilter')) {
                        document.getElementById('modalZoneFilter').value = currentZone;
                    }
                    if (document.getElementById('modalServiceCenterFilter')) {
                        document.getElementById('modalServiceCenterFilter').value = currentServiceCenter;
                    }
                    document.getElementById('modalCustomerNameFilter').value = currentCustomerName;
                    document.getElementById('modalEscalationFilter').value = currentEscalationLevel;
                    document.getElementById('modalAgingFilter').value = currentAging;
                });
            }

            // Display tickets in the table
            function displayTickets(tickets) {
                const openTicketsBody = document.getElementById('openTicketsBody');
                const noOpenTickets = document.getElementById('noOpenTickets');

                if (tickets.length === 0) {
                    openTicketsBody.innerHTML = '';
                    noOpenTickets.style.display = 'block';
                    return;
                }

                noOpenTickets.style.display = 'none';
                openTicketsBody.innerHTML = '';

                tickets.forEach(ticket => {
                    const row = document.createElement('tr');

                    // Add highlight class if aging is high
                    if (ticket.highlight) {
                        row.classList.add('table-warning');
                    }

                    // Add status badge styling based on case status
                    let statusBadgeClass = 'badge bg-secondary';
                    switch (ticket.case_status.toLowerCase()) {
                        case 'open':
                            statusBadgeClass = 'badge bg-success';
                            break;
                        case 'in process':
                            statusBadgeClass = 'badge bg-warning text-dark';
                            break;
                        case 'closed':
                            statusBadgeClass = 'badge bg-danger';
                            break;
                        case 'resolved':
                            statusBadgeClass = 'badge bg-primary';
                            break;
                    }

                    // Add escalation level badge styling
                    let escalationBadgeClass = 'badge bg-light text-dark';
                    switch (ticket.escalation_level.toLowerCase()) {
                        case 'high':
                            escalationBadgeClass = 'badge bg-danger';
                            break;
                        case 'medium':
                            escalationBadgeClass = 'badge bg-warning text-dark';
                            break;
                        case 'low':
                            escalationBadgeClass = 'badge bg-info';
                            break;
                    }

                    row.innerHTML = `
                <td class="align-middle">
                    <span class="badge bg-primary">${ticket.ticket_number}</span>
                </td>
                <td class="align-middle">
                    <strong>${ticket.complaint_number}</strong>
                </td>
                <td class="align-middle">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-person-circle text-muted me-2"></i>
                        ${ticket.customer_name}
                    </div>
                </td>
                <td class="align-middle">
                    <span class="${escalationBadgeClass}">${ticket.escalation_level}</span>
                </td>
                <td class="align-middle">
                    <span class="${statusBadgeClass}">${ticket.case_status}</span>
                </td>
                <td class="align-middle">${ticket.service_center || '-'}</td>
                <td class="align-middle">
                    <small class="${ticket.highlight ? 'text-danger fw-bold' : 'text-muted'}">${ticket.aging}</small>
                </td>
            `;

                    // Make the row clickable to navigate to the ticket
                    row.style.cursor = 'pointer';
                    row.addEventListener('click', function() {
                        // Redirect to the ticket page
                        window.location.href = `{{ url('/') }}/home-agent/ticket/${ticket.ticket_number}`;
                    });

                    openTicketsBody.appendChild(row);
                });
            }

            // Show/hide loading indicator
            function showTicketsLoading(show) {
                const loading = document.getElementById('ticketsLoading');
                if (loading) {
                    loading.style.display = show ? 'block' : 'none';
                }
            }

            // Show error state
            function showTicketsError() {
                const openTicketsBody = document.getElementById('openTicketsBody');
                const noOpenTickets = document.getElementById('noOpenTickets');

                openTicketsBody.innerHTML =
                    '<tr><td colspan="8" class="text-center text-danger py-3"><i class="bi bi-exclamation-triangle me-2"></i>Error loading tickets. Please try again.</td></tr>';
                noOpenTickets.style.display = 'none';
            }

            // Update ticket count
            function updateTicketCount(count) {
                const ticketCount = document.getElementById('ticketCount');
                if (ticketCount) {
                    ticketCount.textContent = count;
                }
            }

            // Refresh tickets function (accessible globally)
            window.refreshTickets = function() {
                const search = document.getElementById('ticketSearch').value.trim();
                loadTickets(search, currentStatus, currentZone, currentServiceCenter, currentCustomerName, currentEscalationLevel, currentAging);
            };

            // Check for mentions every 60 seconds
            mentionCheckInterval = setInterval(checkMentions, 60000);

            // Initial check for mentions
            checkMentions();

            // Auto-refresh tickets every 5 minutes (300000 milliseconds) - only for Agent/ServiceCenter
            if (document.getElementById('openTickets')) {
                setInterval(loadTickets, 300000);
            }

            // Clear interval when page is unloaded
            window.addEventListener('beforeunload', function() {
                if (mentionCheckInterval) {
                    clearInterval(mentionCheckInterval);
                }
            });
        });
    </script>
@endsection