{% extends 'base.html' %}

{% block title %}Support Tickets - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="bi bi-headset me-3" style="color: var(--accent-blue);"></i>
                        Support Tickets
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Manage and track customer support requests</p>
                </div>
                <div class="d-flex gap-3">
                    <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i> Create Ticket
                    </a>
                </div>
            </div>

            <!-- Filter Stats Cards -->
            <div class="row mb-3">
                <div class="col-md-3 col-6 mb-2">
                    <div class="stats-card-compact bg-primary filter-card {% if not status_filter %}active{% endif %}" data-filter="all" style="cursor: pointer;">
                        <span class="stats-number-small">{{ total_tickets|default:0 }}</span>
                        <span class="stats-label-small">Total</span>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-2">
                    <div class="stats-card-compact filter-card {% if status_filter == 'active' %}active{% endif %}" data-filter="active" style="background: linear-gradient(135deg, #f59e0b, #d97706); cursor: pointer;">
                        <span class="stats-number-small">{{ open_tickets|default:0 }}</span>
                        <span class="stats-label-small">Active</span>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-2">
                    <div class="stats-card-compact filter-card {% if status_filter == 'resolved' %}active{% endif %}" data-filter="resolved" style="background: linear-gradient(135deg, #10b981, #059669); cursor: pointer;">
                        <span class="stats-number-small">{{ resolved_tickets|default:0 }}</span>
                        <span class="stats-label-small">Resolved</span>
                    </div>
                </div>
                <div class="col-md-3 col-6 mb-2">
                    <div class="stats-card-compact filter-card {% if status_filter == 'urgent' %}active{% endif %}" data-filter="urgent" style="background: linear-gradient(135deg, #dc2626, #b91c1c); cursor: pointer;">
                        <span class="stats-number-small">{{ urgent_tickets|default:0 }}</span>
                        <span class="stats-label-small">Urgent</span>
                    </div>
                </div>
            </div>

            <!-- Live Search -->
            <div class="card mb-3">
                <div class="card-body py-2">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-6">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-search"></i>
                                </span>
                                <input type="text" id="liveSearch" class="form-control" placeholder="Search tickets, customers, or assigned users..." value="{{ search_query }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <small class="text-muted" id="searchStatus">Type to search...</small>
                        </div>
                        <div class="col-md-3 text-end">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearSearch()">
                                <i class="bi bi-x-circle me-1"></i> Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tickets Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="bi bi-list-task me-2"></i> All Tickets
                    </h6>
                    <small class="text-secondary">{{ page_obj.start_index|default:0 }}-{{ page_obj.end_index|default:0 }} of {{ page_obj.paginator.count|default:0 }}</small>
                </div>
                <div class="card-body p-0">
                    {% if page_obj %}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th class="border-0 sortable" data-column="ticket_id" style="cursor: pointer;">
                                            Ticket #
                                        </th>
                                        <th class="border-0 sortable" data-column="customer" style="cursor: pointer;">
                                            Customer
                                        </th>
                                        <th class="border-0 sortable" data-column="title" style="cursor: pointer;">
                                            Subject
                                        </th>
                                        <th class="border-0 sortable" data-column="priority" style="cursor: pointer;">
                                            Priority
                                        </th>
                                        <th class="border-0 sortable" data-column="status" style="cursor: pointer;">
                                            Status
                                        </th>
                                        <th class="border-0 sortable" data-column="assigned_to" style="cursor: pointer;">
                                            Assigned To
                                        </th>
                                        <th class="border-0 d-none d-md-table-cell sortable" data-column="created_at" style="cursor: pointer;">
                                            Created
                                        </th>
                                        <th class="border-0">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in page_obj %}
                                    <tr class="clickable-row" data-href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" style="cursor: pointer;">
                                        <td onclick="event.stopPropagation();">
                                            <code class="bg-dark px-2 py-1 rounded">{{ ticket.ticket_id }}</code>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ ticket.customer.full_name }}</strong>
                                                <br>
                                                <small class="text-secondary">{{ ticket.customer.phone }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ ticket.title }}</strong>
                                                {% if ticket.category %}
                                                    <br>
                                                    <small class="text-secondary">
                                                        <i class="bi bi-tag me-1"></i>{{ ticket.category.name }}
                                                    </small>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% elif ticket.priority == 'medium' %}primary{% else %}secondary{% endif %}">
                                                {% if ticket.priority == 'urgent' %}
                                                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                                                {% elif ticket.priority == 'high' %}
                                                    <i class="bi bi-arrow-up me-1"></i>
                                                {% endif %}
                                                {{ ticket.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if ticket.status == 'closed' %}success{% elif ticket.status == 'resolved' %}info{% elif ticket.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                                {% if ticket.status == 'closed' %}
                                                    <i class="bi bi-check-circle me-1"></i>
                                                {% elif ticket.status == 'in_progress' %}
                                                    <i class="bi bi-clock me-1"></i>
                                                {% endif %}
                                                {{ ticket.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            {% if ticket.assigned_employee or ticket.assigned_to %}
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-person-circle me-2 text-primary"></i>
                                                    <span>{{ ticket.assigned_person }}</span>
                                                </div>
                                            {% else %}
                                                <span class="text-secondary">
                                                    <i class="bi bi-person-dash me-1"></i> Unassigned
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td class="d-none d-md-table-cell">
                                            <div>
                                                {{ ticket.created_at|date:"M d, Y" }}
                                                <br>
                                                <small class="text-secondary">{{ ticket.created_at|time:"H:i" }}</small>
                                            </div>
                                        </td>
                                        <td onclick="event.stopPropagation();">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-outline-primary" title="View Details">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                {% if user.is_staff %}
                                                    <a href="{% url 'tickets:ticket_edit' ticket.ticket_id %}" class="btn btn-outline-warning" title="Edit">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="8" class="text-center py-5">
                                            <div class="text-secondary">
                                                <i class="bi bi-inbox display-1"></i>
                                                <h5 class="mt-3">No tickets found</h5>
                                                <p>No support tickets match your current filters.</p>
                                                <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                                                    <i class="bi bi-plus-circle me-2"></i> Create First Ticket
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        {% if page_obj.has_other_pages %}
                        <div class="card-footer">
                            <nav aria-label="Ticket pagination">
                                <ul class="pagination justify-content-center mb-0">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                                <i class="bi bi-chevron-left"></i> Previous
                                            </a>
                                        </li>
                                    {% endif %}

                                    {% for num in page_obj.paginator.page_range %}
                                        {% if page_obj.number == num %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ num }}</span>
                                            </li>
                                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                            <li class="page-item">
                                                <a class="page-link" href="?page={{ num }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.priority %}&priority={{ request.GET.priority }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">
                                                Next <i class="bi bi-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <div class="text-secondary">
                                <i class="bi bi-inbox display-1"></i>
                                <h5 class="mt-3">No tickets available</h5>
                                <p>Start by creating your first support ticket.</p>
                                <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle me-2"></i> Create Ticket
                                </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let searchTimeout;
    let currentSort = '';
    let currentOrder = 'asc';
    let currentFilter = '{{ status_filter|default:"all" }}';
    
    const liveSearch = document.getElementById('liveSearch');
    const searchStatus = document.getElementById('searchStatus');
    
    // Live search functionality
    if (liveSearch) {
        liveSearch.addEventListener('input', function() {
            const searchTerm = this.value.trim();
            
            clearTimeout(searchTimeout);
            
            if (searchTerm.length === 0) {
                searchStatus.textContent = 'Type to search...';
                performSearch('', currentFilter, currentSort, currentOrder);
                return;
            }
            
            searchStatus.textContent = 'Searching...';
            
            searchTimeout = setTimeout(() => {
                performSearch(searchTerm, currentFilter, currentSort, currentOrder);
            }, 800); // 800ms delay for typing
        });
    }
    
    // Filter card functionality
    document.querySelectorAll('.filter-card').forEach(card => {
        card.addEventListener('click', function() {
            // Remove active class from all cards
            document.querySelectorAll('.filter-card').forEach(c => c.classList.remove('active'));
            // Add active class to clicked card
            this.classList.add('active');
            
            currentFilter = this.dataset.filter;
            const searchTerm = liveSearch ? liveSearch.value.trim() : '';
            performSearch(searchTerm, currentFilter, currentSort, currentOrder);
        });
    });
    
    // Sortable headers
    document.querySelectorAll('.sortable').forEach(header => {
        header.addEventListener('click', function() {
            const column = this.dataset.column;
            
            // Toggle sort order if same column
            if (currentSort === column) {
                currentOrder = currentOrder === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort = column;
                currentOrder = 'asc';
            }
            
            // Update header icons
            updateSortIcons(column, currentOrder);
            
            const searchTerm = liveSearch ? liveSearch.value.trim() : '';
            performSearch(searchTerm, currentFilter, currentSort, currentOrder);
        });
    });
    
    // Make table rows clickable
    document.querySelectorAll('.clickable-row').forEach(row => {
        row.addEventListener('click', function() {
            window.location.href = this.dataset.href;
        });
    });
});

function performSearch(searchTerm, filter, sortColumn, sortOrder) {
    const searchStatus = document.getElementById('searchStatus');
    
    // Build URL parameters
    const params = new URLSearchParams();
    if (searchTerm) params.set('search', searchTerm);
    if (filter && filter !== 'all') params.set('filter', filter);
    if (sortColumn) params.set('sort', sortColumn);
    if (sortOrder) params.set('order', sortOrder);
    
    // Update URL without page reload
    const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
    window.history.pushState({}, '', newUrl);
    
    // Perform AJAX request
    fetch(newUrl, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        
        // Update table content
        const newTableBody = doc.querySelector('table tbody');
        const currentTableBody = document.querySelector('table tbody');
        if (newTableBody && currentTableBody) {
            currentTableBody.innerHTML = newTableBody.innerHTML;
            
            // Reattach click handlers to new rows
            document.querySelectorAll('.clickable-row').forEach(row => {
                row.addEventListener('click', function() {
                    window.location.href = this.dataset.href;
                });
            });
        }
        
        // Update pagination
        const newPagination = doc.querySelector('.pagination');
        const currentPagination = document.querySelector('.pagination');
        if (newPagination && currentPagination) {
            currentPagination.parentElement.innerHTML = newPagination.parentElement.innerHTML;
        }
        
        // Update record count
        const newRecordCount = doc.querySelector('.card-header small');
        const currentRecordCount = document.querySelector('.card-header small');
        if (newRecordCount && currentRecordCount) {
            currentRecordCount.textContent = newRecordCount.textContent;
        }
        
        // Update search status
        if (searchTerm) {
            const resultCount = doc.querySelectorAll('table tbody tr:not(:has(td[colspan]))').length;
            searchStatus.textContent = `Found ${resultCount} result(s)`;
        } else {
            searchStatus.textContent = 'Type to search...';
        }
    })
    .catch(error => {
        console.error('Search error:', error);
        searchStatus.textContent = 'Search error occurred';
    });
}

function updateSortIcons(activeColumn, order) {
    document.querySelectorAll('.sortable i').forEach(icon => {
        const header = icon.closest('.sortable');
        if (header.dataset.column === activeColumn) {
            icon.className = order === 'asc' ? 'bi bi-arrow-up ms-1' : 'bi bi-arrow-down ms-1';
        } else {
            icon.className = 'bi bi-arrow-down-up ms-1';
        }
    });
}

function clearSearch() {
    const liveSearch = document.getElementById('liveSearch');
    const searchStatus = document.getElementById('searchStatus');
    
    if (liveSearch) {
        liveSearch.value = '';
    }
    
    // Remove active from all filter cards and activate "Total"
    document.querySelectorAll('.filter-card').forEach(card => {
        card.classList.remove('active');
        if (card.dataset.filter === 'all') {
            card.classList.add('active');
        }
    });
    
    currentFilter = 'all';
    currentSort = '';
    currentOrder = 'asc';
    
    // Reset sort icons
    document.querySelectorAll('.sortable i').forEach(icon => {
        icon.className = 'bi bi-arrow-down-up ms-1';
    });
    
    searchStatus.textContent = 'Type to search...';
    performSearch('', 'all', '', 'asc');
}
</script>
{% endblock %}