@extends('frontend.layouts.app')

@section('styles')

@endsection

@section('content')

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

                <div class="col s12 m4 card">

                    <h2 class="sidebar-title">Search Property</h2>

                    <form class="sidebar-search" action="{{ route('search.do')}}" method="POST">
                        @csrf
                        <div class="searchbar">
                            <div class="input-field col s12">
                                <input type="text" name="city" id="autocomplete-input-sidebar" class="autocomplete custominputbox" autocomplete="off" value="{{ !empty($city) ? ucfirst($city) : '' }}">
                                <label for="autocomplete-input-sidebar">Enter City or State</label>
                            </div>

                            <div class="input-field col s12">
                                <select name="type" class="browser-default">
                                    <option value="" disabled selected>Choose Type</option>
                                    <option {{ $type == 'house' ? 'selected' : '' }} value="house">House</option>
                                    <option {{ $type == 'condo/co-op' ? 'selected' : '' }} value="condo/co-op">Condo/Co-op</option>
                                    <option {{ $type == 'townhome' ? 'selected' : '' }} value="townhome">Townhome</option>
                                    <option {{ $type == 'apartment' ? 'selected' : '' }} value="apartment">Apartment</option>
                                    <option {{ $type == 'multi-family' ? 'selected' : '' }} value="multi-family">Multi-Family</option>
                                    <option {{ $type == 'mobile/manufactured' ? 'selected' : '' }} value="mobile/manufactured">Mobile/Manufactured</option>
                                    <option {{ $type == 'other' ? 'selected' : '' }} value="other">Other</option>
                                </select>
                            </div>

                            <div class="input-field col s12">
                                <select name="purpose" class="browser-default">
                                    <option value="" disabled selected>Choose Purpose</option>
                                    <option {{ $purpose == 'rent' ? 'selected' : '' }} value="rent">Rent</option>
                                    <option {{ $purpose == 'sale' ? 'selected' : '' }} value="sale">Sale</option>
                                </select>
                            </div>

                            <div class="input-field col s12">
                                <select name="bedroom" class="browser-default">
                                    <option value="" disabled selected>Choose Bedroom</option>
                                    @foreach($bedroomdistinct as $bedroom_num)
                                        <option {{ $bedroom ==  $bedroom_num->bedroom ? 'selected' : '' }} value="{{$bedroom_num->bedroom}}">{{$bedroom_num->bedroom}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="input-field col s12">
                                <select name="bathroom" class="browser-default">
                                    <option value="" disabled selected>Choose Bathroom</option>
                                    @foreach($bathroomdistinct as $bathroom_num)
                                        <option {{ $bathroom ==  $bathroom_num->bathroom ? 'selected' : '' }} value="{{$bathroom_num->bathroom}}">{{$bathroom_num->bathroom}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="input-field col s12">
                                <input type="number" name="minprice" id="minprice" class="custominputbox" value="{{ !empty($minprice) ? $minprice : '' }}">
                                <label for="minprice">Min Price</label>
                            </div>

                            <div class="input-field col s12">
                                <input type="number" name="maxprice" id="maxprice" class="custominputbox" value="{{ !empty($maxprice) ? $maxprice : '' }}">
                                <label for="maxprice">Max Price</label>
                            </div>

                            <div class="input-field col s12">
                                <input type="number" name="minarea" id="minarea" class="custominputbox" value="{{ !empty($minarea) ? $minarea : '' }}">
                                <label for="minarea">Floor Min Area</label>
                            </div>

                            <div class="input-field col s12">
                                <input type="number" name="maxarea" id="maxarea" class="custominputbox" value="{{ !empty($maxarea) ? $maxarea : '' }}">
                                <label for="maxarea">Floor Max Area</label>
                            </div>

                            <div class="input-field col s12">
                                <div class="switch">
                                    <label>
                                        <input {{ !empty($featured) ? 'checked="checked"' : '' }} type="checkbox" name="featured">
                                        <span class="lever"></span>
                                        Featured
                                    </label>
                                </div>
                            </div>
                            <div class="input-field col s12">
                                <button class="btn btnsearch {{ $site_theme }}" type="submit">
                                    <i class="material-icons left">search</i>
                                    <span>SEARCH</span>
                                </button>
                            </div>
                        </div>

                    </form>

                </div>

                <div class="col s12 m8">

                    @foreach($properties as $property)
                        <div class="card horizontal">
                            <div class="card-image">
                                @if(Storage::disk('public')->exists('property/'.$property->image) && $property->image)
                                    <img src="{{ Storage::url('property/'.$property->image) }}" alt="{{ $property->title }}">
                                @else
                                    <img src="{{ asset('frontend/images/placeholder/placeholder-property-search-image.jpg') }}" alt="{{ $property->title }}">
                                @endif
                            </div>
                            <span style="position: absolute;margin: 0;top: 0px;left:0px;" class="badge {{ $site_theme }} new" data-badge-caption="{{ ucfirst($property->type) . " for " . $property->purpose }}"></span>
                            <div class="card-stacked">
                                <div class="card-content property-content ">
                                    <span class="card-title search-title tooltipped" data-position="top" data-tooltip="{{ $property->title }}">
                                        <a href="{{ route('property.show',$property->slug) }}">{{ str_limit( $property->title, 40 ) }}</a>
                                    </span>

                                    <div class="address">
                                        <i class="small material-icons left">place</i>
                                        <span>{{ ucfirst($property->address) }}</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">comment</i>
                                        <span>Comments: {{ $property->comments_count}}</span>
                                    </div>

                                    <div class="address">
                                        <i class="small material-icons left">refresh</i>
                                        <span>Updated: {{ $property->updated_at->diffForHumans() }}</span>
                                    </div>

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

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

                </div>

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

@endsection

@section('scripts')

@endsection