@extends('layouts.master')

@section('editable_content')

    <div class="ajax-container services-detail" id="{{$page->code_name}}" data-color-type="{{$page->colorType}}">

        <nav class="sub-menu">
            <ul>
                <li class="overview @if($page->code_name == 'services') active @endif ">
                    <a data-pjax data-code-name="services" href="/{{$links->services->route}}"></a>
                </li>
                @foreach($page->siblings as $serviceMenuItem)
                    <li class=" @if($serviceMenuItem->code_name == $page->code_name) active @endif ">
                        <a data-pjax data-code-name="services"
                           href="/{{$links->{$serviceMenuItem->code_name}->route }}">
                        </a>
                    </li>
                @endforeach
            </ul>
        </nav>

        <div class="title">
            <div class="pre-title loaded-animation">
                <a data-pjax data-code-name="services"
                   href="/{{$links->services->route}}">{{$links->services->name}}</a>
                <p>{{$page->letter}}{{ KommaLang::get('discover') }}</p>
            </div>
            <div class="main-title loaded-animation">
                <h1>
                    {{$page->translation->name}}
                </h1>
            </div>
        </div>

        <a data-pjax data-code-name="services" class="backToOverview"
           href="/{{$links->services->route}}">@lang('translations.backToOverview')</a>

        <section class="content service-block loaded-animation">

            @if($page->content->translation->description != '[]')
                @include('layouts.partials.dynamic.dynamicBlocks')
            @endif

        </section>
        <section class="image animation-part service-block {{$page->code_name}}">
            <div class="shape ">
                @if(in_array($page->code_name, ['graphicDesign']))
                    @include('layouts.svg.circle')
                @elseif(in_array($page->code_name, ['signage', 'posMaterial']))
                    @include('layouts.svg.triangle')
                @elseif(in_array($page->code_name, ['fleetMarketing', 'boatWrapping']))
                    @include('layouts.svg.square')
                @elseif(in_array($page->code_name, ['carWrapping', 'fabric']))
                    @include('layouts.svg.hexagon')
                @endif
            </div>

            <div class="placeholder">
                {{--<a href="">--}}
                <img src="/img/services/{{$page->code_name}}.png"/>
                <p class="button">
                    {{ KommaLang::get('showRealisations') }}
                </p>
                {{--</a>--}}
            </div>
        </section>

        <a data-pjax data-code-name="services" class="next-service main-view"
           href="/{{$links->{$page->next->code_name}->route}}">
            <p>{{$links->{$page->next->code_name}->name}}</p>
            <span></span>
        </a>

        <div class="open-realisations animation-part">
            <p>@lang('translations.realisations')</p>
            <span></span>
        </div>

        <section class="projects">
            @foreach($page->projects()->with(['images','translations'])->orderBy('projects.lft')->get() as $key => $project)
                <article data-project="{{$key}}">

                    <div class="title-placeholder">
                        @if(isset($project->client))
                            <h2>{{$project->client}}</h2><br/>
                        @endif
                        @if($project->translations->count() != 0)
                            <h3>{{$project->translations->first()->name}}</h3>
                        @endif
                    </div>

                    @if($project->images->count() != 0)
                        <figure>
                        <span class="original lazyload"
                              style="background-image: url('{{$project->images->first()->medium_image_url}}');"
                              data-src="{{$project->images->first()->original_image_url}}"></span>
                            <span class="large lazyload"
                                  style="background-image: url('{{$project->images->first()->medium_image_url}}');"
                                  data-src="{{$project->images->first()->large_image_url}}"></span>
                            <span class="medium lazyload"
                                  style="background-image: none"
                                  data-src="{{$project->images->first()->medium_image_url}}"></span>
                        </figure>
                    @endif

                    @if($project->translations->count() != 0 && isset($project->translations->first()->description) && $project->translations->first()->description != '')
                        <div class="quote">
                            <div class="text">
                                {{$project->translations->first()->description}}
                            </div>
                            <span>{{$project->translations->first()->author}}
                                , {{$project->translations->first()->function}}</span>
                        </div>
                    @endif
                </article>
            @endforeach
            @if($page->projects->count() > 1)
                <div class="navigator">
                    <span class="previous nav-button">‹</span>
                    <span class="next nav-button">›</span>
                </div>
            @endif

            <a data-pjax data-code-name="services" class="next-service mobile-view"
               href="/{{$links->{$page->next->code_name}->route}}">
                <p>{{$links->{$page->next->code_name}->name}}</p>
                <span></span>
            </a>

        </section>
        <div class="close-button">
            <div class="left-corner corner">@include('layouts.svg.corner')</div>
            <div class="right-corner corner">@include('layouts.svg.corner')</div>
            x
        </div>

    </div>
@endsection