@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4">Crear Formulario</h2>

    <form action="{{ route('form-templates.store') }}" method="POST" onsubmit="return saveForm()" class="form-base">
        @csrf

        <div class="mb-3">
            <<label for="form_name" class="form-label">Nombre del Formulario</label>
            <input type="text" name="form_name" class="form-control" value="{{ $formTemplate->name ?? '' }}" required>
        </div>

        <div id="fb-editor" class="mb-3"></div>

        <!-- Campo oculto para guardar el JSON -->
        <input type="hidden" name="schema" id="formSchema">

        <button type="submit" class="btn btn-primary">Guardar Formulario</button>
    </form>

    <!-- Librerías necesarias -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
    <script src="https://formbuilder.online/assets/js/form-render.min.js"></script>

    <script>
        let formBuilder;

        jQuery(function($) {
            formBuilder = $('#fb-editor').formBuilder();
        });

        function saveForm() {
            const formData = formBuilder.actions.getData('json');
            document.getElementById('formSchema').value = formData;
            return true; // permite que el formulario se envíe
        }
    </script>
</div>
@endsection