<%- include('../layouts/header'); -%>

<section
  class="hero-wrap hero-wrap-2 ftco-degree-bg js-fullheight"
  style="background-image: url('<%- baseUrl %>/images/bg_1.jpg')"
  data-stellar-background-ratio="0.5"
>
  <div class="overlay"></div>
  <div class="overlay-2"></div>
  <div class="container">
    <div
      class="row no-gutters slider-text js-fullheight align-items-end justify-content-center"
    >
      <div class="col-md-9 ftco-animate pb-5 mb-5 text-center">
        <h1 class="mb-3 bread">Contact Us</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Contact <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section contact-section">
  <div class="container">
    <div class="row d-flex mb-5 contact-info justify-content-center">
      <div class="col-md-8">
        <div class="row mb-5">
          <div class="col-md-4 text-center py-4">
            <div
              class="icon mb-3 d-flex align-items-center justify-content-center"
            >
              <span class="icon-map-o"></span>
            </div>
            <p><span>Address:</span> <%- setting?.address ?? "" %></p>
          </div>
          <div class="col-md-4 text-center py-4">
            <div
              class="icon mb-3 d-flex align-items-center justify-content-center"
            >
              <span class="icon-mobile-phone"></span>
            </div>
            <p>
              <span>Phone:</span>
              <a href="tel://1234567920"><%- setting?.phoneNo ?? "" %></a>
            </p>
          </div>
          <div class="col-md-4 text-center py-4">
            <div
              class="icon mb-3 d-flex align-items-center justify-content-center"
            >
              <span class="icon-envelope-o"></span>
            </div>
            <p>
              <span>Email:</span>
              <a href="mailto:<%- setting?.email ?? '' %>"
                ><%- setting?.email ?? '' %></a
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="row block-9 justify-content-center mb-5">
      <div class="col-md-6 align-items-stretch d-flex">
        <form
          action="/contacts"
          method="post"
          class="bg-light p-5 contact-form database-operation"
        >
          <div class="alert"></div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="name"
              placeholder="Your Name"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="email"
              placeholder="Your Email"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="subject"
              placeholder="Subject"
            />
          </div>
          <div class="form-group">
            <textarea
              name="description"
              id=""
              cols="30"
              rows="7"
              class="form-control"
              placeholder="Message"
            ></textarea>
          </div>
          <div class="form-group">
            <input
              type="submit"
              value="Send Message"
              class="btn btn-primary py-3 px-5"
            />
          </div>
        </form>
      </div>
      <div class="col-md-6 align-items-stretch d-flex">
        <div id="map" class="bg-white border"></div>
      </div>
    </div>
  </div>
</section>

<%- include('../layouts/footer'); -%>

<script>
  function initMap() {
    const geocoder = new google.maps.Geocoder();
    const locationString = `<%- setting?.address %>,India`;
    console.log(geocoder);

    geocoder.geocode({ address: locationString }, function (results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        const location = results[0].geometry.location;
        const map = new google.maps.Map(document.getElementById("map"), {
          center: location,
          zoom: 8,
        });
        const marker = new google.maps.Marker({
          position: location,
          map: map,
          icon: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png",
          title: "Location",
        });
      } else {
        console.error(
          "Geocode was not successful for the following reason: " + status
        );
      }
    });
  }

  $(".alert").hide();
  $(document).ready(() => {
    $(".database-operation").submit((e) => {
      var data = $(e.target).serialize();
      let url = $(e.target).attr("action");
      $.post(url, data, (data, status) => {
        if (data.status) {
          msg = data.msg;
          className = "alert-success";
          $(".database-operation")[0].reset();
        } else {
          msg = data.msg;
          className = "alert-danger";
        }
        $(".alert").html(msg);
        $(".alert").removeClass("alert-danger");
        $(".alert").removeClass("alert-success");
        $(".alert").addClass(className);
        $(".alert").show();
        setTimeout(() => {
          $(".alert").hide();
        }, 3000);
      });
      return false;
    });
  });
</script>
