| 37899 |
ranu |
1 |
## This fragment is injected into #emiCatalogPopupModal .modal-content via AJAX.
|
|
|
2 |
## It renders the modal header + body (self-contained styles + JS, no Bootstrap tabs dep).
|
|
|
3 |
|
|
|
4 |
<div class="modal-header">
|
|
|
5 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
6 |
<h4 class="modal-title">
|
|
|
7 |
#if($product)EMI Offers — $product.getProductName()#else EMI Offers#end
|
|
|
8 |
</h4>
|
|
|
9 |
#if($product)
|
|
|
10 |
<p style="margin:4px 0 0 0; color:#666; font-size:12px;">
|
|
|
11 |
$product.getBrand() · #$product.getPineSku()
|
|
|
12 |
#if($product.getPriceDisplay()) · <strong
|
|
|
13 |
style="color:#1b5e20;">$product.getPriceDisplay()</strong>#end
|
|
|
14 |
</p>
|
|
|
15 |
#end
|
|
|
16 |
</div>
|
|
|
17 |
|
|
|
18 |
<div class="modal-body" style="max-height:60vh; overflow-y:auto;">
|
|
|
19 |
#if($notFound)
|
|
|
20 |
<p style="color:#a00;">No EMI data for this product.</p>
|
|
|
21 |
#elseif($cardTypes.isEmpty())
|
|
|
22 |
<p style="color:#999; font-style:italic;">No bank offers persisted for this product.</p>
|
|
|
23 |
#else
|
|
|
24 |
|
|
|
25 |
<style>
|
|
|
26 |
.plp-tabs {
|
|
|
27 |
display: flex;
|
|
|
28 |
gap: 0;
|
|
|
29 |
margin: 0;
|
|
|
30 |
border-bottom: 2px solid #2E7D32;
|
|
|
31 |
list-style: none;
|
|
|
32 |
padding: 0;
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
.plp-tabs .plp-tab {
|
|
|
36 |
padding: 8px 14px;
|
|
|
37 |
cursor: pointer;
|
|
|
38 |
color: #555;
|
|
|
39 |
font-weight: 600;
|
|
|
40 |
font-size: 13px;
|
|
|
41 |
border-bottom: 3px solid transparent;
|
|
|
42 |
margin-bottom: -2px;
|
|
|
43 |
user-select: none;
|
|
|
44 |
}
|
|
|
45 |
|
|
|
46 |
.plp-tabs .plp-tab:hover {
|
|
|
47 |
color: #2E7D32;
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
.plp-tabs .plp-tab.active {
|
|
|
51 |
color: #2E7D32;
|
|
|
52 |
border-bottom-color: #2E7D32;
|
|
|
53 |
}
|
|
|
54 |
|
|
|
55 |
.plp-tabs .plp-tab-count {
|
|
|
56 |
display: inline-block;
|
|
|
57 |
background: #ccc;
|
|
|
58 |
color: #fff;
|
|
|
59 |
border-radius: 10px;
|
|
|
60 |
padding: 1px 7px;
|
|
|
61 |
font-size: 10px;
|
|
|
62 |
margin-left: 5px;
|
|
|
63 |
font-weight: 700;
|
|
|
64 |
}
|
|
|
65 |
|
|
|
66 |
.plp-tabs .plp-tab.active .plp-tab-count {
|
|
|
67 |
background: #2E7D32;
|
|
|
68 |
}
|
|
|
69 |
|
|
|
70 |
.plp-pane {
|
|
|
71 |
display: none;
|
|
|
72 |
padding: 10px 0;
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
.plp-pane.active {
|
|
|
76 |
display: block;
|
|
|
77 |
}
|
|
|
78 |
|
|
|
79 |
.plp-bank {
|
|
|
80 |
border: 1px solid #e3e3e3;
|
|
|
81 |
border-radius: 5px;
|
|
|
82 |
margin: 6px 0;
|
|
|
83 |
background: #fff;
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
.plp-bank-head {
|
|
|
87 |
display: flex;
|
|
|
88 |
align-items: center;
|
|
|
89 |
gap: 8px;
|
|
|
90 |
padding: 9px 12px;
|
|
|
91 |
cursor: pointer;
|
|
|
92 |
user-select: none;
|
|
|
93 |
}
|
|
|
94 |
|
|
|
95 |
.plp-bank-head:hover {
|
|
|
96 |
background: #fafafa;
|
|
|
97 |
}
|
|
|
98 |
|
|
|
99 |
.plp-bank-caret {
|
|
|
100 |
width: 12px;
|
|
|
101 |
color: #888;
|
|
|
102 |
font-size: 10px;
|
|
|
103 |
}
|
|
|
104 |
|
|
|
105 |
.plp-bank-name {
|
|
|
106 |
font-weight: 600;
|
|
|
107 |
color: #222;
|
|
|
108 |
min-width: 180px;
|
|
|
109 |
font-size: 13px;
|
|
|
110 |
}
|
|
|
111 |
|
|
|
112 |
.plp-bank-sub {
|
|
|
113 |
margin-left: auto;
|
|
|
114 |
color: #777;
|
|
|
115 |
font-size: 11px;
|
|
|
116 |
}
|
|
|
117 |
|
|
|
118 |
.plp-bank-body {
|
|
|
119 |
padding: 4px 12px 10px 32px;
|
|
|
120 |
border-top: 1px dashed #eee;
|
|
|
121 |
display: none;
|
|
|
122 |
}
|
|
|
123 |
|
|
|
124 |
.plp-bank.open .plp-bank-body {
|
|
|
125 |
display: block;
|
|
|
126 |
}
|
|
|
127 |
|
|
|
128 |
.plp-bank.open .plp-bank-caret::before {
|
|
|
129 |
content: "▾";
|
|
|
130 |
}
|
|
|
131 |
|
|
|
132 |
.plp-bank .plp-bank-caret::before {
|
|
|
133 |
content: "▸";
|
|
|
134 |
}
|
|
|
135 |
|
|
|
136 |
.plp-badge {
|
|
|
137 |
display: inline-block;
|
|
|
138 |
padding: 1px 7px;
|
|
|
139 |
border-radius: 9px;
|
|
|
140 |
font-size: 9px;
|
|
|
141 |
font-weight: 700;
|
|
|
142 |
letter-spacing: 0.3px;
|
|
|
143 |
margin-right: 3px;
|
|
|
144 |
border: 1px solid transparent;
|
|
|
145 |
text-transform: uppercase;
|
|
|
146 |
}
|
|
|
147 |
|
|
|
148 |
.plp-badge.nocost {
|
|
|
149 |
color: #1b5e20;
|
|
|
150 |
background: #e8f5e9;
|
|
|
151 |
border-color: #c8e6c9;
|
|
|
152 |
}
|
|
|
153 |
|
|
|
154 |
.plp-badge.lowcost {
|
|
|
155 |
color: #e65100;
|
|
|
156 |
background: #fff3e0;
|
|
|
157 |
border-color: #ffe0b2;
|
|
|
158 |
}
|
|
|
159 |
|
|
|
160 |
.plp-badge.other {
|
|
|
161 |
color: #444;
|
|
|
162 |
background: #f0f0f0;
|
|
|
163 |
border-color: #ddd;
|
|
|
164 |
}
|
|
|
165 |
|
|
|
166 |
.plp-plan {
|
|
|
167 |
border: 1px solid #e8e8e8;
|
|
|
168 |
border-radius: 4px;
|
|
|
169 |
padding: 8px 10px;
|
|
|
170 |
margin: 6px 0;
|
|
|
171 |
background: #fafafa;
|
|
|
172 |
}
|
|
|
173 |
|
|
|
174 |
.plp-plan-main {
|
|
|
175 |
display: flex;
|
|
|
176 |
align-items: center;
|
|
|
177 |
gap: 7px;
|
|
|
178 |
font-size: 13px;
|
|
|
179 |
flex-wrap: wrap;
|
|
|
180 |
}
|
|
|
181 |
|
|
|
182 |
.plp-plan-emi {
|
|
|
183 |
font-weight: 700;
|
|
|
184 |
color: #222;
|
|
|
185 |
}
|
|
|
186 |
|
|
|
187 |
.plp-plan-x {
|
|
|
188 |
color: #999;
|
|
|
189 |
}
|
|
|
190 |
|
|
|
191 |
.plp-plan-sub {
|
|
|
192 |
font-size: 11px;
|
|
|
193 |
color: #666;
|
|
|
194 |
margin-top: 3px;
|
|
|
195 |
font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
|
196 |
}
|
|
|
197 |
</style>
|
|
|
198 |
|
|
|
199 |
<ul class="plp-tabs">
|
|
|
200 |
#set($ctIdx = 0)
|
|
|
201 |
#foreach($entry in $cardTypes.entrySet())
|
|
|
202 |
<li class="plp-tab #if($ctIdx == 0)active#end" onclick="plpSwitchTab(this, $ctIdx)"
|
|
|
203 |
data-pane="plp-pane-$ctIdx">
|
|
|
204 |
$entry.getKey() <span class="plp-tab-count">$entry.getValue().size()</span>
|
|
|
205 |
</li>
|
|
|
206 |
#set($ctIdx = $ctIdx + 1)
|
|
|
207 |
#end
|
|
|
208 |
</ul>
|
|
|
209 |
|
|
|
210 |
#set($ctIdx = 0)
|
|
|
211 |
#foreach($entry in $cardTypes.entrySet())
|
|
|
212 |
<div class="plp-pane #if($ctIdx == 0)active#end" id="plp-pane-$ctIdx">
|
|
|
213 |
#foreach($db in $entry.getValue())
|
|
|
214 |
#set($grp = $db.getGroup())
|
|
|
215 |
#set($plans = $db.getPlans())
|
|
|
216 |
#set($bankId = "plp-bank-$ctIdx-$grp.getId()")
|
|
|
217 |
<div class="plp-bank" id="$bankId">
|
|
|
218 |
<div class="plp-bank-head" onclick="plpToggleBank('$bankId')">
|
|
|
219 |
<span class="plp-bank-caret"></span>
|
|
|
220 |
<span class="plp-bank-name">$grp.getBankName()</span>
|
|
|
221 |
#if($grp.getDominantOffer())
|
|
|
222 |
<span class="plp-badge #if($grp.getDominantOffer().toLowerCase().contains(
|
|
|
223 |
'no cost'))nocost#elseif($grp.getDominantOffer().toLowerCase().contains(
|
|
|
224 |
'low cost'))lowcost#{else}other#end">$grp.getDominantOffer()</span>
|
|
|
225 |
#end
|
|
|
226 |
<span class="plp-bank-sub">#if($plans.size() == 0)No plans#else $plans.size()
|
|
|
227 |
plan#if($plans.size() > 1)s#end#end</span>
|
|
|
228 |
</div>
|
|
|
229 |
<div class="plp-bank-body">
|
|
|
230 |
#if($plans.size() == 0)
|
|
|
231 |
<div style="color:#999; font-style:italic;">No EMI plans captured.</div>
|
|
|
232 |
#else
|
|
|
233 |
#foreach($pl in $plans)
|
|
|
234 |
<div class="plp-plan">
|
|
|
235 |
<div class="plp-plan-main">
|
|
|
236 |
<span class="plp-plan-emi">#if($pl.getEmiAmountRupees())₹$pl.getEmiAmountRupees()#else
|
|
|
237 |
-#end</span>
|
|
|
238 |
<span class="plp-plan-x">×</span>
|
|
|
239 |
<span>$pl.getTenureLabel()</span>
|
|
|
240 |
#if($pl.getOfferType())
|
|
|
241 |
<span class="plp-badge #if($pl.getOfferType().toLowerCase().contains(
|
|
|
242 |
'no cost'))nocost#elseif($pl.getOfferType().toLowerCase().contains(
|
|
|
243 |
'low cost'))lowcost#{else}other#end">$pl.getOfferType()</span>
|
|
|
244 |
#end
|
|
|
245 |
</div>
|
|
|
246 |
<div class="plp-plan-sub">
|
| 37905 |
ranu |
247 |
#if($product.getPriceRupees())
|
|
|
248 |
<span><strong>Price</strong> ₹$product.getPriceRupees()</span>#end
|
|
|
249 |
#if($pl.getDiscountRupees()) · <span
|
|
|
250 |
style="color:#1b5e20;"><strong>Brand Discount</strong> −₹$pl.getDiscountRupees()</span>#end
|
|
|
251 |
#if($pl.getInterestRupees()) · <strong>Interest</strong>
|
|
|
252 |
₹$pl.getInterestRupees()#if($pl.getInterestRatePct())
|
|
|
253 |
@${pl.getInterestRatePct()}%#end#end
|
|
|
254 |
#if($pl.getTotalCostRupees()) · <span
|
|
|
255 |
style="color:#0d47a1;"><strong>Effective Cost</strong> ₹$pl.getTotalCostRupees()</span>#end
|
| 37899 |
ranu |
256 |
</div>
|
|
|
257 |
</div>
|
|
|
258 |
#end
|
|
|
259 |
#end
|
|
|
260 |
</div>
|
|
|
261 |
</div>
|
|
|
262 |
#end
|
|
|
263 |
</div>
|
|
|
264 |
#set($ctIdx = $ctIdx + 1)
|
|
|
265 |
#end
|
|
|
266 |
|
|
|
267 |
<script type="text/javascript">
|
|
|
268 |
// Attach to window so re-injection via AJAX works. Namespaced to avoid clashes with /emi-catalog detail page.
|
|
|
269 |
window.plpSwitchTab = function (el, idx) {
|
|
|
270 |
var root = el.closest('.modal-body');
|
|
|
271 |
if (!root) return;
|
|
|
272 |
root.querySelectorAll('.plp-tab').forEach(function (t, i) {
|
|
|
273 |
t.classList.toggle('active', i === idx);
|
|
|
274 |
});
|
|
|
275 |
root.querySelectorAll('.plp-pane').forEach(function (p, i) {
|
|
|
276 |
p.classList.toggle('active', i === idx);
|
|
|
277 |
});
|
|
|
278 |
};
|
|
|
279 |
window.plpToggleBank = function (id) {
|
|
|
280 |
var el = document.getElementById(id);
|
|
|
281 |
if (el) el.classList.toggle('open');
|
|
|
282 |
};
|
|
|
283 |
</script>
|
|
|
284 |
#end
|
|
|
285 |
</div>
|
|
|
286 |
|
|
|
287 |
<div class="modal-footer">
|
|
|
288 |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
|
289 |
</div>
|