{!! Form::open(['url' => $url, 'class' => 'modal-content']) !!}
<input type="hidden" name="id" value="{{ $value->id }}">
<input type="hidden" name="travel_guide_id" value="{{ $data['travel_guide_id'] }}">
<input type="hidden" name="model" value="{{$data['model']}}">
<input type="hidden" name="action" value="{{$data['action']}}">
<input type="hidden" name="request" value="{{$data['request']}}">
<input type="hidden" name="name" value="add">
<input type="hidden" name="route" value="{{ route('iq_content_modal_load') }}">
<input type="hidden" name="target" value="#modals-load-content">


<div class="modal-header">
    <h5 class="modal-title">
        {{$data['title']}}
    </h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
</div>



    @if(isset($data['tree_id']))
        <div class="modal-body">
        <div class="form-row">
            <div class="form-group col">
                <label for="modal_tree_id" class="form-label">Reiseführer Tree (required)</label>
                <select class="selectpicker" name="tree_id" id="modal_tree_id"
                        data-style="btn-light" data-live-search="true"  required>
                    {!! \App\Models\IQContentTree::getTreesOptions( $data['tree_id']) !!}
                </select>
            </div>
        </div>
            <div class="form-row">
        <div class="form-group col">
            <label for="modal_tree_node_id" class="form-label">Reiseführer Tree (required)</label>
            <select class="selectpicker" name="tree_node_id" id="modal_tree_node_id"
                    data-style="btn-light" data-live-search="true"  required>
                {!! \App\Models\IQContentTreeNode::getTreeNodeOptions($data['tree_id'],0) !!}

            </select>
        </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
            <button type="submit" class="btn btn-primary"><i class="ion ion-md-save"></i> save</button>
        </div>
    </div>
    @else
       <div class="modal-body">
        <div class="form-row">
            <div class="form-group col">
                <label for="modal_tree_id" class="form-label">Reiseführer Tree Seite (required)</label>
                <select class="selectpicker" name="tree_id" id="modal_tree_id"
                        data-style="btn-light" data-live-search="true"  required>
                    {!! \App\Models\IQContentTree::getTreesOptions() !!}
                </select>
            </div>
        </div>
       </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
        </div>
    @endif


<script>

    $(document).ready(function() {

        $("#modal_tree_id").change(function () {
            var tree_id = $(this).find(":selected").val();
            var form = $(this).closest('form').serializeArray();
            var data = {};
            $.each(form, function() {
                if (data[this.name]) {
                    if (!data[this.name].push) {
                        data[this.name] = [data[this.name]];
                    }
                    data[this.name].push(this.value || '');
                } else {
                    data[this.name] = this.value || '';
                }
            });
            console.log(data);
            var url = data.route,
                contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
            $.ajax({
                url: url,
                data: data,
                type: "POST",
                dataType: "json",
                cache: false,
                contentType: contentType,
                encode: true,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    console.log(data);
                    $(data.response.target).find('.modal-dialog').html(data.html);
                    $('.selectpicker').selectpicker('refresh');
                },
                error: function(xhr, status, errorThrown) {
                    console.log(xhr);
                    console.log(xhr.responseText);
                    console.log(errorThrown);
                    console.log("Sorry, there was a problem!");
                }
            });

        });

    });

</script>

{!! Form::close() !!}