@extends('layouts.app')

@section('title', 'پرونده‌ها')

@section('content')
<div class="flex justify-between items-center mb-4">
    <h1 class="text-xl font-bold">فهرست پرونده‌ها</h1>
    <a href="{{ route('cases.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded text-sm">ایجاد پرونده جدید</a>
</div>

<form method="GET" class="mb-4 flex flex-wrap gap-2">
    <input type="text" name="q" value="{{ request('q') }}" placeholder="جستجو..." class="border rounded px-3 py-2 text-sm flex-1 min-w-[180px]">
    <select name="status" class="border rounded px-3 py-2 text-sm">
        <option value="">همه وضعیت‌ها</option>
        @foreach(\App\Models\CaseModel::STATUSES as $key => $label)
            <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
        @endforeach
    </select>
    <button class="bg-gray-700 text-white px-4 py-2 rounded text-sm">فیلتر</button>
</form>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b">
            <tr>
                <th class="text-right p-3">شماره</th>
                <th class="text-right p-3">عنوان</th>
                <th class="text-right p-3">مشتری</th>
                <th class="text-right p-3">کارشناس</th>
                <th class="text-right p-3">وضعیت</th>
                <th class="text-right p-3">تاریخ</th>
                <th class="text-right p-3">عملیات</th>
            </tr>
        </thead>
        <tbody>
            @forelse($cases as $case)
            <tr class="border-b hover:bg-gray-50">
                <td class="p-3">
                    <a href="{{ route('cases.show', $case) }}" class="text-blue-600 hover:underline">{{ $case->case_number }}</a>
                </td>
                <td class="p-3">{{ $case->title }}</td>
                <td class="p-3">{{ $case->customer?->name ?? '—' }}</td>
                <td class="p-3">{{ $case->expert?->name ?? '—' }}</td>
                <td class="p-3">
                    <span class="px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">{{ $case->status_label }}</span>
                </td>
                <td class="p-3">{{ $case->created_at?->format('Y/m/d') }}</td>
                <td class="p-3">
                    <a href="{{ route('cases.edit', $case) }}" class="text-slate-600 hover:underline text-xs">ویرایش</a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="p-6 text-center text-gray-500">پرونده‌ای یافت نشد.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

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