@extends('frontend.layouts.app')

@section('styles')

@endsection

@section('content')

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

                <div class="col s12 m8">

                    <div class="card horizontal card-no-shadow m-b-60">
                        <div class="card-image agent-image">
                            @if($agent->image)
                                <img src="{{Storage::url('users/'.$agent->image)}}" alt="{{ $agent->username }}" class="responsive-img circle">
                            @else
                                <img src="{{ asset('frontend/images/placeholder/placeholder-agent-image.jpg') }}" alt="{{ $agent->username }}" class="responsive-img circle">
                            @endif
                        </div>
                        <div class="card-stacked p-l-15">
                            <div class="">
                                <h5 class="">{{ $agent->name }}</h5>
                                <strong>{{ $agent->email }}</strong>
                            </div>
                            <div class="">
                                <p>{{ $agent->about }}</p>
                            </div>
                        </div>
                    </div>

                    <h5 class="uppercase">Property List of {{ $agent->name }}</h5>

                    {{-- AGENT PROPERTIES --}}
                    @foreach($properties as $property)

                        <div class="card horizontal card-no-shadow border1">
                            <div class="card-image horizontal-bg-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
                                <span style="position: absolute;margin: 0;left: 0px;top: 0px;" class="badge {{ $site_theme }} new" data-badge-caption="{{ $property->updated_at->diffForHumans() }}"></span>

                            </div>
                            <div class="card-stacked">
                                <div class="p-20 property-content">
                                    @if($property->featured == 1)
                                    <span style="position: absolute;margin: 0;top: 0px; right:0px;" class="badge {{ $site_theme }} new" data-badge-caption="Featured"></span>
                                    @endif

                                    <span class="card-title search-title" title="{{$property->title}}">
                                        <a href="{{ route('property.show',$property->slug) }}">{{ str_limit($property->title,25) }}</a>
                                    </span>

                                    <div class="address">
                                        <i class="small material-icons left">place</i>
                                        <span>{{ ucfirst($property->address) . ", " . 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>

                                    <h5>
                                        @if($property->purpose == 'rent')
                                            ${{ number_format($property->price) }}/Month
                                        @else
                                            ${{ number_format($property->price) }}
                                        @endif
                                        <small class="right p-r-10">{{ $property->type }} for {{ $property->purpose }}</small>
                                    </h5>
                                </div>
                            </div>
                        </div>

                    @endforeach

                    <div class="m-t-30 m-b-60 center">
                        {{ $properties->links() }}
                    </div>

                </div>

                <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 agent-message">
                                    <form class="agent-message-box" action="" method="POST">
                                        @csrf
                                        <input type="hidden" name="agent_id" value="{{ $agent->id }}">
                                        <input type="hidden" name="user_id" value="{{ auth()->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>
                </div>
            </div>

        </div>
    </section>

@endsection

@section('scripts')
    <script>
        $(function(){
            $(document).on('submit','.agent-message-box',function(e){
                e.preventDefault();

                var data = $(this).serialize();
                var url = "{{ route('property.message') }}";
                var btn = $('#msgsubmitbtn');

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    beforeSend: function() {
                        $(btn).attr("disabled", true);
                        $(btn).empty().append('LOADING...<i class="material-icons left">rotate_right</i>');
                    },
                    success: function(data) {
                        if (data.message) {
                            M.toast({html: data.message, classes:'green darken-4'})
                        }
                        $(btn).attr("disabled", false);
                    },
                    error: function(xhr) {
                        M.toast({html: xhr.statusText, classes: 'red darken-4'})
                        $(btn).attr("disabled", false);
                    },
                    complete: function() {
                        $('form.agent-message-box')[0].reset();
                        $(btn).attr("disabled", false);
                        $(btn).empty().append('SEND<i class="material-icons left">send</i>');
                    },
                    dataType: 'json'
                });

            })
        })
    </script>
@endsection