@extends('layouts.master')

@section('editable_content')

    <div class="header-image streamer"  @if(isset($page->content->home_slogan) && $page->content->home_slogan->images->count() != 0) style="background-image: url('{{$page->content->home_slogan->images->first()->large_image_url}}');" @endif>
        <div class="content-container">
            {{--@if(isset($page->content->home_slogan))--}}
                {{--<h1>{{ $page->content->home_slogan->translation->name }}</h1>--}}
                {{--{{ $page->content->home_slogan->translation->description }}--}}
            {{--@else--}}
                {{--<h1>Voeg een tekstblok toe met<br/>code_name 'home_slogan'</h1>--}}
                {{--<p>Titel + Omschrijving + 1 afbeelding. In de titel kan eventueel &lt;br/&gt; gezet<br/>worden om een enter te maken.--}}
                {{--</p>--}}
            {{--@endif--}}
        </div>
    </div>

    <div class="intro-row">
        <div class="content-container">

            {{--@foreach($page->content as $key => $block)
                {{($block->translation->description)}}<br/>
            @endforeach--}}


            <div class="intro-block">
                @if(isset($page->content->home_introduction))
                    <h3>{{ $page->content->home_introduction->translation->name }}</h3>
                    {{ $page->content->home_introduction->translation->description }}
                @else
                    <h3>Voeg een tekstblok toe met code_name 'home_introduction'</h3>
                    <p>Titel + omschrijving</p>
                @endif
            </div>

            <div class="intro-btns">
                {{--<div class="btn-call button-linking" data-href="tel:{{Config::get('business.phone.call')}}">--}}
                    {{--<div class="icon">--}}
                        {{--<img id="call-icon" class="svg" src="/img/icons/call_icon.svg"/>--}}
                    {{--</div>--}}
                    {{--<div class="seperator-10"></div>--}}
                    {{--<span class="mobile-hide-number">{{Config::get('business.phone.display')}}</span>--}}
                {{--</div>--}}
                <div class="btn-contact button-linking" data-href="{{url('contact')}}">
                    Contact
                    <div class="seperator-10"></div>
                    <div class="icon">
                        <img id="contact-icon" class="svg" src="/img/icons/arrow_right_icon.svg"/>
                    </div>
                </div>
            </div>

        </div>
    </div>

    @if(isset($page->content->home_content_1) || isset($page->content->home_content_2))
        <div class="home-content-blocks">
            <div class="content-container">
                <div class="content-block">
                    @if(isset($page->content->home_content_1) && $page->content->home_content_1->active)
                        <h2>{{ $page->content->home_content_1->translation->name }}</h2>
                        {{ $page->content->home_content_1->translation->description }}

{{--                        @if(!empty($page->content->home_content_1->translation->link) && !empty($page->content->home_content_1->translation->link_text))--}}
{{--                            <a class="button" href="{{$page->content->home_content_1->translation->link}}">--}}
{{--                                {{$page->content->home_content_1->translation->link_text}}--}}
{{--                            </a>--}}
{{--                        @endif--}}
                    @elseif(isset($page->content->home_content_2) && $page->content->home_content_2->active)
                        <h2>{{ $page->content->home_content_2->translation->name }}</h2>
                        {{ $page->content->home_content_2->translation->description }}

{{--                        @if(!empty($page->content->home_content_2->translation->link) && !empty($page->content->home_content_2->translation->link_text))--}}
{{--                            <a class="button" href="{{$page->content->home_content_2->translation->link}}">--}}
{{--                                {{$page->content->home_content_2->translation->link_text}}--}}
{{--                            </a>--}}
{{--                        @endif--}}
                    @endif
                </div>

                <div class="content-block right-block @if(!(isset($page->content->home_content_1) && $page->content->home_content_1->active && isset($page->content->home_content_2) && $page->content->home_content_2->active)) hidden-mobile @endif">
                    @if(isset($page->content->home_content_1) && $page->content->home_content_1->active && isset($page->content->home_content_2) && $page->content->home_content_2->active)
                        <h2>{{ $page->content->home_content_2->translation->name }}</h2>
                        {{ $page->content->home_content_2->translation->description }}

{{--                        @if(!empty($page->content->home_content_2->translation->link) && !empty($page->content->home_content_2->translation->link_text))--}}
{{--                            <a class="button" href="{{$page->content->home_content_2->translation->link}}">--}}
{{--                                {{$page->content->home_content_2->translation->link_text}}--}}
{{--                            </a>--}}
{{--                        @endif--}}
                    @else
                        <img class="placeholder" alt="Home placeholder" src="/img/home-image-placeholder.jpeg"/>
                    @endif
                </div>
            </div>
        </div>
    @endif


    <div class="discover-row">
        <div class="content-container">

            @if(isset($page->content->home_options))
                <h2>{{ $page->content->home_options->translation->name }}</h2>
                {{ $page->content->home_options->translation->description }}
            @else
                <h2>Voeg een tekstblok toe met code_name 'home_options'</h2>
                <p>Titel + omschrijving + afbeeldingen voor hieronder</p>
            @endif

            <div class="seperator-50"></div>
            <div class="discover-block">

                {{--Item 1--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-1 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[0])) style="background-image: url(' {{$page->content->home_options->images[0]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_1.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_1.link')">@lang('translations.home_option_1.name')</a></div>
                </div>

                {{--Item 2--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-2 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[1])) style="background-image: url(' {{$page->content->home_options->images[1]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_2.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_2.link')">@lang('translations.home_option_2.name')</a></div>
                </div>

                {{--Item 3--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-3 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[2])) style="background-image: url(' {{$page->content->home_options->images[2]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_3.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_3.link')">@lang('translations.home_option_3.name')</a></div>
                </div>

                {{--Item 4--}}
                <div class="discover-item-wrapper">
                    <div class="discover-item item-4 button-linking" @if(isset($page->content->home_options) && isset($page->content->home_options->images[3])) style="background-image: url(' {{$page->content->home_options->images[3]->medium_image_url}}'); " @endif data-href="@lang('translations.home_option_4.link')">
                    </div>
                    <div class="discover-item-content"><a href="@lang('translations.home_option_4.link')">@lang('translations.home_option_4.name')</a></div>
                </div>

            </div>

        </div>

    </div>

    @include('layouts.partials.cta')

@endsection