@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">إدارة الموديلات</h2>
    <a href="{{ route('admin.models.create') }}" style="background: #d4af37; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: 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.models.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.models.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 text-center">عدد الفئات</th>
                            <th class="px-6 py-4 text-left">العمليات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @foreach($models as $model)
                        <tr class="hover:bg-white/5 transition-colors text-white">
                            <td class="px-6 py-4 font-bold">{{ $model->name }}</td>
                            <td class="px-6 py-4">{{ $model->brand->name }}</td>
                            <td class="px-6 py-4 text-center">{{ $model->trims_count }}</td>
                            <td class="px-6 py-4 text-left space-x-2 space-x-reverse">
                                <a href="{{ route('admin.models.edit', $model->id) }}" class="text-blue-400 hover:text-blue-300 text-xs">تعديل</a>
                                <form action="{{ route('admin.models.destroy', $model->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">{{ $models->links() }}</div>
            </div>
        </div>
    </div>

@endsection