@layout('content.master')
@section('content')
<div class="container">
    <section>
        <div class="row">
            <div class="col">
                <h1>Immobilien</h1>
                <br>

                <br>

                @if (isset($list))
                    <p class="fs-5">
                        {{ $list->description }}

                    </p>

                @endif
                <br>
                <br>
            </div>
        </div>


        <style>
            #list-filter-menue .form-check {
                min-height: 2.5rem;
            }
            #list-filter-menue .bg-light {
                background-color: #4285c836 !important;
            }

            a:hover .card-body{
                background-color: #edeff25e;
            }
        </style>


        <div class="row">
            <div id="list-filter-menue" class="d-none d-lg-block col-12 position-relative col-md-3 rounded-end" style="background-color: #9cbbd961; padding: 25px;">
                <div class="row">
                    <div class="col-12">
                        <h5 class="mt-2 mb-3 fw-bold">Region</h5>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="regensburg" id="flexCheckRegensburg">
                            <label class="form-check-label" for="flexCheckRegensburg">
                                Regensburg
                                <span class="badge bg-light text-dark">244 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="weiden" id="flexCheckWeiden">
                            <label class="form-check-label" for="flexCheckWeiden">
                                Weiden
                                <span class="badge bg-light text-dark">54 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="amberg" id="flexCheckAmberg">
                            <label class="form-check-label" for="flexCheckAmberg">
                                Amberg
                                <span class="badge bg-light text-dark">35 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="schwandorf" id="flexCheckSchwandorf">
                            <label class="form-check-label" for="flexCheckSchwandorf">
                                Schwandorf
                                <span class="badge bg-light text-dark">38 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="neumarkt" id="flexCheckNeumarkt">
                            <label class="form-check-label" for="flexCheckNeumarkt">
                                Neumarkt
                                <span class="badge bg-light text-dark">124 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="cham" id="flexCheckCham">
                            <label class="form-check-label" for="flexCheckCham">
                                Cham
                                <span class="badge bg-light text-dark">42 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="neustadt" id="flexCheckNeustadt">
                            <label class="form-check-label" for="flexCheckNeustadt">
                                Neustadt
                                <span class="badge bg-light text-dark">16 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="tirschenreuth" id="flexCheckTirschenreuth">
                            <label class="form-check-label" for="flexCheckTirschenreuth">
                                Tirschenreuth
                                <span class="badge bg-light text-dark">54 Objekte</span>
                            </label>
                        </div>
                        <h5 class="mt-5 mb-3 fw-bold">Art</h5>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="vollzeit" id="flexCheckVollzeit">
                            <label class="form-check-label" for="flexCheckVollzeit">
                                Mieten
                                <span class="badge bg-light text-dark">98 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="teilzeit" id="flexCheckTeilzeit">
                            <label class="form-check-label" for="flexCheckTeilzeit">
                                Kaufen
                                <span class="badge bg-light text-dark">12 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="minijob" id="flexCheckMinijob">
                            <label class="form-check-label" for="flexCheckMinijob">
                                Pachten
                                <span class="badge bg-light text-dark">1 Objekte</span>
                            </label>
                        </div>

                        <h5 class="mt-5 mb-3 fw-bold">Extras</h5>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="wissenschaft-ingenieurwesen" id="flexCheckWissenschaft &amp; Ingenieurwesen">
                            <label class="form-check-label" for="flexCheckWissenschaft &amp; Ingenieurwesen">
                                Swimmingpool
                                <span class="badge bg-light text-dark">20 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="computer-it" id="flexCheckComputer &amp; IT">
                            <label class="form-check-label" for="flexCheckComputer &amp; IT">
                                Garage
                                <span class="badge bg-light text-dark">26 Objekte</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input check-branche" type="checkbox" value="gesundheitswesen" id="flexCheckGesundheitswesen">
                            <label class="form-check-label" for="flexCheckGesundheitswesen">
                                Sauna
                                <span class="badge bg-light text-dark">117 Objekte</span>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-12 col-md-9 ">
                <div class="row">


                    @foreach($contents as $content)
                        <div class="col-12 col-md-6 mb-5">
                            <a href="{{ route_content($content) }}" class="text-decoration-none">
                                <div class="card shadow-sm bg-light h-100">
                                    <img src="{{ $content->image }}" class="card-img-top border-bottom">
                                    <div class="card-body">
                                        <h2 class="card-title h5">{{$content->title}}</h2>
                                        <p class="text-muted">Schöne Immobilie sofort verfügbar!</p>

                                        <div class="row">
                                            <div class="col-7 text-success fw-bold">
                                                Miete: 282 € / monatlich
                                            </div>
                                            <div class="col-5 text-end" style="color: #2776b7">
                                                Mehr Erfahren ⟶
                                            </div>
                                        </div>


                                    </div>

                                </div>
                            </a>
                        </div>
                    @endforeach


                </div>
            </div>



        </div>
    </section>
</div>
@stop