@extends('layouts.app')

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

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .filterBlocks { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
    .filterBlocks li { margin-bottom: 0; }
    .btn-filter { background: #007bff; color: white; }
    .btn-filter:hover { background: #0056b3; }
    .active-filter { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
</style>
@endpush

@section('content')
<div class="loadPages01">
    @include('admin.tickets.components.filter_1')

    <!-- DataTable -->
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="ticketsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Subject</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Issue Type</th>
                        <th>Assignee</th>
                        <th>Customer</th>
                        <th>Created At</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>
    @include('admin.tickets.components.filter')

@endsection

@push('scripts')
<script src="{{asset('modules/common/common.js')}}"></script>
<script>
$(document).ready(function() {
    var errorShown = false;
    var table = $('#ticketsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('tickets.list') }}",
            type: "GET",
            data: function(d) {
                d.filter_search = $('#filter_search').val();
            d.filter_subject = $('#filter_subject').val();
            d.filter_priority = $('#filter_priority').val();
            d.filter_status = $('#filter_status').val();
            d.filter_issue_type = $('#filter_issue_type').val();
            d.filter_queue = $('#filter_queue').val();
            d.filter_assignee = $('#filter_assignee').val();
            d.filter_customer = $('#filter_customer').val();
            d.filter_customer_role = $('#filter_customer_role').val();
            d.filter_date_from = $('#filter_date_from').val();
            d.filter_date_to = $('#filter_date_to').val();
            d.filter_active = $('#filter_active').val();
            d.filter_ticket_type = $('#filter_ticket_type').val();
            },
            error: function(xhr, error, thrown) {
                if (errorShown) return;
                errorShown = true;

                if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                    table.clear().draw();
                    setTimeout(() => { errorShown = false; }, 5000);
                }
                else if (xhr.status === 401) {
                    toastr.error('Please login to access this page.');
                    window.location.href = "{{ route('admin.login') }}";
                }
                else if (xhr.status === 500) {
                    toastr.error('Server error. Please try again later.');
                    setTimeout(() => { errorShown = false; }, 10000);
                }
                else {
                    toastr.error('Failed to load tickets data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
        columns: [
            { data: 'r_id', name: 'r_id', orderable: true, searchable: true },
            { data: 'subject', name: 'subject' },
            { data: 'priority', name: 'priority' },
            { data: 'status', name: 'status' },
            { data: 'issue_type', name: 'issue_type' },
            { data: 'assignee', name: 'assignee' },
            { data: 'customer', name: 'customer' },
            { data: 'created_at', name: 'created_at' },
            { data: 'active', name: 'active' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']],
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
    });

    $('.select2').select2({
        width: '100%',
        placeholder: "Select Option"
    });

    window.filter = function() {
        table.ajax.reload();
        if ($('.active-filter').children().length > 0) {
            $('#collapseFilter').show();
        }
    }

    window.resetFilter = function() {
        $('#my-filter').trigger('reset');
        $('.select2').val('').trigger('change');
        table.ajax.reload();
        $('.active-filter').empty();
        $('#collapseFilter').hide();
    }

    $('#filter_search').on('keypress', function(e) {
        if (e.which === 13) {
            filter();
            e.preventDefault();
        }
    });

    $(document).on('click', '.btn-delete-ticket', function() {
        var ticketId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this ticket?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('tickets.delete') }}",
                    type: "DELETE",
                    data: {
                        id: ticketId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            const response = xhr.responseJSON;
                            toastr.error(response?.message || 'You do not have permission.');
                        } else if (xhr.status === 401) {
                            toastr.error('Please login to continue.');
                            window.location.href = "{{ route('admin.login') }}";
                        } else if (xhr.status === 404) {
                            toastr.error('Ticket not found.');
                        } else if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                toastr.error(value[0]);
                            });
                        } else {
                            toastr.error('An error occurred while deleting ticket.');
                        }
                    }
                });
            }
        });
    });
});
function filter() {
    // Update DataTable with current filter values
    table.ajax.reload();
    
    // Show active filters
    updateActiveFilters();
    
    // Keep filter panel open if there are active filters
    if ($('.active-filter').children().length > 0) {
        $('#collapseFilter').show();
    }
}

// Reset all filters
function resetFilter() {
    // Reset form
    $('#my-filter').trigger('reset');
    
    // Reset select2 fields
    $('.select2').val('').trigger('change');
    $('.select2-no-search').val('').trigger('change');
    
    // Clear text inputs
    $('#filter_search, #filter_subject, #filter_assignee, #filter_customer').val('');
    $('#filter_date_from, #filter_date_to').val('');
    
    // Reload table without filters
    table.ajax.reload();
    
    // Clear active filters display
    $('.active-filter').empty();
    
    // Hide filter panel
    $('#collapseFilter').hide();
}

// Update active filters display
function updateActiveFilters() {
    const activeFilterContainer = $('.active-filter');
    activeFilterContainer.empty();
    
    // Helper function to add active filter badge
    function addActiveFilter(label, value, fieldId) {
        if (value) {
            const badge = `
                <span class="badge badge-primary mr-2 mb-2 active-filter-badge">
                    ${label}: ${value}
                    <i class="las la-times ml-1" onclick="removeFilter('${fieldId}')"></i>
                </span>
            `;
            activeFilterContainer.append(badge);
        }
    }
    
    // Check each filter and add badge if active
    addActiveFilter('Search', $('#filter_search').val(), 'filter_search');
    addActiveFilter('Subject', $('#filter_subject').val(), 'filter_subject');
    addActiveFilter('Priority', $('#filter_priority option:selected').text(), 'filter_priority');
    addActiveFilter('Status', $('#filter_status option:selected').text(), 'filter_status');
    addActiveFilter('Issue Type', $('#filter_issue_type option:selected').text(), 'filter_issue_type');
    addActiveFilter('Queue', $('#filter_queue option:selected').text(), 'filter_queue');
    addActiveFilter('Assignee', $('#filter_assignee').val(), 'filter_assignee');
    addActiveFilter('Customer', $('#filter_customer').val(), 'filter_customer');
    addActiveFilter('Customer Role', $('#filter_customer_role option:selected').text(), 'filter_customer_role');
    addActiveFilter('Active Status', $('#filter_active option:selected').text(), 'filter_active');
    addActiveFilter('Ticket Type', $('#filter_ticket_type option:selected').text(), 'filter_ticket_type');
    
    // Date range
    const dateFrom = $('#filter_date_from').val();
    const dateTo = $('#filter_date_to').val();
    if (dateFrom || dateTo) {
        const dateRange = `${dateFrom || 'Any'} to ${dateTo || 'Any'}`;
        const badge = `
            <span class="badge badge-primary mr-2 mb-2 active-filter-badge">
                Date Range: ${dateRange}
                <i class="las la-times ml-1" onclick="removeDateFilter()"></i>
            </span>
        `;
        activeFilterContainer.append(badge);
    }
}

// Remove specific filter
function removeFilter(fieldId) {
    $('#' + fieldId).val('').trigger('change');
    filter();
}

// Remove date filter
function removeDateFilter() {
    $('#filter_date_from, #filter_date_to').val('');
    filter();
}

// Enter key support for search
$('#filter_search').on('keypress', function(e) {
    if (e.which === 13) {
        filter();
        e.preventDefault();
    }
});
</script>
@endpush