Blame | Last modification | View Log | RSS feed
## This fragment is injected into #emiCatalogPopupModal .modal-content via AJAX.## It renders the modal header + body (self-contained styles + JS, no Bootstrap tabs dep).<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">#if($product)EMI Offers — $product.getProductName()#else EMI Offers#end</h4>#if($product)<p style="margin:4px 0 0 0; color:#666; font-size:12px;">$product.getBrand() · #$product.getPineSku()#if($product.getPriceDisplay()) · <strongstyle="color:#1b5e20;">$product.getPriceDisplay()</strong>#end</p>#end</div><div class="modal-body" style="max-height:60vh; overflow-y:auto;">#if($notFound)<p style="color:#a00;">No EMI data for this product.</p>#elseif($cardTypes.isEmpty())<p style="color:#999; font-style:italic;">No bank offers persisted for this product.</p>#else<style>.plp-tabs {display: flex;gap: 0;margin: 0;border-bottom: 2px solid #2E7D32;list-style: none;padding: 0;}.plp-tabs .plp-tab {padding: 8px 14px;cursor: pointer;color: #555;font-weight: 600;font-size: 13px;border-bottom: 3px solid transparent;margin-bottom: -2px;user-select: none;}.plp-tabs .plp-tab:hover {color: #2E7D32;}.plp-tabs .plp-tab.active {color: #2E7D32;border-bottom-color: #2E7D32;}.plp-tabs .plp-tab-count {display: inline-block;background: #ccc;color: #fff;border-radius: 10px;padding: 1px 7px;font-size: 10px;margin-left: 5px;font-weight: 700;}.plp-tabs .plp-tab.active .plp-tab-count {background: #2E7D32;}.plp-pane {display: none;padding: 10px 0;}.plp-pane.active {display: block;}.plp-bank {border: 1px solid #e3e3e3;border-radius: 5px;margin: 6px 0;background: #fff;}.plp-bank-head {display: flex;align-items: center;gap: 8px;padding: 9px 12px;cursor: pointer;user-select: none;}.plp-bank-head:hover {background: #fafafa;}.plp-bank-caret {width: 12px;color: #888;font-size: 10px;}.plp-bank-name {font-weight: 600;color: #222;min-width: 180px;font-size: 13px;}.plp-bank-sub {margin-left: auto;color: #777;font-size: 11px;}.plp-bank-body {padding: 4px 12px 10px 32px;border-top: 1px dashed #eee;display: none;}.plp-bank.open .plp-bank-body {display: block;}.plp-bank.open .plp-bank-caret::before {content: "▾";}.plp-bank .plp-bank-caret::before {content: "▸";}.plp-badge {display: inline-block;padding: 1px 7px;border-radius: 9px;font-size: 9px;font-weight: 700;letter-spacing: 0.3px;margin-right: 3px;border: 1px solid transparent;text-transform: uppercase;}.plp-badge.nocost {color: #1b5e20;background: #e8f5e9;border-color: #c8e6c9;}.plp-badge.lowcost {color: #e65100;background: #fff3e0;border-color: #ffe0b2;}.plp-badge.other {color: #444;background: #f0f0f0;border-color: #ddd;}.plp-plan {border: 1px solid #e8e8e8;border-radius: 4px;padding: 8px 10px;margin: 6px 0;background: #fafafa;}.plp-plan-main {display: flex;align-items: center;gap: 7px;font-size: 13px;flex-wrap: wrap;}.plp-plan-emi {font-weight: 700;color: #222;}.plp-plan-x {color: #999;}.plp-plan-sub {font-size: 11px;color: #666;margin-top: 3px;font-family: ui-monospace, Menlo, Consolas, monospace;}</style><ul class="plp-tabs">#set($ctIdx = 0)#foreach($entry in $cardTypes.entrySet())<li class="plp-tab #if($ctIdx == 0)active#end" onclick="plpSwitchTab(this, $ctIdx)"data-pane="plp-pane-$ctIdx">$entry.getKey() <span class="plp-tab-count">$entry.getValue().size()</span></li>#set($ctIdx = $ctIdx + 1)#end</ul>#set($ctIdx = 0)#foreach($entry in $cardTypes.entrySet())<div class="plp-pane #if($ctIdx == 0)active#end" id="plp-pane-$ctIdx">#foreach($db in $entry.getValue())#set($grp = $db.getGroup())#set($plans = $db.getPlans())#set($bankId = "plp-bank-$ctIdx-$grp.getId()")<div class="plp-bank" id="$bankId"><div class="plp-bank-head" onclick="plpToggleBank('$bankId')"><span class="plp-bank-caret"></span><span class="plp-bank-name">$grp.getBankName()</span>#if($grp.getDominantOffer())<span class="plp-badge #if($grp.getDominantOffer().toLowerCase().contains('no cost'))nocost#elseif($grp.getDominantOffer().toLowerCase().contains('low cost'))lowcost#{else}other#end">$grp.getDominantOffer()</span>#end<span class="plp-bank-sub">#if($plans.size() == 0)No plans#else $plans.size()plan#if($plans.size() > 1)s#end#end</span></div><div class="plp-bank-body">#if($plans.size() == 0)<div style="color:#999; font-style:italic;">No EMI plans captured.</div>#else#foreach($pl in $plans)<div class="plp-plan"><div class="plp-plan-main"><span class="plp-plan-emi">#if($pl.getEmiAmountRupees())₹$pl.getEmiAmountRupees()#else-#end</span><span class="plp-plan-x">×</span><span>$pl.getTenureLabel()</span>#if($pl.getOfferType())<span class="plp-badge #if($pl.getOfferType().toLowerCase().contains('no cost'))nocost#elseif($pl.getOfferType().toLowerCase().contains('low cost'))lowcost#{else}other#end">$pl.getOfferType()</span>#end</div><div class="plp-plan-sub">#if($pl.getTotalCostRupees())Total ₹$pl.getTotalCostRupees()#end#if($pl.getInterestRupees()) · Intr ₹$pl.getInterestRupees()#end#if($pl.getInterestRatePct()) @${pl.getInterestRatePct()}%#end#if($pl.getDiscountRupees()) · Disc ₹$pl.getDiscountRupees()#end</div></div>#end#end</div></div>#end</div>#set($ctIdx = $ctIdx + 1)#end<script type="text/javascript">// Attach to window so re-injection via AJAX works. Namespaced to avoid clashes with /emi-catalog detail page.window.plpSwitchTab = function (el, idx) {var root = el.closest('.modal-body');if (!root) return;root.querySelectorAll('.plp-tab').forEach(function (t, i) {t.classList.toggle('active', i === idx);});root.querySelectorAll('.plp-pane').forEach(function (p, i) {p.classList.toggle('active', i === idx);});};window.plpToggleBank = function (id) {var el = document.getElementById(id);if (el) el.classList.toggle('open');};</script>#end</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>