{% extends "base.html" %}
{% block content %}
<div x-data="ticketList()" x-init="init()">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">All Issues</h1>
            <p class="text-gray-500 mt-1" x-text="`${total} total tickets`"></p>
        </div>
        <a href="/tickets/new" class="px-4 py-2 bg-denya-600 text-white rounded-lg hover:bg-denya-700 transition text-sm font-medium flex items-center space-x-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            <span>New Issue</span>
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">Search</label>
                <input type="text" x-model="filters.search" @input.debounce="loadTickets()" placeholder="Ticket # or description..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 focus:border-transparent outline-none">
            </div>
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">Status</label>
                <select x-model="filters.status" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
                    <option value="">All Statuses</option>
                    <option value="New">New</option>
                    <option value="Logged">Logged</option>
                    <option value="Triage">Triage</option>
                    <option value="Assigned">Assigned</option>
                    <option value="Accepted">Accepted</option>
                    <option value="Travelling">Travelling</option>
                    <option value="On Site">On Site</option>
                    <option value="In Progress">In Progress</option>
                    <option value="Waiting Parts">Waiting Parts</option>
                    <option value="Escalated">Escalated</option>
                    <option value="Completed">Completed</option>
                    <option value="On-Field Verification">On-Field Verification</option>
                    <option value="Wahab Review">Wahab Review</option>
                    <option value="Closed">Closed</option>
                    <option value="Reopened">Reopened</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">Priority</label>
                <select x-model="filters.priority" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
                    <option value="">All Priorities</option>
                    <option value="urgent">🔴 Urgent</option>
                    <option value="high">🟠 High</option>
                    <option value="medium">🟡 Medium</option>
                    <option value="low">🟢 Low</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">Property</label>
                <select x-model="filters.property" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
                    <option value="">All Properties</option>
                    <option value="East">Pavilion East</option>
                    <option value="West">Pavilion West</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">From</label>
                <input type="date" x-model="filters.dateFrom" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
            </div>
            <div>
                <label class="block text-xs text-gray-500 font-medium mb-1">To</label>
                <input type="date" x-model="filters.dateTo" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
            </div>
        </div>
        <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-500">Page <span x-text="page"></span> of <span x-text="totalPages"></span></span>
            </div>
            <div class="flex items-center space-x-2">
                <button @click="page > 1 && (page--, loadTickets())" :disabled="page <= 1" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Prev</button>
                <button @click="page < totalPages && (page++, loadTickets())" :disabled="page >= totalPages" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Next</button>
                <button @click="filters = {search:'',status:'',priority:'',property:'',dateFrom:'',dateTo:''}; page=1; loadTickets()" class="px-3 py-1 text-sm text-gray-500 border rounded hover:bg-gray-50">Clear Filters</button>
            </div>
        </div>
    </div>

    <!-- Tickets Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3 text-left cursor-pointer hover:text-gray-900" @click="sortBy('ticket_number')">
                            Ticket <span x-show="sortField === 'ticket_number'" x-text="sortDir === 'asc' ? '↑' : '↓'"></span>
                        </th>
                        <th class="px-5 py-3 text-left">Status</th>
                        <th class="px-5 py-3 text-left">Priority</th>
                        <th class="px-5 py-3 text-left">Description</th>
                        <th class="px-5 py-3 text-left">Assigned To</th>
                        <th class="px-5 py-3 text-left cursor-pointer hover:text-gray-900" @click="sortBy('created_at')">
                            Created <span x-show="sortField === 'created_at'" x-text="sortDir === 'asc' ? '↑' : '↓'"></span>
                        </th>
                        <th class="px-5 py-3 text-left">SLA</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <template x-for="ticket in tickets" :key="ticket.id">
                        <tr class="hover:bg-gray-50 transition cursor-pointer" :class="ticket.priority === 'urgent' ? 'bg-red-50/50' : ''" @click="window.location.href='/tickets/'+ticket.id">
                            <td class="px-5 py-3 font-medium text-denya-600" x-text="ticket.ticket_number"></td>
                            <td class="px-5 py-3"><span class="px-2 py-1 rounded-full text-xs font-medium" :class="statusClass(ticket.status)" x-text="ticket.status"></span></td>
                            <td class="px-5 py-3"><span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)" x-text="priorityBadge(ticket.priority)"></span></td>
                            <td class="px-5 py-3 text-gray-600 max-w-xs truncate" x-text="ticket.description || ''"></td>
                            <td class="px-5 py-3 text-gray-500 text-xs" x-text="ticket.assigned_technician_name || '—'"></td>
                            <td class="px-5 py-3 text-gray-500 text-xs" x-text="formatDate(ticket.created_at)"></td>
                            <td class="px-5 py-3">
                                <span x-show="ticket.sla_deadline" class="text-xs" :class="new Date(ticket.sla_deadline) < new Date() && !['Closed','Completed'].includes(ticket.status) ? 'text-red-600 font-medium' : 'text-gray-400'">
                                    <span x-text="formatDateShort(ticket.sla_deadline)"></span>
                                </span>
                                <span x-show="!ticket.sla_deadline" class="text-xs text-gray-300">—</span>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="!tickets.length && !loading">
                        <td colspan="7" class="px-5 py-16 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                            No tickets match your filters
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function ticketList() {
        return {
            tickets: [],
            total: 0,
            page: 1,
            pageSize: 50,
            totalPages: 1,
            sortField: 'created_at',
            sortDir: 'desc',
            filters: {
                search: '',
                status: '',
                priority: '',
                property: '',
                dateFrom: '',
                dateTo: ''
            },

            async init() {
                await this.loadTickets();
            },

            async loadTickets() {
                try {
                    let url = `/api/tickets?page=${this.page}&page_size=${this.pageSize}`;
                    if (this.filters.status) url += `&status=${encodeURIComponent(this.filters.status)}`;
                    if (this.filters.priority) url += `&priority=${encodeURIComponent(this.filters.priority)}`;
                    if (this.filters.property) url += `&property=${encodeURIComponent(this.filters.property)}`;
                    if (this.filters.dateFrom) url += `&date_from=${encodeURIComponent(this.filters.dateFrom)}`;
                    if (this.filters.dateTo) url += `&date_to=${encodeURIComponent(this.filters.dateTo)}`;

                    const data = await app().apiGet(url);
                    if (data) {
                        this.tickets = data.items || [];
                        this.total = data.total || 0;
                        this.totalPages = Math.ceil(this.total / this.pageSize) || 1;

                        // Client-side search filter for ticket number or description
                        if (this.filters.search) {
                            const q = this.filters.search.toLowerCase();
                            this.tickets = this.tickets.filter(t =>
                                (t.ticket_number && t.ticket_number.toLowerCase().includes(q)) ||
                                (t.description && t.description.toLowerCase().includes(q))
                            );
                        }

                        // Sort
                        this.applySort();
                    }
                } catch (e) { console.error('Tickets load error', e); }
            },

            sortBy(field) {
                if (this.sortField === field) {
                    this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
                } else {
                    this.sortField = field;
                    this.sortDir = 'desc';
                }
                this.applySort();
            },

            applySort() {
                this.tickets.sort((a, b) => {
                    let valA = a[this.sortField] || '';
                    let valB = b[this.sortField] || '';
                    if (this.sortField === 'created_at') {
                        valA = new Date(valA).getTime();
                        valB = new Date(valB).getTime();
                    }
                    if (typeof valA === 'string') valA = valA.toLowerCase();
                    if (typeof valB === 'string') valB = valB.toLowerCase();
                    if (valA < valB) return this.sortDir === 'asc' ? -1 : 1;
                    if (valA > valB) return this.sortDir === 'asc' ? 1 : -1;
                    return 0;
                });
            }
        }
    }
</script>
{% endblock %}