@extends('frontend.layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('frontend/vendor/flexslider/flexslider.css') }}" type="text/css">
<style>
    .flexslider .slides > li {
        height: 400px;
    }
    .flex-direction-nav a {
        height: 45px;
        top: 45%;
    }
    .flex-control-nav {
        width: 100%;
        position: initial;
        bottom: initial;
        text-align: center;
        margin-top: 20px;
    }
    .flexslider .slides img {
        display: block;
        max-width:634px;
        max-height:400px;
        width: auto;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }

    /* Set the size of the div element that contains the map */
    #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
    }
    .card-map .card-content {
        padding: 0px;
    }
</style>
@endsection

@section('content')

    <!-- SINGLE PROPERTY SECTION -->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col s12 m8">
                    <div class="single-title">
                        <h4 class="single-title">{{ $property->title }}</h4>
                    </div>

                    <div class="address m-b-30">
                        <i class="small material-icons left">place</i>
                        <span class="font-18">{{ $property->address . ", " . $property->city . ", " . ucfirst($property->state) . " " . str_limit($property->postcode, 5, '') }}</span>
                    </div>

                    <div>
                        @if($property->featured == 1)
                            <a class="btn-floating btn-small disabled"><i class="material-icons">star</i></a>
                        @endif

                        <span class="btn btn-small disabled b-r-20">Bedroom: {{ $property->bedroom}} </span>
                        <span class="btn btn-small disabled b-r-20">Bathroom: {{ $property->bathroom}} </span>
                        <span class="btn btn-small disabled b-r-20">Area: {{ $property->area}} Sq Ft</span>
                    </div>
                </div>
                <div class="col s12 m4">
                    <div>
                        <h4 class="left">
                            @if($property->purpose == 'rent')
                                ${{ number_format($property->price) }}/Month
                            @else
                                ${{ number_format($property->price) }}
                            @endif
                        </h4>
                        <button type="button" class="btn btn-small m-t-25 right disabled b-r-20"> For {{ $property->purpose }}</button>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col s12 m8">

                    @if(!$property->gallery->isEmpty())
                        <div class="single-slider">
                            @include('pages.properties.slider')
                        </div>
                    @else
                        <div class="single-image">
                            @if(Storage::disk('public')->exists('property/'.$property->image) && $property->image)
                                <img src="{{Storage::url('property/'.$property->image)}}" alt="{{$property->title}}" class="imgresponsive">
                            @else
                                <img src="{{ asset('frontend/images/placeholder/placeholder-property-single-image.jpg') }}" alt="{{$property->title}}" class="imgresponsive">
                            @endif
                        </div>
                    @endif

                    <div class="single-description p-15 m-b-15 border2 border-top-0">
                        {!! $property->description !!}
                    </div>

                    <div>
                        @if($property->features)
                            <ul class="collection with-header">
                                <li class="collection-header grey lighten-4"><h5 class="m-0">Features</h5></li>
                                @foreach($property->features as $feature)
                                    <li class="collection-item">{{$feature->name}}</li>
                                @endforeach
                            </ul>
                        @endif
                    </div>

                    @if(!empty($property->floor_plan))
                    <div class="card-no-box-shadow card">
                        <div class="p-15 grey lighten-4">
                            <h5 class="m-0">Floor Plan</h5>
                        </div>
                        <div class="card-image">
                            @if(Storage::disk('public')->exists('property/'.$property->floor_plan) && $property->floor_plan)
                                <img src="{{Storage::url('property/'.$property->floor_plan)}}" alt="{{$property->title}}" class="imgresponsive">
                            @endif
                        </div>
                    </div>
                    @endif

                    <div class="card-no-box-shadow card card-map">
                        <div class="p-15 grey lighten-4">
                            <h5 class="m-0">Location</h5>
                        </div>
                        <div class="card-content">
                            <div id="map"></div>
                        </div>
                    </div>

                    @if($videoembed)
                        <div class="card-no-box-shadow card">
                            <div class="p-15 grey lighten-4">
                                <h5 class="m-0">Video</h5>
                            </div>
                            <div class="card-image center m-t-10">
                                <div class="video-container">
                                {!! $videoembed !!}
                                </div>
                            </div>
                        </div>
                    @endif

                    @if(!empty($property->nearby))
                        <div class="card-no-box-shadow card">
                            <div class="p-15 grey lighten-4">
                                <h5 class="m-0">Near By</h5>
                            </div>
                            <div class="single-narebay p-15">
                                {!! $property->nearby !!}
                            </div>
                        </div>
                    @endif


                    <div class="card-no-box-shadow card">
                        <div class="p-15 grey lighten-4">
                            <h5 class="m-0">
                                {{ $property->comments_count }} Comments
                                @auth
                                <div class="right" id="rateYo"></div>
                                @endauth
                            </h5>
                        </div>
                        <div class="single-narebay p-15">

                            @foreach($property->comments as $comment)

                                @if($comment->approved == 1 || (Auth::check() && $comment->users->id == auth()->user()->id))

                                    @if($comment->parent_id == NULL)
                                        <div class="comment">
                                            <div class="author-image">
                                                @if($comment->users->image)
                                                    <span style="background-image:url({{ Storage::url('users/'.$comment->users->image) }});"></span>
                                                @else
                                                    @if($comment->users->isAdmin())
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-admin-image.jpg') }});"></span>
                                                    @elseif($comment->users->isAgent())
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-agent-image.jpg') }});"></span>
                                                    @else
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-user-image.jpg') }});"></span>
                                                    @endif
                                                @endif
                                            </div>
                                            <div class="content">
                                                <div class="author-name">
                                                    <strong>{{ $comment->users->name }}</strong>
                                                    <span class="time">{{ $comment->created_at->diffForHumans() }} {{ $comment->approved == 0 ? '| Pending Approval' : '' }}</span>

                                                    @auth
                                                        <span id="commentreplay" class="right replay" data-commentid="{{ $comment->id }}">Replay</span>
                                                    @endauth

                                                </div>
                                                <div class="author-comment">
                                                    {{ $comment->body }}
                                                </div>
                                                @if(Auth::check() && $comment->users->id == auth()->user()->id)
                                                    <div class="author-comment">
                                                        @if($comment->users->isAdmin())
                                                            <form action="{{ route('admin.property.comment.delete',$comment->id) }}" method="POST">
                                                        @elseif($comment->users->isAgent())
                                                            <form action="{{ route('agent.property.comment.delete',$comment->id) }}" method="POST">
                                                        @else
                                                            <form action="{{ route('user.property.comment.delete',$comment->id) }}" method="POST">
                                                        @endif
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ $comment->id }}">
                                                            <button type="submit" class="btn btn-sm {{ $site_theme }}">
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                @endif
                                            </div>
                                            <div id="procomment-{{$comment->id}}"></div>
                                        </div>
                                    @endif

                                @endif

                                    @foreach($comment->children as $commentchildren)

                                        @if($commentchildren->approved == 1 || (Auth::check() && $commentchildren->users->id == auth()->user()->id))

                                        <div class="comment children">
                                            <div class="author-image">
                                                @if($commentchildren->users->image)
                                                    <span style="background-image:url({{ Storage::url('users/'.$commentchildren->users->image) }});"></span>
                                                @else
                                                    @if($comment->users->isAdmin())
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-admin-image.jpg') }});"></span>
                                                    @elseif($comment->users->isAgent())
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-agent-image.jpg') }});"></span>
                                                    @else
                                                        <span style="background-image:url({{ asset('frontend/images/placeholder/placeholder-user-image.jpg') }});"></span>
                                                    @endif
                                                @endif
                                            </div>
                                            <div class="content">
                                                <div class="author-name">
                                                    <strong>{{ $commentchildren->users->name }}</strong>
                                                    <span class="time">{{ $commentchildren->created_at->diffForHumans() }} {{ $commentchildren->approved == 0 ? '| Pending Approval' : '' }}</span>
                                                </div>
                                                <div class="author-comment">
                                                    {{ $commentchildren->body }}
                                                </div>
                                                @if(Auth::check() && $commentchildren->users->id == auth()->user()->id)
                                                <div class="author-comment">
                                                    @if($commentchildren->users->isAdmin())
                                                        <form action="{{ route('admin.property.comment.delete',$commentchildren->id) }}" method="POST">
                                                    @elseif($commentchildren->users->isAgent())
                                                        <form action="{{ route('agent.property.comment.delete',$commentchildren->id) }}" method="POST">
                                                    @else
                                                        <form action="{{ route('user.property.comment.delete',$commentchildren->id) }}" method="POST">
                                                    @endif
                                                        @csrf
                                                        <input type="hidden" name="id" value="{{ $commentchildren->id }}">
                                                        <button type="submit" class="btn btn-sm {{ $site_theme }}">
                                                            Delete
                                                        </button>
                                                    </form>
                                                </div>
                                                @endif
                                            </div>
                                        </div>

                                        @endif

                                    @endforeach

                            @endforeach

                            @auth
                                <div class="comment-box">
                                    <h6>Leave a comment</h6>
                                    <form action="{{ route('property.comment',$property->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="parent" value="0">

                                        <textarea name="body" class="box"></textarea>
                                        <input type="submit" class="btn {{ $site_theme }}" value="Comment">
                                    </form>
                                </div>
                            @endauth

                            @guest
                                <div class="comment-login">
                                    <h6>Please Login to comment</h6>
                                    <a href="{{ route('login') }}" class="btn {{ $site_theme }}">Login</a>
                                </div>
                            @endguest

                        </div>
                    </div>

                </div>
                {{-- End ./COL M8 --}}

                <div class="col s12 m4">
                    <div class="clearfix">

                        <div>
                            <ul class="collection with-header m-t-0">
                                <li class="collection-header grey lighten-4">
                                    <h5 class="m-0">Contact with Agent</h5>
                                </li>
                                <li class="collection-item p-0">
                                    @if($property->user)
                                        <div class="card horizontal card-no-shadow">
                                            <div class="card-image p-l-10 agent-image">
                                                @if($property->user->image)
                                                    <img style="width: 48px;" src="{{Storage::url('users/'.$property->user->image)}}" alt="{{ $property->user->username }}" class="imgresponsive">
                                                @else
                                                    <img style="width: 48px;" src="{{ $property->user->isAdmin() ? asset('frontend/images/placeholder/placeholder-admin-image.jpg') : asset('frontend/images/placeholder/placeholder-agent-image.jpg') }}" alt="{{ $property->user->username }}" class="responsive-img circle">
                                                @endif

                                            </div>
                                            <div class="card-stacked">
                                                <div class="p-l-10 p-r-10">
                                                    <h5 class="m-t-b-0">{{ $property->user->name }}</h5>
                                                    <strong>{{ $property->user->email }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-l-10 p-r-10">
                                            <p>{{ $property->user->about }}</p>
                                            <a href="{{ route('agents.show',$property->agent_id) }}" class="profile-link">Profile</a>
                                        </div>
                                    @endif
                                </li>

                                <li class="collection agent-message">
                                    <form class="agent-message-box" action="" method="POST">
                                        @csrf
                                        <input type="hidden" name="agent_id" value="{{ $property->user->id }}">
                                        <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                                        <input type="hidden" name="property_id" value="{{ $property->id }}">

                                        <div class="box">
                                            <input type="text" name="name" placeholder="Your Name">
                                        </div>
                                        <div class="box">
                                            <input type="email" name="email" placeholder="Your Email">
                                        </div>
                                        <div class="box">
                                            <input type="number" name="phone" placeholder="Your Phone">
                                        </div>
                                        <div class="box">
                                            <textarea name="message" placeholder="Your Msssage"></textarea>
                                        </div>
                                        <div class="box">
                                            <button id="msgsubmitbtn" class="btn waves-effect waves-light w100 {{ $site_theme }}" type="submit">
                                                SEND
                                                <i class="material-icons left">send</i>
                                            </button>
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </div>

                        <div>
                            <ul class="collection with-header">
                                <li class="collection-header grey lighten-4">
                                    <h5 class="m-0">City List</h5>
                                </li>
                                @foreach($cities as $city)
                                    <li class="collection-item p-0">
                                        <a class="city-list" href="{{ route('property.city',$city->city_slug) }}">
                                            <span>{{ $city->city }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div>
                            <ul class="collection with-header">
                                <li class="collection-header grey lighten-4">
                                    <h5 class="m-0">Related Properties</h5>
                                </li>
                                @foreach($relatedproperty as $property_related)
                                    <li class="collection-item p-0">
                                        <a href="{{ route('property.show',$property_related->slug) }}">
                                            <div class="card horizontal card-no-shadow m-0">
                                                <div class="card-image">
                                                    @if($property_related->image)
                                                        <img src="{{Storage::url('property/'.$property_related->image)}}" alt="{{$property_related->title}}" class="imgresponsive">
                                                    @else
                                                        <img src="{{ asset('frontend/images/placeholder/placeholder-property-listing-image.jpg') }}" alt="{{$property_related->title}}" class="imgresponsive">
                                                    @endif
                                                </div>
                                                <div class="card-stacked">
                                                    <div class="p-l-10 p-r-10 {{ $site_theme }}-text">
                                                        <h6 title="{{$property_related->title}}">{{ str_limit( $property_related->title, 18 ) }}</h6>
                                                        <span>{{ $property->bedroom  . " bds | " . $property->bathroom . " ba | " . $property->area . " sqft" }}</span>
                                                        <br><strong>&dollar;{{number_format($property_related->price)}}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

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

        </div>
    </section>

    {{-- RATING --}}
    @php
        $rating = ($rating == null) ? 0 : $rating;
    @endphp

@endsection

@section('scripts')

    <script>
        $(function(){

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // RATING
            $("#rateYo").rateYo({
                rating: null,
                halfStar: true,
                starWidth: "26px"
            })
            .on("rateyo.set", function (e, data) {

                var rating = data.rating;
                var property_id = null;
                var user_id =