@extends('frontend.layouts.app')

@section('styles')

@endsection

@section('content')

    <section class="section">
        <div class="container">

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

            <div class="row">
                <div class="city-categories">
                    @foreach($cities as $city)
                        <div class="col s12 m3">
                            <a href="{{ route('property.city',$city->city_slug) }}">
                                <div class="city-category">
                                    <span>{{ $city->city }}</span>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </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 }}"><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, 21 ) }}</span>
                                </a>

                                <div class="address">
                                    <i class="small material-icons left">place</i>
                                    <span>
                                        {{ str_limit( ucfirst($property->address), 30 ) }}
                                    </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 class="m-t-30 m-b-60 center">
                {{ $properties->links() }}
            </div>

        </div>
    </section>

@endsection

@section('scripts')

<script>

    $(function(){
        var js_properties = null;
        js_properties.data.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
                    });
                }
            }
        });
    })
</script>
@endsection