@extends('layouts.app')

@section('title', __('messages.page.finitionList.title'). ' - ')

@section('extraCss')
<link rel="stylesheet" href="{{ asset('/vendor/fancybox/jquery.fancybox-1.3.4.css') }}" type="text/css" media="screen" />
@endsection

@section('h1', 'Les constructions de Maisons IDEOZ 33')

@section('bodyClass', 'list')

@section('content')
<div role="main" class="main">
    <section class="page-top">
        <div class="container">
            <div class="page-top-in">
                <h2><span>{{ __('messages.page.finitionList.title') }}</span></h2>
            </div>
        </div>
    </section>
    <section class="pgl-properties pgl-bg-grey">
        <div class="container">
            <div class="properties-full">
                <div class="row align-row">
                    @foreach ($contents as $production)
                        <div class="col-md-4 col-sm-6 animation">
                            <div class="pgl-property">
                                <div class="property-thumb-info">
                                    <div class="property-thumb-info-image">
                                        <a href="https://pro.vitahome.fr/api/media/crop/1600-1200-FFFFFF-center-center/{{ $production['media']['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}" class="gallery" rel="gallery">
                                            @if (!empty($production['media']))
                                                <img alt="image {{ $production['title'] }}" class="img-responsive" src="https://pro.vitahome.fr/api/media/crop/396-265-FFFFFF-center-center/{{ $production['media']['id'] }}.jpg?token={{ env('VITAHOME_API_KEY') }}">
                                            @else
                                                <img alt="image par défaut" class="img-responsive" src="/images/properties/property-1.jpg">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
</div>
@endsection


@section('extraJs')
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/vendor/fancybox/jquery.fancybox-1.3.4.pack.js') }}"></script>
<script type="text/javascript" src="{{ asset('/vendor/fancybox/jquery.easing-1.3.pack.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("a.gallery").fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600,
            'speedOut'      :   200,
            'overlayShow'   :   true,
            'showNavArrows' :   true,
            'overlayColor'  :   '#000'
        });
    });
</script>
@endsection