Laravel View

show.blade.php

@extends('layouts.single_column')

@push('head')
@if( ! $view->isYoutubeAvailable())
    <meta name="robots" content="noindex">
@endif
@endpush

@push('styles')

@endpush

@push('scripts')
<script>
    var markers = [];
    @foreach($activeWaypoints as $waypoint)
        @if($waypoint->isStation())
            markers.push({
                lat: {{$waypoint->station->lat}},
                lng: {{$waypoint->station->lng}}
            });
        @endif
    @endforeach
</script>

<script src="{{ asset('js/components/loader-btn.js') }}"></script>
<script src="{{ asset('js/components/read-more-box.js') }}"></script>
<script src="{{ asset('js/components/video-player.js') }}"></script>
<script src="{{ asset('js/views/show.js') }}"></script>
<script async defer src="//maps.googleapis.com/maps/api/js?key={{config('services.google_map_api_key')}}&language=ru"></script>

@endpush

@section('content')
    <div id="page-container">
        <div class="row">
            <div class="col-sm-8">

                @if($view->youtube_available_status === \App\View::YOUTUBE_AVAILABLE_STATUS_NON_EMBEDABLE)
                    <div class="alert alert-danger" role="alert">
                        @lang('main.non_embeddable_video_alert', ['url'=>$video->url])
                    </div>
                @endif

                @if($view->youtube_available_status === \App\View::YOUTUBE_AVAILABLE_STATUS_REMOVED)
                    <div class="alert alert-danger" role="alert">
                        @lang('main.Video removed by youtube author')
                    </div>
                @endif


                <video-player v-on:onYouTubeIframeAPIReady="onYouTubeIframeAPIReady"
                              ref="video_player"
                              origin="{{config('app.url')}}"
                              video_key="{{$video->key}}"
                              :aspect_ratio="{{$view->aspect_ratio}}"
                              :start="{{$view->start_from_sec}}"
                              :mute_audio="true"
                              :autoplay="1"></video-player>

                <h1 class="h5">{{$view->name}}</h1>

                @if($lines->count() > 0)
                    <div class="">
                        @foreach($lines as $line)
                            <a title="@lang('main.line section')" class="badge badge-primary" href="{{action('LinesController@show', [$line])}}">{{$line->name()}}</a>
                        @endforeach
                    </div>
                @endif

                @include('views.layouts.badges')

                <read-more-box inline-template>
                    <div v-bind:class="{ 'read-more-box-expanded': expanded, 'read-more-box-collapsed': ! expanded }" class="read-more-box">
                        <div>
                            {!! nl2br($view->description()) !!}

                            <p class="read-more"><a href="javascript:void(0)" v-on:click="toggle" class=""><span v-show="! expanded">Еще</span><span v-show="expanded">Свернуть</span></a></p>
                        </div>
                    </div>
                </read-more-box>

                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- railcamz_before_comments -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-1863263405737125"
                     data-ad-slot="9654608028"
                     data-ad-format="auto"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>

            </div>



            <div class="col-sm-4">
                <div id="player-sidebar" :style="{ height: playerHeight + 'px' }" style="overflow-y: auto;">
                    @if( ! $activeWaypoints->isEmpty())
                        @include('views.layouts.waypoints_list')
                    @else
                        <p class="text-muted">@lang('main.There are no waypoints for this video yet')</p>
                    @endif

                    @if($view->isEditable())
                        <a href="{{action('ViewsController@waypoints', [$view])}}" class="btn btn-success btn-block">@lang('main.Add stations and places')</a>
                    @endif
                </div>

                @if($similarViews->isNotEmpty())
                    <div class="card mt-5">
                        <div class="card-header text-center">
                            @lang('main.Similar video')
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                @foreach($similarViews as $similarView)
                                    <li class="py-1">
                                        <a href="{{action('ViewsController@show', [$similarView])}}"
                                           title="{{$similarView->name}}">
                                            <img class="w-25 float-left" src="{{$similarView->mainImageUrl()}}" alt="{{$similarView->name}}">

                                            <div style="padding-left: 28%; font-size: 0.9rem;" class="clearfix">{{$similarView->name}}</div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div><!-- .row -->

        <div class="row">
            <div class="col-sm-8">
                <div id="comments-section" class="row">
                    <div class="col-sm-12">
                        <form v-on:submit="clickAddComment"
                              action="{{action('ViewsController@addComment', [$view])}}" id="comment-form">

                            <div v-bind:class="{'has-error': hasErrors('content')}" class="form-group row">
                                <label for="input-comment-content" class="sr-only control-label">@lang('main.Leave a comment')</label>
                                <div class="col-sm-12">
                            <textarea placeholder="@lang('main.Leave a comment')"
                                      v-model.trim="forms.comment.content" autocomplete="off"
                                      id="input-comment-content"
                                      class="form-control"
                                      :class="{'is-invalid': ! _.isEmpty(forms.comment.errors)}"
                                      rows="3"></textarea>
                                    <p v-for="error in forms.comment.errors.content" class="text-danger invalid-feedback">@{{ error }}</p>
                                </div>

                            </div>
                            <div class="form-group row">
                                <div class="col-sm-12 text-right">
                                    <loader-btn text="@lang('main.Make comment')"
                                                :disabled="_.isEmpty(forms.comment.content) || forms.comment.loading"
                                                :class="{'btn':true, 'btn-primary':true}"
                                                :loading="forms.comment.loading"
                                                type="submit"
                                                :handler="function(){}">
                                    </loader-btn>
                                </div>
                            </div>
                        </form>

                        <div id="comments_list">

                            <div style="background-color: lightyellow;" v-for="comment in newComments">
                                <div :id="'comment_'+comment.id" class="comment_item" >
                                    <div v-show=" ! isRemoved(comment.id)" class="comment_info has-controls">
                                        <p>
                                            <b v-if="comment.author.id == 0" style="color: #999999;">@{{ comment.author.presentationName }}</b>
                                            <a v-else v-bind:href="comment.author.profile_url"><b>@{{ comment.author.presentationName }}</b></a>
                                        </p>

                                        <p v-html="comment.content"></p>

                                        <div class="comment_bottom">
                                            <small><a class="comment_date" v-bind:href="'#comment_'+comment.id">@{{ comment.created_at_human }}</a></small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @foreach($comments as $comment)

                                {!! $comment->getView() !!}

                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- MODALS -->
        @include('views.layouts.modal_map')
    </div>
@endsection