@extends('layouts.master', ['view' => 'news-detail'])

@section('meta')
    <title>{{ $page->translation->meta_title }}</title>
    <meta name="description" content="{{ $page->translation->meta_description }}">
@endsection

@section('editable_content')
    <div class="image-wrapper">

        <div class="content-placeholder">


            <div class="grid-row">
                <div class="grid-col">
                    @include('layouts.partials.breadcrumb')
                </div>
            </div>
            <div class="grid-row top">
                {{-- Impression block --}}


                {{-- Title content block --}}
                <div class="grid-col col-4 offset-1">
                    <h1>{{ $page->translation->name }}</h1>

                    <a href="/projecten" class="back-to-projects"><span class="icon-grid-view"></span> Terug naar
                        overzicht</a>
                </div>
                <div class="grid-col col-5 offset-1">
                    <p>{{ $page->translation->sub_title }}</p>
                </div>

            </div>
            <div class="grid-row main row">
                <div class="images grid-col col-7">
                    @for($i = 0; $i < 3; $i++)
                        @if($i == 4) break; @endif
                        <figure class="img-{{$i}}" onclick="showSlider({{$i}});">
                            @if(!empty($page->images[$i]))
                                <span class="medium"
                                      style="background-image: url('{{$page->images[$i]->medium_image_url}}');"></span>
                                <span class="large"
                                      style="background-image: url('{{$page->images[$i]->large_image_url}}');"></span>
                            @endif
                        </figure>
                    @endfor
                    @include('layouts.svg.bigHexagon')
                </div>
                <div class="description grid-col col-4 offset-1">
                    <h2>Beschrijving</h2>
                    <table>
                        <tr>
                            <td>Type dak:</td>
                            <td>{{ $page->translation->roof_type }}</td>
                        </tr>
                        <tr>
                            <td>Type project:</td>
                            <td>{{ $page->project_category->name }}</td>
                        </tr>
                        <tr>
                            <td>Oplevering:</td>
                            <td>{{ $page->translation->construction_year }}</td>
                        </tr>
                        <tr>
                            <td>Locatie:</td>
                            <td>{{ $page->translation->location_string }}</td>
                        </tr>
                    </table>
                    @if(!empty($page->translation->meta_description))
                        <p><b>Bijzonderheden:</b><br/>{{ $page->translation->meta_description }}</p>
                    @endif

                    <a href="/offerte-aanvragen" class="offerte-button button blue arrow">Offerte opvragen</a>
                </div>

            </div>

            <div class="grid-row bottom row">
                <div class="grid-col col-12 reference-linkholder">
                    <a href="/projecten">Overzicht projecten</a>
                    <br/>
                    <span class="yellowline"></span>
                </div>
            </div>

            <div class="grid-row nearby-projects full-row">
                <div class="grid-row">
                    <div class="grid-col col-14">
                        <h1>Projecten in de buurt van:</h1>
                        <h3>{{ $page->translation->name }}</h3>
                        @foreach($nearbyProjects as $item)
                            <article id="{{$item[0]->id}}"
                                     class="grid-col col-3 @if(!isset($item[0]->images) || $item[0]->images->count() == 0) no-image @endif">
                                <a href="/{{$item[0]->translation->route->route}}">
                                    <figure @if($item[0]->images->count() != 0) style="background-image: url('{{$item[0]->images->first()->medium_image_url}}');"@endif>
                                        <span class="overlay"></span>
                                    </figure>
                                </a>
                                <div class="content">
                                    <h4>{{$item[1]}}</h4>

                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="grid-row full-row">
                {{--<div class="home-referenties">--}}
                {{--<div class="grid-row full-row">--}}
                {{--<section class="grid-col references-text">--}}
                {{--<h2>{{$homeBlock['referenceBlock']->description}}</h2>--}}
                {{--<a href="{{$homeBlock['referenceBlock']->link}}"--}}
                {{--class="button blue arrow">{{$homeBlock['referenceBlock']->link_text}}</a>--}}
                {{--</section>--}}
                {{--<section class="grid-col col-7 references-imgHolder">--}}
                {{--@if(isset($homeBlock['referenceBlock']->images[0]))--}}
                {{--<img class="large" alt="impression image"--}}
                {{--src="{{$homeBlock['referenceBlock']->images[0]->large_image_url}}"/>--}}
                {{--<img class="medium" alt="impression image" src="{{$dynamicContent->images[0]->medium_image_url}}"/>--}}
                {{--@endif--}}
                {{--</section>--}}
                {{--</div>--}}
                {{--</div>--}}
                <div class="home-referenties">
                    <div class="grid-row full-row">
                        <div class="grid-row">
                        <section class="grid-col references-text">
                            <h2>Benieuwd wat wij te bieden hebben?</h2>
                            <a href="/diensten" class="button blue arrow">Diensten</a>
                        </section>
                        <section class="grid-col col-7 references-imgHolder">
                            @if(isset($homeBlock['referenceBlock']->images[0]))
                                {{--<img class="large" alt="impression image"--}}
                                {{--src="{{$homeBlocks['referenceBlock']->images[0]->large_image_url}}"/>--}}
                                {{--<img class="medium" alt="impression image" src="{{$dynamicContent->images[0]->medium_image_url}}"/>--}}
                                <figure class="large"
                                        style="background-image: url('{{$homeBlock['referenceBlock']->images[0]->large_image_url}}');">
                                </figure>
                            @endif
                        </section>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="image-slider">
            <div class="slider-bg"></div>

            <div class="image-holder">
                <span class="close-button">&times;</span>
                @if($page->images->count() != 0)
                    <figure>
                        @foreach($page->images as $key => $image)
                            <div data-image="{{$key}}" class="image @if($key == 0) active @endif">
                                    <span class="medium"
                                          style="background-image: url('{{$image->medium_image_url}}');"></span>
                                <span class="large"
                                      style="background-image: url('{{$image->large_image_url}}');"></span>
                            </div>
                        @endforeach
                    </figure>
                    @if($page->images->count() > 1)
                        <div class="image-slider-nav">
                            <span class="previous nav-button" data-image="{{sizeof($page->images)-1}}"><</span>
                            <span class="next nav-button" data-image="1">></span>
                        </div>
                    @endif
                @endif
            </div>

        </div>
    </div>
@endsection

@section('extra-js')
    <script src="/js/jquery.touchSwipe.min.js"></script>
    <script src="/js/overviewSlider.js"></script>
@endsection