@extends('layouts.app')

@section('title', 'Wallboard')

@push('styles')
    <style>
        /* Wallboard Custom Styles */
        .wallboard-section {
            font-size: 0.875rem;
        }
        
        /* Multi-select container styles */
        .multi-select-container {
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 8px;
        }
        
        /* Filter tags (active filters) */
        .filter-tags-container {
            min-height: 20px;
        }
        
        .filter-tag {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        .filter-tag .remove-filter {
            cursor: pointer;
            font-weight: bold;
        }
        
        /* Checked checkbox styling */
        .form-check-input:checked {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .form-check-input:checked + .form-check-label {
            font-weight: 600;
            color: #0d6efd;
        }

        .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>
                                        <th class="border-0">Escalation Date</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 modal-lg">
            <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">
                    <!-- Active Filters Display -->
                    <div id="activeFilters" class="filter-tags-container mb-4"></div>
                    
                    <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>
                                    <div class="multi-select-container">
                                        @foreach (\App\Models\CaseStatus::orderBy('status')->get() as $status)
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input"
                                                   value="{{ $status->status }}" data-filter-type="status">
                                            <label class="form-check-label">{{ $status->status }}</label>
                                        </div>
                                        @endforeach
                                    </div>
                                </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>
                                    <div class="multi-select-container">
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="High" data-filter-type="escalation_level">
                                            <label class="form-check-label">High</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="Medium" data-filter-type="escalation_level">
                                            <label class="form-check-label">Medium</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="Low" data-filter-type="escalation_level">
                                            <label class="form-check-label">Low</label>
                                        </div>
                                    </div>
                                </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>
                                    <div class="multi-select-container">
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="0" data-filter-type="aging">
                                            <label class="form-check-label">0-Days</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="1" data-filter-type="aging">
                                            <label class="form-check-label">>= 1-Days</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="2" data-filter-type="aging">
                                            <label class="form-check-label">>= 2-Days</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="3" data-filter-type="aging">
                                            <label class="form-check-label">>= 3-Days</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="5" data-filter-type="aging">
                                            <label class="form-check-label">>= 5-Days</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="filter-checkbox form-check-input" value="8" data-filter-type="aging">
                                            <label class="form-check-label">>= 8-Days</label>
                                        </div>
                                    </div>
                                </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>
                                        <div class="multi-select-container">
                                            @foreach (\App\Models\ServiceCenter::distinct('zone')->orderBy('zone')->pluck('zone') as $zone)
                                            <div class="form-check">
                                                <input type="checkbox" class="filter-checkbox form-check-input"
                                                       value="{{ $zone }}" data-filter-type="zone">
                                                <label class="form-check-label">{{ $zone }}</label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </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>
                                        <div class="input-group mb-2">
                                            <input type="text" id="serviceCenterSearch" class="form-control"
                                                   placeholder="Search service centers...">
                                        </div>
                                        <div class="multi-select-container" id="serviceCenterContainer">
                                            @foreach (\App\Models\ServiceCenter::orderBy('service_center')->get() as $serviceCenter)
                                            <div class="form-check service-center-item">
                                                <input type="checkbox" class="filter-checkbox form-check-input"
                                                       value="{{ $serviceCenter->coms_sc }}" data-filter-type="service_center">
                                                <label class="form-check-label">{{ $serviceCenter->service_center }}</label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </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 currentFilters = {
                status: [],
                zone: [],
                service_center: [],
                customer_name: '',
                escalation_level: [],
                aging: []
            };
            
            // Initialize filter search
            setupFilterSearch();

            // Update filter count display
            function updateFilterCount() {
                let count = 0;
                if (currentFilters.status.length > 0) count++;
                if (currentFilters.zone.length > 0) count++;
                if (currentFilters.service_center.length > 0) count++;
                if (currentFilters.customer_name) count++;
                if (currentFilters.escalation_level.length > 0) count++;
                if (currentFilters.aging.length > 0) count++;

                const filterCount = document.getElementById('filterCount');
                if (count > 0) {
                    filterCount.textContent = count;
                    filterCount.style.display = 'inline';
                } else {
                    filterCount.style.display = 'none';
                }
            }
            
            // Collect filter values from checkboxes
            function collectFilterValues() {
                const checkboxes = document.querySelectorAll('.filter-checkbox:checked');
                const filters = {
                    status: [],
                    zone: [],
                    service_center: [],
                    customer_name: '',
                    escalation_level: [],
                    aging: []
                };
                
                checkboxes.forEach(checkbox => {
                    const filterType = checkbox.getAttribute('data-filter-type');
                    const value = checkbox.value;
                    if (filters[filterType]) {
                        filters[filterType].push(value);
                    }
                });
                
                // Get customer name from input
                filters.customer_name = document.getElementById('modalCustomerNameFilter').value.trim();
                
                return filters;
            }
            
            // Update active filters display
            function updateActiveFiltersDisplay() {
                const activeFilters = document.getElementById('activeFilters');
                activeFilters.innerHTML = '';
                
                // Create filter tags for each active filter
                Object.keys(currentFilters).forEach(filterType => {
                    if (Array.isArray(currentFilters[filterType]) && currentFilters[filterType].length > 0) {
                        currentFilters[filterType].forEach(value => {
                            const tag = document.createElement('span');
                            tag.className = 'filter-tag';
                            tag.innerHTML = `
                                ${getFilterDisplayName(filterType, value)}
                                <span class="remove-filter" onclick="removeFilter('${filterType}', '${value}')">×</span>
                            `;
                            activeFilters.appendChild(tag);
                        });
                    } else if (currentFilters[filterType] && currentFilters[filterType] !== '') {
                        const tag = document.createElement('span');
                        tag.className = 'filter-tag';
                        tag.innerHTML = `
                            ${getFilterDisplayName(filterType, currentFilters[filterType])}
                            <span class="remove-filter" onclick="removeFilter('${filterType}', '${currentFilters[filterType]}')">×</span>
                        `;
                        activeFilters.appendChild(tag);
                    }
                });
            }
            
            // Get display name for filter
            function getFilterDisplayName(filterType, value) {
                const filterNames = {
                    'status': 'Status',
                    'zone': 'Zone',
                    'service_center': 'Service Center',
                    'customer_name': 'Customer Name',
                    'escalation_level': 'Escalation Level',
                    'aging': 'Aging'
                };
                
                const valueNames = {
                    'aging': {
                        '0': '0-Days',
                        '1': '>= 1-Days',
                        '2': '>= 2-Days',
                        '3': '>= 3-Days',
                        '5': '>= 5-Days',
                        '8': '>= 8-Days'
                    }
                };
                
                let displayName = value;
                if (valueNames[filterType] && valueNames[filterType][value]) {
                    displayName = valueNames[filterType][value];
                }
                
                return `${filterNames[filterType] || filterType}: ${displayName}`;
            }
            
            // Remove specific filter
            function removeFilter(filterType, value) {
                if (Array.isArray(currentFilters[filterType])) {
                    currentFilters[filterType] = currentFilters[filterType].filter(item => item !== value);
                } else {
                    currentFilters[filterType] = '';
                }
                
                // Uncheck the corresponding checkbox
                const checkboxes = document.querySelectorAll(`.filter-checkbox[data-filter-type="${filterType}"][value="${value}"]`);
                checkboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                updateFilterCount();
                updateActiveFiltersDisplay();
                
                // Reload tickets with updated filters
                const search = document.getElementById('ticketSearch').value.trim();
                loadTickets(search,
                    currentFilters.status.join(','),
                    currentFilters.zone.join(','),
                    currentFilters.service_center.join(','),
                    currentFilters.customer_name,
                    currentFilters.escalation_level.join(','),
                    currentFilters.aging.join(',')
                );
            }
            
            // Setup filter search for service centers
            function setupFilterSearch() {
                const searchInput = document.getElementById('serviceCenterSearch');
                if (searchInput) {
                    searchInput.addEventListener('input', function() {
                        const searchTerm = this.value.toLowerCase();
                        const items = document.querySelectorAll('.service-center-item');
                        
                        items.forEach(item => {
                            const text = item.textContent.toLowerCase();
                            if (text.includes(searchTerm)) {
                                item.style.display = '';
                            } else {
                                item.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() {
                    currentFilters = collectFilterValues();
                    updateFilterCount();
                    updateActiveFiltersDisplay();
                    const search = document.getElementById('ticketSearch').value.trim();
                    loadTickets(search,
                        currentFilters.status.join(','),
                        currentFilters.zone.join(','),
                        currentFilters.service_center.join(','),
                        currentFilters.customer_name,
                        currentFilters.escalation_level.join(','),
                        currentFilters.aging.join(',')
                    );
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('filterModal'));
                    modal.hide();
                });

                // Reset filters button
                document.getElementById('resetFiltersBtn').addEventListener('click', function() {
                    currentFilters = {
                        status: [],
                        zone: [],
                        service_center: [],
                        customer_name: '',
                        escalation_level: [],
                        aging: []
                    };
                    updateFilterCount();
                    updateActiveFiltersDisplay();
                    
                    // Uncheck all checkboxes
                    document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
                        checkbox.checked = false;
                    });
                    
                    document.getElementById('modalCustomerNameFilter').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() {
                    // Uncheck all checkboxes first
                    document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
                        checkbox.checked = false;
                    });
                    
                    // Check checkboxes based on current filters
                    Object.keys(currentFilters).forEach(filterType => {
                        if (Array.isArray(currentFilters[filterType])) {
                            currentFilters[filterType].forEach(value => {
                                const checkboxes = document.querySelectorAll(`.filter-checkbox[data-filter-type="${filterType}"][value="${value}"]`);
                                checkboxes.forEach(checkbox => {
                                    checkbox.checked = true;
                                });
                            });
                        }
                    });
                    
                    document.getElementById('modalCustomerNameFilter').value = currentFilters.customer_name;
                    updateActiveFiltersDisplay();
                });
            }

            // 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 and not resolved
                    if (ticket.highlight && !ticket.is_resolved) {
                        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'}">
                        ${parseInt(ticket.aging_days)}${ticket.aging_text}
                    </small>
                </td>
                <td class="align-middle">
                    ${ticket.escalation_date 
                        ? new Date(ticket.escalation_date).toISOString().split('T')[0] 
                        : '-'}
                </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,
                    currentFilters.status.join(','),
                    currentFilters.zone.join(','),
                    currentFilters.service_center.join(','),
                    currentFilters.customer_name,
                    currentFilters.escalation_level.join(','),
                    currentFilters.aging.join(',')
                );
            };

            // 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(function() {
                    const search = document.getElementById('ticketSearch').value.trim();
                    loadTickets(search,
                        currentFilters.status.join(','),
                        currentFilters.zone.join(','),
                        currentFilters.service_center.join(','),
                        currentFilters.customer_name,
                        currentFilters.escalation_level.join(','),
                        currentFilters.aging.join(',')
                    );
                }, 300000);
            }

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