@extends('secretary::layouts.master')

@section('title', 'Tickets Management')
@section('page-title', 'Tickets')

@section('breadcrumbs')
<li class="breadcrumb-item active">Tickets</li>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card secretary-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-ticket-alt mr-2"></i>
                    Tickets Management
                </h3>
                <div class="card-tools">
                    <a href="{{ route('secretary.tickets.create') }}" class="btn btn-primary btn-secretary">
                        <i class="fas fa-plus mr-1"></i>
                        Create New Ticket
                    </a>
                </div>
            </div>
            
            <!-- Filters -->
            <div class="card-body">
                <div class="filter-card">
                    <form method="GET" action="{{ route('secretary.tickets.index') }}" id="filter-form">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select name="status" id="status" class="form-control select2">
                                        <option value="">All Statuses</option>
                                        <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="priority">Priority</label>
                                    <select name="priority" id="priority" class="form-control select2">
                                        <option value="">All Priorities</option>
                                        <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="category">Category</label>
                                    <select name="category" id="category" class="form-control select2">
                                        <option value="">All Categories</option>
                                        <option value="general" {{ request('category') == 'general' ? 'selected' : '' }}>General</option>
                                        <option value="technical" {{ request('category') == 'technical' ? 'selected' : '' }}>Technical</option>
                                        <option value="billing" {{ request('category') == 'billing' ? 'selected' : '' }}>Billing</option>
                                        <option value="support" {{ request('category') == 'support' ? 'selected' : '' }}>Support</option>
                                        <option value="complaint" {{ request('category') == 'complaint' ? 'selected' : '' }}>Complaint</option>
                                        <option value="suggestion" {{ request('category') == 'suggestion' ? 'selected' : '' }}>Suggestion</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="assigned_to">Assigned To</label>
                                    <select name="assigned_to" id="assigned_to" class="form-control select2">
                                        <option value="">All Users</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" {{ request('assigned_to') == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" name="search" id="search" class="form-control" 
                                           placeholder="Search by title, ticket number, or description..." 
                                           value="{{ request('search') }}">
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="d-flex">
                                        <button type="submit" class="btn btn-primary btn-secretary mr-2">
                                            <i class="fas fa-search mr-1"></i>
                                            Filter
                                        </button>
                                        <a href="{{ route('secretary.tickets.index') }}" class="btn btn-secondary btn-secretary">
                                            <i class="fas fa-times mr-1"></i>
                                            Clear
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- Tickets Table -->
                <div class="table-responsive">
                    <table class="table table-bordered table-striped data-table">
                        <thead>
                            <tr>
                                <th>Ticket #</th>
                                <th>Title</th>
                                <th>Priority</th>
                                <th>Status</th>
                                <th>Creator</th>
                                <th>Assigned To</th>
                                <th>Department</th>
                                <th>Due Date</th>
                                <th>Days Open</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- AJAX will populate this -->
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="pagination"></div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions Modal -->
<div class="modal fade" id="quickActionsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Quick Actions</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <button class="btn btn-primary btn-block mb-2" onclick="bulkAssign()">
                            <i class="fas fa-user-plus mr-1"></i>
                            Bulk Assign
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-warning btn-block mb-2" onclick="bulkStatusUpdate()">
                            <i class="fas fa-edit mr-1"></i>
                            Bulk Status Update
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Priority Change Modal -->
<div class="modal fade" id="priorityModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change Priority</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="priorityForm">
                    <input type="hidden" id="ticketId" name="ticket_id">
                    <div class="form-group">
                        <label for="newPriority">Select new priority:</label>
                        <select class="form-control" id="newPriority" name="priority" required>
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="priorityReason">Reason for change (optional):</label>
                        <textarea class="form-control" id="priorityReason" name="reason" rows="3" placeholder="Enter reason for priority change..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="updatePriority()">Update Priority</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentPage = 1;
    let totalPages = 1;
    let isLoading = false;
    
    // Load tickets on page load
    loadTickets();
    
    // Filter form submission
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        loadTickets();
    });
    
    // Search input with debounce
    let searchTimeout;
    $('#search').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            currentPage = 1;
            loadTickets();
        }, 500);
    });
    
    // Pagination
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page && page !== currentPage) {
            currentPage = page;
            loadTickets();
        }
    });
    
    // Auto-refresh every 30 seconds
    setInterval(function() {
        if (!isLoading) {
            loadTickets();
        }
    }, 30000);
    
    function loadTickets() {
        if (isLoading) return;
        
        isLoading = true;
        showLoading();
        
        const filters = {
            page: currentPage,
            status: $('#status').val(),
            priority: $('#priority').val(),
            category: $('#category').val(),
            assigned_to: $('#assigned_to').val(),
            created_by: $('#created_by').val(),
            search: $('#search').val()
        };
        
        $.ajax({
            url: "{{ route('secretary.tickets.index') }}",
            method: 'GET',
            data: filters,
            success: function(response) {
                if (response.data) {
                    renderTickets(response.data);
                    renderPagination(response);
                } else {
                    renderTickets(response);
                }
                hideLoading();
                isLoading = false;
            },
            error: function(xhr) {
                console.error('Error loading tickets:', xhr);
                showAlert('error', 'Failed to load tickets. Please try again.');
                hideLoading();
                isLoading = false;
            }
        });
    }
    
    function renderTickets(tickets) {
        const tbody = $('.data-table tbody');
        tbody.empty();
        
        if (tickets.length === 0) {
            tbody.html('<tr><td colspan="10" class="text-center">No tickets found</td></tr>');
            return;
        }
        
        tickets.forEach(function(ticket) {
            const row = `
                <tr>
                    <td>${ticket.ticket_number || 'N/A'}</td>
                    <td>
                        <a href="/secretary/tickets/${ticket.id}" class="text-primary">
                            ${ticket.title || 'N/A'}
                        </a>
                    </td>
                    <td>${getPriorityBadge(ticket.priority)}</td>
                    <td>${getStatusBadge(ticket.status)}</td>
                    <td>${ticket.creator_name || 'N/A'}</td>
                    <td>${ticket.assignee_name || 'Unassigned'}</td>
                    <td>${ticket.department_name || 'N/A'}</td>
                    <td>${ticket.due_date ? formatDate(ticket.due_date) : 'N/A'}</td>
                    <td>${ticket.days_open || '0'} days</td>
                    <td>${getActionButtons(ticket.id)}</td>
                </tr>
            `;
            tbody.append(row);
        });
    }
    
    function renderPagination(response) {
        if (response.last_page <= 1) {
            $('.pagination').empty();
            return;
        }
        
        let pagination = '<nav><ul class="pagination">';
        
        // Previous button
        if (response.current_page > 1) {
            pagination += `<li class="page-item"><a class="page-link" href="#" data-page="${response.current_page - 1}">Previous</a></li>`;
        }
        
        // Page numbers
        for (let i = 1; i <= response.last_page; i++) {
            const activeClass = i === response.current_page ? 'active' : '';
            pagination += `<li class="page-item ${activeClass}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
        }
        
        // Next button
        if (response.current_page < response.last_page) {
            pagination += `<li class="page-item"><a class="page-link" href="#" data-page="${response.current_page + 1}">Next</a></li>`;
        }
        
        pagination += '</ul></nav>';
        $('.pagination').html(pagination);
    }
    
    function getPriorityBadge(priority) {
        const colors = {
            'urgent': 'danger',
            'high': 'warning',
            'medium': 'info',
            'low': 'secondary'
        };
        const color = colors[priority] || 'secondary';
        return `<span class="badge badge-${color}">${priority ? priority.charAt(0).toUpperCase() + priority.slice(1) : 'N/A'}</span>`;
    }
    
    function getStatusBadge(status) {
        const colors = {
            'open': 'primary',
            'in_progress': 'info',
            'pending': 'warning',
            'resolved': 'success',
            'closed': 'secondary',
            'cancelled': 'danger'
        };
        const color = colors[status] || 'secondary';
        const displayStatus = status ? status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'N/A';
        return `<span class="badge badge-${color}">${displayStatus}</span>`;
    }
    
    function getActionButtons(ticketId) {
        return `
            <div class="btn-group" role="group">
                <a href="/secretary/tickets/${ticketId}" class="btn btn-sm btn-info" title="View">
                    <i class="fas fa-eye"></i>
                </a>
                <a href="/secretary/tickets/${ticketId}/edit" class="btn btn-sm btn-primary" title="Edit">
                    <i class="fas fa-edit"></i>
                </a>
                <button type="button" class="btn btn-sm btn-warning" onclick="showPriorityModal(${ticketId})" title="Change Priority">
                    <i class="fas fa-exclamation-triangle"></i>
                </button>
                <button type="button" class="btn btn-sm btn-danger" onclick="deleteTicket(${ticketId})" title="Delete">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
    }
    
    function formatDate(dateString) {
        if (!dateString) return 'N/A';
        const date = new Date(dateString);
        return date.toLocaleDateString();
    }
    
    function showLoading() {
        $('.data-table tbody').html('<tr><td colspan="10" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
    }
    
    function hideLoading() {
        // Loading will be replaced by actual data
    }
});

// Priority change functions
function showPriorityModal(ticketId = null) {
    if (ticketId) {
        $('#ticketId').val(ticketId);
    }
    $('#priorityModal').modal('show');
}

function updatePriority() {
    const ticketId = $('#ticketId').val();
    const newPriority = $('#newPriority').val();
    const reason = $('#priorityReason').val();
    
    if (!ticketId || !newPriority) {
        showAlert('error', 'Please select a ticket and priority.');
        return;
    }
    
    $.ajax({
        url: `/secretary/tickets/${ticketId}/priority`,
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            priority: newPriority,
            reason: reason
        },
        success: function(response) {
            if (response.success) {
                $('#priorityModal').modal('hide');
                showAlert('success', response.message);
                loadTickets(); // Refresh the table
            } else {
                showAlert('error', response.message);
            }
        },
        error: function(xhr) {
            console.error('Error updating priority:', xhr);
            showAlert('error', 'Failed to update priority. Please try again.');
        }
    });
}

function deleteTicket(ticketId) {
    if (confirm('Are you sure you want to delete this ticket?')) {
        $.ajax({
            url: "{{ route('secretary.tickets.index') }}/" + ticketId,
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    $('.data-table').DataTable().ajax.reload();
                    showAlert('success', response.message);
                } else {
                    showAlert('error', response.message);
                }
            },
            error: function() {
                showAlert('error', 'An error occurred while deleting the ticket.');
            }
        });
    }
}

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
    
    const alert = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fas ${icon} mr-2"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    
    $('.content').prepend(alert);
    
    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}
</script>
@endpush