{% extends 'front.html.twig' %}
{% block title %}  Contact us {% endblock %}
{% block body %}
    <!-- Start Main Banner -->
    <div class="page-title">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <h3>Contactez-Nous</h3>
                            <ul>
                                <li><a href="">Home</a></li>
                                <li>/</li>
                                <li class="active">Contact</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Main Banner -->

    <!-- Start Contact Us Area -->
    <section class="contact-area ptb-80">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="map-box">
                        <!-- Map Area -->
                        <div id="mapSTH">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3194.8999321878255!2d10.166463314779497!3d36.796949575583255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd33f530f9b6cf%3A0x4867c391d5cf6ecf!2sH%C3%B4pital+Aziza+Othmana!5e0!3m2!1sfr!2stn!4v1545064580877" width="1111" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                        <!-- End Map Area -->

                        <div class="contact-info">
                            <div class="info-box">
                                <div class="icon">
                                    <i class="fa fa-map-marker"></i>
                                </div>

                                <div class="content">
                                    <h5>Adresse du siège</h5>
                                    <p>Société Tunisienne d'hématologie<br/>
                                        Hôpital Aziza Othmana<br/>
                                        Place du gouvernement, La Kasba, Tunis, Tunisie</p>
                                </div>
                            </div>

                            <div class="info-box">
                                <div class="icon">
                                    <i class="fa fa-mobile"></i>
                                </div>

                                <div class="content">
                                    <h5>Phone</h5>
                                    <p>Mobile: <a href="#">(+216) 99 71 90 78</a></p>
                                </div>
                            </div>

                            <div class="info-box mb-0">
                                <div class="icon">
                                    <i class="fa fa-envelope"></i>
                                </div>

                                <div class="content">
                                    <h5>Email</h5>
                                    <p><a href="#">support@sth.com</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12">

                    <div class="get-in-touch">

                        <div class="row">
                            {#<div class="col-lg-6 col-md-12">
                                <div class="text">
                                    <h4 class="title">Nous-Contactez</h4>
                                </div>

                                <div class="stay-connected">

                                    <ul>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-facebook"></i>
                                                <span>Facebook</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-twitter"></i>
                                                <span>Twitter</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>#}

                            <div class="col-lg-12 col-md-12">

                                {{ include('default/flash_bag.html.twig') }}

                                {{ form_start(form,{'attr': {'class': 'contactForm','role':'form'}}) }}
                                    <div class="row">
                                        <div class="col-lg-12 col-md-6">
                                            <div class="form-group">
                                                <label for="name">Nom*</label>
                                                {{ form_widget(form.lastName, { 'attr': {'class': 'form-control', 'required data-error' : 'Please enter your name', 'required':true} }) }}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-6">
                                            <div class="form-group">
                                                <label for="fname">Prénom*</label>
                                                {{ form_widget(form.firstName, { 'attr': {'class': 'form-control', 'required data-error' : 'Please enter your name', 'required':true} }) }}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-6">
                                            <div class="form-group">
                                                <label for="email">Email*</label>
                                                {{ form_widget(form.email, { 'attr': { 'class': 'form-control', 'required data-error' : 'Please enter your email', 'required':true} }) }}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-6">
                                            <div class="form-group">
                                                <label for="speciality">Spécialité*</label>
                                                {{ form_widget(form.speciality, { 'attr': {'class': 'form-control', 'required data-error' : 'Please enter your speciality', 'required':true} }) }}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-6">
                                            <div class="form-group">
                                                <label for="speciality">Adresse*</label>
                                                {{ form_widget(form.address, { 'attr': {'class': 'form-control', 'required data-error' : 'Please enter your address', 'required':true} }) }}
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-12">
                                            <div class="form-group">
                                                <label for="message">Message*</label>
                                                {{ form_widget(form.message, { 'attr': { 'cols': '3', 'rows' : '4', 'class': 'form-control', 'required data-error' : 'Write your message', 'required':true} }) }}
                                            </div>
                                        </div>

                                        <div class="col-lg-12 col-md-12">
                                            {{ form_widget(form.EnvoyerMessage, { 'attr': {'class': 'btn btn-primary'} }) }}
                                            <br/><br/>
                                            <div id="msgSubmit" class="h3 text-center hidden"></div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact Us Area -->

{% endblock %}