@extends('layouts.app')
@section('title', 'Maison modèle '.$model['name'].' - '.env('APP_SITENAME'))
@section('h1', 'Maison modèle '.$model['name'].' - '.env('APP_SITENAME'))

@if (1 < count($model['children']))
@section('seo-description', 'La maison modèle '.$model['name'].' est disponible en '.(count($model['children'])).' versions de '.$model['childrenMinArea'].' à '.$model['childrenMaxArea'].'m², de '.$model['childrenMinBedroomNumber'].' à '.$model['childrenMaxBedroomNumber'].' chambres')
@else
@section('seo-description', 'La maison modèle '.$model['name'].' de '.$model['childrenMinArea'].' '.$model['childrenMinBedroomNumber'].' chambres est disponible')
@endif

@section('bodyClass', 'detail')

@section('content')

<!--Inner Heading Start-->
<div class="innerHeading">
    <div class="container">
        <h1>Modèle de maison {{ $model['name'] }}</h1>
    </div>
</div>
<!--Inner Heading End-->

<div class="innercontent">
    <div class="container">

        <div id="slider" class="flexslider wow fadeInUp">
            <ul class="slides">

                @if (Agent::isMobile())
                @foreach ($model['image'] as $k => $media)
                <li><img src="https://pro.vitahome.fr/api/media/crop/800-800-FFFFFF-center-center/{{ $media['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="image {{ $model['name'] }}"></li>
                @endforeach
                @if (!empty($model['children'][0]['mediaPrivate']))
                @foreach ($model['children'][0]['mediaPrivate'] as $k => $media)
                <li><img src="https://pro.vitahome.fr/api/media/crop/800-800-FFFFFF-center-center/{{ $media['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="image {{ $model['name'] }}"></li>
                @endforeach
                @endif
                @else
                @foreach ($model['image'] as $k => $media)
                <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 {{ $model['name'] }}"></li>
                @endforeach
                @if (!empty($model['children'][0]['mediaPrivate']))
                @foreach ($model['children'][0]['mediaPrivate'] as $k => $media)
                <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 {{ $model['name'] }}"></li>
                @endforeach
                @endif
                @endif
                
            </ul>
        </div>
        <div id="carousel" class="flexslider wow fadeInUp">
            <ul class="slides">
                @foreach ($model['image'] as $k => $media)
                <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 {{ $model['name'] }}"></li>
                @endforeach
                @if (!empty($model['children'][0]['mediaPrivate']))
                @foreach ($model['children'][0]['mediaPrivate'] as $k => $media)
                <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 {{ $model['name'] }}"></li>
                @endforeach
                @endif
            </ul>
        </div>
        <div class="property_details"><br>
            <div class="row property_head wow fadeInUp">
                <div class="col-lg-8 col-md-8">
                    <h3>Maison {{ $model['name'] }}</h3>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="heart_info">
                        <div class="property_price">@if ( $model['childrenMinPrice'] > 0 ) <small>à partir de</small> {!! number_format($model['childrenMinPrice'], 0, ',', '&nbsp;') !!}&nbsp;€ @else <small>Prix sur consultation</small> @endif</div>
                    </div>
                </div>
            </div>
            @if ( $model['description'] != null )
            <div class="property_widget wow fadeInUp">
                <h3 class="desc_head">Description</h3>
                {{ $model['description'] }}
            </div>
            @endif
            <div class="property_widget wow fadeInUp">
                @if (count($model['children']) > 1)
                <h3 class="desc_head">Le modèle {{ $model['name'] }} est disponible en {{ count($model['children']) }} @if ( count($model['children']) > 1 ) versions @else version @endif</h3>
                @endif
                <div class="floor_plans faqs">
                    <div class="panel-group" id="accordion">
                        @foreach ($model['children'] as $k => $version)
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" class="bg-red" href="#collapse5">{{ $version['name'] }}</a> </h4>
                            </div>
                            <div id="collapse5" class="panel-collapse in collapse show">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            {!! nl2br($version['description']) !!}<br><br>
                                        </div>
                                        <div class="col-sm-6">
                                            <p><strong class="text-upper">Caractéristiques</strong></p>
                                            <ul class="property_list">
                                                <li><span><i class="fa fa-expand yellow" aria-hidden="true"></i>&nbsp; Surface :</span> {{ $version['area'] }}&nbsp;m²</li>
                                                <li><span><i class="fa fa-square yellow" aria-hidden="true"></i>&nbsp; Pièces :</span> {{ $version['roomNumber'] }}</li>
                                                <li><span><i class="fa fa-bed yellow" aria-hidden="true"></i>&nbsp; Chambres :</span> {{ $version['bedroomNumber'] }}</li>
                                                @if (isset($version['metadatas']['bathroomnumber']))
                                                <li><span><i class="fa fa-bath yellow" aria-hidden="true"></i>&nbsp; Nb salles de bains :</span> {{ $version['metadatas']['bathroomnumber'] }}</li>
                                                @endif
                                                @if ($version['garageArea'] != null)
                                                <li><span><i class="fa fa-bath yellow" aria-hidden="true"></i>&nbsp; Garage :</span> {{ $version['garageArea'] }}&nbsp;m<sup>2</sup></li>
                                                @endif
                                                {{--<li><strong>Prix :</strong> @if (isset($version['prixpublic'])) à partir de {!! number_format($version['prixpublic'], 0,',', '&nbsp;') !!}&nbsp;€ @else sur consultation @endif</li>--}}
                                            </ul>
                                        </div>
                                        <div class="col-sm-6">

                                            <p><strong class="text-upper">Plan</strong></p>
                                            @if ($version['groundFloorImage'] != false)
                                            <a data-toggle="modal" href='#plan-modal' id="plan" class="btn-plan" data-name="{{ $version['name'] }}" data-plan1="{{ $version['groundFloorImage']['id'] }}" data-plan2="@if ($version['floorImage'] != false) {{ $version['floorImage']['id'] }} @endif"><img class="img-responsive" src="https://pro.vitahome.fr/api/media/519-415-FFFFFF/{{ $version['groundFloorImage']['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="image plan"></a>
                                            @else
                                            <p>Plan disponible sur demande</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="plan-modal" tabindex="9999" role="dialog" aria-labelledby="plan">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-plan-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div id="carousel-plan" class="carousel slide">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </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.model.formTitle')</span>
                    </div>
                    @include('common-client-bundle::form-contact', ['confirmationUrl' => '/'.$type.'-confirmation.html', 'origin' => $origin, 'adReference' => null, '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 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();
        });

        $('.btn-plan').click(function(){
            $('#modal-plan-title').html('Plan(s) du modèle '+ $(this).data('name'));

            if($(this).data('plan1') != ''){
                $('#carousel-plan .carousel-inner').html('\
                    <div class="item active">\
                    <img src="https://pro.vitahome.fr/api/media/800-600-FFFFFF/'+$(this).data('plan1')+'.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="Plan rdc">\
                    <div class="text-center">\
                    <strong class="color"><big>Plan RDC</big></strong>\
                    </div>\
                </div>');
            }

            if($(this).data('plan2') != ''){
                $('#carousel-plan .carousel-inner').append('\
                    <div class="item">\
                    <img src="https://pro.vitahome.fr/api/media/800-600-FFFFFF/'+$(this).data('plan2')+'.jpg?token={{ env('VITAHOME_API_KEY') }}" alt="Plan rdc">\
                    <div class="text-center">\
                    <strong class="color"><big>Plan étage</big></strong>\
                    </div>\
                </div>');

                $('.carousel').append('\
                    <a class="left carousel-control" href="#carousel-plan" role="button" data-slide="prev">\
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>\
                    <span class="sr-only">Précédent</span>\
                    </a>\
                    <a class="right carousel-control" href="#carousel-plan" role="button" data-slide="next">\
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>\
                    <span class="sr-only">Suivant</span>\
                </a>');
            }

            $('#carousel-plan').carousel({wrap:true});
        });
    });
</script>

@endsection