@extends('layouts.app')
@section('title', 'قائمة التذاكر')
@section('sidebar')
    @include('staff._sidebar')
@endsection

@section('content')
<div class="flex items-center justify-between mb-4">
    <h1 class="text-xl font-bold">قائمة التذاكر</h1>
    <form method="GET" class="flex flex-wrap gap-2 text-sm">
        <input type="text" name="q" value="{{ request('q') }}" placeholder="بحث برقم التذكرة أو الموضوع..."
               class="border border-gray-300 rounded-lg px-3 py-1.5 w-56">

        <select name="department_id" class="border border-gray-300 rounded-lg px-3 py-1.5">
            <option value="">كل الأقسام</option>
            @foreach($departments as $dept)
                <option value="{{ $dept->id }}" @selected(request('department_id') == $dept->id)>{{ $dept->name_ar }}</option>
            @endforeach
        </select>

        <select name="status" class="border border-gray-300 rounded-lg px-3 py-1.5">
            <option value="">كل الحالات</option>
            @foreach(['open' => 'مفتوحة', 'pending' => 'بانتظار الرد', 'answered' => 'تم الرد', 'reopened' => 'أُعيد فتحها', 'closed' => 'مغلقة'] as $val => $label)
                <option value="{{ $val }}" @selected(request('status') == $val)>{{ $label }}</option>
            @endforeach
        </select>

        <select name="priority" class="border border-gray-300 rounded-lg px-3 py-1.5">
            <option value="">كل الأولويات</option>
            @foreach(['low' => 'منخفضة', 'medium' => 'متوسطة', 'high' => 'عالية', 'urgent' => 'عاجلة'] as $val => $label)
                <option value="{{ $val }}" @selected(request('priority') == $val)>{{ $label }}</option>
            @endforeach
        </select>

        <button class="bg-gray-800 text-white rounded-lg px-4 py-1.5">فلترة</button>
    </form>
</div>

<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <table class="w-full text-sm text-right">
        <thead class="bg-gray-50 text-gray-500 text-xs">
            <tr>
                <th class="px-4 py-3">#</th>
                <th class="px-4 py-3">الموضوع</th>
                <th class="px-4 py-3">العميل</th>
                <th class="px-4 py-3">القسم</th>
                <th class="px-4 py-3">الأولوية</th>
                <th class="px-4 py-3">الحالة</th>
                <th class="px-4 py-3">المسؤول</th>
                <th class="px-4 py-3">آخر تحديث</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($tickets as $ticket)
            <tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='{{ route('staff.tickets.show', $ticket) }}'">
                <td class="px-4 py-3 text-gray-500">{{ $ticket->ticket_number }}</td>
                <td class="px-4 py-3 font-medium">{{ $ticket->subject }}</td>
                <td class="px-4 py-3">{{ $ticket->user->name }}</td>
                <td class="px-4 py-3">{{ $ticket->department?->name_ar ?? '-' }}</td>
                <td class="px-4 py-3">
                    <span class="px-2 py-0.5 rounded text-xs
                        {{ $ticket->priority === 'urgent' ? 'bg-red-100 text-red-700' : ($ticket->priority === 'high' ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-600') }}">
                        {{ ['low'=>'منخفضة','medium'=>'متوسطة','high'=>'عالية','urgent'=>'عاجلة'][$ticket->priority] }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <span class="px-2 py-0.5 rounded text-xs status-{{ $ticket->status }}">
                        {{ ['open'=>'مفتوحة','pending'=>'بانتظار الرد','answered'=>'تم الرد','reopened'=>'أُعيد فتحها','closed'=>'مغلقة'][$ticket->status] }}
                    </span>
                </td>
                <td class="px-4 py-3">{{ $ticket->assignee?->name ?? '—' }}</td>
                <td class="px-4 py-3 text-gray-400">{{ $ticket->updated_at->diffForHumans() }}</td>
            </tr>
            @empty
            <tr><td colspan="8" class="px-4 py-8 text-center text-gray-400">لا توجد تذاكر مطابقة.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $tickets->links() }}</div>
@endsection