{% extends 'base.html.twig' %}

{% block title %}Contact{% endblock %}
{% block description %}ABGEO's Personal website contact page{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% if app.session.getFlashBag().has('contact-email-status') %}
        <!-- Modals success -->

        <div id="success" class="modal modal-message fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i class="fa fa-close"></i>
                        </button>
                        <h2>Thank you !</h2>
                        <p>Your message is successfully sent...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals error -->

        <div id="error" class="modal modal-message fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i class="fa fa-close"></i>
                        </button>
                        <h2>Sorry !</h2>
                        <p> Something went wrong...</p>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                let currentModal = $('#{{ app.session.getFlashBag().get('contact-email-status')[0] ?? 'error' }}');

                currentModal.fadeIn();
                $('.modal').modal('hide');
                currentModal.modal('show');
            });
        </script>
    {% endif %}
{% endblock %}

{% block body %}
    <!--================ Home Banner Area =================-->
    <section class="banner_area">
        <div class="box_1620">
            <div class="banner_inner d-flex align-items-center">
                <div class="container">
                    <div class="banner_content text-center">
                        <h2>Contact Me</h2>
                        <div class="page_link">
                            <a href="{{ path('index') }}">Home</a>
                            <a href="{{ path('contact') }}">Contact Me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End Home Banner Area =================-->

    <!--================ Contact Area =================-->
    <section class="contact_area p_120">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="contact_info">
                        <div class="info_item">
                            <i class="lnr lnr-home"></i>
                            <h6>Tbilisi, Georgia</h6>
                            <p></p>
                        </div>
                        <div class="info_item">
                            <i class="lnr lnr-phone-handset"></i>
                            <h6>
                                <a href="tel:995579194727">
                                    (+995) <span class="counter">579</span> <span class="counter">19</span>-<span class="counter">47</span>-<span class="counter">27</span>
                                </a>
                            </h6>
                            <p>Mon to Fri 11:00 to 20:00</p>
                        </div>
                        <div class="info_item">
                            <i class="lnr lnr-envelope"></i>
                            <h6><a href="mailto:me@abgeo.dev">me@abgeo.dev</a></h6>
                            <p>Contact me anytime!</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    {{ form_start(form, {'attr' : {'class': 'row contact_form'}}) }}

                    <div class="col-md-6">
                        <div class="form-group {{ form_errors(form.full_name) ? 'has-error' : '' }}">
                            {{ form_widget(form.full_name) }}

                            {% if form_errors(form.full_name) %}
                                <div class="invalid-feedback">
                                    {{ form_errors(form.full_name) }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="form-group {{ form_errors(form.email) ? 'has-error' : '' }}">
                            {{ form_widget(form.email) }}

                            {% if form_errors(form.email) %}
                                <div class="invalid-feedback">
                                    {{ form_errors(form.email) }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="form-group {{ form_errors(form.subject) ? 'has-error' : '' }}">
                            {{ form_widget(form.subject) }}

                            {% if form_errors(form.subject) %}
                                <div class="invalid-feedback">
                                    {{ form_errors(form.subject) }}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group {{ form_errors(form.message) ? 'has-error' : '' }}">
                            {{ form_widget(form.message) }}

                            {% if form_errors(form.message) %}
                                <div class="invalid-feedback">
                                    {{ form_errors(form.message) }}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="col-md-12 text-right">
                        <button type="submit" value="submit" class="btn submit_btn">Send Message</button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>
    <!--================ Contact Area =================-->
{% endblock %}
