{% extends request.ajax ? 'layout_blank.phtml' : 'layout_default.phtml' %}

{% import 'macro_functions.phtml' as mf %}

{% block meta_title %}{{ 'Contact us'|trans }}{% endblock %}

{% set company = guest.system_company %}

{% block content_before %}
    <nav class="row">
        <div class="col">
            <h1 class="page-header">{{ 'Contact us'|trans }}</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ ''|link }}">{{ 'Home'|trans }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ 'Contact us'|trans }}</li>
            </ol>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg-8 mb-lg-3">
            <form method="post" class="api-form" data-api-url="guest/support/ticket_create" data-api-tocreated="{{ 'support/contact-us/conversation'|link }}">
                <div class="mb-3">
                    <label class="form-label" for="inputContactName">{{ 'First name'|trans }}:</label>
                    <input type="text" class="form-control" id="inputContactName" name="name" value="{% if client %}{{ (profile.first_name ~ ' ' ~ profile.last_name) }}{% else %}{{ request.name }}{% endif %}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="inputContactEmail">{{ 'Email address'|trans }}:</label>
                    <input type="email" class="form-control" id="inputContactEmail" name="email" value="{% if client %}{{ profile.email }}{% else %}{{ request.name }}{% endif %}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="inputContactSubject">{{ 'Subject'|trans }}:</label>
                    <input type="text" class="form-control" id="inputContactSubject" name="subject" value="{{ request.subject }}" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="textareaContactMessage">{{ 'Message'|trans }}:</label>
                    <textarea class="form-control p-3" id="textareaContactMessage" name="message" rows="10" maxlength="999" style="resize: none;" required data-provide="markdown" data-iconlibrary="fa">{{request.message}}</textarea>
                </div>

                <div class="mb-3">
                    {{ mf.recaptcha }}
                    <input type="hidden" class="form-control" name="anti-spam" value="1" id="anti-spam" required>
                </div>

                <div class="d-grid">
                    <div id="success"></div>
                    <!-- For success/fail messages -->
                    <input class="btn btn-primary" type="submit" value="{{ 'Send'|trans }}">
                </div>
            </form>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="mb-0">{{ 'Contact details'|trans }}</h4>
                </div>
                <div class="card-body">
                    <p class="lead">{{ company.name }}</p>
                    <p>{{ company.address_1 }}<br>
                        {{ company.address_2 }}<br>
                        {{ company.address_3 }}
                    </p>
                    <p>
                        <i class="fa fa-phone-alt me-2"></i>Phone: {{ company.tel }}<br>
                        <i class="fa fa-envelope me-2"></i>E-mail: <a href="mailto:{{ company.email }}">{{ company.email }}</a><br>
                        <i class="fa fa-globe me-2"></i>Web: <a href="{{ company.www }}">{{ company.www }}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

        $('#public-ticket-create').bind('submit', event => {
            bb.post('guest/support/ticket_create', $(event.target).serialize(), function(result) {
                    bb.redirect("{{ 'support/contact-us/conversation'|link }}" + '/' + result);
            });

            return false;
        });
    });
</script>
{% endblock %}
