<%- include('layouts/header'); -%>
<style>
  .bookmark-color{
    color: #ee2a2a !important;
  }
  .unbookmark-color{
    color: white !important;
  }
  .feature-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--primary-color);
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
  }

  .floating-btn {
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 20px;
  border-radius: 37px !important;
  padding: 14px 18px;
  background-color: #1D479B;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.3s;
}

.floating-btn:hover {
  background-color: #0056b3;
}

.floating-btn:active {
  transform: scale(0.95);
}
</style>

<div
  class="hero-wrap"
  style="background-image: url('<%- baseUrl %>/images/bg_2.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 justify-content-center align-items-center"
    >
      <div class="col-lg-8 col-md-6 ftco-animate d-flex align-items-end">
        <div class="text text-center w-100">
          <h1 class="mb-4">Find Properties <br />That Make You Money</h1>
          <p>
            <a href="/properties" class="btn btn-primary py-3 px-4">Search Properties</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="mouse">
    <a href="#" class="mouse-icon">
      <div class="mouse-wheel">
        <span class="ion-ios-arrow-round-down"></span>
      </div>
    </a>
  </div>
</div>

<section class="ftco-section ftco-no-pb">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="search-wrap-1 ftco-animate">
          <form action="/" class="search-property-1">
            <div class="row">
              <div class="col-lg align-items-end">
                <div class="form-group">
                  <label for="#">Location</label>
                  <div class="form-field">
                    <div class="icon"><span class="ion-ios-search"></span></div>
                    <input
                      type="text"
                      name=""
                      id="autocomplete"
                      class="form-control"
                      value="<% if(oldFilterData?.location){ %><%- oldFilterData?.location %><% } %>"
                      placeholder="City/Locality Name"
                    />
                  </div>
                </div>
              </div>
              <input type="hidden" id="latitude" name="lat" value="<% if(oldFilterData?.lat){ %><%- oldFilterData?.lat %><% } %>">
              <input type="hidden" id="longitude" name="long" value="<% if(oldFilterData?.long){ %><%- oldFilterData?.long %><% } %>">
              <div class="col-lg align-items-end">
                <div class="form-group">
                  <label for="">Property Type</label>
                  <div class="form-field">
                    <div class="select-wrap">
                      <div class="icon">
                        <span class="ion-ios-arrow-down"></span>
                      </div>
                      <select name="type" id="" class="form-control">
                        <option value="">Type</option>
                        <% PropertyTypes?.forEach(type=>{ %>
                        <option value="<%- type?.id %>" <% if(oldFilterData?.type == type?.id){ %>selected <% } %>>
                          <%- type?.value %>
                        </option>
                        <% }) %>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg align-items-end">
                <div class="form-group">
                  <label for="">Property Status</label>
                  <div class="form-field">
                    <div class="select-wrap">
                      <div class="icon">
                        <span class="ion-ios-arrow-down"></span>
                      </div>
                      <select name="status" id="" class="form-control">
                        <option value="">Status</option>
                        <% PropertyStatus?.forEach(status=>{ %>
                        <option value="<%- status?.id %>" <% if(oldFilterData?.status == status?.id){ %>selected <% } %>>
                          <%- status?.value %>
                        </option>
                        <% }) %>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg align-items-end">
                <div class="form-group">
                  <label for="">Price Limit</label>
                  <div class="form-field">
                    <div class="select-wrap">
                      <div class="icon">₹</div>
                      <input
                        type="number"
                        name="price"
                        min="0"
                        class="form-control"
                        placeholder="Enter price"
                        value="<% if(oldFilterData?.price){ %><%- oldFilterData?.price %><% } %>"
                        id=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg align-self-end">
                <div class="form-group">
                  <div class="form-field">
                    <input
                      type="submit"
                      style="
                      padding: 10px !important;
                      "
                      value="Search Property"
                      class="form-control btn btn-primary"
                    />
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section goto-here">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 heading-section text-center ftco-animate mb-5">
        <span class="subheading">What we offer</span>
        <h2 class="mb-2">Exclusive Offer For You</h2>
      </div>
    </div>
    <div class="row">
      <% if(properties?.length == 0){ %><h2 class="mb-2 ml-5">No Properties Found</h2><% } %>
      <% properties?.forEach(property=>{ %>
      <div class="col-md-4">
        <div class="property-wrap ftco-animate">
          <div
            class="img d-flex align-items-center justify-content-center"
            style="background-image: url('<%- property?.image %>')"
          >
            <a
              href="/properties/<%- property?.id %>"
              class="icon d-flex align-items-center justify-content-center btn-custom"
            >
              <span class="ion-ios-link"></span>
            </a>
            <% if(property?.featured == 1) { %>
            <div class="feature-tag">
              <span class="feature-tag-text">Featured</span>
            </div>
            <% } %>
            <div class="list-agent d-flex align-items-center">
              <a href="#" class="agent-info d-flex align-items-center">
                <div
                  class="img-2 rounded-circle"
                  style="
                    background-image: url('<% if(property?.user?.image){ %><%- property?.user?.image  %><% }else if(property?.user){ %><%- baseUrl %>/images//profile-image.png<% }else{ %><%- baseUrl %>/images/admin.png<% } %>');
                  "
                ></div>
                <h3 class="mb-0 ml-2"><% if(property?.user?.firstName){ %><%- property?.user?.firstName +" "+property?.user?.lastName %><%  }else{ %>Admin<% } %></h3>
              </a>
              <div class="tooltip-wrap d-flex">
                <% let isBookmarked = false; %>
                <% isBookmarked = bookmarks?.some(e=> e.propertyId == property?.id) %>
                <a
                  href="javascript:void(0)"
                  class="icon-2 d-flex align-items-center justify-content-center bookmark-property"
                  data-toggle="tooltip"
                  data-placement="top"
                  data-id="<%- property?.id %>"
                  title="Bookmark"
                >
                  <span class="ion-ios-heart <%- isBookmarked ? 'bookmark-color' : 'un-bookmark-color'  %>" data-id="<%- property?.id %>"
                    ><i data-id="<%- property?.id %>" class="sr-only ">Bookmark</i></span
                  >
                </a>
              </div>
            </div>
          </div>
          <div class="text" style="height: 242px;">
            <p class="price mb-3">
              <span class="old-price">₹<%- property?.totalPrice %></span
              ><span class="orig-price"
                >₹<%- property?.price %><small
                  ><% if(property?.status == "rent"){ %>/mo<% } %></small
                ></span
              >
            </p>
            <h3 class="mb-0">
              <a href="/properties/<%- property?.id %>"
                ><%- property?.name %></a
              >
            </h3>
            <span class="location d-inline-block mb-3"
              ><i class="ion-ios-pin mr-2"></i> <%- property?.address?.street
              %>, <%- property?.address?.city %>, <%- property?.address?.state
              %></span
            >
            <% let bedRooms = property?.propertyFeatures?.find(e=> e.key ==
            "bedroom") %> <% let bathRooms =
            property?.propertyFeatures?.find(e=> e.key == "bathroom") %> <% let
            floorArea = property?.propertyFeatures?.find(e=> e.key ==
            "floorarea") %>
            <ul class="property_list">
              <% if(bedRooms){ %>
              <li><span class="flaticon-bed"></span><%- bedRooms?.value %></li>
              <% } %> <% if(bathRooms){ %>
              <li>
                <span class="flaticon-bathtub"></span><%- bathRooms?.value %>
              </li>
              <% } %> <% if(floorArea){ %>
              <li>
                <span class="flaticon-floor-plan"></span><%- floorArea?.value %>
                sqft
              </li>
              <% } %>
            </ul>
          </div>
        </div>
      </div>
      <% }) %>
    </div>
  </div>
</section>

<section class="ftco-section ftco-fullwidth">
  <div class="overlay"></div>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 heading-section text-center ftco-animate mb-5">
        <span class="subheading">Services</span>
        <h2 class="mb-2">Why Choose Us?</h2>
      </div>
    </div>
  </div>
  <div class="container-fluid px-0">
    <div class="row d-md-flex text-wrapper align-items-stretch">
      <div
        class="one-half mb-md-0 mb-4 img d-flex align-self-stretch"
        style="background-image: url('<%- baseUrl %>/images/about.jpg')"
      ></div>
      <div
        class="one-half half-text d-flex justify-content-end align-items-center"
      >
        <div class="text-inner pl-md-5">
          <div class="row d-flex" style="margin: 3px;font-size: 17px;">
            Choosing homguru means selecting a partner dedicated to realizing your property dreams with unparalleled expertise and commitment. 
            <br>
            <br>
            With a proven track record of success, we prioritize your unique needs, employing a personalized approach to match you with the perfect property or buyer. 
            <br>
            <br>
            Our team of seasoned professionals harnesses extensive market knowledge, cutting-edge technology, and a vast network to deliver results swiftly and efficiently. 
            <br>
            <br>
            Whether you're buying, selling, or investing, our unwavering dedication to client satisfaction ensures a seamless and rewarding experience every step of the way. 
            <br>
            <br>
            Experience the difference with our website or mobile application, where excellence meets integrity, and your property aspirations become reality.
            <!-- <div class="col-md-12 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services-wrap d-flex">
                <div
                  class="icon d-flex justify-content-center align-items-center"
                >
                  <span class="flaticon-piggy-bank"></span>
                </div>
                <div class="media-body pl-4">
                  <h3>No Downpayment</h3>
                  <p>
                    A small river named Duden flows by their place and supplies
                    it with the necessary regelialia.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-12 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services-wrap d-flex">
                <div
                  class="icon d-flex justify-content-center align-items-center"
                >
                  <span class="flaticon-wallet"></span>
                </div>
                <div class="media-body pl-4">
                  <h3>All Cash Offer</h3>
                  <p>
                    A small river named Duden flows by their place and supplies
                    it with the necessary regelialia.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-12 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services-wrap d-flex">
                <div
                  class="icon d-flex justify-content-center align-items-center"
                >
                  <span class="flaticon-file"></span>
                </div>
                <div class="media-body pl-4">
                  <h3>Experts in Your Corner</h3>
                  <p>
                    A small river named Duden flows by their place and supplies
                    it with the necessary regelialia.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-12 d-flex align-self-stretch ftco-animate">
              <div class="media block-6 services-wrap d-flex">
                <div
                  class="icon d-flex justify-content-center align-items-center"
                >
                  <span class="flaticon-locked"></span>
                </div>
                <div class="media-body pl-4">
                  <h3>Locked in Pricing</h3>
                  <p>
                    A small river named Duden flows by their place and supplies
                    it with the necessary regelialia.
                  </p>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="ftco-counter ftco-section img" id="section-counter">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div
        class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate"
      >
        <div class="block-18">
          <div class="text text-border d-flex align-items-center">
            <strong class="number" data-number="305">0</strong>
            <span>Area <br />Population</span>
          </div>
        </div>
      </div>
      <div
        class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate"
      >
        <div class="block-18">
          <div class="text text-border d-flex align-items-center">
            <strong class="number" data-number="1090">0</strong>
            <span>Total <br />Properties</span>
          </div>
        </div>
      </div>
      <div
        class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate"
      >
        <div class="block-18">
          <div class="text text-border d-flex align-items-center">
            <strong class="number" data-number="209">0</strong>
            <span>Average <br />House</span>
          </div>
        </div>
      </div>
      <div
        class="col-md-6 col-lg-3 justify-content-center counter-wrap ftco-animate"
      >
        <div class="block-18">
          <div class="text d-flex align-items-center">
            <strong class="number" data-number="67">0</strong>
            <span>Total <br />Branches</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section"  style="padding: 0 !important;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12 heading-section text-center ftco-animate mb-5">
        <span class="subheading">Find Properties</span>
        <h2 class="mb-2">Find Properties In Your City</h2>
      </div>
    </div>
    <div class="row">
      <% cityWiseProperties?.forEach(property=> { %>
      <div class="col-md-4">
        <div
          class="listing-wrap img rounded d-flex align-items-end"
          style="background-image: url('<%- property?.image %>')"
        >
          <div class="location">
            <span class="rounded"><%- property?.address?.city %>, <%- property?.address?.state %></span>
          </div>
          <div class="text">
            <h3><a href="/properties?location=<%- property?.address?.city %>"><%- property?.totalCount ?? 0 %> Property Listing</a></h3>
            <a href="/properties?location=<%- property?.address?.city %>" class="btn-link"
              >See All Listing <span class="ion-ios-arrow-round-forward"></span
            ></a>
          </div>
        </div>
      </div>
      <% }) %>
    </div>
  </div>
</section>

<section class="ftco-section testimony-section bg-light">
  <div class="container">
    <div class="row justify-content-center mb-5">
      <div class="col-md-7 text-center heading-section ftco-animate">
        <h3>Become a Plus Member</h3>
        <p>Choose anyone of the below plan and enjoy greater benefits. Get the unlimited access of properties, agents and their contact details.
        </p>
      </div>
    </div>
    <div class="row justify-content-center">
      <% plans?.forEach(plan=>{ %>
      <div class="col-md-6 col-sm-12 col-12 mt-3">
        <div class="card" style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 34px;">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title" style="font-weight: 600; text-align: center;font-size: 30px;"><%- plan?.name %></h5>
            <h4 style="font-weight: 600; text-align: center">₹<%- plan?.amount %></h4>
            <% let months = Math.floor(plan?.noOfDays / 30); %>
            <div class="badge" style="padding: 5px; background-color: var(--primary-color); text-align: center; color: white;margin-left: 35%;margin-right: 35%;font-size: 19px;"><%- months ? months : 1; %> months</div>
            <% let descriptions = plan?.description?.split("&nbbsp")?.join("."); %>
            <p><%- descriptions %></p>
            <form action="/cashfree" method="post">
              <input type="hidden" name="planId" value="<%- plan?.id %>" />
              <input type="hidden" name="paymentType" value="userplan" />
              <input type="hidden" name="amount" value="<%- plan?.amount %>" />
              <input type="hidden" name="description" value="Amount for subscribe plan" />
              <button class="btn btn-primary btn-subscribe" style="width: 100%;border-radius: 14px;" <% if(user?.planActivationDate){ %>disabled<% } %>>SUBSCRIBE</button>
            </form>
          </div>
        </div>
      </div>
      <% }); %>
    </div>
  </div>
</section>

<section class="ftco-section testimony-section bg-light">
  <div class="container">
    <div class="row justify-content-center mb-5">
      <div class="col-md-7 text-center heading-section ftco-animate">
        <span class="subheading">Testimonial</span>
        <h2 class="mb-3">Customer Reviews</h2>
      </div>
    </div>
    <div class="row ftco-animate">
      <div class="col-md-12">
        <div class="carousel-testimony owl-carousel ftco-owl">
          <% feedbacks?.forEach(feedback=>{ %>
          <div class="item">
            <div class="testimony-wrap py-4" style="height: 207px">
              <div class="text">
                <p class="mb-4">
                  <%- feedback?.description?.substr(0,80)+"..." %>
                </p>
                <div class="d-flex align-items-center">
                  <div
                    class="user-img"
                    style="
                      background-image: url('<% if(!feedback?.user?.image){ %><%- baseUrl %>/images/person_1.jpg<% }else{ %><%- feedback?.user?.image %><% } %>');
                    "
                  ></div>
                  <div class="pl-3">
                    <p class="name"><%- feedback?.user?.firstName %> <%- feedback?.user?.lastName %></p>
                    <!-- <span class="position">Marketing Manager</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <% }) %>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="floating-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-question-circle" style="font-size: 20px;" aria-hidden="true"></i>
</div>

<!-- Enquiry Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Property Enquiry</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form
          action="/enquiry"
          method="post"
          class="p-2 database-operation"
        >
          <div class="alert"></div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="name"
              required
              <% if(user?.firstName){ %>readonly<% } %>
              value="<% if(user?.firstName){ %><%- user?.firstName+' '+user?.lastName %><% } %>"
              placeholder="Your Name"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="email"
              required
              <% if(user?.email){ %>readonly<% } %>
              value="<% if(user?.email){ %><%- user?.email %><% } %>"
              placeholder="Your Email"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              name="mobileNo"
              required
              <% if(user?.mobileNo){ %>readonly<% } %>
              value="<% if(user?.mobileNo){ %><%- user?.mobileNo %><% } %>"
              placeholder="Mobile No"
            />
          </div>
          <div class="form-group">
            <select name="propertyType" required class="form-control" id="">
              <option value="">Select Property Type</option>
              <% PropertyTypes?.forEach(type=>{ %>
                <option value="<%- type?.id %>" <% if(oldFilterData?.type == type?.id){ %>selected <% } %>>
                  <%- type?.value %>
                </option>
                <% }) %>
            </select>
          </div>
          <div class="form-group">
            <textarea
              name="description"
              id=""
              cols="30"
              rows="7"
              class="form-control"
              required
              placeholder="Message"
            ></textarea>
          </div>
          <div class="form-group">
            <input
              type="submit"
              value="Enquiry"
              class="btn btn-primary py-3 px-5"
            />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<%- include('layouts/footer'); -%>
<script>
  function initMap() {
        const autocompleteInput = document.getElementById('autocomplete');
        const autocomplete = new google.maps.places.Autocomplete(autocompleteInput);
        
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            const latitude = place.geometry.location.lat();
            const longitude = place.geometry.location.lng();
            $("#latitude").val(latitude)
            $("#longitude").val(longitude)
            console.log(place.geometry);
            console.log(longitude,"=-=-=",longitude);
        });
    }
</script>
<script>
  $(".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;
    });
    $(".bookmark-property").click(e=>{
      let propertyId = $(e.target).attr("data-id");
      if(propertyId){
        let payload = {
          propertyId
        };

        $.post("/bookmark",payload,(data,status)=>{
          console.log(data,"=-=-=-=-",status);
          if(data?.status){
            if(data?.isCreated){
              $(e.target).removeClass("un-bookmark-color")
              $(e.target).addClass("bookmark-color")
            }else{
              $(e.target).removeClass("bookmark-color")
              $(e.target).addClass("un-bookmark-color")
            }
          }else{
            console.log("Something went wrong!!",data?.msg)
          }
        })
      }
    })
  })
</script>
<!-- Google tag (gtag.js) -->
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-WX2HJFGQMB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-WX2HJFGQMB');
</script> -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JV3RPQYCC8"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JV3RPQYCC8');
</script>