<%- include('../layouts/header'); -%>
<style>
  .bookmark-color {
    color: #ee2a2a !important;
  }
  .unbookmark-color {
    color: white !important;
  }
</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">Bookmarks</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Bookmarks <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section goto-here">
  <div class="container">
    <div class="row">
      <% if(bookmarks?.length == 0){ %>
      <h2 class="mb-2 ml-5">No Bookmark Properties Found</h2>
      <% } %> <% bookmarks?.forEach(bookmark=>{ %> <% let property =
      bookmark?.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>
            <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">
                <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 bookmark-color"
                    data-id="<%- property?.id %>"
                    ><i 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>

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

<script>
  $(document).ready(() => {
    $(".bookmark-property").click((e) => {
      let propertyId = $(e.target).attr("data-id");
      if (propertyId) {
        let payload = {
          propertyId,
        };
        $.post("/bookmark", payload, (data, status) => {
          window.location.reload();
        });
      }
    });
  });
</script>
