{% extends "base.html" %}
{% load static %}
{% block path %}  url({% static 'public/img/bg2.jpeg' %}) {% endblock %}

{% block content %}
    <!-- Hero Section -->
    <div class="hero-section">
      <h1>Get in Touch</h1>
    </div>

    <!-- Contact Content -->
    <div class="contact-section grey lighten-3">
      <div class="container">
        <div class="row">
        {% if success %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <span class="alert-text"> We'll be in contact shortly!</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            {% endif %}
            {% if errors %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="alert-text">{{ errors }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            {% endif %}
          <div class="col s12 m8">
            <div class="contact-card white">
              <h4>Send Us a Message</h4>
              <form action="{% url 'contact' %}" method="POST">
                {% csrf_token %}
                <div class="row">
                  <div class="form-group col s12 m6" style="padding-right:1rem">
                    <input type="text" class="form-control" class="validate" name="name" placeholder="Your Name">
                  </div>      
                  <div class="form-group col s12 m6" style="padding-left:1rem">
                    <input type="email" class="form-control" class="validate" name="email" placeholder="Your Email">
                  </div>
                  <!-- <div class="input-field col s12">
                    <input id="subject" type="text" class="validate" required>
                    <label for="subject">Subject</label>
                  </div> -->
                  <div class="form-group col s12" style="padding-left:1rem">
                    <input type="text" class="form-control" class="validate" name="subject" placeholder="Subject">
                  </div>
                  <div class="form-group col-12" style="padding:1rem">
                    <textarea name="message" type="text" class="form-control"  class="validate" placeholder="Your message"></textarea> 
                </div>

                  <div class="form-group col-12">
                    {% if capchaForm %}
                    {{ capchaForm }}
                    {% endif %}
                  </div>
                  <div class="col s12">
                    <!-- <input type="submit" class="btn btn-primary" value="Send"> -->
                    <button class="btn waves-effect waves-light blue-grey darken-3" type="submit" value="Send">
                      Send Message
                      <i class="material-icons right">send</i>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <div class="col s12 m4">
            <div class="contact-info">
              <h5>Contact Information</h5>
              <ul class="collection">
                <!-- <li class="collection-item">
                  <i class="material-icons">location_on</i>
                  <p>1968 Greensboro Dr<br>Wheaton, IL 60189</p>
                </li> -->
                <li class="collection-item">
                  <i class="material-icons">phone</i>
                  <p>+1 (330) 402-2675</p>
                </li>
                <li class="collection-item">
                  <i class="material-icons">email</i>
                  <p>ryan@aimloperations.com</p>
                </li>
              </ul>
              
              <!-- <h5>Follow Us</h5>
              <div class="social-links">
                <a href="#" class="btn-floating blue-grey darken-3">
                  <i class="material-icons">group</i>
                </a>
                <a href="#" class="btn-floating blue-grey darken-3">
                  <i class="material-icons">message</i>
                </a>
                <a href="#" class="btn-floating blue-grey darken-3">
                  <i class="material-icons">business</i>
                </a>
              </div> -->
            </div>
          </div>
        </div>

        <!-- Map Section -->
        <!-- <div class="row">
          <div class="col s12">
            <div class="contact-card white">
              <h5>Our Location</h5>
              <div class="map-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2972.770560296143!2d-88.12337822267253!3d41.83323846821986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e542fbc244bbd%3A0x7aa4cddecbc2cf1f!2s1968%20Greensboro%20Dr%2C%20Wheaton%2C%20IL%2060189!5e0!3m2!1sen!2sus!4v1739220517291!5m2!1sen!2sus" 
                        width="100%" 
                        height="300" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy">
                </iframe>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    {% endblock %}