Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
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">&times;</button>
6 
    <h4 class="modal-title">
7 
        #if($product)EMI Offers &mdash; $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() &nbsp;·&nbsp; #$product.getPineSku()
12 
            #if($product.getPriceDisplay()) &nbsp;·&nbsp; <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">
247 
                                            #if($pl.getTotalCostRupees())Total ₹$pl.getTotalCostRupees()#end
248 
                                            #if($pl.getInterestRupees()) &nbsp;·&nbsp; Intr ₹$pl.getInterestRupees()#end
249 
                                            #if($pl.getInterestRatePct()) @${pl.getInterestRatePct()}%#end
250 
                                            #if($pl.getDiscountRupees()) &nbsp;·&nbsp; Disc ₹$pl.getDiscountRupees()#end
251 
                                        </div>
252 
                                    </div>
253 
                                #end
254 
                            #end
255 
                        </div>
256 
                    </div>
257 
                #end
258 
            </div>
259 
            #set($ctIdx = $ctIdx + 1)
260 
        #end
261 
 
262 
        <script type="text/javascript">
263 
            // Attach to window so re-injection via AJAX works. Namespaced to avoid clashes with /emi-catalog detail page.
264 
            window.plpSwitchTab = function (el, idx) {
265 
                var root = el.closest('.modal-body');
266 
                if (!root) return;
267 
                root.querySelectorAll('.plp-tab').forEach(function (t, i) {
268 
                    t.classList.toggle('active', i === idx);
269 
                });
270 
                root.querySelectorAll('.plp-pane').forEach(function (p, i) {
271 
                    p.classList.toggle('active', i === idx);
272 
                });
273 
            };
274 
            window.plpToggleBank = function (id) {
275 
                var el = document.getElementById(id);
276 
                if (el) el.classList.toggle('open');
277 
            };
278 
        </script>
279 
    #end
280 
</div>
281 
 
282 
<div class="modal-footer">
283 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
284 
</div>