<%- include('../layouts/header'); -%>
<style>
  @media screen and (max-width: 600px) {
    .pay-on-access-width {
      width: 100% !important;
    }
    .mobile-no-width{
      width: 100% !important;
      margin-top:10px;
    }
    .email-width{
      width: 100% !important;
    }
    .card-width{
      width: 100% !important;
    }
    .image-width{
      width: 100% !important;
    }
  }
  .mobile-no-width{
    width: 100%;
    margin-top:10px;
  }
  .email-width{
    width: 100%;
    margin-top:10px;
  }
  .card-width{
    width: 100%;
  }
  .text-alignment{
      text-align: left;
    }
  .modal-backdrop.show {
    backdrop-filter: blur(8px);
  }
  .modal-content {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
  }
  .rating {
    display: flex;
    font-size: 24px;
    float: left;
    flex-direction: row-reverse;
  }

  .rating input {
    display: none;
  }

  .rating label {
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
  }

  .rating label:before {
    content: "\2605";
    margin: 0 5px;
  }

  .rating input:checked ~ label:before,
  .rating input:checked ~ label ~ label:before {
    content: "\2605";
    color: orange;
  }

  .rating label:hover:before {
    color: orange;
  }
  .ok-style {
    color: var(--primary-color);
  }
  .pay-on-access-li li {
    font-weight: 500;
  }
  .text-style {
    margin-left: 10px;
  }

  .image-container {
  position: relative;
}

.image-container img {
  width: 100px; /* Adjust size as needed */
  height: auto;
  margin-right: 10px;
}
.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);
}
.z-index-minus-one{
  z-index: -1 !important
}
#map {
    height: 400px;
    width: 100%;
}


/*=========================
Slider
=========================*/


 .carousel-inner img {
      width: 100%;
      height: 100%;
  }

#custCarousel .carousel-indicators {
    position: static;
    margin-top:20px;
}

#custCarousel .carousel-indicators > li {
  width:100px;
}

 #custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
 }

  #custCarousel .carousel-indicators li.active img {
    opacity: 1;
  }

  #custCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
  }

  .carousel-item img{
    height:420px;
    width:100%;
  }
  #custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px;
    overflow: hidden;
    height: 110px;
}


</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 Details</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Properties Details<i class="ion-ios-arrow-forward"></i></span>
        </p>
      </div>
    </div>
  </div>
</section>

<section class="ftco-section ftco-property-details">
  <div class="container">
    <div class="row justify-content-center">
        
      <div class="col-md-12">
          <div class="row">
          <div class="col-md-9">
        <div class="property-details">
            
                  <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
        <!-- slides -->
        <div class="carousel-inner">
          <% if(property?.propertyImages?.length == 0){ %>
            <div class="carousel-item active">
              <img src="<%- property?.image %>" alt="Hills">
            </div>
            <% } %>
          <% property?.propertyImages?.forEach((image,index)=>{ %>
          <div class="carousel-item <% if(index == 0){ %>active<% } %>">
            <img src="<%- image?.path %>" alt="Hills">
          </div>
          <% }); %>
        </div>

        <!-- Left right -->
        <a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#custCarousel" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>

        <!-- Thumbnails -->
        <ol class="carousel-indicators list-inline">
          <% if(property?.propertyImages?.length == 0){ %>
            <li class="list-inline-item active">
              <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel">
                <img src="<%- property?.image %>" class="img-fluid">
              </a>
            </li>
            <% } %>
          <% property?.propertyImages?.forEach((image,index)=>{ %>
          <li class="list-inline-item <% if(index == 0){ %>active<% } %>">
            <a id="carousel-selector-<%- index %>" class="<% if(index == 0){ %>selected<% } %>" data-slide-to="<%- index %>" data-target="#custCarousel">
              <img src="<%- image?.path %>" class="img-fluid">
            </a>
          </li>
          <% }); %>
         </ol>
      </div>            
          </div>
        </div> 
        <div class="col-sm-3">
            <div class="card card-width mt-1" style="flex-wrap: wrap;width: 100%;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                ">
                  <div class="row">
                    <div class="col-md-6 col-6" style="display: flex;align-items: center;justify-content: center;">
                      <img src="<% if(property?.user?.image){ %><%- property?.user?.image  %><% }else if(property?.user){ %><%- baseUrl %>/images/profile-image.png<% }else{ %><%- baseUrl %>/images/admin.png<% } %>" class="img-2 rounded-circle" style="width: 74px;height: 47px;" alt="">
                    </div>
                    <div class="col-md-6 col-6" style="display: flex;align-items: left;justify-content: center;">
                      <h5 class="text-alignment p-2"><b><%- property?.user?.firstName %> <%- property?.user?.lastName %></b></h3>
                    </div>
                  </div>
                </div>
            
             <div class="col-md-12" align="center">
                <span class="mr-3"><a href="tel:<%- property?.user?.mobileNo %>" class="btn btn-primary mobile-no-width">Mobile No</a></span><span><a href="mailto:<%- property?.user?.mobileNo %>" class="btn btn-primary email-width">Email</a></span>
               
                   <span><a href="https://wa.me/+91<%- property?.user?.mobileNo  %>" target="_blank" class="btn btn-primary email-width w-100 mt-2">Whatsapp</a></span>
             
              </div>
        </div>
        </div>
         
          <div class="text">
            <div class="row">
              <div class="col-md-12 col-12">
                <h2><%- property?.name %></h2>
              </div>
             
            </div>
            <div class="row">
              <div class="col-md-12 col-12">
                <span class="subheading"
              ><%- property?.address?.street %>, <%- property?.address?.city %>,
              <%- property?.address?.state %></span
            >
              </div>
             
              
            </div>
            <div class="row mt-3">
              <div id="map">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row1">
      <div class="col-md-12 pills">
          <div class="container">
        <div class="bd-example bd-example-tabs">
          <div class="d-flex">
            <ul class="nav nav-pills mb-2" id="pills-tab" role="tablist">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  id="pills-description-tab"
                  data-toggle="pill"
                  href="#pills-description"
                  role="tab"
                  aria-controls="pills-description"
                  aria-expanded="true"
                  >Features</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="pills-manufacturer-tab"
                  data-toggle="pill"
                  href="#pills-manufacturer"
                  role="tab"
                  aria-controls="pills-manufacturer"
                  aria-expanded="true"
                  >Description</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="pills-review-tab"
                  data-toggle="pill"
                  href="#pills-review"
                  role="tab"
                  aria-controls="pills-review"
                  aria-expanded="true"
                  >Review</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="pills-agent-tab"
                  data-toggle="pill"
                  href="#pills-agent"
                  role="tab"
                  aria-controls="pills-agent"
                  aria-expanded="true"
                  >Agent Info</a
                >
              </li>
            </ul>
          </div>

          <div class="tab-content" id="pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="pills-description"
              role="tabpanel"
              aria-labelledby="pills-description-tab"
            >
              <div class="row">
                <% property?.propertyFeatures?.forEach(feature=>{ %> <% let
                featureValue = PropertyFeature?.find(e=> e.id == feature?.key)
                %>
                <div class="col-md-4">
                  <ul class="features">
                    <li class="check">
                      <span class="ion-ios-checkmark-circle"></span><%-
                      featureValue?.value %>: <%- feature?.value %> <%
                      if(['lotarea','floorarea'].includes(feature?.key)){ %>SQ
                      FT<% } %>
                    </li>
                  </ul>
                </div>
                <% }) %>
              </div>
            </div>

            <div
              class="tab-pane fade"
              id="pills-manufacturer"
              role="tabpanel"
              aria-labelledby="pills-manufacturer-tab"
            >
              <p><%- property?.description %></p>
            </div>

            <div
              class="tab-pane fade"
              id="pills-review"
              role="tabpanel"
              aria-labelledby="pills-review-tab"
            >
              <div class="row">
                <div class="col-md-7">
                  <div class="row">
                    <div class="col-md-1 col-sm-1"></div>
                    <div class="col-md-10 col-sm-10">
                      <form
                        action="/feedback"
                        method="post"
                        class="database-operation"
                      >
                        <div class="alert"></div>
                        <div class="form-group">
                          <label for=""><b>Star</b></label>
                          <br />
                          <div class="rating">
                            <input
                              type="radio"
                              id="star1"
                              name="rating"
                              value="5"
                            />
                            <label for="star1"></label>
                            <input
                              type="radio"
                              id="star2"
                              name="rating"
                              value="4"
                            />
                            <label for="star2"></label>
                            <input
                              type="radio"
                              id="star3"
                              name="rating"
                              value="3"
                            />
                            <label for="star3"></label>
                            <input
                              type="radio"
                              id="star4"
                              name="rating"
                              value="2"
                            />
                            <label for="star4"></label>
                            <input
                              type="radio"
                              id="star5"
                              name="rating"
                              value="1"
                            />
                            <label for="star5"></label>
                          </div>
                        </div>
                        <input
                          type="hidden"
                          name="propertyId"
                          value="<%- property?.id %>"
                        />
                        <div class="form-group">
                          <textarea
                            name="description"
                            id=""
                            cols="30"
                            rows="7"
                            required
                            class="form-control"
                            placeholder="Description"
                          ></textarea>
                        </div>
                        <div class="form-group">
                          <input
                            type="submit"
                            value="Submit"
                            class="btn btn-primary py-2 px-3"
                          />
                        </div>
                      </form>
                    </div>
                    <div class="col-md-1 col-sm-1"></div>
                  </div>
                  <hr />
                  <h3 class="head"><%- feedbacks?.length %> Reviews</h3>
                  <% feedbacks?.forEach(feedback=>{ %>
                  <div class="review d-flex">
                    <div
                      class="user-img"
                      style="
                        background-image: url('<% if(!feedback?.user?.image){ %><%- baseUrl %>/images/person_1.jpg<% }else{ %><%- feedback?.user?.image %><% } %>');
                      "
                    ></div>
                    <div class="desc">
                      <h4>
                        <span class="text-left"
                          ><%- feedback?.user?.firstName %> <%-
                          feedback?.user?.lastName %></span
                        >
                        <span class="text-right"
                          ><%- new
                          Date(feedback?.createdAt).toLocaleDateString("en-IN")
                          %></span
                        >
                      </h4>
                      <p class="star">
                        <span>
                          <% for(let i=0;i< 5;i++){ %>
                          <i class="ion-ios-star" <% if(feedback?.rating
                          <= i){ %> style="color:grey !important;" <% } %>></i
                          >
                          <% } %>
                        </span>
                      </p>
                      <p><%- feedback?.description %></p>
                    </div>
                  </div>
                  <% }); %>
                </div>
                <div class="col-md-5">
                  <div class="rating-wrap">
                    <h3 class="head">Give a Review</h3>
                    <div class="wrap">
                      <p class="star">
                        <span>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <!-- (98%) -->
                        </span>
                        <span
                          ><%- feedbacks?.filter(e=> e?.rating == 5)?.length %>
                          Reviews</span
                        >
                      </p>
                      <p class="star">
                        <span>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <!-- <i class="ion-ios-star"></i> -->
                          <!-- (85%) -->
                        </span>
                        <span
                          ><%- feedbacks?.filter(e=> e?.rating == 4)?.length %>
                          Reviews</span
                        >
                      </p>
                      <p class="star">
                        <span>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <!-- <i class="ion-ios-star"></i> -->
                          <!-- <i class="ion-ios-star"></i> -->
                          <!-- (70%) -->
                        </span>
                        <span
                          ><%- feedbacks?.filter(e=> e?.rating == 3)?.length %>
                          Reviews</span
                        >
                      </p>
                      <p class="star">
                        <span>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <!-- <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          (10%) -->
                        </span>
                        <span
                          ><%- feedbacks?.filter(e=> e?.rating == 2)?.length %>
                          Reviews</span
                        >
                      </p>
                      <p class="star">
                        <span>
                          <i class="ion-ios-star"></i>
                          <!-- <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          <i class="ion-ios-star"></i>
                          (0%) -->
                        </span>
                        <span
                          ><%- feedbacks?.filter(e=> e?.rating == 1)?.length %>
                          Reviews</span
                        >
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-agent"
              role="tabpanel"
              aria-labelledby="pills-agent-tab"
            >
              <div class="row">
                <div class="col-md-6">
                  <ul class="features">
                    <li class="check">
                      <span class="ion-ios-checkmark-circle"></span>
                      Name: <%- property?.user?.firstName %> <%- property?.user?.lastName %>
                    </li>
                    <li class="check">
                      <span class="ion-ios-checkmark-circle"></span>
                      Email : <a href="mailto:<%- property?.user?.email %>" style="color: #666666;"><%- property?.user?.email %></a>
                    </li>
                    <li class="check">
                      <span class="ion-ios-checkmark-circle"></span>
                      Mobile No : <a href="tel:<%- property?.user?.mobileNo %>" style="color: #666666;"><%- property?.user?.mobileNo %></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="floating-btn" data-toggle="modal" data-target="#exampleModalCenter"><i class="fa fa-bug" style="font-size: 20px;" aria-hidden="true"></i>
</div>

<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
  style="backdrop-filter: blur(8px)"
  data-backdrop="static"
>
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body m-4">
          <div class="row">
          <div class="col-sm-8">
        <form action="/cashfree" method="post">
          <input type="hidden" name="propertyId" value="<%- property?.id %>" />
          <input
            type="hidden"
            name="amount"
            value="<%- property?.payOnAccess %>"
          />
          <input type="hidden" name="description" value="Amount for pay on access">
          <input type="hidden" name="paymentType" value="payonaccess">
          <h5><b>Rent/Buy properties from trusted Owners and Brokers</b></h5>
          <div
            class="mb-3 pay-on-access-width"
            style="
              border-radius: 10px;
              background-color: white;
              border: 2px solid var(--primary-color);
              
            "
          >
            <div>
              <ul style="list-style-type: none" class="m-2 pay-on-access-li">
                <li>
                  <span class="ok-style">&#10004;</span
                  ><span class="text-style"
                    >Contact unlimited Owners and Brokers</span
                  >
                </li>
                <li>
                  <span class="ok-style">&#10004;</span
                  ><span class="text-style">Premium details on properties</span>
                </li>
                <li>
                  <span class="ok-style">&#10004;</span
                  ><span class="text-style"
                    >Premium filters and prime properties</span
                  >
                </li>
                <li>
                  <span class="ok-style">&#10004;</span>
                  <span class="text-style">Unlimited Enquires</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <h5>
            You need to pay <b>Rs <%- property?.payOnAccess %></b> amount to see
            agent details
          </h5> -->
          <button
            class="btn btn-primary btn-block pay-on-access-width"
            style="font-weight: bold"
          >
            Pay <b><%- property?.payOnAccess %></b> Rs to see agent and property
            details
          </button>
        </form>
        </div>
        <div class="col-sm-4">
            <img src="<%- baseUrl %>/images/payonaccess.png" class="w-100 h-100" alt="" />
        </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

<!-- Report Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Report</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="/properties/report" method="post">
          <input type="hidden" name="propertyId" value="<%- property?.id %>">
          <% Reports?.forEach(report=>{ %>
          <input type="radio" name="reportType" required id="" value="<%- report?.id %>"><span style="margin-left: 10px;"><%- report?.value %></span>
          <br>
          <% }) %>
          <textarea name="description" class="form-control mb-2" placeholder="Write something" id="" cols="30" rows="3"></textarea>
          <button
            class="btn btn-primary btn-block"
            style="width: 100%; font-weight: bold"
          >
            Report
          </button>
        </form>
      </div>
    </div>
  </div>
</div>


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

<script>
  $(document).ready((e) => {
    $(".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;
    });
    })
    <% if(property?.payOnAccess > 0 && !property?.payonaccess){ %>
      var myModal = new bootstrap.Modal(document.getElementById("exampleModal"),{
        backdrop: 'static'
      });
      myModal.show();
      $(".floating-btn").addClass("z-index-minus-one");
    <% } %>
  });
</script>
<script>
  function initMap() {
            const geocoder = new google.maps.Geocoder();
            let latitude = Number(`<%- property?.address?.latitude %>`);
            let longitude = Number(`<%- property?.address?.longitude %>`);
            const locationString = `<%- property?.address?.street %>,<%- property?.address?.city %>,<%- property?.address?.state %>,India`;
            console.log(geocoder)
            

            if(latitude && longitude){
              const map = new google.maps.Map(document.getElementById("map"), {
                  center: { lat: latitude, lng: Number(longitude) },
                  zoom: 8
              });
              const marker = new google.maps.Marker({
                  position: { lat: latitude, lng: longitude },
                  map: map,
                  icon: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png",
                  title: "Location"
              });
            }else{
              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);
                  }
              });
            }
        }

</script>
