@extends('layout.main')
@section('title') @if( ! empty($title)) {{ $title }} | @endif @parent @endsection

@section('main')

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">

            <div class="bg-white">
                <div class="sidebar-filter-wrapper">

                    @if($enable_monetize)
                    {!! get_option('monetize_code_listing_sidebar_top') !!}
                    @endif

                    {{ Form::open([ 'method'=>'get', 'id' => 'listingFilterForm']) }}

                    <div class="row">
                        <div class="col-xs-12">
                            <p class="listingSidebarLeftHeader">@lang('app.search')
                                <span id="loaderListingIcon" class="pull-right" style="display: none;"><i
                                        class="fa fa-spinner fa-spin"></i></span>
                            </p>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-container">
                            <i class="fas fa-search icon"></i>
                            <input type="text" class="form-control advanced-search" name="q" value="{{ request('q') }}"
                                placeholder="@lang('app.search___')" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class=" col-sm-6 col-xs-12">
                                <button class="btn btn-primary btn-block rnd-btn"><i class="fa fa-search"></i>
                                    @lang('app.search')</button>
                            </div>
                        </div>
                    </div>

                    {{ Form::close() }}

                </div>

            </div>


            <div class="bg-white">
                <div class="sidebar-filter-wrapper">

                    @if($enable_monetize)
                    {!! get_option('monetize_code_listing_sidebar_top') !!}
                    @endif

                    {{ Form::open([ 'method'=>'get', 'id' => 'listingFilterForm']) }}

                    <div class="row">
                        <div class="col-xs-12">
                            <p class="listingSidebarLeftHeader">@lang('app.advance_search')
                                <span id="loaderListingIcon" class="pull-right" style="display: none;"><i
                                        class="fa fa-spinner fa-spin"></i></span>
                            </p>
                        </div>
                    </div>

                    <div class="input-container">
                        <i class="fas fa-search icon"></i>
                        <input type="text" class="form-control advanced-search" name="q" value="{{ request('q') }}"
                            placeholder="@lang('app.search___')" />
                    </div>

                    <hr />

                    <div class="form-group">
                        <label>@lang('app.select_a_category')</label>
                        <div class="input-container">
                            <i class="fas fa-toolbox icon"></i>
                            <select class="form-control select2 advanced-search" name="type" multiple="multiple">
                                <option value="">@lang('app.select_a_category')</option>
                                <option value="apartment">@lang('app.apartment')</option>
                                <option value="condos">@lang('app.condos')</option>
                                <option value="house">@lang('app.house')</option>
                                <option value="land">@lang('app.land')</option>
                                <option value="commercial_space">@lang('app.commercial_space')</option>
                                <option value="villa">@lang('app.villa')</option>
                            </select>
                        </div>
                    </div>

                    <hr />
                    <div class="input-container ">
                        <i class="fas fa-globe-africa icon"></i>
                        <select class="form-control select2 ad-search" name="country">
                            <option value="">@lang('app.select_a_country')</option>

                            @foreach($countries as $country)
                            <option value="{{ $country->id }}"
                                {{ request('country') == $country->id ? 'selected' :'' }}>{{ $country->country_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="input-container ">
                        <i class="fas fa-city icon"></i>
                        <select class="form-control select2 ad-search" id="state_select" name="state">
                            <option value=""> @lang('app.select_state') </option>
                            @if($selected_countries)
                            @foreach($selected_countries->states as $state)
                            <option value="{{ $state->id }}" {{ request('state') ==  $state->id ? 'selected':'' }}>
                                {{ $state->state_name }}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="input-container ">
                        <i class="fas fa-city icon"></i>
                        <select class="form-control select2 ad-search" id="city_select" name="city">
                            <option value=""> @lang('app.select_city') </option>
                            @if($selected_states)
                            @foreach($selected_states->cities as $city)
                            <option value="{{ $city->id }}" {{ request('city') ==  $city->id ? 'selected':'' }}>
                                {{ $city->city_name }}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>

                    <hr />
                    <div class="form-group">
                        <label>@lang('app.price_min_max')</label>

                        <div class="row">
                            <div class="col-xs-9">
                                <div class="input-container ">
                                    <i class="fas fa-minus-circle icon"></i>
                                    <input type="number" class="form-control advanced-search" name="min_price"
                                        value="{{ request('min_price') }}" placeholder="@lang('app.min_price')" />
                                </div>
                                <div class="input-container ">
                                    <i class="fas fa-plus-circle icon"></i>
                                    <input type="number" class="form-control advanced-search" name="max_price"
                                        value="{{ request('max_price') }}" placeholder="@lang('app.max_price')" />
                                </div>
                            </div>
                            <div class="col-xs-6">

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

                    <hr />
                    <div class="form-group">
                        <label>@lang('app.property_type')</label>

                        <div class="checkbox">
                            <label for="type_apartment" class="radio-inline">
                                <input type="radio" value="apartment" id="type_apartment" name="type"
                                    {{ request('type') == 'apartment'? 'checked="checked"' : '' }}>
                                @lang('app.apartment')
                            </label>
                        </div>

                        <div class="checkbox">
                            <label for="type_condos" class="radio-inline">
                                <input type="radio" value="condos" id="type_condos" name="type"
                                    {{ request('type') == 'condos'? 'checked="checked"' : '' }}>
                                @lang('app.condos')
                            </label>
                        </div>

                        <div class="checkbox">
                            <label for="type_house" class="radio-inline">
                                <input type="radio" value="house" id="type_house" name="type"
                                    {{ request('type') == 'house'? 'checked="checked"' : '' }}>
                                @lang('app.house')
                            </label>
                        </div>

                        <div class="checkbox">
                            <label for="type_land" class="radio-inline">
                                <input type="radio" value="land" id="type_land" name="type"
                                    {{ request('type') == 'land'? 'checked="checked"' : '' }}>
                                @lang('app.land')
                            </label>
                        </div>


                        <div class="checkbox">
                            <label for="type_commercial_space" class="radio-inline">
                                <input type="radio" value="commercial_space" id="type_commercial_space" name="type"
                                    {{ request('type') == 'commercial_space'? 'checked="checked"' : '' }}>
                                @lang('app.commercial_space')
                            </label>
                        </div>

                        <div class="checkbox">
                            <label for="type_villa" class="radio-inline">
                                <input type="radio" value="villa" id="type_villa" name="type"
                                    {{ request('type') == 'villa'? 'checked="checked"' : '' }}>
                                @lang('app.villa')
                            </label>
                        </div>

                    </div>

                    <hr />
                    <div class="form-group">
                        <div class="row">
                            <div class=" col-sm-6 col-xs-12">
                                <button class="btn btn-primary btn-block rnd-btn"><i class="fa fa-search"></i>
                                    @lang('app.filter')</button>
                            </div>
                            <div class=" col-sm-6 col-xs-12">
                                <a href="{{ route('listing') }}" class="btn btn-default btn-block"><i
                                        class="fa fa-refresh"></i> @lang('app.reset')</a>
                            </div>
                        </div>
                    </div>

                    {{ Form::close() }}
                    <div class="clearfix"></div>

                    @if($enable_monetize)
                    {!! get_option('monetize_code_listing_sidebar_bottom') !!}
                    @endif

                </div>

            </div>





        </div>

        <div class="col-md-5">
            <div class="row">
                <div class="col-sm-12">

                    <?php
                        $allAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'all'])));
                        $personalAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'personal'])));
                        $businessAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'business'])));

                        ?>

                    <div class="listingTopFilterBar">
                        <span class="totalFoundListingTop">@lang('app.total') <strong>{{ $ads->total() }}</strong>
                            @lang('app.ads_founds') New page</span>

                        <ul class="listingViewIcon pull-right">
                            <li class="dropdown shortByListingLi">
                                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown"
                                    class="dropdown-toggle" href="#">@lang('app.short_by') <span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a
                                            href="{{ request()->fullUrlWithQuery(['shortBy'=>'price_high_to_low']) }}">@lang('app.price_high_to_low')</a>
                                    </li>
                                    <li><a
                                            href="{{ request()->fullUrlWithQuery(['shortBy'=>'price_low_to_high']) }}">@lang('app.price_low_to_high')</a>
                                    </li>
                                    <li><a
                                            href="{{ request()->fullUrlWithQuery(['shortBy'=>'latest']) }}">@lang('app.latest')</a>
                                    </li>
                                </ul>
                            </li>

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

            @if($enable_monetize)
            <div class="row">
                <div class="col-sm-12">
                    {!! get_option('monetize_code_listing_above_premium_ads') !!}
                </div>
            </div>
            @endif

            <div class="ad-box-wrap" id="listing-desktop-view">


                @if($enable_monetize)
                <div class="row">
                    <div class="col-sm-12">
                        {!! get_option('monetize_code_listing_above_regular_ads') !!}
                    </div>
                </div>
                @endif
                {{-- Edit this one  --}}
                @if($ads->total() > 0)

                <h3 style="margin-bottom:20px">@lang('app.listing_results')</h3>
                <div class="col-sm-12">
                    @foreach ($ads as $ad)
                    <div class="row listing-entry" style="margin-bottom:20px" data-toggle="modal"
                        data-target="#property-page" data-featureimg="{{ media_url($ad->feature_img) }}"
                        data-title="{{ $ad->title }}" data-price="{{themeqx_price_ng($ad)}}"
                        data-type="{{ ucfirst($ad->type) }}" data-unitspace="{{$ad->square_unit_space}}"
                        data-city="{{$ad->city->city_name}}" data-agent="{{$ad->seller_name}}"
                        data-agentnumber="{{$ad->seller_phone}}" data-agentemail="{{$ad->seller_email}}"
                        data-priceplan="{{$ad->price_plan}}" data-urgent="{{$ad->mark_ad_urgent}}"
                        data-posted="{{$ad->created_at->diffForHumans()}}" data-desc="{{$ad->description}}"
                        data-purpose="{{$ad->purpose}}" data-baths="{{$ad->attached_bath.' BATHROOMS'}}"
                        data-latitude="{{$ad->latitude}}" data-longitude="{{$ad->longitude}}"
                        data-pricetoset="{{$ad->price}}" data-address="{{$ad->address}}" data-adid="{{$ad->id}}"
                        data-sharelink="{{ route('single_ad', $ad->slug) }}" data-slug="{{$ad->slug}}" @if($ad->beds)
                        data-beds="{{ $ad->beds.' BEDROOMS'}}"
                        @else
                        data-beds="NO BEDROOMS"
                        @endif
                        @if(!$ad->is_my_favorite())
                        data-favourite="FALSE"
                        @else
                        data-favourite="TRUE"
                        @endif
                        @if($ad->floor)
                        data-floor="{{ $ad->floor.' FLOORS'}}"
                        @else
                        data-floor="1 FLOOR"
                        @endif
                        @if($ad->dining_space)
                        data-diningspace="{{ $ad->dining_space.' DINING SPACES'}}"
                        @else
                        data-diningspace="NO DINING SPACES"
                        @endif
                        @if($ad->living_room)
                        data-livingroom="{{ $ad->living_room.' LIVING ROOMS'}}"
                        @else
                        data-livingroom="NO LIVING ROOMS"
                        @endif>
                        <div class="col-xs-6">
                            <img itemprop="image" src="{{ media_url($ad->feature_img) }}" class="img-responsive"
                                alt="{{ $ad->title }}" style="margin-top:20px;">
                        </div>
                        <div class="col-xs-6">
                            <h4 class="title" style="margin-top:5px">{{ $ad->title }}</h4>
                            <p>{{str_limit($ad->address, 10)}}</p>
                            <p>
                                <a class="location text-muted" href="{{ route('listing', ['city' => $ad->city->id]) }}">
                                    <i class="fa fa-map-marker"></i> {{ $ad->city->city_name }} </a>
                                <span style="margin-left:5px"><i class="fa fa-clock-o"></i>
                                    {{ $ad->created_at->diffForHumans() }}</span>
                            </p>
                            <p class="price"> <span itemprop="price" content="{{$ad->price}}">
                                    {{ themeqx_price_ng($ad) }} </span></p>
                            <div class="row">
                                <div class="col-xs-6">
                                    <p><i class="fa fa-building"></i> {{ ucfirst($ad->type) }}</p>
                                    <p><i class="fa fa-arrows-alt "></i> {{ $ad->square_unit_space.' '.$ad->unit_type }}
                                    </p>
                                </div>
                                <div class="col-xs-6">
                                    @if($ad->beds)
                                    <p><i class="fa fa-bed"></i> {{ $ad->beds.' '.trans('app.bedrooms') }}</p>
                                    @endif
                                    @if($ad->floor)
                                    <p><i class="fa fa-bars"></i> {{ $ad->floor}} Floors</p>
                                    @else
                                    <p><i class="fa fa-bars"></i> 1 {{trans('app.floor') }}</p>
                                    @endif
                                </div>

                            </div>


                        </div>
                    </div>

                    @endforeach
                </div>





                @else
                <div class="alert alert-warning">
                    <h2><i class="fa fa-info-circle"></i> @lang('app.search_not_found') </h2>
                </div>
                @endif

                @if($enable_monetize)
                <div class="row">
                    <div class="col-sm-12">
                        {!! get_option('monetize_code_listing_below_regular_ads') !!}
                    </div>
                </div>
                @endif
            </div>
            <div class="ad-box-wrap" id="listing-mobile-view">
                @if($enable_monetize)
                <div class="row">
                    <div class="col-sm-12">
                        {!! get_option('monetize_code_listing_above_regular_ads') !!}
                    </div>
                </div>
                @endif
                @if($ads->total() > 0)
                <h3 style="margin-bottom:20px">@lang('app.listing_results')</h3>
                <div class="col-sm-12">
                    @foreach ($ads as $ad)
                    <div class="col-md-6 col-sm-6">
                        <div itemscope itemtype="http://schema.org/Product"
                            class="kupeza-listing ads-item-thumbnail ad-box-{{$ad->price_plan}}"
                            style="border:1px solid rgba(92, 92, 92, 0.5)">
                            <div class="ads-thumbnail kupeza-thumbnail">
                                <a href="{{ route('single_ad', $ad->slug) }}">
                                    <img itemprop="image" src="{{ media_url($ad->feature_img) }}" class="img-responsive"
                                        alt="{{ $ad->title }}">
                                </a>
                                <div class="top-left">
                                    <p>{{ ucfirst($ad->price_plan) }}</p>
                                </div>
                                <div class="top-right">
                                    @if($ad->mark_ad_urgent == '1')
                                    <p>Urgent</p>
                                    @endif
                                </div>
                                <div class="bottom-left">
                                    <p>{{ $ad->purpose }}</p>
                                </div>

                            </div>
                            <div class="kupeza-ads-caption">
                                <div class="kupeza-ads-text">
                                    <h4><a href="{{ route('single_ad', $ad->slug) }}" title="{{ $ad->title }}"><span
                                                itemprop="name">{{ str_limit($ad->title, 20) }} </span></a></h4>
                                    <p><a class="location text-muted"
                                            href="{{ route('listing', ['city' => $ad->city->id]) }}"> <i
                                                class="fa fa-map-marker"></i> {{ $ad->city->city_name }} </a></p>

                                    <p class="price"> <span itemprop="price" content="{{$ad->price}}">
                                            {{ themeqx_price_ng($ad) }} </span>
                                    </p>

                                    <table class="table table-responsive property-box-info"
                                        style="margin-top: 25px;border:none;">
                                        <tr>
                                            <td> <i class="fa fa-building"></i> {{ str_limit($ad->type , 10) }}</td>
                                            <td><i class="fa fa-bed"></i> {{ $ad->beds.' '.trans('app.bedrooms') }}</td>
                                        </tr>


                                        <tr>
                                            <td><i class="fa fa-arrows-alt "></i>
                                                {{ $ad->square_unit_space.' '.$ad->unit_type }}</td>
                                            @if ($ad->floor)
                                            <td><i class="fa fa-bars" aria-hidden="true"></i>
                                                {{ $ad->floor.' '.trans('app.floor') }} </td>
                                            @else
                                            <td><i class="fa fa-bars" aria-hidden="true"></i> 1 floor </td>
                                            @endif
                                        </tr>

                                    </table>
                                </div>
                                <div class="kupeza-ads-row-2">
                                    <table class="table table-responsive property-box-info"
                                        style="margin-bottom: 0;border:none;">
                                        <tr>
                                            <td>
                                                <p class="text-muted"><i class="fa fa-clock-o"></i> Posted On</p>
                                            </td>
                                            <td>
                                                <p class="date-posted text-muted">
                                                    {{ $ad->created_at->diffForHumans() }}</p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="table-grey-row">
                                    <table class="table table-responsive property-box-info" style="border:none;">
                                        <tr>
                                            <td>
                                                <p><i class="fa fa-users" aria-hidden="true"></i>Brokered By</p>
                                            </td>
                                            <td>
                                                <p class="date-posted text-muted">{{ str_limit($ad->user->name , 10) }}
                                                </p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            {{-- @if($ad->price_plan == 'premium')
                                                                            <div class="ribbon-wrapper-green"><div class="ribbon-green">{{ ucfirst($ad->price_plan) }}
                        </div>
                    </div>
                    @endif
                    @if($ad->mark_ad_urgent == '1')
                    <div class="ribbon-wrapper-red">
                        <div class="ribbon-red">@lang('app.urgent')</div>
                    </div>
                    @endif --}}
                </div>
            </diV>

            @endforeach
        </div>

        @endif

    </div>


    <div class="row">
        <div class="col-xs-12">
            {{ $ads->appends(request()->input())->links() }}
        </div>
    </div>
</div>

<div class="col-md-4">

    <div class="sidebar-widget">
        <h3>@lang('app.feature_agents')</h3>
        @foreach($agents as $agent)
        <div class="sidebar-feature-agents">
            <div class="row">
                <div class="col-xs-3">
                    <a href="{{ route('listing', ['user_id'=>$agent->id]) }}">
                        <img src="{{ $agent->get_gravatar() }}" class="img-circle img-responsive" /> </a>
                </div>
                <div class="col-xs-9">
                    <a href="{{ route('listing', ['user_id'=>$agent->id]) }}">
                        <h5>{{ $agent->name }}</h5>
                        <p class="text-muted"><i class="fa fa-map-marker"></i> {{ $agent->get_address()}}</p>
                        <p class="text-muted"><i class="fa fa-building"></i> {{ $agent->ads->count() }}
                            @lang('app.estates')
                            @if($agent->phone), <i class="fa fa-phone"></i> {{ $agent->phone }} @endif
                        </p>
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>


</div>

</div>
</div>

</div>

<!-- Property Modal-->
<div class="modal fade" id="property-page" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" style="width:90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>

                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">

                        <div class="modal-images-col" style="padding: 0 15px;">

                        </div>
                    </div>
                    <div class="col-md-4 content-area">
                        <div style="margin-right: 10px;">
                            <!--<h3 class="modal-title"></h3>-->
                            <h4 class="modal-price" style="margin-top: 0px;"></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fas fa-map-marker"></i> <span
                                    class="modal-address"></span></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fas fa-map-marker"></i> <span
                                    class="modal-city"></span></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-user"></i> <span
                                    class="modal-agent"></span></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fas fa-envelope"></i> <span
                                    class="modal-agent-email"></span></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-phone"></i> <span
                                    class="modal-agent-number"></span></h4>
                            <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-clock-o"></i> <span
                                    class="modal-posted"></span></h4>
                            <h4 style="margin-top: 15px;margin-bottom:15px;">Share this Property</h4>
                            <a href="" target="_blank" class="modal-fb-link">
                                <i class="fab fa-facebook-square fb-modal"></i>
                            </a>
                            <a href="" class="modal-twitter-link">
                                <i class="fab fa-twitter-square twitter-modal"></i>
                            </a>
                            <a href="javascript:;" class="modal-icon" id="save-as-favourite" data-slug="">

                            </a>

                            <a href="" class="modal-icon modal-report-ad">
                                <h4>
                                    <i class="fas fa-ban "></i>
                                    Report Ad
                                </h4>
                            </a>
                        </div>
                        <div class="row" style="margin-right: 10px;">
                            <div class="col-sm-4">
                                <p class="modal-urgent"></p>
                            </div>
                            <div class="col-sm-4">
                                <p class="modal-price-plan"></p>
                            </div>
                            <div class="col-sm-4">
                                <p class="modal-purpose"></p>
                            </div>

                        </div>

                        <div class="row attributes-row">
                            <div class="col-sm-6">
                                <h4 class="display-text"><i class="fa fa-building"></i> <span class="modal-type"></span>
                                </h4>
                                <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-bars"></i> <span
                                        class="modal-floors"></span></h4>
                                <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-bath "></i> <span
                                        class="modal-baths"></span></h4>
                                <h4 style="margin-top: 15px;" class="display-text"><i class="fas fa-utensils"></i> <span
                                        class="modal-dining-space"></span></h4>
                            </div>
                            <div class="col-sm-6">
                                <h4 class="display-text"><i class="fa fa-bed"></i> <span class="modal-beds"></span></h4>
                                <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-arrows-alt "></i>
                                    <span class="modal-unitspace"></span></h4>
                                <h4 style="margin-top: 15px;" class="display-text"><i class="fa fa-television "></i>
                                    <span class="modal-living-room"></span></h4>
                            </div>
                        </div>
                        <div class="row desc-row" style="margin-bottom: 50px;">
                            <div class="col-sm-12">
                                <p class="modal-desc display-text">

                                </p>
                            </div>
                        </div>
                        <div class="row"
                            style="padding:20px 5px;padding-top: 10px;margin-right:10px;border-top: 5px solid #811fd3;border-radius: 5px;">
                            <div id="modal-map" style="width: 100%; height: 400px; margin: 0px 0;"></div>
                        </div>
                        <div class="row"
                            style="padding:20px 5px;padding-top: 10px;margin-right:10px;border-top: 5px solid #811fd3;border-radius: 5px;">
                            <h3 class="modal-subtitle">Monthly Expenses</h3>
                            <div class="expenses">
                                <table style="width:100%;">
                                    <tr>
                                        <td>
                                            <i class="fas fa-home"></i>
                                        </td>
                                        <td>
                                            <h4 class="display-text">Mortgage</h4>
                                        </td>
                                        <td>
                                            <h3 class="mortgageamount expense-amount"></h3>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fas fa-house-damage"></i>
                                        </td>
                                        <td>
                                            <h4 class="display-text">Insurance</h4>
                                        </td>
                                        <td>
                                            <h3 class="expense-amount">750</h3>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fas fa-tint"></i>
                                        </td>
                                        <td>
                                            <h4 class="display-text">Water</h4>
                                        </td>
                                        <td>
                                            <h3 class="expense-amount">500</h3>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fas fa-wifi"></i>
                                        </td>
                                        <td>
                                            <h4 class="display-text">Internet</h4>
                                        </td>
                                        <td>
                                            <h3 class="expense-amount">650</h3>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-television"></i>
                                        </td>
                                        <td>
                                            <h4 class="display-text">Television</h4>
                                        </td>
                                        <td>
                                            <h3 class="expense-amount">900</h3>
                                        </td>
                                    </tr>
                                </table>
                                {{-- <div class="expense-column">
                                </div> --}}
                            </div>
                            <h4 style="text-align:center" class="display-text">Total Monthly Expenses </h4>
                            <h3 style="text-align:center" class="expense-amount">ZMK <span
                                    class="total-expenses"></span></h3>
                        </div>
                        <div class="row"
                            style="padding:20px 5px;padding-top: 10px;margin-right:10px;border-top: 5px solid #811fd3;border-radius: 5px;">
                            <h3 class="modal-subtitle">Mortgage Calculator</h3>
                            <div class="">
                                <div class="form-group">
                                    <h4 class="display-text">Price</h4>
                                    <input type="number" onchange="recalculateMortgage()"
                                        onkeyup="recalculateMortgage()" class="form-control" id="principal">
                                </div>
                                <div class="form-group" style="margin-top:35px">
                                    <h4 class="display-text">Interest Rate</h4>
                                    <input type="number" onchange="recalculateMortgage()"
                                        onkeyup="recalculateMortgage()" class="form-control" id="rate" min="0"
                                        max="100">
                                </div>
                            </div>
                            <div class="">
                                <div class="form-group">
                                    <h4 class="display-text">Years</h4>
                                    <input type="number" onchange="recalculateMortgage()"
                                        onkeyup="recalculateMortgage()" class="form-control" id="years" min="1"
                                        max="20">
                                </div>
                                <div class="form-group" style="margin-top:35px">
                                    <h4 class="display-text">Mortgage Amount</h4>
                                    <h3 style="text-align: center;" class="expense-amount">ZMK <span
                                            class="mortgageamount"></span> Per Month
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>



            </div>

        </div>
    </div>
</div>
<!-- Property Modal End-->
<!-- Img Modal-->
<div class="kupeza-modal hidden-modal" onclick="toggleKupezaModal()">
    <div class="image-modal-close">
        <i class="fas fa-times"></i>
    </div>
    <div class="kupeza-modal-img-container">
        <img src="" alt="" class="kupeza-modal-img">
    </div>

</div>

{{-- Report Ad Modal --}}


@endsection


@section('page-js')
<script
    src="https://maps.googleapis.com/maps/api/js?key={{get_option('google_map_api_key')}}&libraries=places&callback=initMap"
    async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
    integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<script>
    var map;
        var modalMap
        
        function initMap() {
            
            // set map 
            modalMap = new google.maps.Map(document.getElementById('modal-map'), {
                center: {lat: -15.3875, lng: 28.3228 },
                zoom: 15 
            });
                
            

        }

        $(document).ready(function() {
            $('#shortBySelect').change(function () {
                var form_input = $('#listingFilterForm').serialize();
                location.href = '{{ route('listing') }}?' + form_input + '&shortBy=' + $(this).val();
            });
        });
        
        

        $('#property-page').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var title = button.data('title');
            var featureImg = button.data('featureimg');
            var price = button.data('price');
            var beds = button.data('beds');
            var type = button.data('type');
            var unitspace = button.data('unitspace');
            var city = button.data('city')
            var floors = button.data('floor');
            var agent = button.data('agent');
            var agentnumber = button.data('agentnumber');
            var agentemail = button.data('agentemail');
            var priceplan = button.data('priceplan');
            var urgent = button.data('urgent');
            var posted = button.data('posted');
            var desc = button.data('desc');
            var livingroom = button.data('livingroom');
            var diningspace = button.data('diningspace');
            var purpose = button.data('purpose');
            var baths = button.data('baths');
            var longitude = button.data('longitude');
            var latitude = button.data('latitude');
            var priceToSet = button.data('pricetoset');
            var address = button.data('address');
            var ad_id = button.data('adid');
            var sharelink = button.data('sharelink');
            var slug = button.data('slug');
            var favourite = button.data('favourite');
            var marker;
            
            console.log(favourite);
            // callChart();
            
            var modal = $(this);
            modal.find('.modal-title').text(title);
            modal.find('.modal-feature-img').attr('src', featureImg);
            modal.find('.modal-beds').text(beds);
            modal.find('.modal-price').text(price);
            modal.find('.modal-type').text(type);
            modal.find('.modal-unitspace').text(unitspace);
            modal.find('.modal-city').text(city);
            modal.find('.modal-floors').text(floors);
            modal.find('.modal-agent').text(agent);
            modal.find('.modal-agent-number').text(agentnumber);
            modal.find('.modal-agent-email').text(agentemail);
            modal.find('.modal-price-plan').text(priceplan);
            modal.find('.modal-posted').text(posted);
            modal.find('.modal-desc').text(desc);
            modal.find('.modal-purpose').text(purpose);
            modal.find('.modal-address').text(address);
            modal.find('.modal-fb-link').attr('href', "https://www.facebook.com/sharer/sharer.php?u=" + sharelink);
            modal.find('.modal-twitter-link').attr('href', "https://twitter.com/intent/tweet?url=" + sharelink);
            modal.find("#save-as-favourite").attr('data-slug',slug);
            modal.find(".modal-report-ad").attr('href', 'report-ad/' + slug)

            if(favourite == "FALSE"){
                modal.find('#save-as-favourite').empty();
                modal.find('#save-as-favourite').append("<h4><i class='far fa-star'></i>Mark As Favourite</h4>");
            
            } else{
                modal.find('#save-as-favourite').empty();
                modal.find('#save-as-favourite').append("<h4><i class='fas fa-star'></i>Remove From Favourite</h4>");            
            }
            if(urgent == 1){
                modal.find('.modal-urgent').text("URGENT");    
            } else{
                modal.find('.modal-urgent').hide();
            }
            if(livingroom != 0 || livingroom != null){
                modal.find('.modal-living-room').text(livingroom);    
            } else{
                modal.find('.modal-living-room').hide();
            }
            if(diningspace != 0 || diningspace != null){
                modal.find('.modal-dining-space').text(diningspace);    
            } else{
                modal.find('.modal-dining-space').hide();
            }
            if(baths != 0 || baths != null){
                modal.find('.modal-baths').text(baths);    
            } else{
                modal.find('.modal-baths').hide();
            }
            

            // Input Mortgage Data
            modal.find('#principal').val(priceToSet);
            modal.find('#rate').val(0.5);
            modal.find('#years').val(20);
            // To calculate mortgage
            var stepOne = 1 + 0.005 ;//this is the rate + 1
            var stepTwo = Math.pow(stepOne, 240);
            var stepThree = stepTwo * 0.005;
            var stepFour = stepTwo -1;
            var stepFive = stepThree/stepFour;
            var mortgageAmount = Math.round(Number(priceToSet) * stepFive);
            //Calculate images
            modal.find('.mortgageamount').text(mortgageAmount);
            modal.find('.total-expenses').text(mortgageAmount + 750 + 500 + 650 + 900);
            
            
            // Remove Images from modal            
            $(".modal-images-col").empty();

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

            $.ajax({
                url:"getimages/" + ad_id,
                type:"GET",
                dataType:"JSON",
                success:function(data){
                    if(data.hasImages){                        
                        //url hardcoded in till i can find a better solution
                        //Online url https://www.kupeza.co.zm/uploads/images/
                        //local url http://localhost/kupeza/uploads/images/
                        data.ad_images.forEach((item, i) =>{
                            if(i == 0){
                                $(".modal-images-col").append("<div class='modal-load-images' style='margin:0;width:100%;cursor: pointer;'><img src='https://www.kupeza.co.zm/uploads/images/" + item.media_name +"' class='img-responsive modal-img' onclick='displayModal(\"" + item.media_name + "\")' style='padding:5px;width:100%;'></div>");
                            } else{
                                $(".modal-images-col").append("<div class='modal-load-images' style='margin:0;cursor: pointer;'><img src='https://www.kupeza.co.zm/uploads/images/" + item.media_name +"' class='img-responsive modal-img' onclick='displayModal(\"" + item.media_name + "\")' style='padding:5px'></div>");
                            }
                        });
                        
                        
                        console.log(data.ad_images);
                    } else{
                        console.log("No Images");
                    }
                },
                error:function(status){                
                    console.log(status);
                }
            });
            
            
            
            // var midpoint = {lat: latitude, lng: longitude };
            // marker.setPosition(midpoint);

        });

        function recalculateMortgage(){
            var mortgageRate= $("#rate").val();
            var Principal = $("#principal").val();
            var years = $("#years").val();
            mortgageRate = mortgageRate/100
            years *= 12;

            var stepOne = 1 + mortgageRate ;//this is the rate + 1
            var stepTwo = Math.pow(stepOne, years);
            var stepThree = stepTwo * mortgageRate;            ;
            var stepFour = stepTwo -1;
            var stepFive = stepThree/stepFour;
            var mortgageAmount = Math.round(Principal * stepFive);
            if(mortgageRate === 0){
                $('.mortgageamount').text("Calculating...");
                $('.total-expenses').text("Calculating...");
            } else{
                $('.mortgageamount').text(mortgageAmount);
                $('.total-expenses').text(mortgageAmount + 750 + 500 + 650 + 900);
            }
        }

        // $(".modal-img").click(function(){
    
        // });
        $(function(){
            $("#save-as-favourite").click(function(){
                var selector = $(this);
                var slug = selector.data('slug');
                //console.log("clicked");
                $.ajax({
                    type : 'POST',
                    url : '{{ route('save_ad_as_favorite') }}',
                    data : { slug : slug, action: 'add', _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        // console.log(data);
                        // console.log(data.action)
                        if (data.status == 1){
                            // selector.html(data.msg);
                            if(data.action === 'added'){
                                $('#save-as-favourite').empty();
                                $('#save-as-favourite').append("<h4><i class='far fa-star'></i>Mark As Favourite</h4>");
                            } 
                            if(data.action === 'removed'){
                                $('#save-as-favourite').empty();
                                $('#save-as-favourite').append("<h4><i class='fas fa-star'></i>Remove From Favourite</h4>");
                            }
                        }else {
                            if (data.redirect_url){
                                location.href= data.redirect_url;
                            }
                        }
                    }
                });
            })
        })
        function displayModal(imgSrc){
            // $(this).attr('src')
            // var imgSrc = this.getAttribute("src");  
            $(".kupeza-modal").toggleClass("hidden-modal");
            $(".kupeza-modal-img").attr("src", "https://www.kupeza.co.zm/uploads/images/" + imgSrc);

            console.log(imgSrc);
        }

        function toggleKupezaModal(){
            $(".kupeza-modal").toggleClass("hidden-modal");
        }

        




        function generate_option_from_json(jsonData, fromLoad){
            //Load Category Json Data To Brand Select
            if (fromLoad === 'category_to_sub_category'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> <?php echo trans('app.select_a_sub_category') ?> </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].category_name +' </option>';
                    }
                    $('#sub_category_select').html(option);
                    $('#sub_category_select').select2();
                }else {
                    $('#sub_category_select').html('<option value="">@lang('app.select_a_sub_category')</option>');
                    $('#sub_category_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }else if (fromLoad === 'category_to_brand'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> <?php echo trans('app.select_a_brand') ?> </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].brand_name +' </option>';
                    }
                    $('#brand_select').html(option);
                    $('#brand_select').select2();
                }else {
                    $('#brand_select').html('<option value="">@lang('app.select_a_brand')</option>');
                    $('#brand_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }else if(fromLoad === 'country_to_state'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> @lang('app.select_state') </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].state_name +' </option>';
                    }
                    $('#state_select').html(option);
                    $('#state_select').select2();
                }else {
                    $('#state_select').html('<option value="" selected> @lang('app.select_state') </option>');
                    $('#state_select').select2();
                }
                $('#loaderListingIcon').hide('slow');

            }else if(fromLoad === 'state_to_city'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> @lang('app.select_city') </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].city_name +' </option>';
                    }
                    $('#city_select').html(option);
                    $('#city_select').select2();
                }else {
                    $('#city_select').html('<option value="" selected> @lang('app.select_city') </option>');
                    $('#city_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }
        }

        $(function(){

            $('[name="country"]').change(function(){
                var country_id = $(this).val();
                $('#loaderListingIcon').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('get_state_by_country') }}',
                    data : { country_id : country_id,  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        generate_option_from_json(data, 'country_to_state');
                    }
                });
            });
            $('[name="state"]').change(function(){
                var state_id = $(this).val();
                $('#loaderListingIcon').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('get_city_by_state') }}',
                    data : { state_id : state_id,  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        generate_option_from_json(data, 'state_to_city');
                    }
                });
            });
        });
        $(function(){
            $('#showGridView').click(function(){
                $('.ad-box-grid-view').hide();
                $('.ad-box-list-view').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('switch_grid_list_view') }}',
                    data : { grid_list_view : 'grid',  _token : '{{ csrf_token() }}' },
                });
            });
            $('#showListView').click(function(){
                $('.ad-box-grid-view').show();
                $('.ad-box-list-view').hide();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('switch_grid_list_view') }}',
                    data : { grid_list_view : 'list',  _token : '{{ csrf_token() }}' },
                });
            });
        });
</script>

<script>
    @if(session('success'))
            toastr.success('{{ session('success') }}', '<?php echo trans('app.success') ?>', toastr_options);
        @endif
</script>
@endsection