{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% set active_menu = 'support' %}

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ 'Contact Us'|trans }}{% endblock %}
{% block meta_description %}{{ 'Send a support request or question to our team using the contact form.'|trans }}{% endblock %}

{% block body_class %}support-contact-us{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">{{ 'Contact Us'|trans }}</li>
{% endblock %}

{% block head %}
    {{ wysiwyg('.editor-textarea') }}
{% endblock %}

{% block content %}
    {% set company = guest.system_company %}
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header py-3 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-1">{{ 'Contact Us'|trans }}</h1>
                            <span class="small text-muted">{{ company.signature }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ 'support/ticket_create'|api_url(role: 'guest') }}" id="public-ticket-create" {{ fb_api_form({ callback: 'onTicketCreate' }) }}>
                        <div class="mb-3">
                            <label class="form-label" for="name">{{ 'Name'|trans }}</label>
                            <input class="form-control" type="text" name="name" value="{{ request.name }}" required="required" id="name">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="email">{{ 'Email'|trans }}</label>
                            <input class="form-control" type="email" name="email" value="{{ request.email }}" required="required" id="email">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="subject">{{ 'Subject'|trans }}</label>
                            <input class="form-control" type="text" name="subject" value="{{ request.subject }}" required="required" id="subject">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="message">{{ 'Message'|trans }}</label>
                            <textarea class="editor-textarea form-control" name="message" cols="5" rows="5" required="required" id="message">{{ request.message }}</textarea>
                        </div>

                        {{ mf.recaptcha }}

                        <div class="mb-3">
                            <button class="btn btn-primary btn-large pull-right" type="submit" value="{{ 'Send'|trans }}" data-loading-text="Loading...">{{ 'Send'|trans }}</button>
                        </div>
                        <input type="hidden" name="anti-spam" value="1" id="anti-spam" required="required"/>
                    </form>
                </div>
                <div class="card-footer small">
                    <dl>
                        <dd>
                            {{ company.name }}
                        </dd>
                        <dd>
                            {{ company.address_1 }}
                        </dd>
                        <dd>
                            {{ company.address_2 }}
                        </dd>
                        <dd>
                            {{ company.address_3 }}
                        </dd>
                        <dd>
                            {{ company.tel }}
                        </dd>
                        <dd>
                            {{ company.www }}
                        </dd>
                        <dd>
                            {{ company.email }}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('anti-spam').remove();
        });

        function onTicketCreate(result){
            window.location = "{{ 'support/contact-us/conversation'|url }}" + '/' + result;
        }
    </script>
{% endblock %}
