<%- 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;
  }
  .bookmark-property {
    position: absolute;
    right: 0;
    top: 15px;
    right: 15px;
    font-size: 29px;
}
a.agent-info .img-2 {
    width: 30px;
    height: 30px;
}
.list-agent {
    justify-content: space-between;
}
.list-agent .ion-ios-trash {
    font-size: 28px;
}
</style>
<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">Properties</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Properties <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<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="/properties" 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"
                      value="<% if(oldFilterData?.location){ %><%- oldFilterData?.location %><% } %>"
                      class="form-control"
                      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">
      <% 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>
            <div class="text" style="min-height:310px;">
              <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>
              <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-id="<%- property?.id %>"
                    data-placement="top"
                    title="Bookmark"
                  >
                    <span class="ion-ios-heart <%- isBookmarked ? 'bookmark-color' : 'un-bookmark-color'  %>" data-id="<%- property?.id %>"
                      ><i class="sr-only">Bookmark</i></span
                    >
                  </a>
                </div>
               
              <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 class="list-agent d-flex align-items-center justify-space-between">
                <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>
            </div>
          </div>
        </div>
        <% }) %>
    </div>
  </div>
</section>

<%- 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();
            console.log(place);
            const latitude = place.geometry.location.lat();
            const longitude = place.geometry.location.lng();
            $("#latitude").val(latitude)
            $("#longitude").val(longitude)
        });
    }
</script>
<script>
  $(document).ready(()=>{
    $(".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>
