{{#
    @name Form handler
    @desc Alpine based form handler used in `resources/views/page_builder/_form.antlers.html`.
#}}

<!-- statamic-civet-tools::snippets/_form_handler.antlers.html -->
{{ once }}
    {{# The Statamic helpers for conditional fields. #}}
    <script src="/vendor/statamic/frontend/js/helpers.js"></script>

    <script>
        document.addEventListener('alpine:initializing', () => {
            Alpine.data('formHandler', () => ({
                success: false,
                submitted: false,
                form: null,
                init() {
                    this.form = this.$form(
                        'post',
                        this.$refs.form.getAttribute('action'),
                        JSON.parse(this.$refs.form.getAttribute('x-data')).form,
                        {
                            headers: {
                                'X-CSRF-Token': {
                                    toString: () => this.$refs.form.querySelector('[name="_token"]').value,
                                }
                            }
                        }
                    )
                },
                successHook(response) {
                    {{ success_hook }}

                    setTimeout(() => {
                        this.success = false
                    }, 10000)
                },
                submit() {
                    if (Object.keys(this.form).includes('captcha-response')) {
                        this.form['captcha-response'] = this.$refs.form.querySelector('{{ captcha:selector }}')?.value
                    }

                    this.submitted = true
                    this.form.submit()
                        .then(response => {
                            this.form.reset()
                            this.$refs.form.reset()
                            this.success = true
                            this.submitted = false
                            this.successHook(response)
                        })
                        .then(this.$refs.form.scrollIntoView())
                        .catch(error => {
                            const summary = document.querySelector('#summary')
                            if (summary) {
                                this.$focus.focus(summary.querySelector('a'))
                            }
                            else {
                                console.log(error)
                            }
                        })
                }
            }))
        })
    </script>
{{ /once }}
<!-- End: statamic-civet-tools::snippets/_form_handler.antlers.html -->