@extends('layouts.app')

@section('content')
    <style>
        .btn-check:checked+.btn {
            background-color: rgb(231, 117, 11);
            color: white;
        }

        td,
        h4 {
            color: #333c4e !important
        }
    </style>
    <div class="container">
        <div>
            <div class="d-flex mb-3">
                <div class="p-2 border rounded-3 border-1 p-1 bg-white">
                    <input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
                    <label class="btn p-2 fs-5" for="option5">Все</label>

                    <input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
                    <label class="btn p-2 fs-5" for="option6">Проекты</label>

                    <input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off">
                    <label class="btn p-2 fs-5" for="option7">Скидки</label>

                    <input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off">
                    <label class="btn p-2 fs-5" for="option7">Ипотека</label>
                </div>
                <div class="ms-auto p-2 hstack gap-2">
                    <select class="form-select form-select-lg bg-white" aria-label="Large select example">
                        <option selected>Город: любой</option>
                        <option value="1">Иркутск</option>
                        <option value="2">Владивосток</option>
                        <option value="3">Красноярск</option>
                    </select>
                    <select class="form-select form-select-lg bg-white" aria-label="Large select example">
                        <option selected>Проект: все проекты</option>
                        <option value="1">Проект 1</option>
                        <option value="2">Проект 2</option>
                        <option value="3">Проект 3</option>
                    </select>
                </div>
            </div>

        </div>

        <div>
            @for ($i = 0; $i <= 3; $i++)
                <div class="d-flex">
                    <div class="card flex-fill me-2 border-0 p-2 m-2 bg-white" style="">
                        <div class="card-img-top ratio ratio-16x9">
                            <img src="https://img3.sibdom.ru/images/photo_crop_282_212/houses/photo_main/97/97be/97be2371dd0bba9c4605c3ea6f06e213.jpg"
                                class="rounded" alt="...">
                            <div class="position-absolute bottom-0 start-0 m-3">
                                <span
                                    class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Новость</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="d-flex card-title fw-bold">
                                <span class="">Рассрочка на 3 года</span>
                            </h5>
                            <p class="card-text">Быстро подберите вариант для клиента из нашего каталога</p>
                            <p class="card-text text-secondary">10 августа 2024 г.</p>
                        </div>
                    </div>
                    <div class="card flex-fill me-2 border-0 p-2 m-2 bg-white" style="">
                        <div class="card-img-top ratio ratio-16x9">
                            <img src="https://img3.sibdom.ru/images/photo_crop_282_212/houses/photo_main/97/97be/97be2371dd0bba9c4605c3ea6f06e213.jpg"
                                class="rounded" alt="...">
                            <div class="position-absolute bottom-0 start-0 m-3">
                                <span
                                    class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Новость</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="d-flex card-title fw-bold">
                                <span class="">Рассрочка на 3 года</span>
                            </h5>
                            <p class="card-text">Быстро подберите вариант для клиента из нашего каталога</p>
                            <p class="card-text text-secondary">10 августа 2024 г.</p>
                        </div>
                    </div>
                    <div class="card flex-fill me-2 border-0 p-2 m-2 bg-white" style="">
                        <div class="card-img-top ratio ratio-16x9">
                            <img src="https://img3.sibdom.ru/images/photo_crop_282_212/houses/photo_main/97/97be/97be2371dd0bba9c4605c3ea6f06e213.jpg"
                                class="rounded" alt="...">
                            <div class="position-absolute bottom-0 start-0 m-3">
                                <span
                                    class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Новость</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="d-flex card-title fw-bold">
                                <span class="">Рассрочка на 3 года</span>
                            </h5>
                            <p class="card-text">Быстро подберите вариант для клиента из нашего каталога</p>
                            <p class="card-text text-secondary">10 августа 2024 г.</p>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
    </div>
@endsection