<template>
  <!-- eslint-disable max-len -->
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="faq-img-box">
          <img
            src="img/Contact-us2.jpg"
            alt="Frequently Asked Questions"
            class="img-fluid title-img"
          />
        </div>
        <div class="sinse-box title-title">
          <h3 class="sinse-title">Contact Us</h3>
        </div>
      </div>
      <div class="container col-md-10">
        <br />
        <div class="map-wrapper">
          <div class="map-canvas" id="map-canvas"></div>
          <a
            href="https://www.google.com/maps/dir/-25.8228224,28.3344896/vacation+recreational+services/@-25.8231034,28.3341882,16z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x1e955dadbb47bacd:0x3d299aff0be5b416!2m2!1d28.3426415!2d-25.8229739"
            target="_blank"
          ></a>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1216.2235430439846!2d28.360457474768342!3d-25.79363191616322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x445462e3d06f67fc!2sLombardy+Business+Park!5e0!3m2!1sen!2sza!4v1566222826763!5m2!1sen!2sza"
            width="900"
            height="450"
            frameborder="0"
            style="border-radius:10px"
            allowfullscreen
          ></iframe>
          <br />
          <br />
        </div>

        <div class="row mb-8">
          <div class="col-md-6">
            <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
              <div class="form-group row">
                <div class="col-md-6">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="person" fill="#60CBEB"></eva-icon>
                    </span>
                    <label for="yourname"></label>
                    <input
                      id="yourname"
                      name="yourname"
                      placeholder="Your Name"
                      type="text"
                      required="required"
                      class="form-control"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="email" fill="#60CBEB"></eva-icon>
                    </span>
                    <label for="youremail"></label>
                    <input
                      id="youremail"
                      name="youremail"
                      placeholder="Your Email"
                      type="text"
                      required="required"
                      class="form-control"
                    />
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-md-12">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="bookmark-outline" fill="#60CBEB"></eva-icon>
                    </span>
                    <label for="subject"></label>
                    <input
                      id="subject"
                      name="subject"
                      placeholder="Subject"
                      type="text"
                      class="form-control"
                      required="required"
                    />
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-md-12">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
                    </span>
                    <label for="message"></label>
                    <textarea
                      id="message"
                      name="message"
                      placeholder="Message"
                      cols="40"
                      rows="8"
                      class="form-control"
                      required="required"
                    ></textarea>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-md-1">
                  <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
            <a style="font-size: 25px">Find us in</a>
            <p></p>
            <p>
              105 Lombardy Business Park
              <br />Cnr. Graham and Cole Rd. <br />Shere, Pretoria, 0084
            </p>
            <br />
            <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
            <a style="font-size: 25px">Say Hello</a>
            <p></p>
            <p>
              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
              <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
              <br />
              <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
              <a href="tel:+27129418497">+27 (0)12 941 8497</a>
            </p>
            <br />
            <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
            <a style="font-size: 25px">Social Networks</a>
            <p>
              <a href="https://www.facebook.com/univateproperties/">
                <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
              </a>
            </p>
          </div>
        </div>
        <div
          class="modal fade"
          id="thankYouModal"
          tabindex="-1"
          role="dialog"
          aria-labelledby="contactModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog" role="document">
            <div class="modal-content px-0 px-md-4">
              <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">Thank you</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Thank you for contacting us. We will contact you as soon as possible.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
