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

@section('editable_content')

    <a class="return-to-overview" href="/{{$links->trucks->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>{{ $page->project->translation->name }}</h1>

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

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