<%- include('../layouts/header'); -%>
<style>
  .feature-color {
    color: yellow !important;
  }
  .featured-color {
    color: red !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;
  }
  .feature-expiry {
    position: absolute;
    top: 10px;
    right: 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;
    margin-right: 13px;
  }
</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">My Properties</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>My Properties <i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section goto-here">
  <div class="container">
    <% if(successMessage){ %>
    <div class="alert alert-success">
      <strong>Success!</strong> <%- successMessage %>
    </div>
    <% } %> <% if(errorMessage){ %>
    <div class="alert alert-danger">
      <strong>Error!</strong> <%- errorMessage %>
    </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 col-sm-12">
        <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>
            <% } %>
            <!-- <% if(property?.featured == 1) { %>
            <div class="feature-expiry">
              <span class="feature-tag-text">Expires On 2024-03-25</span>
            </div>
            <% } %> -->
            <div class="list-agent d-flex align-items-center"></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>
            <div class="tooltip-wrap d-flex">
              <a
                href="<% if(property?.featured != 1){ %>/plans/<%- property?.id %><% }else{ %>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="<% if(property?.featured != 1){ %>Feature <% }else{ %>Featured<% } %>"
              >
                <span
                  class="ion-ios-flash <% if(property?.featured != 1){ %>feature-color<% }else{ %>featured-color<% } %>"
                  data-id="<%- property?.id %>"
                  ><i class="sr-only"
                    ><% if(property?.featured != 1){ %>Feature <% }else{
                    %>Featured<% } %></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 class="d-flex align-items-center justify-space-between">
                <a href="javascript:void(0)">
                  <span
                    class="ion-ios-trash un-bookmark-color delete-property"
                    data-id="<%- property?.id %>"
                    ><i class="sr-only">Delete</i></span
                  >
                </a>
                <a
                  href="/properties/add-property/<%- property?.id %>"
                  class="icon-2 d-flex align-items-center justify-content-center"
                  data-toggle="tooltip"
                  data-id="<%- property?.id %>"
                  data-placement="top"
                  title="Edit"
                >
                  <span class="ion-ios-create" data-id="<%- property?.id %>"
                    ><i class="sr-only">Edit</i></span
                  >
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% }) %>
    </div>
  </div>
</section>

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

<script>
  $(document).ready(() => {
    setTimeout(() => {
      $(".alert").hide();
    }, 5000);

    $(".delete-property").click((e) => {
      let id = $(e.target).attr("data-id");
      if (confirm("Are you sure you want to delete property")) {
        window.location.href = "/properties/deleteProperty/" + id;
      }
    });
  });
</script>
