@extends('frontend.layouts.app')

@section('styles')
<style>
    .carousel-item-layer {
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    /** HOMEPAGE SEARCH BOX **/
    .search-box-homepage {
        background-color: #fff;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .search-box-homepage-tab-col {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .search-box-homepage-form-col {
        padding-top: 10px !important;
    }
    .tabs .tab a:focus, .tabs .tab a:focus.active {
        background-color: {{ $site_theme_secondary_color }};
        outline: none;
    }
    .tabs .tab a:hover, .tabs .tab a.active {
        background-color: {{ $site_theme_primary_color }};
        color: #fff;
    }
    .tabs .tab a {
        color: {{ $site_theme_primary_color }};
    }
</style>
@endsection

@section('content')

    <!-- Service section -->
    <section class="section grey lighten-4 center">
        <div class="container">
            <div class="row">
                <h4 class="section-heading">Services</h4>
            </div>
            <div class="row">
                @foreach($services as $service)
                    <div class="col s12 m4">
                        <div class="card-panel">
                            <i class="material-icons large {{ $site_theme }}-text">{{ $service->icon }}</i>
                            <h5>{{ $service->title }}</h5>
                            <p>{{ $service->description }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    <!-- Featured section -->
    <section class="section">
        <div class="container">
            <div class="row">
                <h4 class="section-heading">Featured Properties</h4>
            </div>
            <div class="row">

                @foreach($properties as $property)
                    <div class="col s12 m4">

                        <div class="card">
                            <div class="card-image">
                                @if(Storage::disk('public')->exists('property/'.$property->image) && $property->image)
                                    <span class="card-image-bg" style="background-image:url({{Storage::url('property/'.$property->image)}});"></span>
                                @else
                                    <span class="card-image-bg" style="background-image:url({{ asset('frontend/images/placeholder/placeholder-property-listing-image.jpg') }});"></span>
                                @endif
                                @if($property->featured == 1)
                                    <a class="btn-floating halfway-fab waves-effect waves-light {{ $site_theme }}" title="Featured"><i class="small material-icons">star</i></a>
                                @endif
                                <span style="position: absolute;margin: 0;right: 0px;top: 0px;" class="badge {{ $site_theme }} new" data-badge-caption="{{ $property->updated_at->diffForHumans() }}"></span>
                                <span style="position: absolute;margin: 0;bottom: 0px;" class="badge {{ $site_theme }} new" data-badge-caption="{{ ucfirst($property->type) . " for " . $property->purpose }}"></span>
                            </div>
                            <div class="card-content property-content">
                                <a href="{{ route('property.show',$property->slug) }}">
                                    <span class="card-title tooltipped" data-position="bottom" data-tooltip="{{ $property->title }}">
                                        {{ str_limit( $property->title, 22 ) }}
                                    </span>
                                </a>

                                <div class="address">
                                    <i class="small material-icons left">place</i>
                                    <span>
                                        {{ str_limit( ucfirst($property->address), 35 ) }}
                                    </span>
                                </div>
                                <div class="address">
                                    <i class="small material-icons left">location_city</i>
                                    <span>
                                        {{ ucfirst($property->city) . ", " . ucfirst($property->state) . " " . str_limit($property->postcode, 5, '') }}
                                    </span>
                                </div>
                                <div class="address">
                                    <i class="small material-icons left">home</i>
                                    <span>{{ $property->bedroom  . " bds | " . $property->bathroom . " ba | " . $property->area . " sqft" }}</span>
                                </div>
                                <div class="address">
                                    <i class="small material-icons left">message</i>
                                    <span>{{ $property->comments_count . " comments" }}</span>
                                </div>

                                <h5>
                                    @if($property->purpose == 'rent')
                                        ${{ number_format($property->price) }}/Month
                                    @else
                                        ${{ number_format($property->price) }}
                                    @endif
                                    <div class="right" id="propertyrating-{{$property->id}}"></div>
                                </h5>
                            </div>
                        </div>
                    </div>
                @endforeach

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


    <!-- Testimonials section -->
    <section class="section grey lighten-3 center">
        <div class="container">

            <h4 class="section-heading">Testimonials</h4>

            <div class="carousel testimonials">

                @foreach($testimonials as $testimonial)
                    <div class="carousel-item testimonial-item" href="#{{$testimonial->id}}!">
                        <div class="card testimonial-card">
                            <span style="height:20px;display:block;"></span>
                            <div class="card-image testimonial-image">
                                @if(Storage::disk('public')->exists('testimonial/'.$testimonial->image) && $testimonial->image)
                                    <img src="{{ Storage::url('testimonial/'.$testimonial->image) }}">
                                @else
                                    <img src="{{ asset('frontend/images/placeholder/placeholder-testimonial-image.jpg') }}">
                                @endif

                            </div>
                            <div class="card-content">
                                <span class="card-title">{{$testimonial->name}}</span>
                                <p>
                                    {{$testimonial->testimonial}}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

        </div>

    </section>


    <!-- Blog section -->
    <section class="section">
        <div class="row">
            <h4 class="section-heading">Recent Blog</h4>
        </div>
        <div class="container">
            <div class="row">

                @foreach($posts as $post)
                <div class="col s12 m4">
                    <div class="card">
                        <div class="card-image">
                            @if(Storage::disk('public')->exists('posts/'.$post->image) && $post->image)
                                <span class="card-image-bg" style="background-image:url({{ Storage::url('posts/'.$post->image) }});"></span>
                            @else
                                <span class="card-image-bg" style="background-image:url({{ asset('frontend/images/placeholder/placeholder-post-list-image.jpg') }});"></span>
                            @endif
                            <span style="position: absolute;margin: 0;right: 0px;top: 0px;" class="badge {{ $site_theme }} new" data-badge-caption="{{ $post->updated_at->diffForHumans() }}"></span>
                        </div>
                        <div class="card-content property-content">

                            <a href="{{ route('blog.show',$post->slug) }}">
                                <span class="card-title tooltipped" data-position="bottom" data-tooltip="{{$post->title}}">
                                    {{ str_limit($post->title,21) }}
                                </span>
                            </a>
                            <p>
                                {!! str_limit($post->body,120) !!}
                            </p>
                        </div>
                        <div class="card-action blog-action">
                            @foreach($post->categories as $key => $category)
                                <a href="{{ route('blog.categories',$category->slug) }}" class="btn-flat">
                                    <i class="material-icons">folder</i>
                                    <span>{{$category->name}}</span>
                                </a>
                            @endforeach

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

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

@endsection

@section('scripts')
<script>
    $(function(){

        $('.tabs').tabs();

        var js_properties = null;
        js_properties.forEach(element => {
            if(element.rating){
                var elmt = element.rating;
                var sum = 0;
                for( var i = 0; i < elmt.length; i++ ){
                    sum += parseFloat( elmt[i].rating );
                }
                var avg = sum/elmt.length;
                if(isNaN(avg) == false){
                    $("#propertyrating-"+element.id).rateYo({
                        rating: avg,
                        starWidth: "20px",
                        readOnly: true
                    });
                }else{
                    $("#propertyrating-"+element.id).rateYo({
                        rating: 0,
                        starWidth: "20px",
                        readOnly: true
                    });
                }
            }
        });

        @if(count($testimonials))
        $('.carousel.testimonials').carousel({
            indicators: true,
        });
        @endif
    })
</script>
@endsection