@extends('layouts.app')
@section('title', 'Related Groups | Products')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/jquery-ui/jquery-ui.min.css') }}" >
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
@endsection

@section('content')

    <div class="studio98_websters">
        <div class="studio98_websters" >

            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>{{ $related->title }}</h5>
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div id="add_groups">
                        {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return saveGroup(this);']) !!}
                        <div class="form-group">
                            {!! Form::label('group_id','Group') !!}
                            {!! Form::select('group_id[]' , [],null, ['id'=>'group_id','class' => 'form-control','multiple' => true,'style' => 'width:100%']) !!}
                        </div>
                        <div>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                        {!! Form::close() !!}
                    </div>

                    <div class="clearfix"></div>
                    <div style="position: relative; float: left; width: 100%">
                        <ul class="todo-list m-t related_group">
                            @if(count($groups) > 0)
                                @foreach($groups as $group)
                                    <li id="related-group-{{ $group->group_id }}">
                                        <span class="m-l-xs">{{ isset($group->group->title) ? $group->group->title : '' }}</span>
                                        <a href="javascript:void(0)"  onclick="deleteRelatedGroup({{ $group->group_id }})" class="pull-right" style="color: red;"><i class="fa fa-trash-o"></i> </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        $( document ).ready(function() {

            $(document).ready(function() {

                $( "#group_id" ).select2({
                    placeholder : 'Search Group',
                    minimumInputLength: 2,
                    maximumSelectionLength: 10,
                    tags: false,
                    ajax: {
                        url: "{{ ecommerce_url('group/search-group')}}?related_id={{ $related->id }}",
                        dataType: 'json',
                        data: function (term) {
                            return term
                        },
                        processResults: function (data, page) {
                            return {
                                results: data
                            };
                        }
                    }
                });

            });

            $( ".related_group" ).sortable({
                update: function(event, ui) {
                    var menu_order = $(this).sortable('serialize');
                    $.ajax({
                        data: menu_order,
                        type: 'POST',
                        url: "{{ ecommerce_url('group/update-related-group-order') }}?related_id={{ $related->id }}&_token="+csrf_token
                    }).done(function () {

                    });
                }
            });
            $( ".related_group" ).disableSelection();
        } );
        function saveGroup() {
            return reloadAjaxSubmit('add_groups',"{{ ecommerce_url('group/add-related-group-item?related_id='.$related->id) }}",'','Submit');
        }
        function deleteRelatedGroup(group_id) {
            if(confirm('Are you sure you want to delete this?')) {
                $.ajax({
                    method: 'POST',
                    url: '