175 lines
10 KiB
PHP
175 lines
10 KiB
PHP
<div class="container text-center my-3 main-page">
|
||
<div class="main-page-header">
|
||
<p class="top-title">Доступные автомобили</p>
|
||
<p class="title">Выберите лучший автомобиль</p>
|
||
</div>
|
||
<div class="container my-4">
|
||
<div class="row">
|
||
<div class="col-12 col-md-3 card-catalog-left-container">
|
||
<div class="text-end">
|
||
<button class="btn btn-outline" id="toggleFilterBtn">
|
||
@lang('Фильтр')
|
||
</button>
|
||
</div>
|
||
<div class="card card-catalog-left-filter collapsible collapsed" id="filterCard">
|
||
<div class="card-body">
|
||
{{-- Дата начала --}}
|
||
<form method="GET" id="filter">
|
||
<div class="form-group mb-3 pb-4 d-flex flex-column justify-content-around align-content-center">
|
||
<label class="form-label d-block">Даты аренды</label>
|
||
<div class="d-flex flex-row justify-content-around align-content-center">
|
||
<input type="text"
|
||
class="form-control"
|
||
name="started_at"
|
||
id="started_at"
|
||
autocomplete="off"
|
||
inputmode="numeric"
|
||
pattern="\d{2}\.\d{2}\.\d{4}"
|
||
placeholder="дд.мм.гггг"
|
||
value="{{ request('started_at') }}"
|
||
style="max-width: 120px">
|
||
<span class="separator">–</span>
|
||
<input type="text"
|
||
class="form-control"
|
||
name="ended_at"
|
||
id="ended_at"
|
||
autocomplete="off"
|
||
inputmode="numeric"
|
||
pattern="\d{2}\.\d{2}\.\d{4}"
|
||
placeholder="дд.мм.гггг"
|
||
value="{{ request('ended_at') }}"
|
||
style="max-width: 120px">
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Класс авто --}}
|
||
<div class="mb-3 pb-4">
|
||
<label class="form-label d-block">Класс авто</label>
|
||
<div class="btn-group" role="group" aria-label="Класс">
|
||
<input type="checkbox" class="btn-check" name="class_filters[]" value="1" id="class_option1" {{ in_array('1', (array) request('class_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="class_option1">Эконом</label>
|
||
|
||
<input type="checkbox" class="btn-check" name="class_filters[]" value="2" id="class_option2" {{ in_array('2', (array) request('class_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="class_option2">Средний</label>
|
||
|
||
<input type="checkbox" class="btn-check" name="class_filters[]" value="3" id="class_option3" {{ in_array('3', (array) request('class_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="class_option3">Бизнес</label>
|
||
</div>
|
||
</div>
|
||
{{-- Тип кузова --}}
|
||
<div class="mb-3 pb-4">
|
||
<label class="form-label d-block">Тип кузова</label>
|
||
<div class="btn-group" role="group" aria-label="Кузов">
|
||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="1" id="bodywork_option1" {{ in_array('1', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="bodywork_option1">Седан</label>
|
||
|
||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="2" id="bodywork_option2" {{ in_array('2', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="bodywork_option2">Кроссовер</label>
|
||
|
||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="3" id="bodywork_option3" {{ in_array('3', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||
<label class="btn btn-outline-primary" for="bodywork_option3">Внедорожник</label>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Кнопка --}}
|
||
<button type="submit" class="btn btn-success" style="width: 100%; font-size: 14px">
|
||
@lang('Искать')
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-catalog-left mt-4">
|
||
<div class="card-body">
|
||
<p class="title">Все предложения включают:</p>
|
||
<ul>
|
||
<li><i class="material-symbols-outlined">done</i>
|
||
<span> Бесплатное перебронирование и отмена</span></li>
|
||
<li><i class="material-symbols-outlined">done</i>
|
||
<span> Лимит пробега по городу 200 км</span></li>
|
||
<li><i class="material-symbols-outlined">done</i> <span> Страхование гражданской ответственности</span></li>
|
||
<li><i class="material-symbols-outlined">done</i> <span> Эконом класс</span></li>
|
||
<li><i class="material-symbols-outlined">done</i> <span> Депозит</span></li>
|
||
<li><i class="material-symbols-outlined">done</i>
|
||
<span> Межгород по дополнительным тарифам</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-catalog-left2 mt-4">
|
||
<div class="card-body">
|
||
<p class="title">Другие условия:</p>
|
||
<p class="cr-item">Минимальный возраст водителя - 21 год</p>
|
||
<p class="cr-item">Минимальный срок владения водительскими правами - 2 года</p>
|
||
<p class="title m-0">Прочие условия:</p>
|
||
<a href="https://pcar.kz/#faq" target="_blank" class="btn-link">Условия аренды автомобиля</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-9 mb-4 d-flex justify-content-center">
|
||
<div class="row custom-row">
|
||
@php $carsValues = array_values($cars->toArray()); @endphp
|
||
@foreach($carsValues as $car)
|
||
<div class="col-12 col-md-6 mb-4">
|
||
<div class="car-card">
|
||
<img class="img-fluid" src="{{ $car['photo'] ?? asset('img/default.png') }}" alt="Car Image">
|
||
<div class="title">{{ $car['brand'] . ' ' . $car['mark'] . ' - ' . $car['year'] }}</div>
|
||
<div class="card-car-chars">
|
||
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p> Кондиционер</p></div>
|
||
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p> {{ $car['fuel_type'] }}</p></div>
|
||
<div class="add-li"><i class="material-symbols-outlined">groups</i><p> {{ $car['people'] }} мест</p></div>
|
||
</div>
|
||
<div class="car-card-footer">
|
||
<div class="cost">
|
||
<small>Базовая ставка</small>
|
||
<p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
|
||
</div>
|
||
<a href="#" class="btn btn-primary">Арендовать</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function debounce(func, wait) {
|
||
let timeout;
|
||
return function (...args) {
|
||
const context = this;
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(() => func.apply(context, args), wait);
|
||
};
|
||
}
|
||
|
||
const datepickerConfig = {
|
||
buttons: ['today', 'clear'],
|
||
autoClose: true
|
||
};
|
||
|
||
const startedAtPicker = new AirDatepicker('#started_at', datepickerConfig);
|
||
const endedAtPicker = new AirDatepicker('#ended_at', datepickerConfig);
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const toggleBtn = document.getElementById('toggleFilterBtn');
|
||
const filterCard = document.getElementById('filterCard');
|
||
|
||
let isExpanded = false;
|
||
|
||
toggleBtn.addEventListener('click', function () {
|
||
if (!isExpanded) {
|
||
filterCard.style.transition = 'max-height 1.2s ease, opacity 1.2s ease';
|
||
filterCard.classList.add('expanded');
|
||
isExpanded = true;
|
||
} else {
|
||
filterCard.style.transition = 'max-height 0.4s ease, opacity 0.4s ease';
|
||
filterCard.classList.remove('expanded');
|
||
isExpanded = false;
|
||
}
|
||
});
|
||
});
|
||
</script>
|