@extends('backend.layouts.app')

@section('title', 'Show Property')

@push('styles')


@endpush


@section('content')

    <div class="block-header"></div>

    <div class="row clearfix">

        <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
            <div class="card">

                <div class="header bg-blue-grey">
                    <h2>SHOW PROPERTY</h2>
                </div>

                <div class="header">
                    <h2>
                        {{$property->title}}
                        <br>
                        <small>Posted By <strong>{{$property->user->name}}</strong> on {{$property->created_at->toFormattedDateString()}}</small>
                    </h2>
                </div>

                <div class="header">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <strong>Price : </strong>
                            <span class="right"> &dollar;{{number_format($property->price)}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>Bedroom : </strong>
                            <span class="right">{{$property->bedroom}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>Bathroom : </strong>
                            <span class="right">{{$property->bathroom}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>City : </strong>
                            <span class="right">{{$property->city}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>State : </strong>
                            <span class="right">{{$property->state}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>Postcode : </strong>
                            <span class="right">{{$property->postcode}}</span>
                        </li>
                        <li class="list-group-item">
                            <strong>Address : </strong>
                            <span class="right">{{$property->address}}</span>
                        </li>
                    </ul>
                </div>

                <div class="body">
                    <h5>Description</h5>
                    {!!$property->description!!}
                </div>

            </div>
            <div class="card">
                <div class="header">
                    <h2>MAP</h2>
                </div>
                <div class="body">
                    <div id="gmap_markers" class="gmap"></div>
                </div>
            </div>

            @if($property->floor_plan)
            <div class="card">
                <div class="header">
                    <h2>FLOOR PLAN</h2>
                </div>
                @if($property->floor_plan)
                <div class="body">
                    <img class="img-responsive" src="{{Storage::url('property/'.$property->floor_plan)}}" alt="{{$property->title}}">
                </div>
                @endif
            </div>
            @endif

            @if($videoembed)
            <div class="card">
                <div class="header">
                    <h2>PROPERTY VIDEO</h2>
                </div>
                <div class="body text-center">
                    <div class="video-container">
                    {!! $videoembed !!}
                    </div>
                </div>
            </div>
            @endif

            @if(!$property->gallery->isEmpty())
            <div class="card">
                <div class="header bg-red">
                    <h2>GALLERY IMAGE</h2>
                </div>
                <div class="body">
                    <div class="gallery-box">
                        @foreach($property->gallery as $gallery)
                        <div class="gallery-image">
                            <img class="img-responsive" src="{{Storage::url('property/gallery/'.$gallery->name)}}" alt="{{$property->title}}">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            {{-- COMMENTS --}}
            <div class="card" id="card-comment">
                <div class="header">
                    <h2>{{ $property->comments_count }} Comments</h2>
                </div>
                <div class="body">

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

                        @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="right">{{ $comment->created_at->diffForHumans() }}</span>
                                    </div>
                                    <div class="author-comment">
                                        {{ $comment->body }}

                                    </div>
                                    <div class="author-action-approve">
                                        @if($comment->approved != 1)
                                        <form action="{{ route('admin.property.comment.approve',$comment->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $comment->id }}">
                                            <button type="submit" class="btn btn-sm btn-info">
                                                Approve
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                    <div class="author-action-delete">
                                        <form action="{{ route('admin.property.comment.delete',$comment->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $comment->id }}">
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>

                            </div>
                        @endif

                        @foreach($comment->children as $comment)
                            <div class="comment children">
                                <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="right">{{ $comment->created_at->diffForHumans() }}</span>
                                    </div>
                                    <div class="author-comment">
                                        {{ $comment->body }}
                                    </div>
                                    <div class="author-action-approve">
                                        @if($comment->approved != 1)
                                            <form action="{{ route('admin.property.comment.approve',$comment->id) }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="id" value="{{ $comment->id }}">
                                                <button type="submit" class="btn btn-sm btn-info">
                                                    Approve
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                    <div class="author-action-delete">
                                        <form action="{{ route('admin.property.comment.delete',$comment->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $comment->id }}">
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    @endforeach

                </div>
            </div>

        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header bg-cyan">
                    <h2>TYPE</h2>
                </div>
                <div class="body">
                    <strong class="label bg-red">{{$property->type}}</strong> for <strong class="label bg-blue">{{$property->purpose}}</strong>
                </div>
            </div>
            <div class="card">
                <div class="header bg-green">
                    <h2>FEATURES</h2>
                </div>
                <div class="body">
                    @foreach($property->features as $feature)
                        <span class="label bg-green">{{$feature->name}}</span>
                    @endforeach
                </div>
            </div>

            <div class="card">
                <div class="header bg-amber">
                    <h2>FEATURED IMAGE</h2>
                </div>
                <div class="body">

                    @if(Storage::disk('public')->exists('property/'.$property->image) && $property->image)
                        <img class="img-responsive thumbnail" src="{{Storage::url('property/'.$property->image)}}" alt="{{$property->title}}">
                    @else
                        <img class="img-responsive thumbnail" src="{{ asset('frontend/images/placeholder/placeholder-property-single-image.jpg') }}" alt="{{$property->title}}">
                    @endif

                    <a href="{{route('admin.properties.index')}}" class="btn btn-lg waves-effect">
                        <i class="material-icons left">arrow_back</i>
                        <span>BACK</span>
                    </a>
                    <a href="{{route('admin.properties.edit',$property->slug)}}" class="btn bg-green btn-lg waves-effect">
                        <i class="material-icons">edit</i>
                        <span>EDIT</span>
                    </a>

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

    </div>


@endsection


@push('scripts')

    @if(!empty($site_google_map_api_key))
        <script>
            // Initialize and add the map
            function initMap() {
                // The location of Uluru
                var uluru = {lat: , lng: };
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    document.getElementById('gmap_markers'), {zoom: 14, center: uluru});
                // The marker, positioned at Uluru
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            }
        </script>
        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key={{ $site_google_map_api_key }}&callback=initMap">
        </script>
    @else
        <script>
            $(function(){
                $('#gmap_markers').html('<div>Google Maps API Key Missing. <br>(Admin Sidebar -> Settings -> Google Map API Key)</div>');
            })
        </script>
    @endif

@endpush