Merge pull request 'nim_filter' (#9) from nim_style into master

Reviewed-on: #9

modules/main/Components/Main.php

@@ -10,7 +10,7 @@
 namespace App\Modules\main\Components;
 
 use A7kz\Platform\Modules\Platform\Core\Services\Base\Component;
-use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Request;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Http;
 
@@ -21,18 +21,21 @@ class Main extends Component
         parent::__construct($params, $module);
         $this->template = 'pipicar::main.views.main';
 
-//        $request = new Request([
-//            'started_at' => Carbon::now()->toDateString(),
-//            'ended_at' => Carbon::now()->addDays(3)->toDateString(),
-//        ]);
-//
-//        $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
-//        $this->params['cars'] = $response->getData(true);
 
-        $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
+
+        $request = new \Illuminate\Http\Request([
             'started_at' => Carbon::now()->toDateString(),
             'ended_at' => Carbon::now()->addDays(3)->toDateString(),
         ]);
-        $this->params['cars'] = collect($response->json());
+
+        $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
+        $this->params['cars'] = collect($response->getData(true));
+
+//        $class_filters = Request::input('class_filters') ?? null;
+//        $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
+//            'started_at' => Carbon::now()->toDateString(),
+//            'ended_at' => Carbon::now()->addDays(3)->toDateString(),
+//        ]);
+//        $this->params['cars'] = collect($response->json());
     }
 }

modules/main/views/main.blade.php

@@ -1,108 +1,174 @@
 <div class="container text-center my-3 main-page">
+    <div class="main-page-header">
         <p class="top-title">Доступные автомобили</p>
-    <p class="title with-line line-center">Выберите лучший автомобиль</p>
+        <p class="title">Выберите лучший автомобиль</p>
-    <p class="subtitle">У нас есть автомобили разных классов. Выберите свой идеальный вариант и забронируйте его.</p>
+    </div>
-    <div class="row mx-auto my-auto">
+    <div class="container my-4">
-        <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++)
+            <div class="col-12 col-md-3 card-catalog-left-container">
-                                @php $car = $carsValues[$j]; @endphp
+                <div class="text-end">
-                                <div class="col-md-4">
+                    <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>&nbsp;Бесплатное перебронирование и отмена</span></li>
+                            <li><i class="material-symbols-outlined">done</i>
+                                <span>&nbsp;Лимит пробега по городу 200 км</span></li>
+                            <li><i class="material-symbols-outlined">done</i> <span>&nbsp;Страхование гражданской ответственности</span></li>
+                            <li><i class="material-symbols-outlined">done</i> <span>&nbsp;Эконом класс</span></li>
+                            <li><i class="material-symbols-outlined">done</i> <span>&nbsp;Депозит</span></li>
+                            <li><i class="material-symbols-outlined">done</i>
+                                <span>&nbsp;Межгород по дополнительным тарифам</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>&nbsp;Кондиционер</p></div>
                                     <div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p>&nbsp;{{ $car['fuel_type'] }}</p></div>
-                                            <div class="add-li"> <i class="material-symbols-outlined">groups</i><p>&nbsp;{{ $car['people'] }} мест</p></div>
+                                    <div class="add-li"><i class="material-symbols-outlined">groups</i><p>&nbsp;{{ $car['people'] }} мест</p></div>
                                 </div>
                                 <div class="car-card-footer">
                                     <div class="cost">
                                         <small>Базовая ставка</small>
-                                                <p>
+                                        <p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
-                                                    @isset($car['tariffs'][0]['price'])
-                                                        {{ $car['tariffs'][0]['price'] }} ₸
-                                                    @endisset
-                                                </p>
                                     </div>
                                     <a href="#" class="btn btn-primary">Арендовать</a>
                                 </div>
                             </div>
                         </div>
-                            @endfor
+                    @endforeach
                 </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() {
+    function debounce(func, wait) {
-        const carousel = new bootstrap.Carousel(document.querySelector('#recipeCarousel'), {
+        let timeout;
-            interval: 10000,
+        return function (...args) {
-            ride: 'carousel',
+            const context = this;
-            wrap: true
+            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>
-
-<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>
-

resources/assets/sass/app.scss

@@ -265,6 +265,8 @@ body {
 
 .main-page {
     padding: 20px;
+
+    .main-page-header {
         .top-title {
             margin: 0;
             line-height: 1;
@@ -299,17 +301,5 @@ body {
             height: 4px;
             background-color: #01b0e8;
         }
-
-    .carousel-control-prev-icon, .carousel-control-next-icon {
-        width: 3.125rem;
-        height: 3.125rem;
-    }
-
-    .carousel-control-next-icon {
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-    }
-
-    .carousel-control-prev-icon {
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
     }
 }

resources/assets/sass/components/card.scss

@@ -53,20 +53,14 @@ iframe {
     box-shadow: none;
 }
 
-.carousel-inner {
-    overflow: hidden;
 
-    .carousel-item {
+.row.custom-row {
-        transition: transform 0.6s ease-in-out;
-
-        .row {
     display: flex;
-            flex-wrap: nowrap;
+    flex-wrap: wrap;
-            justify-content: center;
+    justify-content: flex-start; // Можно center, если хочешь выравнивать
-            margin-bottom: 35px;
+
     .car-card {
-                margin: 0 10px;
+        width: 100%;
-                min-width: calc(33.333% - 20px);
         transition: .3s all ease;
         padding: 25px 20px;
         border-radius: 8px;
@@ -92,10 +86,12 @@ iframe {
             margin-bottom: 5px;
             font-size: 16px;
             transition: .3s all ease;
+
             p {
                 margin-bottom: 0;
             }
         }
+
         .car-card-footer {
             display: flex;
             align-items: flex-end;
@@ -103,7 +99,15 @@ iframe {
             border-top: 1px solid #ddd;
             padding-top: 10px;
             margin-top: 10px;
-                    .cost p {
+
+            .cost {
+                font-size: 1rem;
+                small {
+                    font-size: .875em;
+                    color: #a8a8a8;
+                }
+                p {
+
                     margin: 0;
                     font-size: 24px;
                     font-weight: 800;
@@ -111,20 +115,135 @@ iframe {
                 }
             }
         }
+    }
+
     .car-card:hover {
         box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
         border-bottom: 2px solid #01B0E8;
+
         .add-li {
             p {
                 color: #1e1e1e;
             }
+
             i {
                 color: $primary-color;
             }
         }
     }
+}
 
+.card-catalog-left-container {
+    .card {
+        border: none;
+        box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
+        padding: 0;
+        border-radius: .25rem;
+        margin: 0;
+        .card-body {
+            flex: 1 1 auto;
+            padding: 1rem 1rem;
+            .title {
+                font-weight: 700;
+                text-align: left;
+            }
+        }
+    }
+
+    .card-catalog-left {
+        background-color: #01b0e8;
+        color: #fff;
+        .title {
+            font-size: 16px;
+        }
+        ul {
+            padding-inline-start: 0;
+            list-style-type: none;
+            padding: 0;
+            text-align: left;
+            li {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 7px;
+                padding-bottom: 7px;
+                border-bottom: 1px dashed #45d2f4;
+                font-size: 14px;
+                justify-content: start;
+                &:last-child {
+                    margin-bottom: 0;
+                    padding-bottom: 0;
+                    border-bottom: none;
+                }
+            }
         }
     }
 }
 
+.card-catalog-left2 {
+    background-color:#fff;
+    color: #7e7e7e;
+    text-align: left;
+    .title {
+        font-size: 18px;
+        color: #333235;
+    }
+    .cr-item {
+        font-size: 14px;
+        color: #7e7e7e;
+    }
+    .btn-link {
+        font-size: 14px;
+        color: #01b0e8;
+    }
+}
+.card-catalog-left-filter {
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
+    .form-label {
+        color: #a8a8a8;
+    }
+    #started_at, #ended_at {
+        font-size: 14px;
+    }
+    .separator {
+        font-size: 18px;
+        padding: 0 8px;
+        display: inline-block;
+        vertical-align: middle;
+        color: #333235;
+    }
+    .btn-group {
+        display: inline-flex;
+        flex-wrap: wrap !important;
+        gap: 6px;
+        justify-content: center;
+        align-content: center;
+        .btn {
+            flex: none;
+            flex-shrink: 0;
+            width: auto;
+            font-size: 14px;
+            padding: 5px 12px;
+            color: #333235;
+            background-color: #F1F1F1;
+            border-radius: 0.8rem!important;
+        }
+
+        .btn-check:checked + .btn {
+            background-color: #01b0e8;
+            color: #fff;
+            border-color: #01b0e8;
+        }
+    }
+}
+
+.collapsible {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+}
+
+.collapsible.expanded {
+    max-height: 1000px;
+    opacity: 1;
+}