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

@section('editable_content')

    <a class="return-to-overview" href="/{{$page->returnRoute}}">
        <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">

                    <a class="button return-button" href="/{{$page->returnRoute}}">
                        <span class="arrow">@include('svg.arrow')</span>
                        <p>@lang('translations.returnToOverview')</p>
                    </a>

                    <h1>{{ $page->project->translation->name }}</h1>

                    {{ $page->project->translation->description }}

                </div>

                <div class="image-side">

                    <figure>
                        <div class="placeholder">
                            @if(isset($page->project->images) && $page->project->images->count() != 0)
                                @foreach(['large', 'medium'] as $imageSize)
                                    <span class="{{$imageSize}}"
                                          style="background-image: url('{{ $page->project->images->first()->{$imageSize.'_image_url'} }}');"></span>
                                    <img class="{{$imageSize}}"
                                         src="{{ $page->project->images->first()->{$imageSize.'_image_url'} }}"/>
                                @endforeach
                            @endif
                        </div>
                    </figure>

                    @include('forms.smallOffer')

                </div>

            </div>

        </div>

        {{--<div class="specifications">--}}
            {{--<div class="grid-row specs-rows">--}}
                {{--<div class="spec-list">--}}
                    {{--<h2>@lang('translations.technicalSpecs')</h2>--}}
                    {{--<div class="table">--}}

                        <?php $specs = [
                            'power',
                            'motor',
                            'cooling',
                            'drive',
                            'drive_speed',
                            'transmission',
                            'breaks',
                            'tires',
                            'mast',
                            'turning_circle',
                            'weight',
                            'additional_info'
                        ]; ?>

                        {{--@foreach($specs as $spec)--}}

                            {{--@if(isset($page->project->{$spec}) || isset($page->project->translation->{$spec}))--}}
                                {{--<div class="row">--}}
                                    {{--<span>@lang('translations.specs.'.$spec)</span>--}}
                                    {{--<p>--}}
                                        {{--@if(isset($page->project->{$spec}))--}}
                                            {{--{{ $page->project->{$spec} }}--}}
                                        {{--@else--}}
                                            {{--{{ $page->project->translation->{$spec} }}--}}
                                        {{--@endif--}}
                                    {{--</p>--}}
                                {{--</div>--}}
                            {{--@endif--}}
                        {{--@endforeach--}}

                    {{--</div>--}}
                {{--</div>--}}

                {{--<figure>--}}
                    {{--<div class="placeholder">--}}
                        {{--@if(isset($page->project->images) && $page->project->images->count() != 0)--}}
                            {{--@foreach(['large', 'medium'] as $imageSize)--}}
                                {{--<span class="{{$imageSize}}"--}}
                                      {{--style="background-image: url('{{ $page->project->images->first()->{$imageSize.'_image_url'} }}');"></span>--}}
                                {{--<img class="{{$imageSize}}"--}}
                                      {{--src="{{ $page->project->images->first()->{$imageSize.'_image_url'} }}"/>--}}
                            {{--@endforeach--}}
                        {{--@endif--}}
                    {{--</div>--}}
                {{--</figure>--}}
            {{--</div>--}}

            {{--<div class="grid-row blueprint-form">--}}
                {{--<div class="blueprint">--}}
                    {{--@if($page->project->blueprint->count() >= 1)--}}
                        {{--@foreach(['large', 'medium'] as $imageSize)--}}
                            {{--<img class="{{$imageSize}}" alt="blueprint"--}}
                                 {{--src="{{ $page->project->blueprint->first()->{$imageSize.'_image_url'} }}"/>--}}
                        {{--@endforeach--}}
                    {{--@endif--}}
                {{--</div>--}}

                {{--@include('forms.smallOffer')--}}

            {{--</div>--}}

        {{--</div>--}}

    </div>

@endsection

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

        // 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