<%- include('../layouts/header'); -%>
<style>
  .card {
    border-radius: 10px;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.1); /* Adjust shadow values as needed */
    transition: box-shadow 0.3s ease;
  }
</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">Plans</h1>
        <p class="breadcrumbs">
          <span class="mr-2"
            ><a href="/">Home <i class="ion-ios-arrow-forward"></i></a
          ></span>
          <span>Plans <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">
      <% plans?.forEach(plan=>{ %>
      <div class="col-md-4 col-sm-12 col-12 mt-3">
        <div class="card" style="width: 100%; height: 100%">
          <!-- <img class="card-img-top" src="..." alt="Card image cap" /> -->
          <div class="card-body d-flex flex-column">
            <h5 class="card-title" style="font-weight: 600; text-align: center">
              <%- plan?.name %>
            </h5>
            <hr />
            <!-- <p class="card-text"><%- plan?.description %></p> -->
            <% let descriptions = plan?.description?.split("&nbbsp"); %>
            <ul class="features">
              <% descriptions?.forEach(description=>{ %>
              <li class="check" style="list-style: none">
                <span
                  class="ion-ios-checkmark-circle mr-2"
                  style="color: var(--primary-color)"
                ></span
                ><%- description.trim() %>
              </li>
              <% }) %>
            </ul>
            <hr />
            <div class="row" style="margin-left: 24px">
              <div class="col-md-6 col-sm-6 col-6">
                <h6 style="color: black">Price :</h6>
              </div>
              <div class="col-md-6 col-sm-6 col-6">
                <span style="color: black"> ₹<%- plan?.amount %></span>
              </div>
            </div>
            <div class="row" style="margin-left: 24px">
              <div class="col-md-6 col-sm-6 col-6">
                <h6 style="color: black">Expires In :</h6>
              </div>
              <div class="col-md-6 col-sm-6 col-6">
                <span style="color: black"><%- plan?.noOfDays %> days</span>
              </div>
            </div>

            <h5></h5>
            <form action="/cashfree" method="post">
              <input
                type="hidden"
                name="propertyId"
                value="<%- propertyId %>"
              />
              <input type="hidden" name="planId" value="<%- plan?.id %>" />
              <input type="hidden" name="paymentType" value="featured" />
              <input type="hidden" name="amount" value="<%- plan?.amount %>" />
              <input
                type="hidden"
                name="description"
                value="Amount for feature property"
              />

              <button
                class="btn btn-primary"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                "
              >
                Feature Now
              </button>
            </form>
          </div>
        </div>
      </div>
      <% }) %>
    </div>
  </div>
</section>

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