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

@section('editable_content')

    <a class="return-to-overview" href="/{{$links->service->route}}">
        <span class="arrow">@include('svg.arrow')</span>
        <p>@lang('translations.returnToOverview')</p>
    </a>

    <div class="color-wrapper">
        @include('layouts.partials.navigation', ['shadow' => true])

        <div class="project-detail-content">

            <div class="background">
                <span class="left"></span>
                <span class="right"></span>
            </div>


            <div class="grid-row">

                @include('layouts.partials.projects.subMenu')

                <div class="content">
                    <h1 class="mobile">{{ $page->project->translation->name}}</h1>
                    @if(count($page->project->translation->projectDescription) > 0)
                        <div class="grid-row">
                            <div class="grid-col text">
                                <h1 class="desktop">{{ $page->project->translation->name}}</h1>
                                {{ $page->project->translation->projectDescription[0]->description }}
                            </div>

                            <div class="grid-col images">
                                @if(!empty($page->project->translation->projectDescription[0]->images) && count($page->project->translation->projectDescription[0]->images) > 0)
                                    @foreach(['medium', 'small'] as $imageSize)
                                        <span style="background-image: url('{{ $page->project->translation->projectDescription[0]->images[0]->{$imageSize.'_image_url'} }}');"></span>
                                    @endforeach


                                <picture>
                                    <source media="(max-width: 425px)"
                                            srcset="{{$page->project->translation->projectDescription[0]->images[0]->small_image_url}}">
                                    <img src="{{$page->project->translation->projectDescription[0]->images[0]->medium_image_url}}"
                                         alt="image">
                                </picture>
                                @endif
                            </div>
                        </div>
                    @endif
                    @if(count($page->project->translation->projectDescription) > 1)
                        <div class="grid-row">
                            <div class="grid-col images">
                                @if(!empty($page->project->translation->projectDescription[1]->images) && count($page->project->translation->projectDescription[1]->images) > 0)
                                    @foreach(['medium', 'small'] as $imageSize)
                                        <span style="background-image: url('{{ $page->project->translation->projectDescription[1]->images[0]->{$imageSize.'_image_url'} }}');"></span>
                                    @endforeach


                                <picture>
                                    <source media="(max-width: 425px)"
                                            srcset="{{$page->project->translation->projectDescription[1]->images[0]->small_image_url}}">
                                    <img src="{{$page->project->translation->projectDescription[1]->images[0]->medium_image_url}}"
                                         alt="image">
                                </picture>
                                @endif
                            </div>
                            <div class="grid-col text">
                                {{ $page->project->translation->projectDescription[1]->description }}
                            </div>
                        </div>
                    @endif
                </div>

            </div>

        </div>

    </div>

@endsection

@section('extra-js')
    <script src="/js/form.js"></script>
    <script>
        //Define form
        var smallOfferForm = new Form('smallOfferForm', ['name', 'phone']);

        // Submit button
        document.querySelector('#smallOfferForm .submit').addEventListener('click', function () {

            smallOfferForm.validate();
            if (smallOfferForm.valid) smallOfferForm.send();

        });
    </script>

    <script type="text/javascript" src="/js/googleMaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-FTocuOW1v6VPNAG8z2h6yT94pof8K3A"
            type="text/javascript"></script>

@endsection