@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>
                </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">Квартиры</option>
                        <option value="2">Кладовые</option>
                        <option value="3">Офисы</option>
                    </select>
                </div>
            </div>
            <div class="d-flex mb-3">
                <div class="me-2">
                    <div class="fw-bold fs-6 text-secondary">
                        Комнатность
                    </div>
                    <div class="border rounded-3 bg-white p-1">
                        <input type="radio" class="btn-check" name="options-base1" id="option10" autocomplete="off" checked>
                        <label class="btn p-2 fs-5" for="option10">Студия</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base1" id="option11" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option11">1</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base1" id="option12" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option12">2</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base1" id="option13" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option13">3</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base1" id="option14" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option14">4+</label>
                    </div>
                </div>
                <div class="mx-2">
                    <div class="fw-bold fs-6 text-secondary">
                        Стоимость, млн. Р
                    </div>
                    <div class="border rounded-3 bg-white pt-2 pb-1">
                        <div class="input-group bg-white border-0 fs-5">
                            <span class="input-group-text bg-white border-0 fs-5">от</span>
                            <input type="text" class="form-control bg-white border-0 fs-5 fw-semibold"
                                style="max-width:70px" placeholder="from" value="5.5" aria-label="Username">
                            <span class="input-group-text bg-white border-0 fs-5">до</span>
                            <input type="text" class="form-control bg-white border-0 fs-5 fw-semibold" placeholder="to"
                                style="max-width:70px" value="35.4" aria-label="Server">
                        </div>
                    </div>
                </div>
                <div class="mx-2">
                    <div class="fw-bold fs-6 text-secondary">
                        Срок заселения
                    </div>
                    <div class="border rounded-3 bg-white p-1">
                        <input type="radio" class="btn-check" name="options-base2" id="option20" autocomplete="off" checked>
                        <label class="btn p-2 fs-5" for="option20">Сдан</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base2" id="option21" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option21">2024</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base2" id="option22" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option22">2025</label>
                        <div class="vr"></div>
                        <input type="radio" class="btn-check" name="options-base2" id="option23" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option23">2026+</label>
                    </div>
                </div>

                <div class="ms-2 ms-auto">
                    <div class="fw-bold fs-6 text-secondary">
                        &nbsp;
                    </div>
                    <div class="border rounded-3 bg-white p-1">
                        <input type="radio" class="btn-check" name="options-base3" id="option30" autocomplete="off" checked>
                        <label class="btn p-2 fs-5" for="option30">
                            <i class="bi bi-grid-fill"></i>
                        </label>
                        <input type="radio" class="btn-check" name="options-base3" id="option31" autocomplete="off">
                        <label class="btn p-2 fs-5" for="option31">
                            <i class="bi bi-geo-alt-fill"></i>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="d-flex">
                <div class="card flex-fill me-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill mx-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill ms-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
            </div>
            <div class="d-flex mt-3">
                <div class="card flex-fill me-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill mx-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill ms-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
            </div>
            <div class="d-flex mt-3">
                <div class="card flex-fill me-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill mx-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
                <div class="card flex-fill ms-2" 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="" 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>
                            <span class="badge bg-light text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">Ипотека
                                5%</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="d-flex card-title fw-bold">
                            <span class="">Пионер</span>
                            <span class="ms-auto fw-bold fs-6" style="color:#e6662a">от 4,5 млн. Р</span>
                        </h5>
                        <p class="card-text">Иркутск, ул. 4-я Совесткая, 11</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection