@extends('layouts.app')

@section('title', $ad['title'].' - #'.$ad['reference'])
@section('h1', $ad['title'])
@section('seo-description', 'Consultez cette annonce de '.$ad['title'].' à '. number_format($ad['price'], 0, ',', ' ') .' €. Référence:'.$ad['reference'])

@section('bodyClass', 'detail')
@section('content')



<!--Inner Heading Start-->
<div class="innerHeading">
    <div class="container">
        <h1>{{ $ad['title'] }} <span class="visible-ref">{{ $ad['reference'] }}</span></h1>
        <h2 class="visible-ref">Projet de construction à {{ $ad['land']['city'] }} - {{ $ad['reference'] }}</h2>
    </div>
</div>
<!--Inner Heading End-->
<div class="innercontent">
    <div class="container">
        <div id="slider" class="flexslider wow fadeInUp">
            <ul class="slides">
                @foreach ($ad['media'] as $k => $media)
                    @if ($media['type']!='application/pdf')
                        <li><img src="https://pro.vitahome.fr/api/media/crop/1110-600-FFFFFF-center-center/{{ $media['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="image {{ $ad['title'] }}"></li>
                    @endif
                @endforeach
            </ul>
        </div>
        <div id="carousel" class="flexslider wow fadeInUp">
            <ul class="slides">
                @foreach ($ad['media'] as $k => $media)
                    @if ($media['type']!='application/pdf')
                    <li><img src="https://pro.vitahome.fr/api/media/crop/210-135-FFFFFF-center-center/{{ $media['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="image {{ $ad['title'] }}"></li>
                    @endif
                @endforeach
            </ul>
        </div>
        <div class="property_details"><br>
            <div class="row property_head wow fadeInUp">
                <div class="col-lg-8 col-md-8">
                    <h3>{{ $ad['title'] }}</h3>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="heart_info">
                        <div class="property_price">@if ( $ad['price'] > 0 ){!! number_format($ad['price'], 0, ',', '&nbsp;') !!}&nbsp;€ @else <small>Prix sur consultation</small> @endif</div>
                    </div>
                </div>
            </div>
            @if ( $ad['description'] != null )
            <div class="property_widget wow fadeInUp">
                @if (!empty($ad['house']))
                <h3 class="desc_head">A propos de cette offre de maison avec terrain</h3>
                @else
                <h3 class="desc_head">A propos de ce terrain</h3>
                @endif
                {!! nl2br($ad['description']) !!}
                <p><strong>{{ trim($ad['signature']) }}</strong></p>
                <p><small>{{ $ad['mention'] }}</small></p>
            </div>
            @endif
            <hr>
            <div class="property_widget wow fadeInUp">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong class="caps red">Caractéristiques</strong></p>
                        <ul class="property_list">
                            @if (!empty($ad['house']))
                            <li><span><i class="fa fa-home yellow" aria-hidden="true"></i>&nbsp; Modèle présenté :</span> {{ $ad['house']['name'] }}</li>
                            <li><span><i class="fa fa-expand yellow" aria-hidden="true"></i>&nbsp; Surface :</span> {{ $ad['house']['area'] }}&nbsp;m²</li>
                            <li><span><i class="fa fa-square yellow" aria-hidden="true"></i>&nbsp; Pièces :</span> {{ $ad['house']['roomNumber'] }}</li>
                            <li><span><i class="fa fa-bed yellow" aria-hidden="true"></i>&nbsp; Chambres :</span> {{ $ad['house']['bedroomNumber'] }}</li>
                            @if (isset($ad['house']['bathroomnumber']))
                            <li><span><i class="fa fa-bath yellow" aria-hidden="true"></i>&nbsp; Nb salle de bains :</span> {{ $ad['house']['bathroomnumber'] }}</li>
                            @endif

                            @if ($ad['house'] != null)
                            <li><span><i class="fa fa-bath yellow" aria-hidden="true"></i>&nbsp; Garage :</span> {{ $ad['house']['garageArea'] }}&nbsp;m<sup>2</sup></li>
                            @endif
                            @endif
                            <li><span><i class="fa fa-map-marker yellow" aria-hidden="true"></i>&nbsp; Commune :</span> {{ $ad['land']['postCode'] }} {{ $ad['land']['city'] }}</li>
                            <li><span><i class="fa fa-square yellow" aria-hidden="true"></i>&nbsp; Surface terrain :</span> {{ $ad['land']['surface'] }}&nbsp;m²</li>
                            <li><span><i class="fa fa-home yellow" aria-hidden="true"></i>&nbsp; En lotissement :</span> @if ($ad['land']['landType'] == "Lotissement") oui @else non @endif</li>
                            <li><span><i class="fa fa-euro-sign yellow" aria-hidden="true"></i>&nbsp; Prix :</span> {!! number_format($ad['land']['price'], 0,',','&nbsp;') !!}&nbsp; €</li>
                            {{--<li><strong>Prix :</strong> @if (isset($version['prixpublic'])) à partir de {!! number_format($version['prixpublic'], 0,',', '&nbsp;') !!}&nbsp;€ @else sur consultation @endif</li>--}}
                        </ul>
                        <hr>
                        <p><strong class="caps red">Informations complémentaires</strong></p>
                        {!! $ad['land']['extraContent'] !!}<br><br>
                    </div>
                    <div class="col-md-6">
                        <p><strong class="caps red">Localisation</strong></p>
                        <div id="map-single" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Start contact v2 form area-->
<div class="buy-wrap wow fadeInUp">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="formcol contact-btn">
                    <div class="sec-title text-center">
                        <span class="h2 yellow">@lang('messages.page.detail.'.$type.'.formTitle')</span>
                    </div>
                    @include('common-client-bundle::form-contact', ['confirmationUrl' => '/'.$type.'-confirmation.html', 'origin' => $origin, 'adReference' => $ad['reference'],'companyId' => $company['id'] , 'dpt' => $company['coveredDepartment'], 'buttonCss' => 'sub bg-yellow red'])

                </div>
            </div>
        </div>
    </div>
</div>
<!--End contact v2 form area-->

@endsection

@section('extraJs')
<script src="{{ asset('vendor/common-client-bundle/js/contact-form.js') }}"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#btn-etude').click(function(e){
            e.preventDefault();
            $('html, body').animate({
                scrollTop:$("#vitahomeForm").offset().top - 100
            }, '1000');
            $('#vitahomeForm input:visible:first').focus();
        });

        var map;

        var datas = [{"id":1,"title":"{{ $ad['land']['city'] }} ({{ $ad['land']['postCode'] }})","latitude":"{{ $ad['land']['latitude'] }}","longitude":"{{ $ad['land']['longitude'] }}","link":"@if ($type == 'terrain') {{ route('terrains-city', ['citySlug' => $ad['land']['citySlug']]) }} @else {{ route('offresTM-city', ['citySlug' => $ad['land']['citySlug']]) }} @endif","content":""}];

        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            map = new google.maps.Map(document.getElementById('map-single'), {
                center: { lat: {{ $ad['land']['latitude'] }}, lng: {{ $ad['land']['longitude'] }} },
                zoom: 10
            });

            var currentInfoWindow = null;



            var bounds = new google.maps.LatLngBounds();


            var markers = [];

            $.each(datas, function(key, data) {
                var latLng = new google.maps.LatLng(data.latitude, data.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
});

markers.push(marker);

var infowindow = new google.maps.InfoWindow({
    content:   '<div class="infowindow  text-center">\
    <h4><strong>' + data.title + '</strong></h4>\
    <a class="btn bg-yellow red" href="'+ data.link +'">Voir toutes les offres</a>\
</div>',
hideCloseButton: true,
});

marker.addListener('click', function() {
    if (currentInfoWindow != null) {
        currentInfoWindow.close();
    }
    infowindow.open(map, marker);
    currentInfoWindow = infowindow;
});

bounds.extend(latLng);
});

//var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});



}
});
</script>
@endsection