109 lines
4.7 KiB
PHP
109 lines
4.7 KiB
PHP
<div class="container text-center my-3 main-page">
|
||
<p class="top-title">Доступные автомобили</p>
|
||
<p class="title with-line line-center">Выберите лучший автомобиль</p>
|
||
<p class="subtitle">У нас есть автомобили разных классов. Выберите свой идеальный вариант и забронируйте его.</p>
|
||
<div class="row mx-auto my-auto">
|
||
<div id="recipeCarousel" class="carousel slide w-100" data-bs-ride="carousel">
|
||
<div class="carousel-inner w-100" role="listbox">
|
||
@php $carsValues = array_values($cars->toArray()); @endphp
|
||
@for($i = 0; $i < count($carsValues); $i++)
|
||
@if($i % 1 == 0)
|
||
<div class="carousel-item {{ $i == 0 ? 'active' : '' }}">
|
||
<div class="row">
|
||
@for($j = $i; $j < $i + 3 && $j < count($carsValues); $j++)
|
||
@php $car = $carsValues[$j]; @endphp
|
||
<div class="col-md-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>
|
||
@isset($car['tariffs'][0]['price'])
|
||
{{ $car['tariffs'][0]['price'] }} ₸
|
||
@endisset
|
||
</p>
|
||
</div>
|
||
<a href="#" class="btn btn-primary">Арендовать</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endfor
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@endfor
|
||
</div>
|
||
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-bs-slide="prev">
|
||
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
|
||
<i class="bi bi-chevron-left"></i>
|
||
</span>
|
||
</a>
|
||
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-bs-slide="next">
|
||
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const carousel = new bootstrap.Carousel(document.querySelector('#recipeCarousel'), {
|
||
interval: 10000,
|
||
ride: 'carousel',
|
||
wrap: true
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.carousel-control-prev,
|
||
.carousel-control-next {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
border: 1px solid #ddd;
|
||
opacity: 1;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 10;
|
||
}
|
||
|
||
.carousel-control-prev {
|
||
left: -20px;
|
||
}
|
||
|
||
.carousel-control-next {
|
||
right: -20px;
|
||
}
|
||
|
||
.icon-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
color: black; /* Цвет иконки */
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Hover эффект */
|
||
.carousel-control-prev:hover,
|
||
.carousel-control-next:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.bi::before, [class^=bi-]::before, [class*=" bi-"]::before {
|
||
vertical-align: -0.2em;
|
||
}
|
||
</style>
|
||
|