@extends('admin.layout')

@section('title', 'إدارة فئات المركبات')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">إدارة فئات المركبات</h3>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                        <i class="fas fa-plus"></i> إضافة فئة جديدة
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>الاسم (عربي)</th>
                                    <th>الاسم (إنجليزي)</th>
                                    <th>الوصف</th>
                                    <th>الترتيب</th>
                                    <th>الحالة</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($categories as $category)
                                <tr>
                                    <td>{{ $category->id }}</td>
                                    <td>{{ $category->name_ar }}</td>
                                    <td>{{ $category->name_en }}</td>
                                    <td>{{ Str::limit($category->description_ar, 50) }}</td>
                                    <td>{{ $category->sort_order }}</td>
                                    <td>
                                        <span class="badge {{ $category->is_active ? 'bg-success' : 'bg-danger' }}">
                                            {{ $category->is_active ? 'نشط' : 'غير نشط' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" 
                                                    onclick="editCategory({{ $category->id }})"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#editCategoryModal">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteCategory({{ $category->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <i class="fas fa-car fa-3x text-muted mb-3"></i>
                                        <p class="text-muted">لا توجد فئات مسجلة</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">إضافة فئة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addCategoryForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الاسم (عربي)</label>
                            <input type="text" class="form-control" name="name_ar" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الاسم (إنجليزي)</label>
                            <input type="text" class="form-control" name="name_en" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الوصف (عربي)</label>
                            <textarea class="form-control" name="description_ar" rows="3"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الوصف (إنجليزي)</label>
                            <textarea class="form-control" name="description_en" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">ترتيب العرض</label>
                            <input type="number" class="form-control" name="sort_order" value="1" min="1">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الحد الأدنى للسعر</label>
                            <input type="number" step="0.01" class="form-control" name="min_price">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                            <label class="form-check-label">نشط</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function editCategory(id) {
    // TODO: Implement edit functionality
    console.log('Edit category:', id);
}

function deleteCategory(id) {
    if (confirm('هل أنت متأكد من حذف هذه الفئة؟')) {
        // TODO: Implement delete functionality
        console.log('Delete category:', id);
    }
}

document.getElementById('addCategoryForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // TODO: Implement add functionality
    console.log('Add category form submitted');
});
</script>
@endsection