{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="page-header page-header-xs" data-parallax="true" style="background-image: url({% static 'img/fabio-mangione.jpg' %});">
    <div class="filter"></div>
  </div>
<!-- Contact Section -->
  <section class="contact-section py-5">
    <div class="container">
      <h2 class="text-center mb-5">Contact Us</h2>
      <div class="row">
        <!-- Contact Form -->
        <div class="col-md-6">
          <div class="contact-form">
            <form action="{% url 'contact' %}" method="POST">
              {% csrf_token %}
              <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" class="form-control" id="name"  name="name" placeholder="Enter your full name" required>
              </div>
              <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
              </div>
              <div class="form-group">
                <label for="phone_number">Phone Number</label>
                <input type="tel" class="form-control" id="phone_number" name="phone_number" placeholder="Enter your phone number" required>
              </div>
              <!-- Address Fields -->
              <div class="form-group">
                <label for="street">Street Address</label>
                <input type="text" class="form-control" id="street" name="street" placeholder="123 Main St" required>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" class="form-control" id="city" name="city" placeholder="City" required>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="state">State</label>
                    <select class="form-control" id="state" name="state" required>
                      <option value="" disabled selected>Select</option>
                      <option value="AL">Alabama</option>
                      <option value="AK">Alaska</option>
                      <option value="AZ">Arizona</option>
                      <option value="AR">Arkansas</option>
                      <option value="CA">California</option>
                      <option value="CO">Colorado</option>
                      <option value="CT">Connecticut</option>
                      <option value="DE">Delaware</option>
                      <option value="DC">District Of Columbia</option>
                      <option value="FL">Florida</option>
                      <option value="GA">Georgia</option>
                      <option value="HI">Hawaii</option>
                      <option value="ID">Idaho</option>
                      <option value="IL">Illinois</option>
                      <option value="IN">Indiana</option>
                      <option value="IA">Iowa</option>
                      <option value="KS">Kansas</option>
                      <option value="KY">Kentucky</option>
                      <option value="LA">Louisiana</option>
                      <option value="ME">Maine</option>
                      <option value="MD">Maryland</option>
                      <option value="MA">Massachusetts</option>
                      <option value="MI">Michigan</option>
                      <option value="MN">Minnesota</option>
                      <option value="MS">Mississippi</option>
                      <option value="MO">Missouri</option>
                      <option value="MT">Montana</option>
                      <option value="NE">Nebraska</option>
                      <option value="NV">Nevada</option>
                      <option value="NH">New Hampshire</option>
                      <option value="NJ">New Jersey</option>
                      <option value="NM">New Mexico</option>
                      <option value="NY">New York</option>
                      <option value="NC">North Carolina</option>
                      <option value="ND">North Dakota</option>
                      <option value="OH">Ohio</option>
                      <option value="OK">Oklahoma</option>
                      <option value="OR">Oregon</option>
                      <option value="PA">Pennsylvania</option>
                      <option value="RI">Rhode Island</option>
                      <option value="SC">South Carolina</option>
                      <option value="SD">South Dakota</option>
                      <option value="TN">Tennessee</option>
                      <option value="TX">Texas</option>
                      <option value="UT">Utah</option>
                      <option value="VT">Vermont</option>
                      <option value="VA">Virginia</option>
                      <option value="WA">Washington</option>
                      <option value="WV">West Virginia</option>
                      <option value="WI">Wisconsin</option>
                      <option value="WY">Wyoming</option>
                      <!-- Add all other states as needed -->
                    </select>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="zip">ZIP Code</label>
                    <input type="text" class="form-control" id="zip" name="zip" placeholder="12345" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                {% if capchaForm %}
                {{ capchaForm }}
                {% endif %}
              </div>
              <button type="submit" value="Send" class="btn btn-primary btn-block">Submit</button>
            </form>
          </div>
        </div>

        <!-- Contact Information and Map -->
        <div class="col-md-6">
          <div class="mb-4">
            <h4>Our Office</h4>
            <p>123 Refundum Street, Suite 456<br>Tax Recovery City, TX 78910</p>
            <p><strong>Email:</strong> info@refundum.com<br><strong>Phone:</strong> +1 (123) 456-7890</p>
          </div>
          <div class="map-container">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d-122.41941558468162!3d37.77492997975921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f4459%3A0xb10ed6d9b5050fa5!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1622549402996!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}