@extends('layouts.admin')

@section('title')
    Formulare electronice - {{$form->title}}
@endsection

@section('breadcrumbs')
    {{ Breadcrumbs::render('admin.interact.documents.tip.view', $form) }}
@endsection

@section('buttons')
@endsection

@section('content')

<div class="row">
 <div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h1>Creeaza formular / Ataseaza formular</h1>
            </div>
            <div class="col-md-6 d-flex text-right justify-content-end">
                <add-form :payload="{{$form}}"></add-form>
                @if ($form->upload_id)
                    <a class="btn mr-5 btn-primary ml-5" href="{{route('admin.documents.forms.download', ['id' => $form->upload_id])}}"><i class="fa fa-download"></i>Descarca formularul PDF</a>
                @else
                    <a class="btn mr-5 btn-primary disabled ml-5" href="#"><i class="fa fa-download"></i>Formularul PDF nu este incarcat</a>
                @endif
                
            </div>
        </div>

        <div class="col-md-6 text-right">
            <!-- This form holds the JSON form definition. -->
            <form method="post" action="{{ route('admin.documents.forms.store') }}">
                @csrf
                <input type="hidden" name="definition" id="definition" value="">
                <input type="hidden" name="document_id" id="document_id" value={{ $form->id }} />
                <button type="submit" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-save" aria-hidden="true"></i>
                    Save Form
                </button>
            </form>
        </div>
    
    
        <!-- This becomes the builder. -->
        <div id="formio-builder"></div>
    </div>
 </div>

</div>

@endsection
@push('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://formio.github.io/formio.js/dist/formio.full.min.css">
    <script src='https://cdn.form.io/js/formio.full.min.js'></script>î
<script lang="text/javascript">
    window.onload = function() {
        // Formio.builder(document.getElementById('formio-builder'), {}, {});
        Formio.builder(
            document.getElementById('formio-builder'),
            @if (isset($definition))
                {!! $definition !!}
            @else
                {}
            @endif , {} // these are the opts you can customize
        ).then(function(builder) {
            // Exports the JSON representation of the dynamic form to that form we defined above
            document.getElementById('definition').value = JSON.stringify(builder.schema);

            builder.on('change', function(e) {
                // On change, update the above form w/ the latest dynamic form JSON
                document.getElementById('definition').value = JSON.stringify(builder.schema);
            })
        });
    };
</script>
@endpush