@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');
			}
      .form-wrap.form-builder .frmb-control{
        display: none;
      }
      .form-wrap.form-builder .form-actions{
        display: none !important;
      }
      .form-wrap.form-builder .frmb li.form-field:hover .field-actions{
        display: none;
      }
           /* #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($steps->name) ? $steps->name:''}} / Order No. {{ isset($steps->orderno) ? $steps->orderno:''}} / Routing Form {{$steps->routingName ? $steps->routingName:''}} / {{$steps->stageName ? $steps->stageName:''}} / {{$formname->title ? $formname->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="{{url('updateuserform'.'/'.$forms->step_id)}}" 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="form_id" value="{{isset($forms->form_id) ? $forms->form_id:''}}">

                    <input type="hidden" name="step_id" value="{{isset($forms->step_id) ? $forms->step_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->formdetail->title) ? $forms->formdetail->title:''}}" placeholder="Enter Title" readonly>
                </div>
            </div>
             <div class="col-sm-6">
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" name="description" rows="2" readonly>{{isset($forms->formdetail->description) ? $forms->formdetail->description:''}}</textarea>
                </div>
            </div>
            {{--@if(isset($forms->status) && $forms->status=='')--}}
              <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>     
             {{-- @elseif(isset($forms->status) && $forms->status=='completed')
              <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>    
              @endif --}}

            </div>
            </div>
            <div class="row">
              <div class="col-md-12">
              	 <div id="build-wrap">
                  
              	</div> 
              </div>
            </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> -->
{{--json_encode($forms->status)--}}
  {{--@if(json_encode($forms->status)=="null")--}}
	<div class="row">
        <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">{{ __('Update')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
  {{--@endif--}}
  {{--@else
  <div class="row">
        <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">{{ __('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(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;

       
});

});



</script>

</script>
@endpush
@endsection