@extends('layouts.app')

@section('content')
    <div class="content">
        <form id="form" name="modal-form" action="{{route("settings.{$templateType}.templates.store")}}" method="POST">
            <x-content.header title="{{ __('title.'.$templateType.'creator') }}"
                subTitle="{{ __('title.'.$templateType.'creator_subtitle') }}">
                <x-slot:headerRight>
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_create')}}
                    </button>

                    <button type="submit" class="btn-secondary-base btn-save btn-concept">
                        {{trans('forms.lbl_save_concept')}}
                    </button>

                    <a href="{{route("settings.{$templateType}.templates.index")}}" class="btn-tertiary-base">
                        {{trans('forms.lbl_cancel')}}
                    </a>
                </x-slot:headerRight>
            </x-content.header>

            <div class="w-full mt-8 fb-editor">
                @include('documentcreator::templates.form', ['edit' => false])
            </div>

        </form>
    </div>

@stop

@section('footer-script')
    @include("documentcreator::scripts.common")

    <!-- End plugin js for this page -->
    <script type="text/javascript">

        $(".btn-save").on("click", function(event) {

            event.preventDefault();

            tinymce.triggerSave();

            if($("#form").valid()) {

                let fields = [];

                const $editor = $(tinymce.get("document-builder-editor-id").getBody());

                $.each($editor.find("a.data-field"), function(index, field) {

                    fields.push(
                        $.extend({
                                field_id    : $(field).data('field-id'),
                                field_type  : $(field).data('field-name'),
                                name        : $(field).attr('id')
                            },
                            JSON.parse( decodeURIComponent( $(field).data("settings") ) )
                        )
                    );
                });

                data = {
                    name    : $('#form').find("input[name='name']").val(),
                    html    : $('#form').find("textarea[name='html']").val(),
                    guide   : $('#form').find("input[name='guide']:checked").val(),
                    @if($templateType == "contract")
                    contract_type_id : $('#form').find("select[name='contract_type_id']").val(),
                    @endif
                    fields  : fields
                };

                if($(this).hasClass('btn-concept')) {
                    data.save_as_concept = 1;
                }

                PDRequest({
                    type    : "POST",
                    url     : $("#form").prop("action"),
                    data    : data,
                    event   : event
                }).then(response => {
                    window.location = "{{route("settings.{$templateType}.templates.index")}}";
                });
            }

        });
    </script>
@stop