@extends('front.layouts.app')
@section('content')

    <section class="inner-banner p-0">
        <img src="{{ asset('images/inner-banner__img.png') }}" alt="image" class="img-fluid">
        <div class="container">
            <div class="inner-banner__title">
                <h1>For Rent at 21 Willow West!</h1>
            </div>
        </div>
    </section>

    <section class="listingSec">
        <div class="container">
            <div class="row">
                @forelse($data as $item)
                    <div class="col-md-4">
                        <div class="listingWrap" data-aos="fade-up">
                            <div class="swiper listingSlider">
                                <div class="swiper-wrapper">
                                    @foreach($item->getMedia('product_image') as $image)
                                        <div class="swiper-slide">
                                            <figure>
                                                <img src="{{ $image->getUrl() }}" class="img-fluid" alt="image">
                                            </figure>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <div class="listingBox">
                                <div class="starBox">
                                    <a href="#">4,75<i class="fas fa-star"></i></a>
                                </div>
                                <h3>
                                    <a href="{{ route('front.rent.detail', $item->id) }}">
                                        <i class="fas fa-map-marker-alt"></i>{{ $item->name }}
                                    </a>
                                </h3>
                                <ul>
                                    <li><a href="#"><i class="fas fa-bed"></i>{{ $item->bed }} Bed</a></li>
                                    <li><a href="#"><i class="fas fa-bath"></i>{{ $item->bath }} Bath</a></li>
                                    <li><a href="#"><i class="fas fa-h-square"></i>{{ $item->guest }} guests</a></li>
                                </ul>
                                <div class="btn-group">
                                    @foreach($item->features as $key => $feature)
                                        @if($key < 3)
                                            <a href="#">{{ $feature->name }}</a>
                                        @else
                                            @break
                                        @endif
                                    @endforeach
                                </div>

                            </div>
                        </div>
                    </div>
                @empty
                    <p>Rent Property no data!</p>
                @endforelse
            </div>

        </div>
    </section>
    @include('front.includes.contact')

@endsection