Для реализации фильтрации данных в Laravel с использованием асинхронного поиска (например, AJAX) мы можем использовать несколько подходов. Ниже представлен пример, как можно организовать этот процесс с учетом вашего описания.
### Шаг 1: Создание маршрутов
Сначала создадим маршруты для получения фильтруемых данных. Мы получим категорию, типы волос и услуги на основе выбранных значений.
```php
use App\Http\Controllers\FilterController;
Route::get('/categories/{gender}', [FilterController::class, 'getCategories']);
Route::get('/length-types/{category}', [FilterController::class, 'getLengthTypes']);
Route::get('/services', [FilterController::class, 'getServices']);
```
### Шаг 2: Создание контроллера
Создадим контроллер `FilterController` с необходимыми методами для фильтрации данных:
```php
namespace App\Http\Controllers;
use App\Models\Category;
use App\Models\LengthType;
use App\Models\Service;
use Illuminate\Http\Request;
class FilterController extends Controller
{
public function getCategories($gender)
{
// Получаем категории по полу
$categories = Category::where('gender', $gender)->get();
return response()->json($categories);
}
public function getLengthTypes($category)
{
// Получаем типы длины по категории
$lengthTypes = LengthType::where('category_id', $category)->get();
return response()->json($lengthTypes);
}
public function getServices(Request $request)
{
// Получаем услуги на основании выбранных значений
$services = Service::where('salon_id', $request->salon_id)
->where('gender', $request->gender)
->where('category_id', $request->category_id)
->where('length_type_id', $request->length_type_id)
->distinct()
->get(['name']);
return response()->json($services);
}
}
```
### Шаг 3: Создание AJAX-запросов
Теперь, используя JavaScript, создадим AJAX-запросы для получения данных при изменении выбора:
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#genderSelect').change(function() {
const gender = $(this).val();
$.get('/categories/' + gender, function(data) {
$('#categorySelect').empty();
$.each(data, function(index, category) {
$('#categorySelect').append('<option value="' + category.id + '">' + category.name + '</option>');
});
});
});
$('#categorySelect').change(function() {
const categoryId = $(this).val();
$.get('/length-types/' + categoryId, function(data) {
$('#lengthTypeSelect').empty();
$.each(data, function(index, lengthType) {
$('#lengthTypeSelect').append('<option value="' + lengthType.id + '">' + lengthType.name + '</option>');
});
});
});
$('#lengthTypeSelect').change(function() {
const salonId = $('#salonSelect').val(); // Получите ID салона
const categoryId = $('#categorySelect').val();
const lengthTypeId = $(this).val();
const gender = $('#genderSelect').val();
$.get('/services', { salon_id: salonId, gender: gender, category_id: categoryId, length_type_id: lengthTypeId }, function(data) {
$('#serviceSelect').empty();
$.each(data, function(index, service) {
$('#serviceSelect').append('<option value="' + service.id + '">' + service.name + '</option>');
});
});
});
});
</script>
```
### Шаг 4: Создание форм и представлений
В вашем HTML нужно создать выпадающие списки для выбора пола, категории, типа волос и выбранной услуги:
```html
<select id="genderSelect">
<option value="female">Женский</option>
<option value="male">Мужской</option>
</select>
<select id="categorySelect"></select>
<select id="lengthTypeSelect"></select>
<select id="serviceSelect"></select>
```
### Заключение
Теперь, когда вы выберете пол, категории, типы волос и услуги, данные будут фильтроваться и отображаться соответственно. Не забудьте проверить, что у вас есть соответствующие отношения в моделях и заполнять таблицы необходимыми данными для фильтрации.