@extends('inventory.layout') 
@section('title', 'Edit Forms')
@section('content')
 @push('head')

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
		<style type="text/css">

			body {
			  padding: 0;
			  margin: 10px 0;
			  background: #f2f2f2 url('https://formbuilder.online/assets/img/noise.png');
			}

      .colorred{
        color: red;
      }
           /* #fb-rendered-form {
  clear:both;
  display:none;
  button{
    float:right;
  }
}*/
		</style>
		
@endpush
<div class="container-fluid">
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <div class="page-header-title">
                    <!-- <i class="ik ik-user-plus bg-blue"></i> -->
                    <div class="d-inline">
                        <h5>{{isset($forms->title) ? $forms->title:''}}</h5>
                        <span>{{ __('Edit Forms')}}</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <nav class="breadcrumb-container" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{url('dashboard')}}"><i class="ik ik-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#">{{ __('Edit Forms')}}</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
<form  action="{{route('updateform')}}" method="POST" id="myForm">    
    @method("PUT")
    @csrf
    <div class="card-body">
                            
        <div class="row">
            <div class="col-sm-6">    
                <div class="form-group">
                    <input type="hidden" name="id" value="{{isset($forms->id) ? $forms->id:''}}">
                    <label for="post_name">Title<span class="text-red">*</span></label>
                    <input id="title" type="text" class="form-control title" name="title" value="{{isset($forms->title) ? $forms->title:''}}" placeholder="Enter Title" required="">
                </div>
            </div>
             <div class="col-sm-6">
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" name="description" rows="2">{{isset($forms->description) ? $forms->description:''}}</textarea>
                </div>
            </div>
                <div class="col-sm-6" style="display: none;">    
                <div class="form-group">
                    <label for="description">Formfield</label>
                    <textarea class="form-control formfield" id="formfield" name="formfield" rows="2">{{isset($forms->formsfield) ? $forms->formsfield:''}}</textarea>
                </div>
            </div>     
            </div>
            </div>
	 <div id="build-wrap">
    
	</div> 
    
   
    <!-- <div id="fb-editor"></div>
<div id="fb-rendered-form">
  <form action="#"></form>
  <button class="btn btn-default edit-form">Edit</button>
</div> -->
    <!-- <div id="fb-editor"></div> -->
	<div class="row">
                <!-- start message area-->
                
                <!-- end message area-->
                
        <div class="col-md-12">
            <div class="card ">
                <div class="card-body">
                    <div class="col-md-12" style="text-align: center;">
                        <div class="form-group">
                            <button type="submit" id="getJSON" class="btn btn-primary savedata" data-url="{{route('updateform',$forms->id)}}" data-id="{{isset($forms->id) ? $forms->id:''}}">{{ __('Update')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>  
</div>

@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>

<script type="text/javascript" src="https://formbuilder.online/assets/js/form-render.min.js"></script>
<script>

/*jQuery($ => {
    
  //const fbTemplate = document.getElementById('build-wrap');
  //var formtemp=$(fbTemplate).formBuilder();
  
  //console.log(formtemp);
  const fbTemplate = document.getElementById('build-wrap');
var formtemp=$(fbTemplate).formBuilder();

  

//const formData = document.getElementById('formfield');
//console.log(formData.value);
//const formBuilder = $(fbEditor).formBuilder({formData})

// Can be used 2 different ways
//formBuilder.actions.toggleAllFieldEdit() // first
//$(fbEditor).formBuilder('toggleAllFieldEdit') // second
   
});*/

jQuery(function($) {
    //const fbTemplate = document.getElementById('build-wrap');
//var formtemp=$(fbTemplate).formBuilder();

const fbEditor = document.getElementById('build-wrap')
const formData = document.getElementById('formfield').value;
const formBuilder = $(fbEditor).formBuilder({formData})

// Can be used 2 different ways
//formBuilder.actions.toggleAllFieldEdit() // first
$(fbEditor).formBuilder('toggleAllFieldEdit') // second


 document.getElementById('getJSON').addEventListener('click', function() {
    var jsonval=(formBuilder.actions.getData('json'));
    console.log(jsonval);
    var formfield= document.getElementById("formfield").value = "";
    //alert(formfield);
    var fieldval=document.getElementById("formfield").value += jsonval;
    console.log(fieldval);
     var myTextArea = document.getElementById('formfield');
        myTextArea.innerHTML += jsonval;
});

  /*var fbRender = document.getElementById('fb-render'),
    formData = document.getElementById('formfield').value;
console.log(formData.value);

  var formRenderOpts = {
    formData,
    dataType: 'json'
  };

  $(fbRender).formRender(formRenderOpts);*/
});

/*jQuery(function($) {
  var $fbEditor = $(document.getElementById('fb-editor')),
    $formContainer = $(document.getElementById('fb-rendered-form')),
    fbOptions = {
      onSave: function() {
        $fbEditor.toggle();
        $formContainer.toggle();
        $('form', $formContainer).formRender({
          formData: formBuilder.formData
        });
      }
    },
    formBuilder = $fbEditor.formBuilder(fbOptions);

  $('.edit-form', $formContainer).click(function() {
    $fbEditor.toggle();
    $formContainer.toggle();
  });
});
*/



/*jQuery(function($) {
  var fbTemplate = document.getElementById('fb-editor');
  var options = {
    editOnAdd: true
  };
  $(fbTemplate).formBuilder(options);
});*/

</script>

</script>
@endpush
@endsection