@php
    $types_groups = [
        ['type' => 'villas', 'type_stored'=> 'villa',  'label' => 'Nos Villas à louer' , 'icon' => 'fa-house'],
        ['type' => 'appartements', 'type_stored'=> 'appartement', 'label' => 'Nos Appartements à louer' , 'icon' => 'fa-building'], 
        ['type' => 'local_commercial', 'type_stored'=> 'local-commercial', 'label' => 'Nos Locaux commerciaux à louer' , 'icon' => 'fa-shop'],
    ];
@endphp
<div>
    <section class="flat-section flat-recommended flat-sidebar">
        <div class="container">
            <div class="box-title-listing">
                <div class="w-100 flat-header-wrapper-about ">
                    <h3 class="title text-center">Nos Biens A Louer </h3>
                    <p class="text-center" style="font-size: 16px;line-height: 1.5;max-width: 600px;margin: 0 auto;">(Villas, Appartements, Locaux commerciaux)</p>
                    <p class="text-variant-1 desc text-center" style="font-size: 14px;line-height: 1.5;max-width: 600px;margin: 0 auto;">
                        Découvrez notre sélection de biens immobiliers à louer, des villas spacieuses aux appartements modernes en passant par des locaux commerciaux stratégiquement situés. Trouvez le bien qui correspond à vos besoins et à votre budget.
                    </p>
    {{--                 <p class="text">Il y a actuellement {{ $properties->count() }} biens.</p>
     --}}            </div>
                {{-- <div class="box-filter-tab">
                    <ul class="nav-tab-filter" role="tablist">
                        <li class="nav-tab-item" role="presentation">   
                            <a href="#gridLayout" class="nav-link-item active"  data-bs-toggle="tab">
                                <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.54883 5.90508C4.54883 5.1222 5.17272 4.5 5.91981 4.5C6.66686 4.5 7.2908 5.12221 7.2908 5.90508C7.2908 6.68801 6.66722 7.3101 5.91981 7.3101C5.17241 7.3101 4.54883 6.68801 4.54883 5.90508Z" stroke="#A3ABB0"/>
                                    <path d="M10.6045 5.90508C10.6045 5.12221 11.2284 4.5 11.9755 4.5C12.7229 4.5 13.3466 5.1222 13.3466 5.90508C13.3466 6.68789 12.7227 7.3101 11.9755 7.3101C11.2284 7.3101 10.6045 6.68794 10.6045 5.90508Z" stroke="#A3ABB0"/>
                                    <path d="M19.4998 5.90514C19.4998 6.68797 18.8757 7.31016 18.1288 7.31016C17.3818 7.31016 16.7578 6.68794 16.7578 5.90508C16.7578 5.12211 17.3813 4.5 18.1288 4.5C18.8763 4.5 19.4998 5.12215 19.4998 5.90514Z" stroke="#A3ABB0"/>
                                    <path d="M7.24249 12.0098C7.24249 12.7927 6.61849 13.4148 5.87133 13.4148C5.12411 13.4148 4.5 12.7926 4.5 12.0098C4.5 11.2268 5.12419 10.6045 5.87133 10.6045C6.61842 10.6045 7.24249 11.2267 7.24249 12.0098Z" stroke="#A3ABB0"/>
                                    <path d="M13.2976 12.0098C13.2976 12.7927 12.6736 13.4148 11.9266 13.4148C11.1795 13.4148 10.5557 12.7928 10.5557 12.0098C10.5557 11.2266 11.1793 10.6045 11.9266 10.6045C12.6741 10.6045 13.2976 11.2265 13.2976 12.0098Z" stroke="#A3ABB0"/>
                                    <path d="M19.4516 12.0098C19.4516 12.7928 18.828 13.4148 18.0807 13.4148C17.3329 13.4148 16.709 12.7926 16.709 12.0098C16.709 11.2268 17.3332 10.6045 18.0807 10.6045C18.8279 10.6045 19.4516 11.2266 19.4516 12.0098Z" stroke="#A3ABB0"/>
                                    <path d="M4.54297 18.0945C4.54297 17.3116 5.16709 16.6895 5.9143 16.6895C6.66137 16.6895 7.28523 17.3114 7.28523 18.0945C7.28523 18.8776 6.66139 19.4996 5.9143 19.4996C5.16714 19.4996 4.54297 18.8771 4.54297 18.0945Z" stroke="#A3ABB0"/>
                                    <path d="M10.5986 18.0945C10.5986 17.3116 11.2227 16.6895 11.97 16.6895C12.7169 16.6895 13.3409 17.3115 13.3409 18.0945C13.3409 18.8776 12.7169 19.4996 11.97 19.4996C11.2225 19.4996 10.5986 18.8772 10.5986 18.0945Z" stroke="#A3ABB0"/>
                                    <path d="M16.752 18.0945C16.752 17.3115 17.376 16.6895 18.1229 16.6895C18.8699 16.6895 19.4939 17.3115 19.4939 18.0945C19.4939 18.8776 18.8702 19.4996 18.1229 19.4996C17.376 19.4996 16.752 18.8772 16.752 18.0945Z" stroke="#A3ABB0"/>
                                </svg>
                                    
                            </a>
                        </li>
                        <li class="nav-tab-item" role="presentation">
                            <a href="#listLayout" class="nav-link-item" data-bs-toggle="tab">
                                <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19.2016 17.8316H8.50246C8.0615 17.8316 7.7041 17.4742 7.7041 17.0332C7.7041 16.5923 8.0615 16.2349 8.50246 16.2349H19.2013C19.6423 16.2349 19.9997 16.5923 19.9997 17.0332C19.9997 17.4742 19.6426 17.8316 19.2016 17.8316Z" fill="#A3ABB0"/>
                                    <path d="M19.2016 12.8199H8.50246C8.0615 12.8199 7.7041 12.4625 7.7041 12.0215C7.7041 11.5805 8.0615 11.2231 8.50246 11.2231H19.2013C19.6423 11.2231 19.9997 11.5805 19.9997 12.0215C20 12.4625 19.6426 12.8199 19.2016 12.8199Z" fill="#A3ABB0"/>
                                    <path d="M19.2016 7.80913H8.50246C8.0615 7.80913 7.7041 7.45173 7.7041 7.01077C7.7041 6.5698 8.0615 6.2124 8.50246 6.2124H19.2013C19.6423 6.2124 19.9997 6.5698 19.9997 7.01077C19.9997 7.45173 19.6426 7.80913 19.2016 7.80913Z" fill="#A3ABB0"/>
                                    <path d="M5.0722 8.1444C5.66436 8.1444 6.1444 7.66436 6.1444 7.0722C6.1444 6.48004 5.66436 6 5.0722 6C4.48004 6 4 6.48004 4 7.0722C4 7.66436 4.48004 8.1444 5.0722 8.1444Z" fill="#A3ABB0"/>
                                    <path d="M5.0722 13.0941C5.66436 13.0941 6.1444 12.6141 6.1444 12.0219C6.1444 11.4297 5.66436 10.9497 5.0722 10.9497C4.48004 10.9497 4 11.4297 4 12.0219C4 12.6141 4.48004 13.0941 5.0722 13.0941Z" fill="#A3ABB0"/>
                                    <path d="M5.0722 18.0433C5.66436 18.0433 6.1444 17.5633 6.1444 16.9711C6.1444 16.379 5.66436 15.8989 5.0722 15.8989C4.48004 15.8989 4 16.379 4 16.9711C4 17.5633 4.48004 18.0433 5.0722 18.0433Z" fill="#A3ABB0"/>
                                </svg>
                            </a>
                        </li>
                    </ul>
                    <div class="nice-select select-filter list-page" tabindex="0"><span class="current">Type de bien</span>
                        <ul class="list">  
                            <li data-value="1" class="option" wire:click="$set('type_property', '')">Tous</li>
                            <li data-value="2" class="option" wire:click="$set('type_property', 'villa')">Villa</li>
                            <li data-value="1" class="option" wire:click="$set('type_property', 'appartement')">Appartement</li>                                                        
                            <li data-value="1" class="option" wire:click="$set('type_property', 'local-commercial')">Local commercial</li>                                                        
                        </ul>
                    </div>
                    <div class="nice-select select-filter list-sort" tabindex="0"><span class="current">Trier par (Default)</span>
                        <ul class="list">  
                            <li data-value="default" class="option selected">Trier par (Default)</li>                                                        
                            <li data-value="new" wire:click="$set('sortDirection', 'asc')" class="option">Nouveautés</li>
                            <li data-value="old" wire:click="$set('sortDirection', 'desc')" class="option">Anciens</li>
                        </ul>
                    </div>
                </div> --}}
            </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)
                        @if(empty($type_property))
                        <h2 class="text-center title-boxlist"><i class="fa-solid {{ $type['icon'] }}"></i>  {{$type['label']}}</h2>
                        @endif
        
                        <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">
                                                <li class="item">
                                                    <i class="icon icon-bed"></i>
                                                    <span class="text-variant-1">Beds:</span>
                                                    <span class="fw-6">{{$property->nombre_pieces}}</span>
                                                </li>
                                                <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>
                                                <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>
                                            </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>
                        @else
                            @if (!empty($type_property) && count($$type_to_display) == 0 && $type['type_stored'] == $type_property)   
                                <div class="col-12">
                                    <div class="text-center">
                                        <p class="text-center alert alert-warning" style="font-size: 16px;line-height: 1.5;max-width: 600px;margin: 0 auto;">Aucun bien trouvé pour <b>{{$type['label']}}</b></p>
                                    </div>
                                </div>
                            @endif
                        @endif
                    @endforeach
                </div>
              
            </div>
    
            
            
        </div>
    </section>
</div>