From 9a317bbd70911aba2f9cf98a29b2cb3ca6b58bdc Mon Sep 17 00:00:00 2001
From: Suvadip-sana <suvadipsana602@gmail.com>
Date: Sun, 10 Nov 2024 18:18:24 +0530
Subject: [PATCH] Apply same styling as index page card style

---
 views/search.ejs           |  16 ++-
 views/top_listing_page.ejs | 251 ++++++++++++++++++-------------------
 2 files changed, 131 insertions(+), 136 deletions(-)

diff --git a/views/search.ejs b/views/search.ejs
index 53d0a2dc..041611d3 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -23,7 +23,7 @@
     }
 
     .card-body {
-      padding-bottom: 0.2 !important;
+      padding-bottom: 0 !important;
       height: fit-content !important;
       /* max-height: auto; */
     }
@@ -56,6 +56,9 @@
       margin-top: 4rem;
       margin-bottom: 2.5rem;
     }
+    .card-title{
+      color: #ff385c;
+    }
   </style>
   <div class="tax-container">
     <!-- GST toggler -->
@@ -73,7 +76,7 @@
     <!-- Changed row-col-3 to row-cols-3 and removed row-cols-xs-1 -->
     <% for (listing of results) { %>
       <div class="col popup"> <!-- Added .col to ensure grid layout works -->
-
+        <a href="/listing/<%= listing._id %>" style="text-decoration: none;">
         <div class="card listing-card">
           <img src="<%= listing.image[0].url %>" class="card-img-top" alt="listing_image" />
           <div class="card-body">
@@ -86,12 +89,13 @@
               </span> / night
               <span class="gst-label">(excl. GST)</span>
             </p>
-            <p class="card-text location"><i class="fa-solid fa-location-crosshairs"></i>&nbsp; <%= listing.location %>,
-                <%= listing.country %>
-            </p>
-            <a href="/listing/<%= listing._id %>" class="btn btn-dark show_btn">Show in Detail</a>
+            <div class="card-text d-flex justify-content-between">
+              <p class="location"><i class="fa-solid fa-location-crosshairs"></i>&nbsp; <%= listing.location %>, <%= listing.country %></p>
+              <p><i class="fa-solid fa-heart" style="color: #ff385c;"></i> <span class="likes"><%= listing.likes %></span></p>
+            </div>
           </div>
         </div>
+        </a>
       </div> <!-- End of .col -->
       <% } %>
   </div>
diff --git a/views/top_listing_page.ejs b/views/top_listing_page.ejs
index d8d3c0f7..64623f0f 100644
--- a/views/top_listing_page.ejs
+++ b/views/top_listing_page.ejs
@@ -1,150 +1,141 @@
-<% layout("/layouts/boilerplate") %>
-
-<style>
-.property-container {
-    max-width: 1200px;
-    margin: 3rem auto;
-    padding: 2rem;
-    border-radius: 15px;
-}
-
-h1 {
-    font-size: 2rem;
-    text-align: center;
-    margin-bottom: 2rem;
-    color: #2c3e50; 
-}
-
-.card {
-    background-color: #f7f7f7; 
-    border-radius: 10px;
-    border: 2px solid rgba(128, 128, 128, 0.593);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-    margin: 1rem 0; 
-    transition: transform 0.2s;
-}
-
-.card:hover {
-    transform: scale(1.02); 
-}
-
-.card-img-top {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 200px; 
-    object-fit: cover; 
-}
-
-.card-body {
-    padding: 1rem; 
-}
-
-.card-title {
-    font-size: 1.5rem;
-    color: #4a4a4a;
-    margin-bottom: 0.5rem;
-}
-
-.price {
-    font-weight: bold;
-    color: #008000; 
-}
-
-.gst-label {
-    font-size: 0.8rem;
-    color: #555;
-}
-
-.location {
-    color: #555; 
-}
-
-.show_btn {
-    margin-top: 1rem;
-}
-
-.dark-mode {
-    h1 {
-        color: #ffffff; 
-    }
 
-    .card {
-        background-color: #3d3d3d; 
-        box-shadow: 0 4px 11px rgba(255, 255, 255, 0.1);
-    }
-    .likes{
-        color: #f5f5f5;
+
+
+<%- layout("/layouts/boilerplate") -%>
+  <style>
+    .listing-card {
+      min-height: fit-content !important;
+      /* padding-bottom: 1rem !important; */
     }
 
-    .card-title {
-        color: #f5f5f5; 
+    .popup {
+      transition: transform 0.3s ease;
     }
 
-    .price {
-        color: #f5f5f5; 
+    .popup:hover {
+      /* transform: translateY(-0.2rem); */
+      transform: scale(1.01) translateY(-0.1rem);
     }
 
-    .gst-label {
-        color: #ccc; 
+    .card-img-top {
+      height: 20rem !important;
     }
 
-    .location {
-        color: #ddd; 
+    .show_btn {
+      margin-bottom: 0 !important;
     }
 
     .card-body {
-        color: #cccccc; 
+      padding-bottom: 0 !important;
+      height: fit-content !important;
+      /* max-height: auto; */
     }
 
-    .show_btn {
-        background-color: #e63f22; 
-        color: white; 
+    .tax-toggler-container {
+      display: flex;
+      justify-content: flex-end;
     }
 
-    .show_btn:hover {
-        background-color: #c53822; 
+    .tax-toggler {
+      box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
+      width: 200px;
+      position: relative;
+      right: 1rem;
+      padding: 8px 14px;
+      border-radius: 8px;
+      z-index: 10;
     }
-}
 
-@media(max-width: 455px){
-    .card-body {
-        padding: 0.5rem; 
+    .tax-toggler label {
+      font-size: 11px;
+      margin-left: 5px;
+      cursor: pointer;
     }
-}
-</style>
-<div class="property-container">
-    <h1>Top Properties</h1>
-    <div class="container my-4">
-        <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 row-cols-sm-2 gx-3">
-            <% for (listing of listings) { %>
-                <div class="col popup">
-                    <a href="/listing/<%= listing._id %>" style="text-decoration: none;">
-                        <div class="card listing-card">
-                            <% if (listing.image && listing.image.length > 0) { %>
-                                <img src="<%= listing.image[0].url %>" class="card-img-top" alt="listing_image" />
-                            <% } else { %>
-                                <img src="default-image-url.jpg" class="card-img-top" alt="No image available" /> <!-- Fallback image -->
-                            <% } %>
-                            <div class="card-body">
-                                <h4 class="card-title">
-                                    <%= listing.title.length > 26 ? listing.title.substring(0, 25) + '....' : listing.title %>
-                                </h4>
-                                <p class="mt-3">
-                                    <span class="price" data-base-price="<%= listing.price %>">
-                                        <%= listing.price.toLocaleString("en-IN") %>
-                                    </span> / night
-                                    <span class="gst-label">(excl. GST)</span>
-                                </p>
-                                <p class="likes">❤️: <%= listing.likes %></p>
-                                <p class="card-text location"><i class="fa-solid fa-location-crosshairs"></i>&nbsp; 
-                                    <%= listing.location %>, <%= listing.country %></p>
-                                <a href="/listing/<%= listing._id %>" class="btn btn-dark show_btn">Show in Detail</a>
-                               <% listing.tags.forEach(tag => { %><span class="badge bg-primary"><%= tag %></span><% }); %>
-                            </div>
-                        </div>
-                    </a>
-                </div> 
-            <% } %>
-        </div> 
+
+    .red-text {
+      color: rgba(255, 0, 0, 0.607);
+    }
+    .tax-container{
+      margin-top: 2rem;
+      margin-bottom: 2.5rem;
+    }
+    .card-title{
+      color: #ff385c;
+    }
+    .dark-mode{
+        .head-top{
+            color: #fff;
+        }
+    }
+  </style>
+      <h2 class="text-center mt-5 head-top">Top Properties</h2>
+  <div class="tax-container">
+    <!-- GST toggler -->
+    <div class="tax-toggler-container">
+      <div class="tax-toggler">
+        <div class="form-check-reverse form-switch">
+          <input type="checkbox" role="switch" class="form-check-input" id="gstToggle" onclick="toggleGST()">
+          <label for="gstToggle" class="form-check-label">Display total after taxes</label>
+        </div>
+      </div>
     </div>
-</div>
+  </div>
+
+  <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 row-cols-sm-2 gx-3">
+    <!-- Changed row-col-3 to row-cols-3 and removed row-cols-xs-1 -->
+    <% for (listing of listings) { %>
+      <div class="col popup"> <!-- Added .col to ensure grid layout works -->
+        <a href="/listing/<%= listing._id %>" style="text-decoration: none;">
+        <div class="card listing-card">
+          <img src="<%= listing.image[0].url %>" class="card-img-top" alt="listing_image" />
+          <div class="card-body">
+            <h4 class="card-title">
+              <%= listing.title.length> 26 ? listing.title.substring(0, 25) + '....' : listing.title %>
+            </h4>
+            <p class="mt-3">
+              <span class="price" data-base-price="<%= listing.price %>">
+                <%= listing.price.toLocaleString("en-IN") %>
+              </span> / night
+              <span class="gst-label">(excl. GST)</span>
+            </p>
+            <div class="card-text d-flex justify-content-between">
+              <p class="location"><i class="fa-solid fa-location-crosshairs"></i>&nbsp; <%= listing.location %>, <%= listing.country %></p>
+              <p><i class="fa-solid fa-heart" style="color: #ff385c;"></i> <span class="likes"><%= listing.likes %></span></p>
+            </div>
+          </div>
+        </div>
+        </a>
+      </div> <!-- End of .col -->
+      <% } %>
+  </div>
+
+  <script>
+    //Change the gstRate accordingly
+    const gstRate = 0.18;
+
+    function toggleGST() {
+      const gstToggle = document.getElementById("gstToggle");
+      const priceElements = document.querySelectorAll(".price");
+      const gstLabels = document.querySelectorAll(".gst-label");
+
+      priceElements.forEach((priceElement, index) => {
+        const basePrice = parseFloat(priceElement.getAttribute("data-base-price"));
+        const totalPrice = basePrice * (1 + gstRate);
+
+        if (gstToggle.checked) {
+          // Show GST
+          priceElement.innerText = totalPrice.toLocaleString("en-IN", { style: "currency", currency: "INR" });
+          gstLabels[index].innerText = "(incl. GST)";
+          gstLabels[index].classList.add("red-text"); // Add red color
+        } else {
+          // without GST
+          priceElement.innerText = basePrice.toLocaleString("en-IN", { style: "currency", currency: "INR" });
+          gstLabels[index].innerText = "(excl. GST)";
+          gstLabels[index].classList.remove("red-text"); // Add red color
+        }
+      });
+    }
+
+    // Initialize with base prices
+    document.addEventListener("DOMContentLoaded", toggleGST);
+  </script>
\ No newline at end of file