@php
    $types_groups = [
        ['type' => 'villas', 'label' => 'Nos villas à vendre', 'icon' => 'fa-house'],
        ['type' => 'appartements', 'label' => 'Nos appartements à vendre', 'icon' => 'fa-building'],
        ['type' => 'terrains', 'label' => 'Nos terrains à vendre', 'icon' => 'fa-map-location-dot'],
        ['type' => 'fond_commerce', 'label' => 'Nos fonds de commerce à vendre', 'icon' => 'fa-users-viewfinder'],
        ['type' => 'local_commercial', 'label' => 'Nos locaux commerciaux à vendre', 'icon' => 'fa-shop'],
    ];
@endphp
<div class="container">
    <div class="box-title text-center wow fadeInUp">
        <div class="text-subtitle text-primary">Nos Biens à Vendre</div>
        <h3 class="title mt-4">Découvrez nos biens immobiliers</h3>
    </div>
    <div class="flat-tab-recommended flat-animate-tab wow fadeInUp" data-wow-delay=".2s">
        {{-- <ul class="nav-tab-recommended justify-content-md-center" role="tablist">
            <li class="nav-tab-item" role="presentation">
                <a href="#viewAll" class="nav-link-item active" data-bs-toggle="tab">Toutes</a>
            </li>
            <li class="nav-tab-item" role="presentation">
                <a href="#apartment" class="nav-link-item " data-bs-toggle="tab">Appartement</a>
            </li>
            <li class="nav-tab-item" role="presentation">
                <a href="#villa" class="nav-link-item" data-bs-toggle="tab">Villa</a>
            </li>
            <li class="nav-tab-item" role="presentation">
                <a href="#studio" class="nav-link-item" data-bs-toggle="tab">Terrain</a>
            </li>

        </ul> --}}
        <div>
            @foreach ($types_groups as $type)
                @php
                    $type_to_display = $type['type'];
                    @endphp
                @if(count($$type_to_display) > 0)
                <h2 class="text-center title-boxlist"><i class="fa-solid {{ $type['icon'] }}"></i>  {{$type['label']}}</h2>

                <div class="row">
                    @foreach ($$type_to_display as $property)
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="homelengo-box">
                            <div class="archive-top">
                                <a href="{{route('front.property.show', ['slug' => $property->slug, 'id' => $property->id])}}"
                                    class="images-group">
                                    <div class="images-style">
                                        @if ($property->images->count() > 0)
                                        <img class="lazyload"
                                            data-src="{{ asset('storage/'.$property->images->first()->url) }}"
                                            src="{{ asset('storage/'.$property->images->first()->url) }}" alt="img">

                                        @endif
                                        {{-- <img class="lazyload"
                                            data-src="{{ asset('storage/'.$property->images->first()->url) }}"
                                            src="{{ asset('storage/'.$property->images->first()->url) }}" alt="img">
                                        --}}
                                    </div>
                                    <div class="top">
                                        <ul class="d-flex gap-6">
                                            @if ($property->premium)
                                            <li class="flag-tag primary">Premium</li>
                                            @endif
                                            <li class="flag-tag style-1">{{$property->statut}}</li>
                                        </ul>

                                    </div>
                                    <div class="bottom">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M10 7C10 7.53043 9.78929 8.03914 9.41421 8.41421C9.03914 8.78929 8.53043 9 8 9C7.46957 9 6.96086 8.78929 6.58579 8.41421C6.21071 8.03914 6 7.53043 6 7C6 6.46957 6.21071 5.96086 6.58579 5.58579C6.96086 5.21071 7.46957 5 8 5C8.53043 5 9.03914 5.21071 9.41421 5.58579C9.78929 5.96086 10 6.46957 10 7Z"
                                                stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <path
                                                d="M13 7C13 11.7613 8 14.5 8 14.5C8 14.5 3 11.7613 3 7C3 5.67392 3.52678 4.40215 4.46447 3.46447C5.40215 2.52678 6.67392 2 8 2C9.32608 2 10.5979 2.52678 11.5355 3.46447C12.4732 4.40215 13 5.67392 13 7Z"
                                                stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                        {{$property->localisation}}, <b>{{$property->departement}}</b>
                                    </div>
                                </a>

                            </div>
                            <div class="archive-bottom">
                                <div class="content-top">
                                    <h6 class="text-capitalize"><a
                                            href="{{route('front.property.show', ['slug' => $property->slug, 'id' => $property->id])}}"
                                            class="link">
                                            {{$property->titre}} </a></h6>
                                    <ul class="meta-list">
                                        @if(!empty($property->nombre_pieces) && $property->nombre_pieces > 0)
                                        <li class="item">
                                            <i class="icon icon-bed"></i>
                                            <span class="text-variant-1">Pièces:</span>
                                            <span class="fw-6">{{$property->nombre_pieces}}</span>
                                        </li>
                                        @endif
                                        @if(!empty($property->nombre_salles_de_bain) && $property->nombre_salles_de_bain > 0)
                                        <li class="item">
                                            <i class="icon icon-bath"></i>
                                            <span class="text-variant-1">Salle d’eau:</span>
                                            <span class="fw-6">{{$property->nombre_salles_de_bain}}</span>
                                        </li>
                                        @endif
                                        @if(!empty($property->superficie) && $property->superficie > 0)
                                        <li class="item">
                                            <i class="icon icon-sqft"></i>
                                            <span class="text-variant-1">Superficie:</span>
                                            <span class="fw-6">{{$property->superficie}} m<sup>2</sup></span>
                                        </li>
                                        @endif
                                    </ul>

                                </div>

                                <div class="content-bottom">
                                    {{-- <div class="d-flex gap-8 align-items-center">
                                        <div class="avatar avt-40 round">
                                            <img src="{{ asset('storage/'.$property->images->first()->url) }}"
                                                alt="avt">
                                        </div>
                                        <span>{{$property->proprietaire->nom}}
                                            {{$property->proprietaire->prenom}}</span>
                                    </div> --}}
                                    <h6 class="price">{{number_format($property->prix, 0, ',', ' ')}} FCFA</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <hr>
                @endif
            @endforeach
        </div>
      
    </div>

</div>