@extends('layouts.app')

@section('content')
    <div class="row">

        <div class="col-sm-12">
            <div  class="btn btn-outline-secondary mt-4"></div>
            <div id="fb-editor"></div>
        </div>

    </div>
@stop

@section('footer-script')
    <!-- plugin js for this page -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="{{asset('vendors/FormBuilder/form-builder.min.js')}}"></script>
    <script>
       jQuery(function($) {

            const fields = [{
              label: 'Lookup',
              attrs: {
                type: 'lookup'
              },
              icon: '⌛︎'
            }];

            const replaceFields = [
                {type: "checkbox-group", label: "Checkbox"},
                {type: "radio-group", label: "Radio"},
                {type: "text", label: "Single Line"},
                {type: "textarea", label: "Multi Line"},
                {type: "date", label: "Date"},
                {type: "hidden", label: "Hidden"},
                {type: "paragraph", label: "Static"},
                {type: "header", label: "Title"},
            ];

           const inputSets = [{
                label: 'Lookup',
                icon: '⌛︎',
                name: 'entity', // optional
                showHeader: true, // optional
                fields: [{
                   type: 'select',
                   label: 'Entity',
                   className: 'form-control',
                   values: [{
                       label: 'Street Sweeper',
                       value: 'option-2',
                       selected: false,
                     },
                     {
                       label: 'Brain Surgeon',
                       value: 'option-3',
                       selected: false,
                     }],
                 }],
             }]

            const typeUserAttrs = {
                entity: {
                    autocomplete: {
                        label: 'Field Name',
                        value: '',
                    }
                }
            };

           const fbOptions = {
               controlOrder: [
                    'text',
                    'textarea'
                ],
                onSave: () => {},
                onClearAll: () => {},
                stickyControls: {
                   enable: true,
                },

                controlPosition: 'left',
                disabledActionButtons: ['data'],
                disabledAttrs: [
                    'access'
                ],
                fieldRemoveWarn : true,
                typeUserAttrs   : typeUserAttrs,
                inputSets : inputSets,
                replaceFields : replaceFields,
                //fields  : fields

            };

            $fbTemplate = $(document.getElementById('fb-editor'));
            formBuilder = $fbTemplate.formBuilder(fbOptions);

            // $('.language-selector a').click(function() {
            //     var lang = this.id;
            //     formBuilder.actions.setLang(lang)
            // });
        });
 </script>
@stop