{% extends "base.html.twig" %}
{% form_theme quick_registration_form 'Form/form_div_layout.html.twig' %}
{% set canonical_url = url(app.request.get('_route'), app.request.get('_route_params')) %}
{% set SEND_MESSAGE_CONSTANT = constant('Aqarmap\\Bundle\\ListingBundle\\Constant\\LeadTypes::SEND_MESSAGE') %}
{# Page title #}
{% block title %} {{ "%s - %s | %s"|format(location.title, 'neighborhoods.prices_guide'|trans, 'layout.app_name'|trans) }}{% endblock %}
{# Meta Description #}
{% block meta_description %}{{ location.description }}{% endblock %}
{% block htmlhead %}
<link rel="alternate" hreflang="ar" href="{{ url(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'ar'})) }}" />
<link rel="alternate" hreflang="en" href="{{ url(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'en'})) }}" />
<link rel="alternate" hreflang="x-default"
href="{{ url(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'ar'})) }}"/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{{ "%s%s"|format('@', 'layout.app_name'|trans) }}" />
<meta name="twitter:creator" content="{{ "%s%s"|format('@', 'layout.app_name'|trans) }}" />
<meta property="og:title" content="{{ "%s.%s.%s"|format('layout.app_name'|trans, 'neighborhoods.prices_guide'|trans, location.title) }}"/>
<meta property="og:description" content="{{ 'neighborhoods.sharing.description_location'|trans({'%location%': location.title}) }}" />
<meta property="og:image" content="{% if location.mainPhoto %}{{ custom_vich_uploader_asset(location.mainPhoto.file, 'file') | thumbnail('large')}}{% endif %}" />
<meta property="og:url" content="{{ url('neighborhood_main_page', {'location_slug': location.slug}) }}" />
<meta property="og:site_name" content="{{ 'layout.app_name'|trans }}" />
<meta property="fb:app_id" content="{{ facebook_app_id }}"/>
{% if location.disabled %}
<meta name="robots" content="noindex, nofollow">
{% endif %}
<link rel="canonical" href="{{ canonical_url }}"/>
{% endblock %}
{% block body %}
{% set sharingEvent = "neighborhood" %}
{% set topSellerTrigger = 'gtm-action-topsellers-lead-price-guide' %}
{% set topSellerEventAction = 'Top Sellers Price Guide' %}
<section id="{{ app.request.get('_route') }}">
<div class="container">
<div class="row">
<div class="col-md-12 hidden-xs">
<div class="pull-left flip">
{% if location.compoundFilter %}
{% set compound = 1 %}
{% else %}
{% set compound = null %}
{% endif %}
{% set neighborhood_breadcrumb = knp_menu_get( 'aqarmap.neighborhood.breadcrumb' , [], {"location": location , "compound": compound}) %}
{{ knp_menu_render(neighborhood_breadcrumb , {
'allow_safe_labels': true,
'template': 'knp_breadcrumbs.html.twig',
'currentAsLink': true,
'currentClass': 'active'
}) }}
</div>
<div class="pull-right flip">
{% if app.user %}
{% if subscribedUser %}
<a id="un-subscribe-btn" class="btn" href="{{ path('neighbourhood_remove_subscriber', {'location': location.id}) }}"> {{ "neighborhoods.unsubscribe"|trans }}</a>
{% else %}
<a id="subscribe-btn" class="btn" href="{{ path('neighbourhood_add_subscriber', {'location': location.id}) }}"> {{ "neighborhoods.subscribe"|trans }}</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div><!-- end of .container (cover & breadcrumb) -->
{% if location_statistics and isStatisticsContainsAveragePrice %}
{% include '@AqarmapNeighborhoodBundle/neighborhoodAveragePrices.html.twig' %}
{% endif %}
{% if location.getChildren|length > 0 %}
{% include '@AqarmapNeighborhoodBundle/neighborhoodSubLocations.html.twig' %}
{% endif %}
{% if location_statistics %}
{% include '@AqarmapNeighborhoodBundle/neighborhoodStatistics.html.twig' %}
{% endif %}
{% if location.rating %}
{% include '@AqarmapNeighborhoodBundle/neighborhoodRatings.html.twig' %}
{% endif %}
{# Description & Photos #}
{% if location.description or location.photos.count > 0 %}
{% include "@AqarmapNeighborhoodBundle/neighborhoodDetails.html.twig" %}
{% endif %}
{% if isEnabledFeature('web.sharing.page') %}
<div class="container">
<div class="listing-share-box" id="shareLiveListing">
<label class="share-header-mob">
{{ 'neighborhoods.share_neighborhoods'|trans({'%location%': location.title |trans}) }}
</label>
{% include '@AqarmapListingBundle/Listing/elementShareContent.html.twig' with {'url': app.request.uri} %}
</div>
<a class="listing-share-btn-container neighborhood-share-btn-container stickPermanent borderLight" data-toggle="modal" data-target="#neighborhoodShareModal">
<span class="container btn-wrapper">
<label>{{ location.title }}</label>
<span class="btn btn-default btn-share">
<i class="fa fa-share-alt"></i>
{{ 'layout.share'|trans }}
</span>
</span>
</a>
</div>
{% endif %}
{% if location and isEnabledFeature('web.topsellers.section') %}
<div class="container">
<div class="row">
<div class="col">
<div class="top-sellers-warp-cards w-100">
{% include "@AqarmapListing/ListingSearch/topSellersResponsive.html.twig" with {'trigger': topSellerTrigger, 'eventAction': topSellerEventAction, leadSourcePage: 'price_guide'} %}
</div>
</div>
</div>
</div>
<div ng-controller="listingLeadsWizardController" ng-init="initFormWizard()">
{{ include('@AqarmapUserBundle/User/listingMultiStepLeadModal.html.twig') }}
</div>
{% endif %}
{# Neighborhood Discussions #}
{% if get_setting('features', 'discussions') %}
{% include "@AqarmapNeighborhoodBundle/neighborhoodDiscussions.html.twig" %}
{% endif %}
{# Neighborhood Compund #}
{% if location.compoundFilter %}
{% if location.locationCompound %}
<div class="container">
<div class="page-header">
<h1>
{{ 'neighborhoods.information'|trans({'%location%': location.title |trans}) }}
</h1>
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-responsive table-bordered compound_info">
<tbody>
<tr>
<td class="compound_info_title" ><p class="block-label">{{ 'neighborhoods.compound.developer_name'|trans }}</p></td>
<td><p class="block-label">{% if location.locationCompound.developerName %}{{ location.locationCompound.developerName }}{% else %} -- {% endif %}</p></td>
<td class="compound_info_title"><p class="block-label">{{ 'neighborhoods.compound.project_size'|trans }}</p></td>
<td><p class="block-label">{% if location.locationCompound.projectSize %}{{ location.locationCompound.getProjectSize() }}{% else %} -- {% endif %}</p></td>
</tr>
<tr>
<td class="compound_info_title" ><p class="block-label">{{ 'neighborhoods.compound.units_count'|trans }}</p></td>
<td><p class="block-label">{% if location.locationCompound.unitsCount %}{{ location.locationCompound.unitsCount|fixArabicNumbers|raw }}{% else %} -- {% endif %}</p></td>
<td class="compound_info_title" ><p class="block-label">{{ 'neighborhoods.compound.state'|trans }}</p></td>
<td><p class="block-label">{% if location.locationCompound.state %}{{ getCompoundStatusLabel(location.locationCompound.state)|trans }}{% else %} -- {% endif %}</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
{% if location.listing %}
{% if location.listing.liveChildren is defined and location.listing.liveChildren is not empty %}
<div class="container">
<div class="page-header">
<h1>
{{ 'neighborhoods.units'|trans({'%location%': location.title |trans}) }}
</h1>
</div>
<div class="row">
<div class="col-xs-12">
{% include '@AqarmapListingBundle/Listing/units-table.html.twig' with {'units': location.listing.liveChildren} %}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
{# Compound send contact form #}
{% if location.compoundFilter %}
{% if location.listing %}
<div class="neighborhood-contact-seller listingSideForm" ng-controller="listingDetailsController" >
<div class="container">
<div class="page-header">
<h1>{{ 'neighborhoods.compound.contact_developer'|trans }}</h1>
</div>
{{ form_start(contact_seller_form) }}
{{ form_row(contact_seller_form.subject, {value : 'Re: '~ location.listing.title|title|striptags}) }}
{{ form_widget(contact_seller_form.message, {attr: {class: 'form-control','placeholder': "neighborhoods.compound.contact_seller_message_placeholder"|trans, 'ng-model': 'sellerMessageContent'}}) }}
<button type="submit" class="btn btn-primary btn-sm pull-right flip mb-2" data-gtm-listing-id="{{ location.listing.id }}" ng-click="sendEmailtoSeller($event, '{{ location.listing.id }}', '{{ SEND_MESSAGE_CONSTANT }}' )" ng-disabled="contact_seller.$invalid" onclick="gtmPushAction('gtm-btn-listing-message', 'Email')">
<span class="fa fa-paper-plane"></span> {{ 'listing.send_message'|trans }}
</button>
{{ form_end(contact_seller_form) }}
</div>
</div>
{% endif %}
{% endif %}
{# Nearest Neighbourhoods #}
{% if nearestNeighbourhoods|length > 0 %}
{% include "@AqarmapNeighborhoodBundle/neighbourhoodsFeaturedSection.html.twig" %}
{% endif %}
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mobile-breadcrumb visible-sm visible-xs">
{% set NEIGHBORHOOD_BREADCRUMB = knp_menu_get('aqarmap.neighborhood.breadcrumb', [], {
location: location,
compound: compound
}) %}
{{
knp_menu_render(NEIGHBORHOOD_BREADCRUMB , {
'allow_safe_labels': true,
'template': 'knp_breadcrumbs.html.twig',
'currentAsLink': true,
'currentClass': 'active',
})
}}
</div>
</div>
<div class="container">
<div class="discussions col-md-12">
<div class="tab-content searchResultsContainer interested-listings subsLinks more-locations-container">
{% include "@AqarmapMainBundle/Default/locationsSubLinks.html.twig" %}
</div>
</div>
</div>
</section>
{% if isEnabledFeature('web.sharing.page') %}
{% include "@AqarmapNeighborhoodBundle/neighborhoodSharing.html.twig" %}
{% endif %}
{% endblock %}
{% block footer %}
{% include "footer.v2.html.twig" %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
{# Graph Data #}
var months = [];
var dataSets = [];
var avg_price_data = [];
var propety_type_title ;
var property_type_color ;
{% for history in historyData %}
propety_type_title = "{{ history['title'] }}";
{% for data in history['data']['average_price'] %}
{% if data['value'] %}
avg_price_data.push({{ data['value'] }});
months.push("{{ data['date']|localizeddate('none', 'none', app.request.locale, null, "MMMM") ~ "-" ~ data['date']|date("Y") }}");
{% endif %}
{% endfor %}
{% if loop.index == 2 %}
property_type_color = '#f38b00';
{% else %}
property_type_color = '#0080bb';
{% endif %}
dataSets.push({
label: propety_type_title,
fill: false,
lineTension: 0.1,
backgroundColor: property_type_color,
borderColor: property_type_color,
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: property_type_color,
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: property_type_color,
pointHoverBorderColor: property_type_color,
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: avg_price_data,
spanGaps: false,
});
avg_price_data = [];
{% endfor %}
var data = {
labels: Array.from(new Set(months)),
datasets: dataSets
};
{% if isEnabledFeature('web.pricegraph.resize') %}
var ctx = $(".statistics");
ctx.each(function(index) {
var statistics = new Chart(this, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toLocaleString();
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
callback: function(label, index, labels) {
return label.toLocaleString();
}
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
});
{% else %}
var ctx = $("#statistics");
var statistics = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return tooltipItem.yLabel.toLocaleString();
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
callback: function(label, index, labels) {
return label.toLocaleString();
}
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
{% endif %}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Place",
"url":"{{ url(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" ,
"description":"{{ location.description }}" ,
"geo": {
"@type": "GeoCoordinates",
"latitude": "{{ location.centerLat }}",
"longitude": "{{ location.centerLng }}"
},
"name": "{{ location.title }}"
}
</script>
<script>
$(document).ready(function() {
var neighborhoodDescription = $('#neighborhoodDescription');
neighborhoodDescription.addClass('hidden-neighborhood-description')
var moreTrans = Translator.trans('more_link');
var lessTrans = Translator.trans('less_link');
$('.see-more').html(moreTrans);
$('.see-more').on('click', function() {
var seeMoreText = $(this).html();
if (seeMoreText == moreTrans) {
$(this).html(lessTrans);
} else if (seeMoreText == lessTrans) {
$(this).html(moreTrans);
}
if (neighborhoodDescription.hasClass('hidden-neighborhood-description')) {
neighborhoodDescription.removeClass('hidden-neighborhood-description')
neighborhoodDescription.addClass('visible-neighborhood-description')
} else if (neighborhoodDescription.hasClass('visible-neighborhood-description')) {
neighborhoodDescription.removeClass('visible-neighborhood-description')
neighborhoodDescription.addClass('hidden-neighborhood-description')
$("#neighborhoodDescription")[0].scrollIntoView();
}
})
})
</script>
{% endblock %}