<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="subprojectModalContainer">
            <div class="modal-header">
                <h1>Taken koppelen</h1>
            </div>
            <div class="modal-body">
                <form method="POST" class="taskForm" id="taskForm" onsubmit="event.preventDefault();">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <hr>
                            <h3><label>Subproject: </label> {{$subproject->name}}</h3>
                        </div>
                        <div class="col-lg-12">
                            <label>Taak</label>
                        </div>
                        <div class="col-lg-11">
                            <select name="tasks[]" class="form-control selectpicker" form="taskForm" data-live-search="true"
                                    title="Kies deelproject" multiple>
                                @foreach($taskTemplates as $taskTemplate)
                                    @if($subproject->Tasks->where('task_template_id', $taskTemplate->id)->first())
                                        <option value="{{$taskTemplate->id}}" selected>{{$taskTemplate->name}}</option>
                                    @else
                                        <option value="{{$taskTemplate->id}}">{{$taskTemplate->name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        @can('template_control')
                            <div class="col-lg-1">
                                <a href="/instellingen/taken/create?ref=taken-create-{{$subproject->id}}&secondRef=subprojecten-{{$subproject->id}}"
                                   onclick="$('.modal-backdrop').hide();"
                                   class="btn btn-default pull-right">+</a>
                            </div>
                        @endcan
                    </div>
                    <div class="modal-footer">
                        <div class="form-group col-lg-12">
                            <hr>
                            <button name="cancel" data-dismiss="modal" class="btn btn-default">Annuleren</button>
                            <input type="submit" value="Taak koppelen" form="taskForm" class="btn btn-primary"/>
                        </div>
                        <input type="hidden" form="taskForm" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" form="taskForm" name="ref" value="{{ $ref }}">
                        <input type="hidden" form="taskForm" name="subproject" value="{{ $subproject->id }}">
                    </div>
                </form>
            </div>
            @if(count($errors))
                @foreach($errors->all() as $error)
                    <div class="alert alert-danger" role="alert">{{$error}}</div>
                @endforeach
            @endif
        </div>
    </div>
</div>
<script type="text/javascript">

    (function () {
        $('.selectpicker').selectpicker('refresh');
    })();
    var ref = window.location.pathname;
    /* attach a submit handler to the form */
    $(document).off("submit", ".taskForm").on("submit", ".taskForm", function (event) {
        $.ajax({
            type: 'POST',
            url: '/taken',
            data: $('.taskForm').serialize(),
            success: function (data) {
                $('#createTaskModal').modal('hide');
                $(this).unbind(event);

                if(ref.indexOf("/subprojecten") !== -1) {
                    goPjax(ref);
                } else {
                    refreshTaskSelect();
                }
            }
        });
        event.preventDefault();
        return false;
    });
</script>