nim_style 9 #13
|
|
@ -26,22 +26,27 @@ class Main extends Component
|
||||||
$ended_at = Request::input('ended_at') ?? null;
|
$ended_at = Request::input('ended_at') ?? null;
|
||||||
$bodywork_filters = Request::input('bodywork_filters') ?? null;
|
$bodywork_filters = Request::input('bodywork_filters') ?? null;
|
||||||
|
|
||||||
// $request = new \Illuminate\Http\Request([
|
$request = new \Illuminate\Http\Request([
|
||||||
// 'started_at' => Carbon::now()->toDateString(),
|
'started_at' => Carbon::now()->toDateString(),
|
||||||
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
|
'ended_at' => Carbon::now()->addDays(3)->toDateString(),
|
||||||
// ]);
|
]);
|
||||||
//
|
|
||||||
// $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
|
$response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
|
||||||
// $this->params['cars'] = collect($response->getData(true));
|
$this->params['cars'] = collect($response->getData(true))->filter(function ($item) {
|
||||||
|
return !empty($item['tariffs']);
|
||||||
|
})->values();
|
||||||
|
|
||||||
// dd($class_filters, $started_at, $ended_at, $bodywork_filters);
|
// dd($class_filters, $started_at, $ended_at, $bodywork_filters);
|
||||||
|
|
||||||
$response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
|
// $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
|
||||||
'started_at' => $started_at ?? Carbon::now()->toDateString(),
|
// 'started_at' => $started_at ?? Carbon::now()->toDateString(),
|
||||||
'ended_at' => $ended_at ?? Carbon::now()->addDays(3)->toDateString(),
|
// 'ended_at' => $ended_at ?? Carbon::now()->addDays(3)->toDateString(),
|
||||||
'class' => $class_filters ?? null,
|
// 'class' => $class_filters ?? null,
|
||||||
'bodywork' => $bodywork_filters ?? null,
|
// 'bodywork' => $bodywork_filters ?? null,
|
||||||
]);
|
// ]);
|
||||||
$this->params['cars'] = collect($response->json());
|
//
|
||||||
|
// $this->params['cars'] = collect($response->json())->filter(function ($item) {
|
||||||
|
// return !empty($item['tariffs']);
|
||||||
|
// })->values();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -127,9 +127,28 @@
|
||||||
<div class="car-card-footer">
|
<div class="car-card-footer">
|
||||||
<div class="cost">
|
<div class="cost">
|
||||||
<small>Базовая ставка</small>
|
<small>Базовая ставка</small>
|
||||||
<p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
|
@php
|
||||||
|
$tariffWithMin1 = collect($car['tariffs'])->firstWhere('min', 1);
|
||||||
|
@endphp
|
||||||
|
<p class="m-0">
|
||||||
|
@if($tariffWithMin1)
|
||||||
|
{{ $tariffWithMin1['price'] }} ₸
|
||||||
|
@endif
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="btn btn-primary">Арендовать</a>
|
<a href="#" class="btn btn-primary open-rent-modal"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#rentModal"
|
||||||
|
data-photo="{{ $car['photo'] ?? asset('img/default.png') }}"
|
||||||
|
data-brand="{{ $car['brand'] }}"
|
||||||
|
data-mark="{{ $car['mark'] }}"
|
||||||
|
data-year="{{ $car['year'] }}"
|
||||||
|
data-fuel="{{ $car['fuel_type'] }}"
|
||||||
|
data-people="{{ $car['people'] }}"
|
||||||
|
data-id="{{ $car['id'] ?? '' }}">
|
||||||
|
@lang('Арендовать')
|
||||||
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -140,6 +159,136 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="rentModal" tabindex="-1" aria-labelledby="rentModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg" style="min-width: 75vw">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="row justify-content-center align-items-start">
|
||||||
|
<form method="post" class="col-12 col-md-7">
|
||||||
|
<input hidden="" name="mark_id" id="mark_id" value="">
|
||||||
|
<input hidden="" name="color" id="color" value="">
|
||||||
|
<div class="car-card d-flex flex-grow-1 flex-row mb-4">
|
||||||
|
<img id="modalCarImage" class="img-fluid" src="" alt="Car Image" style="width: 50%; margin-right: 2rem;">
|
||||||
|
<div>
|
||||||
|
<div class="title" id="modalCarTitle"></div>
|
||||||
|
<div class="subtitle">@lang('или аналогичный')</div>
|
||||||
|
<div class="title-small mt-4 mb-2">@lang('Особенности автомобиля')</div>
|
||||||
|
<div class="card-car-chars">
|
||||||
|
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p> @lang('Кондиционер')</p></div>
|
||||||
|
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p id="modalFuel"> </p></div>
|
||||||
|
<div class="add-li"><i class="material-symbols-outlined">groups</i><p id="modalPeople"> </p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card m-0 mb-4" style="overflow: visible;">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="row justify-content-center align-items-end">
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<label for="days" class="form-label">Срок аренды, дней <b>*</b></label>
|
||||||
|
<input type="number" name="days" class="form-control" id="days" value="7" required="">
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<div class="form-text">
|
||||||
|
Чем больше срок аренды, тем ниже базовая ставка.
|
||||||
|
<div class="popup-custom">
|
||||||
|
<span>Условия скидок <i class="material-symbols-outlined">help</i></span>
|
||||||
|
<div class="popup-block">
|
||||||
|
<p>@lang('Базовая суточная ставка на аренду данного автомобиля уменьшается в зависимости от срока аренды')</p>
|
||||||
|
<ul>
|
||||||
|
<li><b>16-30 дня:</b> 13000 ₸</li>
|
||||||
|
<li><b>3-5 дня:</b> 16000 ₸</li>
|
||||||
|
<li><b>1-2 дня:</b> 18000 ₸</li>
|
||||||
|
<li><b>6-15 дня:</b> 14500 ₸</li>
|
||||||
|
<li><b>30+ дня:</b> 7800 ₸</li>
|
||||||
|
</ul>
|
||||||
|
<p>@lang('Расчет итоговой суммы к оплате рассчитывается (кол-во дней * базовую ставку)')</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card m-0 mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Место и время получения <b>*</b></label>
|
||||||
|
<input placeholder="Введите адрес получения" type="text" class="form-control" name="pick-up-address" id="pick-up-address" required="">
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col-6">
|
||||||
|
<input type="date" class="form-control" id="pick-up-date" name="pick-up-date" required="" min="2025-05-02">
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<input type="time" class="form-control" name="pick-up-time" id="pick-up-time" value="09:00" required="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Место и время возврата <b>*</b></label>
|
||||||
|
<input placeholder="Введите адрес возврата" type="text" class="form-control" name="return-address" id="return-address" required="">
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col-6">
|
||||||
|
<input type="date" class="form-control" id="return-date" name="return-date" disabled="" required="">
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<input type="time" class="form-control" id="return-time" name="return-time" value="09:00" required="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4 lst-btn">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg">Забронировать сейчас</button>
|
||||||
|
<p class="add-text2">Бесплатная отмена в любое время</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="col-12 col-md-4 right-content">
|
||||||
|
<div class="card mb-4 card-type-2 price-info" style="border-radius: 8px;">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="title-small mb-3">Базовая ставка</div>
|
||||||
|
<div class="li-bl">
|
||||||
|
<div class="li-sp">Без скидки</div>
|
||||||
|
<div class="li-sp" id="base-without">32000 ₸</div>
|
||||||
|
</div>
|
||||||
|
<div class="li-bl">
|
||||||
|
<div class="li-sp">Со скидки</div>
|
||||||
|
<div class="li-sp" id="base-with">25 000 ₸</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="title-small mb-3">Общая цена</div>
|
||||||
|
<div class="li-bl">
|
||||||
|
<div class="li-sp">Аренда без скидки</div>
|
||||||
|
<div class="li-sp" id="summ-without">224 000 ₸</div>
|
||||||
|
</div>
|
||||||
|
<div class="li-bl">
|
||||||
|
<div class="li-sp">Аренда со скидки</div>
|
||||||
|
<div class="li-sp" id="sunn-with">175 000 ₸</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="li-bl">
|
||||||
|
<div class="title">Итого</div>
|
||||||
|
<div class="title" id="total">175 000 ₸</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-type-2" style="border-radius: 8px;">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="muted-card-text">
|
||||||
|
Общая стоимость, включая установленные законом налоги. <br><br>
|
||||||
|
Обратите внимание, что на изображении и в технических характеристиках автомобиля представлена только примерная иллюстрация категории автомобиля (за исключением ошибок). Бронирование производится только для категории транспортного средства, но не для конкретного транспортного средства. <br><br>
|
||||||
|
Вся информация о размерах, весе и т.д. основана на наименьшей доступной категории модели. </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function debounce(func, wait) {
|
function debounce(func, wait) {
|
||||||
let timeout;
|
let timeout;
|
||||||
|
|
@ -185,6 +334,57 @@
|
||||||
|
|
||||||
localStorage.setItem('filterOpened', isExpanded);
|
localStorage.setItem('filterOpened', isExpanded);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const pickUpDateInput = document.getElementById('pick-up-date');
|
||||||
|
const returnDateInput = document.getElementById('return-date');
|
||||||
|
const daysInput = document.getElementById('days');
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const yyyy = today.getFullYear();
|
||||||
|
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
||||||
|
const dd = String(today.getDate()).padStart(2, '0');
|
||||||
|
const todayStr = `${yyyy}-${mm}-${dd}`;
|
||||||
|
|
||||||
|
pickUpDateInput.value = todayStr;
|
||||||
|
pickUpDateInput.setAttribute('min', todayStr);
|
||||||
|
|
||||||
|
function updateReturnDate() {
|
||||||
|
const pickUpDate = new Date(pickUpDateInput.value);
|
||||||
|
const rentalDays = parseInt(daysInput.value, 10);
|
||||||
|
|
||||||
|
if (!isNaN(rentalDays)) {
|
||||||
|
pickUpDate.setDate(pickUpDate.getDate() + rentalDays);
|
||||||
|
const returnYyyy = pickUpDate.getFullYear();
|
||||||
|
const returnMm = String(pickUpDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const returnDd = String(pickUpDate.getDate()).padStart(2, '0');
|
||||||
|
returnDateInput.value = `${returnYyyy}-${returnMm}-${returnDd}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateReturnDate();
|
||||||
|
|
||||||
|
daysInput.addEventListener('input', updateReturnDate);
|
||||||
|
pickUpDateInput.addEventListener('change', updateReturnDate);
|
||||||
|
|
||||||
|
const modal = document.getElementById('rentModal');
|
||||||
|
|
||||||
|
document.querySelectorAll('.open-rent-modal').forEach(button => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const photo = this.getAttribute('data-photo');
|
||||||
|
const brand = this.getAttribute('data-brand');
|
||||||
|
const mark = this.getAttribute('data-mark');
|
||||||
|
const year = this.getAttribute('data-year');
|
||||||
|
const fuel = this.getAttribute('data-fuel');
|
||||||
|
const people = this.getAttribute('data-people');
|
||||||
|
const id = this.getAttribute('data-id');
|
||||||
|
|
||||||
|
document.getElementById('modalCarImage').src = photo;
|
||||||
|
document.getElementById('modalCarTitle').innerText = `${brand} ${mark} - ${year}`;
|
||||||
|
document.getElementById('modalFuel').innerHTML = ` ${fuel}`;
|
||||||
|
document.getElementById('modalPeople').innerHTML = ` ${people} мест`;
|
||||||
|
document.getElementById('mark_id').value = id;
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('input[name="class_filters[]"]').forEach(checkbox => {
|
document.querySelectorAll('input[name="class_filters[]"]').forEach(checkbox => {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,7 @@
|
||||||
body {
|
body {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px!important;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ iframe {
|
||||||
.row.custom-row {
|
.row.custom-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start; // Можно center, если хочешь выравнивать
|
justify-content: flex-start;
|
||||||
|
|
||||||
.car-card {
|
.car-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -375,13 +375,13 @@ iframe {
|
||||||
td {
|
td {
|
||||||
// Обычные стили для ячеек
|
// Обычные стили для ячеек
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
td:last-child,
|
td:last-child,
|
||||||
td:first-child
|
td:first-child
|
||||||
{
|
{
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -390,7 +390,125 @@ iframe {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#rentModal {
|
||||||
|
.price-info {
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-bl {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.li-sp {
|
||||||
|
color: #7a7a7a;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card-type-2 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-text {
|
||||||
|
position: relative;
|
||||||
|
font-size: .875em;
|
||||||
|
color: $gray-color;
|
||||||
|
|
||||||
|
.popup-custom {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $primary-color;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-block {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
background-color: #d4efdf;
|
||||||
|
width: 300px;
|
||||||
|
padding: 20px;
|
||||||
|
z-index: 2;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
|
||||||
|
transition: .3s all ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-custom:hover .popup-block {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted-card-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7a7a7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lst-btn .add-text2 {
|
||||||
|
color: green;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-card {
|
||||||
|
width: 100%;
|
||||||
|
transition: .3s all ease;
|
||||||
|
padding: 25px 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #7e7e7e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-li {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
color: #a8a8a8;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: .3s all ease;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1e1e1e;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-small {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (min-width: 768px) and (max-width: 1024px) {
|
@media (min-width: 768px) and (max-width: 1024px) {
|
||||||
.profile-info {
|
.profile-info {
|
||||||
.card-body {
|
.card-body {
|
||||||
|
|
@ -407,4 +525,3 @@ iframe {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue