@extends('layouts.adminlte')

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

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Ticket Management</a></li>
<li class="breadcrumb-item active">All Tickets</li>
@endsection

@section('content')
<!-- Action Buttons -->
<div class="row mb-3">
    <div class="col-md-12">
        <div class="btn-group" role="group">
            @if(auth()->user()->hasPermission('create-tickets'))
            <a href="{{ route('tickets.create') }}" class="btn btn-success">
                <i class="fas fa-plus"></i> Create
            </a>
            @endif
            <button type="button" class="btn btn-danger" onclick="bulkDelete()">
                <i class="fas fa-trash"></i> Delete
            </button>
            <button type="button" class="btn btn-info" onclick="exportCSV()">
                <i class="fas fa-download"></i> Export CSV
            </button>
            <button type="button" class="btn btn-warning" onclick="importCSV()">
                <i class="fas fa-upload"></i> Import
            </button>
        </div>
    </div>
</div>

<!-- Search and Filters -->
<div class="row mb-3">
    <div class="col-md-8">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search tickets, people, #ID..." id="searchInput">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" onclick="searchTickets()">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                <i class="fas fa-filter"></i> Filters
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" onclick="filterByCategory('technical')">Technical</a>
                <a class="dropdown-item" href="#" onclick="filterByCategory('billing')">Billing</a>
                <a class="dropdown-item" href="#" onclick="filterByCategory('general')">General</a>
                <a class="dropdown-item" href="#" onclick="filterByCategory('feature_request')">Feature Request</a>
            </div>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                <i class="fas fa-bookmark"></i> Saved views
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">My Tickets</a>
                <a class="dropdown-item" href="#">Assigned to Me</a>
                <a class="dropdown-item" href="#">High Priority</a>
            </div>
        </div>
    </div>
</div>

<!-- Status Tabs -->
<div class="row mb-3">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="statusTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab">All</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="open-tab" data-toggle="tab" href="#open" role="tab">Open</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="in-progress-tab" data-toggle="tab" href="#in-progress" role="tab">In Progress</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="resolved-tab" data-toggle="tab" href="#resolved" role="tab">Resolved</a>
            </li>
        </ul>
    </div>
</div>

<!-- Tickets Table -->
<div class="card">
    <div class="card-body p-0">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th style="width: 10px">
                        <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                    </th>
                    <th style="width: 10px">#</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Priority</th>
                    <th>Assignee</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th style="width: 100px">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tickets as $ticket)
                <tr>
                    <td>
                        <input type="checkbox" class="ticket-checkbox" value="{{ $ticket->id }}">
                    </td>
                    <td>{{ $ticket->id }}</td>
                    <td>
                        <a href="{{ route('tickets.show', $ticket) }}" class="text-dark">
                            {{ Str::limit($ticket->title, 40) }}
                        </a>
                    </td>
                    <td>
                        <span class="badge badge-info">{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</span>
                    </td>
                    <td>
                        @switch($ticket->priority)
                            @case('urgent')
                                <span class="badge badge-danger">High</span>
                                @break
                            @case('high')
                                <span class="badge badge-warning">High</span>
                                @break
                            @case('medium')
                                <span class="badge badge-primary">Medium</span>
                                @break
                            @case('low')
                                <span class="badge badge-success">Low</span>
                                @break
                        @endswitch
                    </td>
                    <td>
                        @if($ticket->assignedTo)
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mr-2" style="width: 30px; height: 30px;">
                                    {{ substr($ticket->assignedTo->name, 0, 1) }}
                                </div>
                                {{ $ticket->assignedTo->name }}
                            </div>
                        @else
                            <span class="text-muted">Unassigned</span>
                        @endif
                    </td>
                    <td>
                        @switch($ticket->status)
                            @case('open')
                                <span class="badge badge-warning">Open</span>
                                @break
                            @case('in_progress')
                                <span class="badge badge-primary">IN PROGRESS</span>
                                @break
                            @case('resolved')
                                <span class="badge badge-success">RESOLVED</span>
                                @break
                            @case('closed')
                                <span class="badge badge-secondary">Closed</span>
                                @break
                        @endswitch
                    </td>
                    <td>{{ $ticket->created_at->format('Y-m-d') }}</td>
                    <td>
                        <div class="btn-group" role="group">
                            <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-sm btn-outline-primary" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            @if(auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id())
                            <a href="{{ route('tickets.edit', $ticket) }}" class="btn btn-sm btn-outline-secondary" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            @endif
                            @if(auth()->user()->hasPermission('delete-tickets') || $ticket->user_id === auth()->id())
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteTicket({{ $ticket->id }})" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center py-4">
                        <i class="fas fa-ticket-alt fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No tickets found</p>
                        @if(auth()->user()->hasPermission('create-tickets'))
                        <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Create Your First Ticket
                        </a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($tickets->hasPages())
    <div class="card-footer">
        <div class="row">
            <div class="col-sm-12 col-md-5">
                <div class="dataTables_info">
                    Showing {{ $tickets->firstItem() }} to {{ $tickets->lastItem() }} of {{ $tickets->total() }} entries
                </div>
            </div>
            <div class="col-sm-12 col-md-7">
                <div class="dataTables_paginate paging_simple_numbers">
                    {{ $tickets->links() }}
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>
@endsection

@push('styles')
<style>
.avatar-sm {
    font-size: 12px;
    font-weight: bold;
}
</style>
@endpush

@push('scripts')
<script>
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.ticket-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
}

function bulkDelete() {
    const checkedBoxes = document.querySelectorAll('.ticket-checkbox:checked');
    if (checkedBoxes.length === 0) {
        alert('Please select tickets to delete');
        return;
    }
    
    if (confirm(`Are you sure you want to delete ${checkedBoxes.length} ticket(s)?`)) {
        // Implement bulk delete logic
        console.log('Bulk delete:', Array.from(checkedBoxes).map(cb => cb.value));
    }
}

function deleteTicket(ticketId) {
    if (confirm('Are you sure you want to delete this ticket?')) {
        const form = document.getElementById('deleteForm');
        form.action = `/tickets/${ticketId}`;
        form.submit();
    }
}

function exportCSV() {
    // Implement CSV export
    console.log('Export CSV');
}

function importCSV() {
    // Implement CSV import
    console.log('Import CSV');
}

function searchTickets() {
    const searchTerm = document.getElementById('searchInput').value;
    // Implement search logic
    console.log('Search:', searchTerm);
}

function filterByCategory(category) {
    // Implement category filter
    console.log('Filter by category:', category);
}
</script>
@endpush