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

    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse($slider as $item)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $item->image }}">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12 text-center">
                                        <div class="slideOne">
                                            <h1 class="mainHead text-white">{!! $item->title !!}</h1>
                                            <a href="{{ route('front.user.login') }}" class="themeBtn">Login I Register</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="swiper-slide">
                    </div>
                @endforelse
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="scroll">
            <a href="#about"><i class="fal fa-long-arrow-up"></i>Scroll To Explore</a>
        </div>
    </section>

    <section class="aboutSec p-0" id="about">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-md-6">
                    <div class="aboutContent">
                        <span class="subHead" data-aos="fade-up">{{ $content['about_us1_heading'] ?? '' }}</span>
                        <h2 class="secHeading" data-aos="fade-up">{{ $content['about_us1_title'] ?? '' }}</h2>
                        <p data-aos="fade-up">{!! $content['about_us1_detail'] ?? '' !!}</p>
                        <p data-aos="fade-up">{!! $content['about_us1_detail2'] ?? '' !!}</p>
                        <div data-aos="fade-up">
                            <a href="{{ route('front.about') }}">DISCOVER MORE ABOUT OUR EXPERTISE</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure data-aos="fade-up">
                        <img src="{{ $about->about_us1_image }}" alt="image">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="listingSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-9 col-md-10">
                    <div class="listingHeading">
                        <div data-aos="fade-up">
                            <span class="subHead frstHead">21WillowWest</span>
                            <h3 class="mainHead">Check out for Featured Listings!</h3>
                        </div>
                        <div class="listingTabs" data-aos="fade-up">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                       role="tab" aria-controls="pills-home" aria-selected="true">For Rent</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                                       role="tab" aria-controls="pills-profile" aria-selected="false">For Sale</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-2" data-aos="fade-up">
                    <a href="{{ route('front.sale') }}" class="viewBtn">view all <i class="fal fa-long-arrow-right"></i></a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                             aria-labelledby="pills-home-tab">
                            <div class="row">
                                @forelse($rent as $item)
                                    <div class="col-lg-4 col-sm-6">
                                        <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><i class="fas fa-map-marker-alt"></i>{{ $item->name }}</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>
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
                            <div class="row">
                                @forelse($sale as $item)
                                    <div class="col-lg-4 col-sm-6">
                                        <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><i class="fas fa-map-marker-alt"></i>{{ $item->name }}</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>Sale Property no data!</p>
                                @endforelse
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="newsSec">
        <div class="container">
            <div class="newsHeading text-center mb-4" data-aos="fade-up">
                <span class="subHead frstHead">21WillowWest</span>
                <h2 class="mainHead">Blogs</h2>
            </div>
            <div class="row">
                @forelse($news as $val)
                    <div class="col-md-4">
                        <div class="newsWrap">
                            <figure data-aos="fade-up">
                                <img src="{{ $val->image }}" class="img-fluid" alt="image">
                            </figure>
                            <div class="newsContent" data-aos="fade-up">
                                <h3>{{ $val->title }}</h3>
                                <p>{!! $val->detail !!}/p>
                                {{--                                <a href="#">Continue Reading </a>--}}
                            </div>
                        </div>
                    </div>
                @empty
                    <p>News data empty!</p>
                @endforelse

            </div>
        </div>
    </section>

    @include('front.includes.contact')

@endsection