@extends('layouts.app')

@section('content')

        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">إدارة الفئات (Trims)</h2>
            <a href="{{ route('admin.trims.create') }}" class="bg-[#d4af37] text-black px-4 py-2 rounded-lg text-sm font-bold">إضافة فئة</a>
        </div>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="mb-6">
                <form action="{{ route('admin.trims.index') }}" method="GET" class="flex gap-4">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث عن فئة أو موديل أو ماركة..." class="bg-[#111] border-gray-800 rounded-lg px-4 py-2 text-white focus:border-[#d4af37] outline-none flex-grow">
                    <button type="submit" class="bg-gray-800 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition-colors">بحث</button>
                    @if(request('search'))
                        <a href="{{ route('admin.trims.index') }}" class="bg-red-500/10 text-red-500 px-6 py-2 rounded-lg hover:bg-red-500/20 transition-colors text-sm flex items-center">إعادة تعيين</a>
                    @endif
                </form>
            </div>

            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden">
                <table class="w-full text-right">
                    <thead class="bg-black/50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-6 py-4">الفئة</th>
                            <th class="px-6 py-4">الموديل</th>
                            <th class="px-6 py-4">الماركة</th>
                            <th class="px-6 py-4 text-left">العمليات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @foreach($trims as $trim)
                        <tr class="hover:bg-white/5 transition-colors text-white">
                            <td class="px-6 py-4 font-bold">{{ $trim->name }}</td>
                            <td class="px-6 py-4">{{ $trim->carModel->name }}</td>
                            <td class="px-6 py-4">{{ $trim->carModel->brand->name }}</td>
                            <td class="px-6 py-4 text-left space-x-2 space-x-reverse">
                                <a href="{{ route('admin.trims.edit', $trim->id) }}" class="text-blue-400 hover:text-blue-300 text-xs">تعديل</a>
                                <form action="{{ route('admin.trims.destroy', $trim->id) }}" method="POST" class="inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-400 hover:text-red-300 text-xs" onclick="return confirm('هل أنت متأكد؟')">حذف</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="p-4">{{ $trims->links() }}</div>
            </div>
        </div>
    </div>
</div>
@endsection