Subversion Repositories SmartDukaan

Rev

Rev 37899 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
37899 ranu 1 
<style>
2 
	/* Self-contained styling — works whether this view is loaded in the dashboard shell
3 
       or opened directly at /emi-catalog/{id}. Does NOT depend on Bootstrap tabs JS/CSS. */
4 
 
5 
	.pl-wrap {
6 
		max-width: 1100px;
7 
		margin: 20px auto;
8 
		padding: 0 20px;
9 
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
10 
		color: #222;
11 
	}
12 
 
13 
	.pl-topbar {
14 
		display: flex;
15 
		align-items: center;
16 
		gap: 14px;
17 
		margin: 0 0 12px 0;
18 
		font-size: 13px;
19 
		color: #666;
20 
	}
21 
 
22 
	.pl-topbar a {
23 
		color: #2E7D32;
24 
		text-decoration: none;
25 
	}
26 
 
27 
	.pl-topbar a:hover {
28 
		text-decoration: underline;
29 
	}
30 
 
31 
	.pl-topbar .pl-sep {
32 
		color: #ccc;
33 
	}
34 
 
35 
	.pl-product {
36 
		border: 1px solid #e3e3e3;
37 
		border-radius: 8px;
38 
		background: #fff;
39 
		overflow: hidden;
40 
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
41 
	}
42 
 
43 
	.pl-product-head {
44 
		padding: 14px 18px;
45 
		border-bottom: 1px solid #eee;
46 
		background: linear-gradient(180deg, #fafafa, #f1f1f1);
47 
	}
48 
 
49 
	.pl-product-title {
50 
		font-size: 17px;
51 
		font-weight: 700;
52 
		color: #222;
53 
	}
54 
 
55 
	.pl-product-meta {
56 
		font-size: 12px;
57 
		color: #666;
58 
		margin-top: 4px;
59 
	}
60 
 
61 
	.pl-product-meta .pl-price {
62 
		color: #1b5e20;
63 
		font-weight: 700;
64 
		margin-left: 8px;
65 
		font-size: 14px;
66 
	}
67 
 
68 
	/* Horizontal tab bar (no Bootstrap) */
69 
	.pl-tabs {
70 
		display: flex;
71 
		gap: 0;
72 
		margin: 0 14px;
73 
		border-bottom: 2px solid #2E7D32;
74 
		list-style: none;
75 
		padding: 0;
76 
	}
77 
 
78 
	.pl-tabs .pl-tab {
79 
		padding: 10px 18px;
80 
		cursor: pointer;
81 
		color: #555;
82 
		font-weight: 600;
83 
		font-size: 14px;
84 
		border-bottom: 3px solid transparent;
85 
		margin-bottom: -2px;
86 
		user-select: none;
87 
		transition: color 0.15s, border-color 0.15s;
88 
	}
89 
 
90 
	.pl-tabs .pl-tab:hover {
91 
		color: #2E7D32;
92 
	}
93 
 
94 
	.pl-tabs .pl-tab.active {
95 
		color: #2E7D32;
96 
		border-bottom-color: #2E7D32;
97 
	}
98 
 
99 
	.pl-tabs .pl-tab-count {
100 
		display: inline-block;
101 
		background: #ccc;
102 
		color: #fff;
103 
		border-radius: 10px;
104 
		padding: 1px 8px;
105 
		font-size: 11px;
106 
		margin-left: 6px;
107 
		font-weight: 700;
108 
	}
109 
 
110 
	.pl-tabs .pl-tab.active .pl-tab-count {
111 
		background: #2E7D32;
112 
	}
113 
 
114 
	/* Panes — all hidden by default; only .active shown */
115 
	.pl-pane {
116 
		display: none;
117 
		padding: 14px 18px;
118 
	}
119 
 
120 
	.pl-pane.active {
121 
		display: block;
122 
	}
123 
 
124 
	.pl-bank {
125 
		border: 1px solid #e3e3e3;
126 
		border-radius: 6px;
127 
		margin: 8px 0;
128 
		background: #fff;
129 
	}
130 
 
131 
	.pl-bank-head {
132 
		display: flex;
133 
		align-items: center;
134 
		gap: 10px;
135 
		padding: 12px 14px;
136 
		cursor: pointer;
137 
		user-select: none;
138 
	}
139 
 
140 
	.pl-bank-head:hover {
141 
		background: #fafafa;
142 
	}
143 
 
144 
	.pl-bank-caret {
145 
		width: 14px;
146 
		color: #888;
147 
		font-size: 11px;
148 
	}
149 
 
150 
	.pl-bank-name {
151 
		font-weight: 600;
152 
		color: #222;
153 
		min-width: 200px;
154 
	}
155 
 
156 
	.pl-bank-badges {
157 
		flex: 0 0 auto;
158 
	}
159 
 
160 
	.pl-bank-sub {
161 
		margin-left: auto;
162 
		color: #777;
163 
		font-size: 12px;
164 
	}
165 
 
166 
	.pl-bank-body {
167 
		padding: 4px 14px 14px 42px;
168 
		border-top: 1px dashed #eee;
169 
		display: none;
170 
	}
171 
 
172 
	.pl-bank.open .pl-bank-body {
173 
		display: block;
174 
	}
175 
 
176 
	.pl-bank.open .pl-bank-caret::before {
177 
		content: "▾";
178 
	}
179 
 
180 
	.pl-bank .pl-bank-caret::before {
181 
		content: "▸";
182 
	}
183 
 
184 
	.pl-badge {
185 
		display: inline-block;
186 
		padding: 2px 8px;
187 
		border-radius: 10px;
188 
		font-size: 10px;
189 
		font-weight: 700;
190 
		letter-spacing: 0.3px;
191 
		margin-right: 4px;
192 
		border: 1px solid transparent;
193 
		text-transform: uppercase;
194 
	}
195 
 
196 
	.pl-badge.nocost {
197 
		color: #1b5e20;
198 
		background: #e8f5e9;
199 
		border-color: #c8e6c9;
200 
	}
201 
 
202 
	.pl-badge.lowcost {
203 
		color: #e65100;
204 
		background: #fff3e0;
205 
		border-color: #ffe0b2;
206 
	}
207 
 
208 
	.pl-badge.other {
209 
		color: #444;
210 
		background: #f0f0f0;
211 
		border-color: #ddd;
212 
	}
213 
 
214 
	.pl-plan {
215 
		border: 1px solid #e8e8e8;
216 
		border-radius: 5px;
217 
		padding: 10px 14px;
218 
		margin: 8px 0;
219 
		background: #fafafa;
220 
	}
221 
 
222 
	.pl-plan-main {
223 
		display: flex;
224 
		align-items: center;
225 
		gap: 8px;
226 
		font-size: 14px;
227 
		flex-wrap: wrap;
228 
	}
229 
 
230 
	.pl-plan-emi {
231 
		font-weight: 700;
232 
		color: #222;
233 
		font-size: 15px;
234 
	}
235 
 
236 
	.pl-plan-x {
237 
		color: #999;
238 
	}
239 
 
240 
	.pl-plan-tenure {
241 
		color: #333;
242 
	}
243 
 
244 
	.pl-plan-sub {
245 
		font-size: 12px;
246 
		color: #666;
247 
		margin-top: 4px;
248 
		font-family: ui-monospace, Menlo, Consolas, monospace;
249 
	}
250 
 
251 
	.pl-empty {
252 
		color: #999;
253 
		font-style: italic;
254 
		padding: 10px 0;
255 
	}
256 
 
257 
	.pl-notfound {
258 
		max-width: 600px;
259 
		margin: 40px auto;
260 
		padding: 20px;
261 
		border: 1px solid #f5c2c2;
262 
		background: #fff5f5;
263 
		border-radius: 6px;
264 
		color: #a00;
265 
	}
266 
</style>
267 
 
268 
<div class="pl-wrap">
269 
	<div class="pl-topbar">
270 
		<a href="${rc.contextPath}/dashboard">Home</a>
271 
		<span class="pl-sep">›</span>
272 
		<a href="javascript:void(0)" class="emi-cat-back">EMI Catalog</a>
273 
		<span class="pl-sep">›</span>
274 
		<span>#if($product)$product.getProductName()#else Not found#end</span>
275 
		<a href="javascript:void(0)" class="emi-cat-back" style="margin-left:auto;">← Back to list</a>
276 
	</div>
277 
 
278 
	#if($notFound)
279 
		<div class="pl-notfound">Product not found.</div>
280 
	#else
281 
		<div class="pl-product">
282 
			<div class="pl-product-head">
283 
				<div class="pl-product-title">$product.getProductName()</div>
284 
				<div class="pl-product-meta">
285 
					<span>$product.getBrand()</span>
286 
					<span>&nbsp;·&nbsp;#$product.getPineSku()</span>
287 
					#if($product.getPriceDisplay())<span class="pl-price">$product.getPriceDisplay()</span>#end
288 
					#if($product.getScrapedAt())<span>&nbsp;·&nbsp;Scraped $product.getScrapedAt()</span>#end
289 
				</div>
290 
			</div>
291 
 
292 
			#if($cardTypes.isEmpty())
293 
				<div class="pl-pane active"><p class="pl-empty">No bank offers persisted for this product.</p></div>
294 
			#else
295 
				<ul class="pl-tabs" role="tablist">
296 
					#set($ctIdx = 0)
297 
					#foreach($entry in $cardTypes.entrySet())
298 
						<li class="pl-tab #if($ctIdx == 0)active#end" onclick="plSwitchTab($ctIdx)"
299 
							data-pane="pl-pane-$ctIdx">
300 
							$entry.getKey() <span class="pl-tab-count">$entry.getValue().size()</span>
301 
						</li>
302 
						#set($ctIdx = $ctIdx + 1)
303 
					#end
304 
				</ul>
305 
 
306 
				#set($ctIdx = 0)
307 
				#foreach($entry in $cardTypes.entrySet())
308 
					<div class="pl-pane #if($ctIdx == 0)active#end" id="pl-pane-$ctIdx">
309 
						#foreach($db in $entry.getValue())
310 
							#set($grp = $db.getGroup())
311 
							#set($plans = $db.getPlans())
312 
							#set($bankId = "bank-$ctIdx-$grp.getId()")
313 
							<div class="pl-bank" id="$bankId">
314 
								<div class="pl-bank-head" onclick="plToggleBank('$bankId')">
315 
									<span class="pl-bank-caret"></span>
316 
									<span class="pl-bank-name">$grp.getBankName()</span>
317 
									<span class="pl-bank-badges">
318 
										#if($grp.getDominantOffer())
319 
									<span class="pl-badge #if($grp.getDominantOffer().toLowerCase().contains(
320 
										'no cost'))nocost#elseif($grp.getDominantOffer().toLowerCase().contains(
321 
										'low cost'))lowcost#{else}other#end">$grp.getDominantOffer()</span>
322 
										#end
323 
									</span>
324 
									<span class="pl-bank-sub">
325 
										#if($plans.size() == 0)No plans
326 
										#else $plans.size() plan#if($plans.size() > 1)s#end
327 
										#end
328 
									</span>
329 
								</div>
330 
								<div class="pl-bank-body">
331 
									#if($plans.size() == 0)
332 
										<div class="pl-empty">No EMI plans captured.</div>
333 
									#else
334 
										#foreach($pl in $plans)
335 
											<div class="pl-plan">
336 
												<div class="pl-plan-main">
337 
													<span class="pl-plan-emi">#if($pl.getEmiAmountRupees())₹$pl.getEmiAmountRupees()#else
338 
														-#end</span>
339 
													<span class="pl-plan-x">×</span>
340 
													<span class="pl-plan-tenure">$pl.getTenureLabel()</span>
341 
													#if($pl.getOfferType())
342 
														<span class="pl-badge #if($pl.getOfferType().toLowerCase().contains(
343 
															'no cost'))nocost#elseif($pl.getOfferType().toLowerCase().contains(
344 
															'low cost'))lowcost#{else}other#end">$pl.getOfferType()</span>
345 
													#end
346 
												</div>
347 
												<div class="pl-plan-sub">
37905 ranu 348 
													#if($product.getPriceRupees())
349 
														<span><strong>Price</strong> ₹$product.getPriceRupees()</span>#end
350 
													#if($pl.getDiscountRupees()) &nbsp;·&nbsp; <span
351 
															style="color:#1b5e20;"><strong>Brand Discount</strong>
352 
														&minus;₹$pl.getDiscountRupees()</span>#end
353 
													#if($pl.getInterestRupees()) &nbsp;·&nbsp; <strong>Interest</strong>
354 
														₹$pl.getInterestRupees()#if($pl.getInterestRatePct())
355 
														@${pl.getInterestRatePct()}%#end#end
356 
													#if($pl.getTotalCostRupees()) &nbsp;·&nbsp; <span
357 
															style="color:#0d47a1;"><strong>Effective Cost</strong>
358 
														₹$pl.getTotalCostRupees()</span>#end
37899 ranu 359 
												</div>
360 
											</div>
361 
										#end
362 
									#end
363 
								</div>
364 
							</div>
365 
						#end
366 
					</div>
367 
					#set($ctIdx = $ctIdx + 1)
368 
				#end
369 
			#end
370 
		</div>
371 
	#end
372 
</div>
373 
 
374 
<script type="text/javascript">
375 
	(function () {
376 
		// Expose on window because this template may be injected via AJAX into #main-content
377 
		// and inline onclick handlers resolve against window.
378 
		window.plSwitchTab = function (idx) {
379 
			var tabs = document.querySelectorAll('.pl-wrap .pl-tabs .pl-tab');
380 
			var panes = document.querySelectorAll('.pl-wrap .pl-pane');
381 
			tabs.forEach(function (t, i) {
382 
				t.classList.toggle('active', i === idx);
383 
			});
384 
			panes.forEach(function (p, i) {
385 
				p.classList.toggle('active', i === idx);
386 
			});
387 
		};
388 
		window.plToggleBank = function (id) {
389 
			var el = document.getElementById(id);
390 
			if (el) el.classList.toggle('open');
391 
		};
392 
	})();
393 
</script>