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

{% block title %}Contact - City center{% endblock %}

{% block body %}
<style>
    .contact-block {
    margin-top: 50px;
    margin-bottom: 50px;
    border: 5px solid #EEF2F6;
    padding: 50px 25px;
    border-radius: 15px;
}
</style>
<div class="container">
    {% for message in app.flashes('success') %}
       <div class="alert alert-success mt-4">
        {{message}}
       </div> 
    {% endfor %}
</div>
<section id="contact">
    <div class="container">
        <h2>Contact </h2>
        <div class="row mt-4">
				<div class="col-md-6">
					<img class="w-100" src="{{ asset('/img/centre/about1.jpg') }}" alt="">
				</div>
                <div class="col-md-6">
                    <div class=" contact-block">
                        <div class="d-flex justify-content-start">
                            <i class="fas fa-map-marker-alt fa-2x mr-2"></i> 
                            <p> Centre Commercial City Center ,Cité Douzi , Section 1 ilot 318 Bureau N45 Bab Ezzouar Alger.</p>
                            
                        </div>
                        <div class="d-flex justify-content-start">
                            <i class="fas fa-phone-alt fa-2x mr-2"></i>
                                <p>+213 (0)560 12 39 94<br> +213 (0)23 80 90 02 </p>
                        </div>
                        <div class="d-flex justify-content-start">
                            <i class="fas fa-envelope fa-2x mr-2"></i>
                                <p>Direction@citycenter-dz.com </p>
                        </div>
                    </div>
                </div>
        </div>

        <div class="row mt-4">
            <div class="p-3 col-lg-6">
                <h3>Nous contacter</h3>
                {{form_start(contactForm)}}
                    <form class="p-4">
                        <div class="form-group row">
                            <label for="contact-name" class="col-sm-2 col-form-label">Nom</label>
                            <div class="col-sm-10">
                                {{form_widget(contactForm.nom)}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact-email" class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                {{form_widget(contactForm.email)}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conatct-subject" class="col-sm-2 col-form-label">Sujet</label>
                            <div class="col-sm-10">
                                {{form_widget(contactForm.sujet)}}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conatct-message" class="col-sm-2 col-form-label">Message</label>
                            <div class="col-sm-10">
                                {{form_widget(contactForm.message)}}
                            </div>
                        </div>
                        <div class="text-center submit float-right">
                            <button id="btn" type="submit" style="background-color: #D42355;color:#fff;font-size:22px; padding: 5px 20px 5px 20px;" class="btn ">Envoyer</button>
                        </div>
                    </form>
               {{form_start(contactForm)}}     
            </div>
            <div class="p-3 col-lg-6">
                <h3>Nous rendre visite</h3>
                    <div class="">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12790.84777560354!2d3.1783697!3d36.7294788!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe1622f606cd2309c!2sCity%20Center!5e0!3m2!1sfr!2sdz!4v1616579251869!5m2!1sfr!2sdz" 
                            width="600px"
                            height="415px"   
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>
<section class="plan">
<div class="container">
    {# <img class="w-100" src="{{asset('img/plan.png')}}" alt="">  #}
</div>
</section>
{% endblock %}