@extends('layouts.masterLayout.app')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

<!-- <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}"> -->
<link rel="stylesheet" href="{{asset('css/tether.min.css')}}">
<link rel="stylesheet" href="{{asset('css/font-awesome/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{asset('css/form_builder.css')}}">
<style>
    .form_builder_field{
        width: 475px !important;
    }
    body.skin-blue.sidebar-mini{
        padding-top:0px !important;
    }
    
    .form_builder_area.ui-sortable{
        border:dotted 1px ;
    }
    .form_builder_area.ui-sortable{
        min-height:600px;
    }
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<div class="container" style="background-color: white; overflow:unset">
<h2>Service provider Form Builder</h2>
    <br>
    <nav class="navbar navbar-light  bg-faded fixed-top">
        <div class="clearfix">
            <div class="container mt-3">
                <button style="cursor: pointer;" class="btn btn-info savecode mr-2 mt-2 pull-right">save</button>
            </div>
        </div>
    </nav>
    <div class="clearfix"></div>
    <div class="form_builder" >
        <div class="row">
        <div class="col-sm-2">
                <nav class="nav-sidebar" style="border: 1px solid;">
                    <ul class="nav">
                        <li class="form_bal_textfield ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Text Field <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_textarea ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Text Area <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_select ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Select <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_radio ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Radio Button <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_checkbox ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Checkbox <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_email ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Email <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_number ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Number <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_password ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Password <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_date ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Date <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_button ui-draggable ui-draggable-handle">
                            <a href="javascript:;">Button <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                        <li class="form_bal_file ui-draggable ui-draggable-handle">
                            <a href="javascript:;">file upload <i class="fa fa-plus-circle pull-right"></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-md-5 bal_builder">
                <div class="form_builder_area ui-sortable">
                   
                </div>
            </div>
            
            <div class="col-md-5">
                <div class="col-md-12">
                    <form class="form-horizontal">
                        @csrf
                        <div class="preview" style="display: none;">
                            <div class="form-group">
                                <label class="control-label">Label</label>
                                <input type="text" name="" placeholder="" class="form-control">
                            </div>
                        </div>
                        <div  class="form-group plain_html"><textarea rows="40" class="form-control"></textarea></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/jquery-ui.min.js')}}"></script>
<script src="{{asset('js/tether.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/form_builder.js')}}"></script>

<script>
    $(".savecode").on("click", function() {
        var alldata = items;
        let data='[]';
        if (alldata === data) {
            alert('Please Add form element!')
            return false;
        }
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{url('admin/formbuilder/store')}}",
            type: "POST",
            dataType: 'json',
            data: {
                data: alldata,
            },
            success: function(data) {
                alert('Form Submited Sucessfully !');
                window.location.reload();
            }
        });
    });
</script>
@endsection