@extends('layouts.app')

@section('title', 'Complaint Tickets')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Tickets</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="total-count">{{ $statistics['total'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-ticket-alt fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Open</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="open-count">{{ $statistics['open'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-clock fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">In Progress</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="in-progress-count">{{ $statistics['in_progress'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-spinner fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Resolved</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="resolved-count">{{ $statistics['resolved'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-secondary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Closed</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="closed-count">{{ $statistics['closed'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-archive fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                    <div class="card border-left-danger shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">High Priority</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="high-priority-count">{{ $statistics['high_priority'] ?? 0 }}</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-ticket-alt me-2"></i>Complaint Tickets
                        <small class="text-muted fs-6 ms-2" id="ticket-count-text">({{ $statistics['total'] ?? 0 }} {{ $statistics['total'] == 1 ? 'ticket' : 'tickets' }})</small>
                    </h4>
                    <div class="d-flex gap-2">
                        @if(auth()->user()->user_type === 'student')
                        <a href="{{ route('complaints.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> New Complaint
                        </a>
                        @endif
                        
                        @if(auth()->user()->user_type === 'admin')
                        <!-- Bulk Actions Dropdown -->
                        <div class="dropdown">
                            <button class="btn btn-outline-primary dropdown-toggle" type="button" id="bulkActionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-tasks me-1"></i> Bulk Actions
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="bulkActionsDropdown">
                                <li>
                                    <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#bulkAssignModal">
                                        <i class="fas fa-user-check me-2"></i> Bulk Assign
                                    </button>
                                </li>
                                <li>
                                    <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#bulkCloseModal">
                                        <i class="fas fa-times-circle me-2"></i> Bulk Close
                                    </button>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <button class="dropdown-item text-danger" type="button" id="clearSelectionBtn">
                                        <i class="fas fa-times me-2"></i> Clear Selection
                                    </button>
                                </li>
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <!-- Bulk Actions Info -->
                    @if(auth()->user()->user_type === 'admin')
                    <div class="alert alert-info d-flex align-items-center mb-4" id="bulkSelectionInfo" style="display: none !important;">
                        <i class="fas fa-info-circle me-2"></i>
                        <span id="selectedCountText">0 tickets selected</span>
                        <div class="ms-auto">
                            <button class="btn btn-sm btn-outline-primary me-2" data-bs-toggle="modal" data-bs-target="#bulkAssignModal">
                                <i class="fas fa-user-check me-1"></i> Assign Selected
                            </button>
                            <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#bulkCloseModal">
                                <i class="fas fa-times-circle me-1"></i> Close Selected
                            </button>
                        </div>
                    </div>
                    @endif

                    <!-- Quick Status Filters -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <span class="fw-semibold text-muted me-2">Filter by Status:</span>
                                <div class="btn-group" role="group" aria-label="Quick Status Filters">
                                    <input type="radio" class="btn-check" name="status-filter" id="status-all" value="all" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary btn-sm" for="status-all">
                                        <i class="fas fa-list me-1"></i> All
                                    </label>

                                    <input type="radio" class="btn-check" name="status-filter" id="status-open" value="open" autocomplete="off">
                                    <label class="btn btn-outline-warning btn-sm" for="status-open">
                                        <i class="fas fa-clock me-1"></i> Open
                                    </label>

                                    <input type="radio" class="btn-check" name="status-filter" id="status-in-progress" value="in_progress" autocomplete="off">
                                    <label class="btn btn-outline-info btn-sm" for="status-in-progress">
                                        <i class="fas fa-spinner me-1"></i> In Progress
                                    </label>

                                    <input type="radio" class="btn-check" name="status-filter" id="status-resolved" value="resolved" autocomplete="off">
                                    <label class="btn btn-outline-success btn-sm" for="status-resolved">
                                        <i class="fas fa-check-circle me-1"></i> Resolved
                                    </label>

                                    <input type="radio" class="btn-check" name="status-filter" id="status-closed" value="closed" autocomplete="off">
                                    <label class="btn btn-outline-secondary btn-sm" for="status-closed">
                                        <i class="fas fa-archive me-1"></i> Closed
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Filters -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label for="search" class="form-label">
                                <i class="fas fa-search me-1"></i>Search
                            </label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   placeholder="Ticket #, Subject, Student...">
                        </div>
                        <div class="col-md-2">
                            <label for="priority" class="form-label">
                                <i class="fas fa-flag me-1"></i>Priority
                            </label>
                            <select class="form-select" id="priority" name="priority">
                                <option value="all">All Priority</option>
                                <option value="low">Low</option>
                                <option value="normal">Normal</option>
                                <option value="high">High</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="category" class="form-label">
                                <i class="fas fa-tag me-1"></i>Category
                            </label>
                            <select class="form-select" id="category" name="category">
                                <option value="all">All Categories</option>
                                @foreach($categories as $category)
                                <option value="{{ $category }}">{{ $category }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="button" id="apply-filters" class="btn btn-primary me-2">
                                <i class="fas fa-filter me-1"></i> Apply Filters
                            </button>
                            <button type="button" id="reset-filters" class="btn btn-outline-secondary">
                                <i class="fas fa-refresh me-1"></i> Reset
                            </button>
                        </div>
                    </div>

                    <!-- Loading Spinner -->
                    <div id="loading-spinner" class="text-center d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Loading tickets...</p>
                    </div>

                    <!-- Tickets Table -->
                    <div id="tickets-container">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="table-light">
                                    <tr>
                                        @if(auth()->user()->user_type === 'admin')
                                        <th width="40">
                                            <input type="checkbox" id="selectAllCheckbox" class="form-check-input">
                                        </th>
                                        @endif
                                        <th width="120">Ticket #</th>
                                        <th>Subject</th>
                                        <th width="120">Category</th>
                                        <th width="100">Priority</th>
                                        <th width="120">Status</th>
                                        <th width="150">Student</th>
                                        @if(auth()->user()->user_type !== 'student')
                                        <th width="150">Assigned To</th>
                                        @endif
                                        <th width="120">Created</th>
                                        <th width="150" class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="tickets-tbody">
                                    @include('complaints.partials.tickets_rows', ['tickets' => $tickets])
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Single Assign Ticket Modal -->
<div class="modal fade" id="assignTicketModal" tabindex="-1" aria-labelledby="assignTicketModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="assignTicketModalLabel">
                    <i class="fas fa-user-check me-2"></i>Assign Ticket
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="assignTicketForm" method="POST" class="quick-action-form">
                @csrf
                <input type="hidden" id="assignTicketId" name="ticket_id">
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Assign ticket: <strong id="ticketNumberDisplay"></strong>
                    </div>
                    <div class="mb-3">
                        <label for="assigned_to_user_id" class="form-label fw-semibold">Select LMS Manager</label>
                        <select class="form-select" id="assigned_to_user_id" name="assigned_to_user_id" required>
                            <option value="">Choose LMS Manager...</option>
                            @foreach($lmsManagers as $manager)
                            <option value="{{ $manager->id }}">{{ $manager->username }}({{ $manager->email }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-user-check me-1"></i> Assign Ticket
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Single Close Ticket Modal -->
<div class="modal fade" id="closeTicketModal" tabindex="-1" aria-labelledby="closeTicketModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="closeTicketModalLabel">
                    <i class="fas fa-times-circle me-2"></i>Close Ticket
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="closeTicketForm" method="POST" class="quick-action-form">
                @csrf
                <input type="hidden" id="closeTicketId" name="ticket_id">
                <input type="hidden" name="status" value="closed">
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Close ticket: <strong id="closeTicketNumberDisplay"></strong>
                    </div>
                    <div class="mb-3">
                        <label for="resolution_notes" class="form-label fw-semibold">Resolution Notes</label>
                        <textarea class="form-control" id="resolution_notes" name="resolution_notes" 
                                  rows="4" placeholder="Please provide detailed resolution notes..." required></textarea>
                        <div class="form-text">This note will be sent to the student and recorded in the ticket history.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-times-circle me-1"></i> Close Ticket
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Assign Modal -->
<div class="modal fade" id="bulkAssignModal" tabindex="-1" aria-labelledby="bulkAssignModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="bulkAssignModalLabel">
                    <i class="fas fa-users me-2"></i>Bulk Assign Tickets
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="bulkAssignForm" method="POST" action="{{ route('complaints.bulk-assign') }}">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Assign <strong id="bulkAssignCount">0</strong> selected tickets
                    </div>
                    <div class="mb-3">
                        <label for="bulk_assigned_to_user_id" class="form-label fw-semibold">Select LMS Manager</label>
                        <select class="form-select" id="bulk_assigned_to_user_id" name="assigned_to_user_id" required>
                            <option value="">Choose LMS Manager...</option>
                            @foreach($lmsManagers as $manager)
                            <option value="{{ $manager->id }}">{{ $manager->username }}({{ $manager->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="bulkAssignTicketIds"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-users me-1"></i> Assign Selected
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Close Modal -->
<div class="modal fade" id="bulkCloseModal" tabindex="-1" aria-labelledby="bulkCloseModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="bulkCloseModalLabel">
                    <i class="fas fa-archive me-2"></i>Bulk Close Tickets
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="bulkCloseForm" method="POST" action="{{ route('complaints.bulk-close') }}">
                @csrf
                <input type="hidden" name="status" value="closed">
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Close <strong id="bulkCloseCount">0</strong> selected tickets
                    </div>
                    <div class="mb-3">
                        <label for="bulk_resolution_notes" class="form-label fw-semibold">Resolution Notes</label>
                        <textarea class="form-control" id="bulk_resolution_notes" name="resolution_notes" 
                                  rows="4" placeholder="Please provide resolution notes for all selected tickets..." required></textarea>
                        <div class="form-text">These notes will be applied to all selected tickets.</div>
                    </div>
                    <div id="bulkCloseTicketIds"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-archive me-1"></i> Close Selected
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .btn-check:checked + .btn {
        border-width: 2px;
        font-weight: bold;
        transform: translateY(-1px);
    }
    .ticket-actions {
        min-width: 140px;
    }
    .badge {
        font-size: 0.75em;
        font-weight: 500;
    }
    .table th {
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .border-left-primary { border-left: 4px solid #4e73df !important; }
    .border-left-warning { border-left: 4px solid #f6c23e !important; }
    .border-left-info { border-left: 4px solid #36b9cc !important; }
    .border-left-success { border-left: 4px solid #1cc88a !important; }
    .border-left-secondary { border-left: 4px solid #858796 !important; }
    .border-left-danger { border-left: 4px solid #e74a3b !important; }
    
    .ticket-subject {
        font-weight: 500;
        color: #2d3748;
    }
    .ticket-description {
        color: #718096;
        font-size: 0.875rem;
    }
    .action-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    .selected-ticket {
        background-color: #f8f9fa !important;
    }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let currentPage = 1;
        let filters = {
            status: 'all',
            priority: 'all',
            category: 'all',
            search: ''
        };
        let selectedTickets = new Set();

        // Initialize modals
        const assignTicketModal = new bootstrap.Modal(document.getElementById('assignTicketModal'));
        const closeTicketModal = new bootstrap.Modal(document.getElementById('closeTicketModal'));
        const bulkAssignModal = new bootstrap.Modal(document.getElementById('bulkAssignModal'));
        const bulkCloseModal = new bootstrap.Modal(document.getElementById('bulkCloseModal'));

        // Update statistics
        function updateStatistics(data) {
            if (data.statistics) {
                document.getElementById('total-count').textContent = data.statistics.total || 0;
                document.getElementById('open-count').textContent = data.statistics.open || 0;
                document.getElementById('in-progress-count').textContent = data.statistics.in_progress || 0;
                document.getElementById('resolved-count').textContent = data.statistics.resolved || 0;
                document.getElementById('closed-count').textContent = data.statistics.closed || 0;
                document.getElementById('high-priority-count').textContent = data.statistics.high_priority || 0;
                
                // Update ticket count text
                const total = data.statistics.total || 0;
                document.getElementById('ticket-count-text').textContent = `(${total} ${total === 1 ? 'ticket' : 'tickets'})`;
            }
        }

        // Bulk selection functions
        function updateBulkSelectionInfo() {
            const selectedCount = selectedTickets.size;
            const bulkSelectionInfo = document.getElementById('bulkSelectionInfo');
            const selectedCountText = document.getElementById('selectedCountText');
            
            if (selectedCount > 0) {
                bulkSelectionInfo.style.display = 'flex !important';
                selectedCountText.textContent = `${selectedCount} ${selectedCount === 1 ? 'ticket' : 'tickets'} selected`;
                
                // Update modal counts
                document.getElementById('bulkAssignCount').textContent = selectedCount;
                document.getElementById('bulkCloseCount').textContent = selectedCount;
            } else {
                bulkSelectionInfo.style.display = 'none !important';
            }
        }

        function updateSelectAllCheckbox() {
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            const ticketCheckboxes = document.querySelectorAll('.ticket-checkbox:not(:disabled)');
            const checkedCount = document.querySelectorAll('.ticket-checkbox:checked:not(:disabled)').length;
            
            selectAllCheckbox.checked = checkedCount > 0 && checkedCount === ticketCheckboxes.length;
            selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < ticketCheckboxes.length;
        }

        // Select all checkbox
        document.getElementById('selectAllCheckbox')?.addEventListener('change', function() {
            const ticketCheckboxes = document.querySelectorAll('.ticket-checkbox:not(:disabled)');
            ticketCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
                const ticketId = checkbox.value;
                if (this.checked) {
                    selectedTickets.add(ticketId);
                } else {
                    selectedTickets.delete(ticketId);
                }
            });
            updateBulkSelectionInfo();
        });

        // Individual ticket checkbox
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('ticket-checkbox')) {
                const ticketId = e.target.value;
                if (e.target.checked) {
                    selectedTickets.add(ticketId);
                } else {
                    selectedTickets.delete(ticketId);
                }
                updateBulkSelectionInfo();
                updateSelectAllCheckbox();
            }
        });

        // Clear selection
        document.getElementById('clearSelectionBtn')?.addEventListener('click', function() {
            selectedTickets.clear();
            document.querySelectorAll('.ticket-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            updateBulkSelectionInfo();
            updateSelectAllCheckbox();
        });

        // Bulk assign modal
        document.getElementById('bulkAssignModal')?.addEventListener('show.bs.modal', function() {
            const ticketIdsInput = document.getElementById('bulkAssignTicketIds');
            ticketIdsInput.innerHTML = '';
            selectedTickets.forEach(ticketId => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ticket_ids[]';
                input.value = ticketId;
                ticketIdsInput.appendChild(input);
            });
        });

        // Bulk close modal
        document.getElementById('bulkCloseModal')?.addEventListener('show.bs.modal', function() {
            const ticketIdsInput = document.getElementById('bulkCloseTicketIds');
            ticketIdsInput.innerHTML = '';
            selectedTickets.forEach(ticketId => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ticket_ids[]';
                input.value = ticketId;
                ticketIdsInput.appendChild(input);
            });
        });

        // Single ticket actions
        document.addEventListener('click', function(e) {
            if (e.target.closest('.assign-btn')) {
                const button = e.target.closest('.assign-btn');
                const ticketId = button.getAttribute('data-ticket-id');
                const ticketNumber = button.getAttribute('data-ticket-number');
                
                document.getElementById('ticketNumberDisplay').textContent = ticketNumber;
                document.getElementById('assignTicketId').value = ticketId;
                assignTicketModal.show();
            }

            if (e.target.closest('.close-btn')) {
                const button = e.target.closest('.close-btn');
                const ticketId = button.getAttribute('data-ticket-id');
                const ticketNumber = button.getAttribute('data-ticket-number');
                
                document.getElementById('closeTicketNumberDisplay').textContent = ticketNumber;
                document.getElementById('closeTicketId').value = ticketId;
                closeTicketModal.show();
            }
        });

        // Quick Status Filters
        document.querySelectorAll('input[name="status-filter"]').forEach(radio => {
            radio.addEventListener('change', function() {
                filters.status = this.value;
                loadTickets();
            });
        });

        // Apply Filters
        document.getElementById('apply-filters').addEventListener('click', function() {
            filters.search = document.getElementById('search').value;
            filters.priority = document.getElementById('priority').value;
            filters.category = document.getElementById('category').value;
            loadTickets();
        });

        // Reset Filters
        document.getElementById('reset-filters').addEventListener('click', function() {
            document.getElementById('search').value = '';
            document.getElementById('priority').value = 'all';
            document.getElementById('category').value = 'all';
            document.getElementById('status-all').checked = true;
            
            filters = {
                status: 'all',
                priority: 'all',
                category: 'all',
                search: ''
            };
            
            loadTickets();
        });

        // Search on Enter key
        document.getElementById('search').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                filters.search = this.value;
                loadTickets();
            }
        });

        // Load tickets via AJAX
        function loadTickets(page = 1) {
            currentPage = page;
            
            const loadingSpinner = document.getElementById('loading-spinner');
            const ticketsContainer = document.getElementById('tickets-container');
            
            loadingSpinner.classList.remove('d-none');
            ticketsContainer.classList.add('d-none');

            const params = new URLSearchParams({
                ...filters,
                page: page,
                ajax: true
            });

            fetch(`/complaints?${params}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('tickets-tbody').innerHTML = data.html;
                updateStatistics(data);
                loadingSpinner.classList.add('d-none');
                ticketsContainer.classList.remove('d-none');
                
                // Clear selection after loading new tickets
                selectedTickets.clear();
                updateBulkSelectionInfo();
                updateSelectAllCheckbox();
            })
            .catch(error => {
                console.error('Error loading tickets:', error);
                loadingSpinner.classList.add('d-none');
                ticketsContainer.classList.remove('d-none');
                showAlert('Error loading tickets. Please try again.', 'danger');
            });
        }

        // Pagination click handler
        document.addEventListener('click', function(e) {
            if (e.target.closest('.pagination a')) {
                e.preventDefault();
                const url = new URL(e.target.closest('.pagination a').href);
                const page = url.searchParams.get('page');
                loadTickets(page);
            }
        });

        // Quick actions (Assign, Close, Status Update)
        document.addEventListener('submit', function(e) {
            if (e.target.closest('.quick-action-form')) {
                e.preventDefault();
                const form = e.target.closest('.quick-action-form');
                const formData = new FormData(form);
                
                let actionUrl = '';
                const ticketId = form.querySelector('input[name="ticket_id"]')?.value;

                if (form.id === 'assignTicketForm' && ticketId) {
                    actionUrl = `/complaints/${ticketId}/assign`;
                } else if (form.id === 'closeTicketForm' && ticketId) {
                    actionUrl = `/complaints/${ticketId}/update-status`;
                } else if (form.id === 'bulkAssignForm') {
                    actionUrl = form.action;
                } else if (form.id === 'bulkCloseForm') {
                    actionUrl = form.action;
                } else {
                    showAlert('Invalid form action.', 'danger');
                    return;
                }

                fetch(actionUrl, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert(data.message, 'success');
                        loadTickets(currentPage);
                        
                        // Close modals if open
                        if (form.id === 'assignTicketForm') {
                            assignTicketModal.hide();
                            form.reset();
                        }
                        if (form.id === 'closeTicketForm') {
                            closeTicketModal.hide();
                            form.reset();
                        }
                        if (form.id === 'bulkAssignForm') {
                            bulkAssignModal.hide();
                            form.reset();
                            selectedTickets.clear();
                            updateBulkSelectionInfo();
                        }
                        if (form.id === 'bulkCloseForm') {
                            bulkCloseModal.hide();
                            form.reset();
                            selectedTickets.clear();
                            updateBulkSelectionInfo();
                        }
                    } else {
                        showAlert(data.message || 'An error occurred', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('An error occurred. Please try again.', 'danger');
                });
            }
        });

        // Show alert function
        function showAlert(message, type) {
            // Remove existing alerts
            document.querySelectorAll('.alert').forEach(alert => alert.remove());
            
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            document.querySelector('.card-body').insertBefore(alertDiv, document.querySelector('.card-body').firstChild);
            
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }

        // Initialize filters from URL
        function initializeFiltersFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('status')) {
                filters.status = urlParams.get('status');
                const radio = document.querySelector(`input[name="status-filter"][value="${filters.status}"]`);
                if (radio) radio.checked = true;
            }
            if (urlParams.get('priority')) {
                filters.priority = urlParams.get('priority');
                document.getElementById('priority').value = filters.priority;
            }
            if (urlParams.get('category')) {
                filters.category = urlParams.get('category');
                document.getElementById('category').value = filters.category;
            }
            if (urlParams.get('search')) {
                filters.search = urlParams.get('search');
                document.getElementById('search').value = filters.search;
            }
        }
        
        // Initialize
        initializeFiltersFromURL();
        updateBulkSelectionInfo();
        updateSelectAllCheckbox();
    });
</script>
@endsection