{% extends 'enquiry_html/base.html' %}
{% load static %}

{% block title %} | Contact us{% endblock %}

{% block content %}

<!-- ======= About Banner Image ======= -->
<section>
  <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
                  <div class="container">
                      <div class="d-flex align-items-center justify-content-center">
                          <img style="min-width: 100%; margin-top: 40px; max-height: 320px;"
                               src="static/img/service1.png">
                        <div class="carousel-caption" style="bottom: 15px; color: #ab2b2b;">
                          <h1 style="background:;"></h1>
                        </div>
                      </div>
                  </div>
              </div>
        </div>
  </div>
</section>
<!-- =======End  About Banner Image ======= -->

 <!-- ===== Start Form ====== -->
<section >
    <div class="container">
        <div class="section-title" data-aos="">
          <h2>Contact Form</h2>
        </div>
		<div class="col-md-6">
		    <div class="card">
		        <div class="card-body">
		             <form enctype="multipart/form-data" method="post">
                         {% csrf_token %}
                        <div class="form-row">
                            <div class="form-group col-md-6">
                              <input id="id_company_enquire_name" name="company_enquire_name" placeholder="Enter Name/ Company" class="form-control" type="text" required="">
                            </div>
                            <div class="form-group col-md-6">
                              <input id="id_address_location" name="address_location" placeholder="Location/ City" class="form-control" type="text" required="">
                            </div>
                          </div>
                         <div class="form-row">
                             <div class="form-group col-md-6">
                                <input id="id_phone" name="phone" placeholder="Mobile No." class="form-control" required="required" type="number">
                            </div>
                            <div class="form-group col-md-6">
                              <input type="email" name="email" class="form-control" id="id_email" placeholder="Email address" required="">
                            </div>
                          </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                      <select type="text" name="service_product" id="id_service_product" class="form-control" required="">
                                        <option selected>Choose ...</option>
                                        <option> Enquiry</option>
                                        <option> Suggestion</option>
                                        <option> Feedback</option>
                                        <option> Complaint</option>
                                      </select>
                            </div>

                            <div class="form-group col-md-12">
                                      <textarea id="id_requirements" name="requirements" cols="40" rows="5" placeholder="Describe here" class="form-control"></textarea>
                            </div>
                        </div>

                        <div class="form-row" >
                            <input style="padding:5px;" type="file" id="id_file" name="file" accept="image/*,.pdf">
                            <input class="btn btn-secondary" type="submit" name="" value="Submit">
                        </div>
                    </form>
		        </div>
		    </div><br>
		</div>
    </div>
</section>
 <!-- ===== End Form ======= -->

<section >

</section>

<section class="contact py-5 " id="contact">
<div class="container card bg-light">
	<div class="row ">
	    <div class="col-md-12">
	        <h3 class="text-center" style="padding-top: 10px; -webkit-text-stroke: thin; font-family: auto;">Contact Us</h3>
		    <hr>
	    </div>
		<div class="col-md-6">
		    <div class="address">
                <div class="info">
                {% for contacts in contact%}
                    <h5>Address:</h5>
                    <div class="address">
                        <i class="icofont-google-map"></i>
                        <h5>{{contacts.branch_name}}</h5>
                        <p> {{contacts.address_line}}</p>
                    </div>
                    <div class="email">
                        <i class="icofont-envelope"></i>
                        <p><b> Email: </b> {{contacts.email}}</p>
                    </div>
                    <div class="phone">
                        <i class="icofont-phone"></i>
                        <p><b>Phone:</b> {{contacts.mobile}}</p>
                        <p> {{contacts.contact_Person}}</p>
                    </div>
                    <hr>
                {% endfor %}
                </div>
		    </div>
		</div>
        <div class="col-md-6 how-img">
            <div class="img embed-responsive embed-responsive-16by9">
                <div class="mapouter"><iframe id="gmap_canvas" src="https://maps.google.com/maps?q=Suyash%20Vihar%2C%20Indore%2C%20Madhya%20Pradesh%20452011%2C%20India&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                    <a href="https://www.embedgooglemap.net/blog/nordvpn-coupon-code/"></a>
                    <style>.mapouter{text-align:right;}</style>
                </div>
            </div>
        </div>
        </div><br>
	</div>
</div>
</section>
<br>

{% endblock %}