@extends('layouts.app')

@section('title', $group->title.' | Group Detail')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/jquery-ui/jquery-ui.min.css') }}" >
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
    <style>
        .select2-container {
            z-index: 99999;
        }
    </style>
@endsection

@section('content')

    <div class="studio98_websters">
        <div class="studio98_websters">
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>{{ $group->title }}</h5>
                    <div class="pull-right">
                        <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#create_retailer">
                            Add Retailer
                        </a>
                    </div>
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div style="position: relative; float: left; width: 100%">
                        <ul class="todo-list m-t group_retailers">
                            @if(count($retailers) > 0)
                                @foreach($retailers as $retailer)
                                    <li id="retailer-{{ $retailer->retailer_id }}">
                                        <span class="m-l-xs">{{ isset($retailer->retailer->name) ? $retailer->retailer->name : '' }}</span>
                                        <a href="javascript:void(0)"  onclick="deleteRetailer({{ $retailer->retailer_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>

    <div class="modal inmodal fade" id="create_retailer" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return saveRetailer();']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add Retailer</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        {!! Form::label('retailer_id','Retailer') !!}
                        {!! Form::select('retailer_id[]' , [],null, ['id'=>'retailer_id','class' => 'form-control','multiple' => true,'style' => 'width:100%']) !!}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

@endsection

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

    <script>
        $( document ).ready(function() {

            $(document).ready(function() {

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

            });

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

                    });
                }
            });
            $( ".group_retailers" ).disableSelection();
        } );
        function saveRetailer() {
            return reloadAjaxSubmit('create_retailer',"{{ url('retailer-group/add-retailer?group_id='.$group->id) }}",'retailer_id','Submit');
        }
        function deleteRetailer(retailer_id) {
            if(confirm('Are you sure you want to delete this?')) {
                $.ajax({
                    method: 'POST',
                    url: '