<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="my-4">Contact Us</h1>
      </div>
    </div>
    <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="1100"
        height="450"
        frameborder="0"
        style="border:0"
        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">
              <label for="yourname"></label>
              <input
                id="yourname"
                name="yourname"
                placeholder="Your Name"
                type="text"
                required="required"
                class="form-control"
              />
            </div>
            <div class="col-md-6">
              <label for="youremail"></label>
              <input
                id="youremail"
                name="youremail"
                placeholder="Your Email"
                type="text"
                required="required"
                class="form-control"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-12">
              <label for="subject"></label>
              <input
                id="subject"
                name="subject"
                placeholder="Subject"
                type="text"
                class="form-control"
                required="required"
              />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-12">
              <label for="message"></label>
              <textarea
                id="message"
                name="message"
                placeholder="Message"
                cols="40"
                rows="6"
                class="form-control"
                required="required"
              ></textarea>
            </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>
        <h4>Find us in</h4>
        <p>
          105 Lombardy Business Park
          <br />Cnr. Graham and Cole Rd.
          <br />Shere, Pretoria
          <br />0084
        </p>
        <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
        <h4>Say Hello</h4>
        <p>
          <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
          <a href="mailto:info@univateproperties.co.za">&nbsp;info@univateproperties.co.za</a>
          <br />
          <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
          <a href="tel:+27124921238">&nbsp;+27&nbsp;(0)&nbsp;12&nbsp;492&nbsp;1238</a>
        </p>
        <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
        <h4>Social Networks</h4>
        <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>
</template>
<script>
export default {};
</script>
