<?php $__env->startSection('editable_content'); ?>

    <a class="return-to-overview" href="/<?php echo $links->trucks->route; ?>">
        <span class="arrow"><?php echo $__env->make('svg.arrow', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></span>
        <p><?php echo \Illuminate\Support\Facades\Lang::get('translations.returnToOverview'); ?></p>
    </a>

    <div class="color-wrapper">
        <?php echo $__env->make('layouts.partials.navigation', ['shadow' => true], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

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

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


            <div class="grid-row">

                <?php echo $__env->make('layouts.partials.projects.subMenu', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

                <div class="content">

                    <h1><?php echo $page->project->translation->name; ?></h1>

                    <?php echo $page->project->translation->description; ?>


                </div>

            </div>

        </div>

        <div class="specifications">
            <div class="grid-row specs-rows">
                <div class="spec-list">
                    <h2><?php echo \Illuminate\Support\Facades\Lang::get('translations.technicalSpecs'); ?></h2>
                    <div class="table">

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

                        <?php foreach($specs as $spec): ?>

                            <?php if(isset($page->project->{$spec}) || isset($page->project->translation->{$spec})): ?>
                                <div class="row">
                                    <span><?php echo \Illuminate\Support\Facades\Lang::get('translations.specs.'.$spec); ?></span>
                                    <p>
                                        <?php if(isset($page->project->{$spec})): ?>
                                            <?php echo $page->project->{$spec}; ?>

                                        <?php else: ?>
                                            <?php echo $page->project->translation->{$spec}; ?>

                                        <?php endif; ?>
                                    </p>
                                </div>
                            <?php endif; ?>
                        <?php endforeach; ?>

                    </div>
                </div>

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

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

                <?php echo $__env->make('forms.smallOffer', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

            </div>

        </div>

    </div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('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>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', ['view' => 'project-detail'], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>