Updated file for fixing the related products on Geekshop

edit-add.blade.php

@extends('voyager::master')

@section('css')
<style>

html, body{
    height: auto;
}

  .panel .mce-panel{
    border-left-color: #fff;
    border-right-color: #fff;
}

.panel .mce-toolbar, .panel .mce-statusbar {
  padding-left: 20px;
}

.panel .mce-edit-area, .panel .mce-edit-area iframe, .panel .mce-edit-area iframe html{
    padding:0px 10px;
    min-height:350px;
}

.app-container:after{
    content:'';
    display:block;
    width:100%;
    height:1px;
    left:0px;
    top:0px;
    position:relative;
    clear:both;
}

.mce-content-body {
    color:#555;
    font-size:14px;
}

.panel.is-fullscreen .mce-statusbar {
    position:absolute;
    bottom:0px;
    width:100%;
}

.panel.is-fullscreen .mce-tinymce{
    height:100%;
}

.panel.is-fullscreen .mce-edit-area, .panel.is-fullscreen .mce-edit-area iframe, .panel.is-fullscreen .mce-edit-area iframe html{
    height: 100%;
    position: absolute;
    width: 95%;
    overflow-y: scroll;
    overflow-x: hidden;
    min-height:100%;

}

</style>
@stop

@section('page_header')
<h1 class="page-title">
    <i class="voyager-bag"></i> @if(isset($dataTypeContent->id)){{ 'Edit' }}@else{{ 'New' }}@endif {{ $dataType->display_name_singular }}
</h1>
@stop

@section('content')
<div class="page-content container-fluid">

    <form role="form" action="@if(isset($dataTypeContent->id)){{ route('voyager.products.update', $dataTypeContent->id) }}@else{{ route('voyager.products.store') }}@endif" method="POST" enctype="multipart/form-data">

        <div class="row">

            <div class="col-md-8">

                <!-- ### TITLE ### -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Product Title
                            <span class="panel-desc"> The title for this product</span>
                        </h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <input type="text" class="form-control" name="title" placeholder="Title" value="@if(isset($dataTypeContent->title)){{ $dataTypeContent->title }}@endif">
                    </div>
                </div><!-- .panel -->

                <!-- ### CONTENT ### -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="icon wb-book"></i> Product Content</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-expand" data-toggle="panel-fullscreen" aria-hidden="true"></a>
                        </div>
                    </div>
                    <textarea class="richTextBox" name="body" style="border:0px;">@if(isset($dataTypeContent->body)){{ $dataTypeContent->body }}@endif</textarea>
                </div><!-- .panel -->

                <!-- ### EXCERPT ### -->
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Description <small>Small description of this product</small></h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                      <textarea class="form-control" name="description">@if(isset($dataTypeContent->description)){{ $dataTypeContent->description }}@endif</textarea>
                  </div>
              </div><!-- .panel -->

              <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">Related Products <small>Select a few related products</small></h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <select class="form-control select2" id="related_products" name="related[]" multiple>
                            
                            @php 
                                $selected_values = isset($dataTypeContent) ? $dataTypeContent->related()->pluck('id')->all() : array();
                                $relationshipOptions = app('App\Product')->all();
                            @endphp

                            @foreach($relationshipOptions as $relationshipOption)
                                 <option value="{{ $relationshipOption->id }}" @if(in_array($relationshipOption->id, $selected_values)){{ 'selected="selected"' }}@endif>{{ $relationshipOption->title }}</option>
                            @endforeach

                        </select>

                    </div>
                </div>

          </div>


          <div class="col-md-4">

                <!-- ### DETAILS ### -->
                <div class="panel panel panel-bordered panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="icon wb-clipboard"></i> Product Details</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        @if(isset($dataTypeContent->id))
                            <div class="form-group">
                                <label for="name">Date Created</label>
                                <input type="datetime" class="form-control datepicker" name="created_at" value="{{ gmdate('m/d/Y g:i A', strtotime($dataTypeContent->created_at)) }}">
                            </div>
                        @endif
                        <div class="form-group">
                            <label for="name">URL slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="slug" value="@if(isset($dataTypeContent->slug)){{ $dataTypeContent->slug }}@endif">
                        </div>

                        <!-- Add multi category -->
                        <div class="form-group">

                            <label for="categories">Categories</label>
                            <select class="form-control select2" name="product_belongstomany_category_relationship[]" multiple>
                    
                                    @php 
                                        $selected_values = isset($dataTypeContent) ? $dataTypeContent->categories()->pluck('id')->all() : array();
                                        $relationshipOptions = app('App\Category')->all();
                                    @endphp

                                    @foreach($relationshipOptions as $relationshipOption)
                                         <option value="{{ $relationshipOption->id }}" @if(in_array($relationshipOption->id, $selected_values)){{ 'selected="selected"' }}@endif>{{ $relationshipOption->name }}</option>
                                    @endforeach

                            </select>
                        </div>

                        <div class="form-group">
                            <label for="name">Price</label>
                            <input type="text" class="form-control" name="price" placeholder="Price" value="@if(isset($dataTypeContent->price)){{ $dataTypeContent->price }}@endif">
                        </div>
                        <div class="form-group">
                            <label for="name">Purchase URL</label>
                            <input type="text" class="form-control" name="purchase_url" placeholder="Purchase URL (Where can they buy it?)" value="@if(isset($dataTypeContent->purchase_url)){{ $dataTypeContent->purchase_url }}@endif">
                        </div>
                        <div class="form-group">
                            <label for="name">Status</label><br>
                            <input type="checkbox" name="active" class="toggleswitch" data-on="Active" data-off="Inactive" @if(isset($dataTypeContent->active) && $dataTypeContent->active || !isset($dataTypeContent->active)){{ 'checked="checked"' }}@endif>
                        </div>
                        <div class="form-group">
                            <label for="name">Featured</label><br>
                            <input type="checkbox" name="featured" class="toggleswitch" data-on="Featured" data-off="Not Featured" @if(isset($dataTypeContent->featured) && $dataTypeContent->featured){{ 'checked="checked"' }}@endif>
                        </div>
                    </div>
                </div><!-- .panel -->


                <!-- ### IMAGE ### -->
                <div class="panel panel-bordered panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Product Image</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        @if(isset($dataTypeContent->image))
                        <img src="{{ Voyager::image( $dataTypeContent->image ) }}" style="width:100%" />
                        @endif
                        <input type="file" name="image">
                    </div>
                </div><!-- .panel -->

                <!-- ### SEO CONTENT ### -->
                <div class="panel panel-bordered panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="icon wb-search"></i> SEO Content</h3>
                        <div class="panel-actions">
                            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-hidden="true"></a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="name">Meta Description</label>
                            <textarea class="form-control" name="meta_description">@if(isset($dataTypeContent->meta_description)){{ $dataTypeContent->meta_description }}@endif</textarea>
                        </div>
                        <div class="form-group">
                            <label for="name">Meta Keywords</label>
                            <textarea class="form-control" name="meta_keywords">@if(isset($dataTypeContent->meta_keywords)){{ $dataTypeContent->meta_keywords }}@endif</textarea>
                        </div>
                        <div class="form-group">
                            <label for="name">SEO Title</label>
                            <input type="text" class="form-control" name="seo_title" placeholder="SEO Title" value="@if(isset($dataTypeContent->seo_title)){{ $dataTypeContent->seo_title }}@endif">
                        </div>
                    </div>
                </div><!-- .panel -->

            </div><!-- .col-md-4 -->
        </div><!-- .row -->

        <!-- PUT Method if we are editing -->
        @if(isset($dataTypeContent->id))
        <input type="hidden" name="_method" value="PUT">
        @endif
        <!-- PUT Method if we are editing -->

        <!-- CSRF TOKEN -->
        <input type="hidden" name="_token" value="{{ csrf_token() }}">

        <button type="submit" id="update_create_product" class="btn btn-primary pull-right">@if(isset($dataTypeContent->id)){{ 'Update Product' }}@else<?= '<i class="icon wb-plus-circle"></i> Create New Product'; ?>@endif</button>
        <div style="clear:both"></div>
    </form>

    <iframe id="form_target" name="form_target" style="display:none"></iframe>
    <form id="my_form" action="/admin/upload" target="form_target" method="POST" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden">
        <input name="image" id="upload_file" type="file" onchange="$('#my_form').submit();this.value='';">
        <input type="hidden" name="type_slug" id="type_slug" value="{{ $dataType->slug }}">
        <input type="hidden" name="_method" value="POST">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
    </form>

</div><!-- .container-fluid -->
@stop

@section('javascript')
<script>
    $('document').ready(function(){
        $('.toggleswitch').bootstrapToggle();
        $('#related_products').change(function(){
            $.post('/admin/related_products/' + {{ $dataTypeContent->id }}, { related: $('#related_products').select2('val')}, function(data){
                if(data){ toastr.success("successfully updated related products"); }
            });
        });
    });
</script>

<script src="{{ config('voyager.assets_path') }}/lib/js/tinymce/tinymce.min.js"></script>
<script src="{{ config('voyager.assets_path') }}/js/voyager_tinymce.js"></script>
@stop