<!DOCTYPE html>
<html>
<head>
    <title>{{ 'Contact us'|trans }}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    {{ include('partial_embed_styles.html.twig') }}
    <style type="text/css">
        .embed-shell--contact {
            padding: 10px;
            border-radius: 10px;
        }

        .embed-shell--contact .embed-title {
            margin-bottom: 8px;
        }

        .embed-shell--contact .embed-stack {
            gap: 8px;
        }

        .embed-shell--contact .embed-grid {
            gap: 8px;
        }

        .embed-shell--contact .embed-textarea {
            min-height: 78px;
        }

        .embed-shell--contact .g-recaptcha,
        .embed-shell--contact #recaptcha_widget {
            margin-top: 2px;
        }

        .embed-shell--contact #recaptcha_response_field {
            width: 100% !important;
        }

        .embed-shell--contact a.btn,
        .embed-shell--contact input[type="submit"] {
            width: auto !important;
        }
    </style>
</head>

<body>
    <form method="post" action="" id="public-ticket-create" class="embed-shell embed-shell--contact">
        <div class="embed-stack">
            <h1 class="embed-title">{{ 'Contact us'|trans }}</h1>

            <div class="embed-grid">
                <div class="embed-field">
                    <label class="embed-label" for="embed-contact-name">{{ 'Name'|trans }}</label>
                    <input id="embed-contact-name" class="embed-input" type="text" name="name" value="{{ request.name }}" required="required">
                </div>
                <div class="embed-field">
                    <label class="embed-label" for="embed-contact-email">{{ 'Email'|trans }}</label>
                    <input id="embed-contact-email" class="embed-input" type="email" name="email" value="{{ request.email }}" required="required">
                </div>
            </div>

            <div class="embed-field">
                <label class="embed-label" for="embed-contact-subject">{{ 'Subject'|trans }}</label>
                <input id="embed-contact-subject" class="embed-input" type="text" name="subject" value="{{ request.subject }}" required="required">
            </div>

            <div class="embed-field">
                <label class="embed-label" for="embed-contact-message">{{ 'Message'|trans }}</label>
                <textarea id="embed-contact-message" class="embed-textarea" name="message" cols="5" rows="5" required="required">{{ request.message }}</textarea>
            </div>

            {{ include('mod_antispam_recaptcha.html.twig') }}

            <button class="embed-button" type="submit">{{ 'Send'|trans }}</button>
        </div>

        <input type="hidden" name="anti-spam" value="1" id="anti-spam" required="required"/>
    </form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('anti-spam').remove();

        document.getElementById('public-ticket-create').addEventListener('submit', function(event) {
            event.preventDefault();

            const form = event.target;
            const formData = new FormData(form);
            const data = new URLSearchParams(formData);

            fetch("{{ 'support/ticket_create'|api_url(role='guest') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: data
            })
            .then(response => response.json())
            .then(json => {
                if(json.error) {
                    alert(json.error.message);
                } else {
                    parent.window.location = "{{ 'support/contact-us/conversation'|url }}" + '/' + json.result;
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
</script>
</body>
</html>
