Subversion Repositories SmartDukaan

Rev

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

<style>
        /* Self-contained styling — works whether this view is loaded in the dashboard shell
       or opened directly at /emi-catalog/{id}. Does NOT depend on Bootstrap tabs JS/CSS. */

        .pl-wrap {
                max-width: 1100px;
                margin: 20px auto;
                padding: 0 20px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                color: #222;
        }

        .pl-topbar {
                display: flex;
                align-items: center;
                gap: 14px;
                margin: 0 0 12px 0;
                font-size: 13px;
                color: #666;
        }

        .pl-topbar a {
                color: #2E7D32;
                text-decoration: none;
        }

        .pl-topbar a:hover {
                text-decoration: underline;
        }

        .pl-topbar .pl-sep {
                color: #ccc;
        }

        .pl-product {
                border: 1px solid #e3e3e3;
                border-radius: 8px;
                background: #fff;
                overflow: hidden;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .pl-product-head {
                padding: 14px 18px;
                border-bottom: 1px solid #eee;
                background: linear-gradient(180deg, #fafafa, #f1f1f1);
        }

        .pl-product-title {
                font-size: 17px;
                font-weight: 700;
                color: #222;
        }

        .pl-product-meta {
                font-size: 12px;
                color: #666;
                margin-top: 4px;
        }

        .pl-product-meta .pl-price {
                color: #1b5e20;
                font-weight: 700;
                margin-left: 8px;
                font-size: 14px;
        }

        /* Horizontal tab bar (no Bootstrap) */
        .pl-tabs {
                display: flex;
                gap: 0;
                margin: 0 14px;
                border-bottom: 2px solid #2E7D32;
                list-style: none;
                padding: 0;
        }

        .pl-tabs .pl-tab {
                padding: 10px 18px;
                cursor: pointer;
                color: #555;
                font-weight: 600;
                font-size: 14px;
                border-bottom: 3px solid transparent;
                margin-bottom: -2px;
                user-select: none;
                transition: color 0.15s, border-color 0.15s;
        }

        .pl-tabs .pl-tab:hover {
                color: #2E7D32;
        }

        .pl-tabs .pl-tab.active {
                color: #2E7D32;
                border-bottom-color: #2E7D32;
        }

        .pl-tabs .pl-tab-count {
                display: inline-block;
                background: #ccc;
                color: #fff;
                border-radius: 10px;
                padding: 1px 8px;
                font-size: 11px;
                margin-left: 6px;
                font-weight: 700;
        }

        .pl-tabs .pl-tab.active .pl-tab-count {
                background: #2E7D32;
        }

        /* Panes — all hidden by default; only .active shown */
        .pl-pane {
                display: none;
                padding: 14px 18px;
        }

        .pl-pane.active {
                display: block;
        }

        .pl-bank {
                border: 1px solid #e3e3e3;
                border-radius: 6px;
                margin: 8px 0;
                background: #fff;
        }

        .pl-bank-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                cursor: pointer;
                user-select: none;
        }

        .pl-bank-head:hover {
                background: #fafafa;
        }

        .pl-bank-caret {
                width: 14px;
                color: #888;
                font-size: 11px;
        }

        .pl-bank-name {
                font-weight: 600;
                color: #222;
                min-width: 200px;
        }

        .pl-bank-badges {
                flex: 0 0 auto;
        }

        .pl-bank-sub {
                margin-left: auto;
                color: #777;
                font-size: 12px;
        }

        .pl-bank-body {
                padding: 4px 14px 14px 42px;
                border-top: 1px dashed #eee;
                display: none;
        }

        .pl-bank.open .pl-bank-body {
                display: block;
        }

        .pl-bank.open .pl-bank-caret::before {
                content: "▾";
        }

        .pl-bank .pl-bank-caret::before {
                content: "▸";
        }

        .pl-badge {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 10px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.3px;
                margin-right: 4px;
                border: 1px solid transparent;
                text-transform: uppercase;
        }

        .pl-badge.nocost {
                color: #1b5e20;
                background: #e8f5e9;
                border-color: #c8e6c9;
        }

        .pl-badge.lowcost {
                color: #e65100;
                background: #fff3e0;
                border-color: #ffe0b2;
        }

        .pl-badge.other {
                color: #444;
                background: #f0f0f0;
                border-color: #ddd;
        }

        .pl-plan {
                border: 1px solid #e8e8e8;
                border-radius: 5px;
                padding: 10px 14px;
                margin: 8px 0;
                background: #fafafa;
        }

        .pl-plan-main {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                flex-wrap: wrap;
        }

        .pl-plan-emi {
                font-weight: 700;
                color: #222;
                font-size: 15px;
        }

        .pl-plan-x {
                color: #999;
        }

        .pl-plan-tenure {
                color: #333;
        }

        .pl-plan-sub {
                font-size: 12px;
                color: #666;
                margin-top: 4px;
                font-family: ui-monospace, Menlo, Consolas, monospace;
        }

        .pl-empty {
                color: #999;
                font-style: italic;
                padding: 10px 0;
        }

        .pl-notfound {
                max-width: 600px;
                margin: 40px auto;
                padding: 20px;
                border: 1px solid #f5c2c2;
                background: #fff5f5;
                border-radius: 6px;
                color: #a00;
        }
</style>

<div class="pl-wrap">
        <div class="pl-topbar">
                <a href="${rc.contextPath}/dashboard">Home</a>
                <span class="pl-sep">›</span>
                <a href="javascript:void(0)" class="emi-cat-back">EMI Catalog</a>
                <span class="pl-sep">›</span>
                <span>#if($product)$product.getProductName()#else Not found#end</span>
                <a href="javascript:void(0)" class="emi-cat-back" style="margin-left:auto;">← Back to list</a>
        </div>

        #if($notFound)
                <div class="pl-notfound">Product not found.</div>
        #else
                <div class="pl-product">
                        <div class="pl-product-head">
                                <div class="pl-product-title">$product.getProductName()</div>
                                <div class="pl-product-meta">
                                        <span>$product.getBrand()</span>
                                        <span>&nbsp;·&nbsp;#$product.getPineSku()</span>
                                        #if($product.getPriceDisplay())<span class="pl-price">$product.getPriceDisplay()</span>#end
                                        #if($product.getScrapedAt())<span>&nbsp;·&nbsp;Scraped $product.getScrapedAt()</span>#end
                                </div>
                        </div>

                        #if($cardTypes.isEmpty())
                                <div class="pl-pane active"><p class="pl-empty">No bank offers persisted for this product.</p></div>
                        #else
                                <ul class="pl-tabs" role="tablist">
                                        #set($ctIdx = 0)
                                        #foreach($entry in $cardTypes.entrySet())
                                                <li class="pl-tab #if($ctIdx == 0)active#end" onclick="plSwitchTab($ctIdx)"
                                                        data-pane="pl-pane-$ctIdx">
                                                        $entry.getKey() <span class="pl-tab-count">$entry.getValue().size()</span>
                                                </li>
                                                #set($ctIdx = $ctIdx + 1)
                                        #end
                                </ul>

                                #set($ctIdx = 0)
                                #foreach($entry in $cardTypes.entrySet())
                                        <div class="pl-pane #if($ctIdx == 0)active#end" id="pl-pane-$ctIdx">
                                                #foreach($db in $entry.getValue())
                                                        #set($grp = $db.getGroup())
                                                        #set($plans = $db.getPlans())
                                                        #set($bankId = "bank-$ctIdx-$grp.getId()")
                                                        <div class="pl-bank" id="$bankId">
                                                                <div class="pl-bank-head" onclick="plToggleBank('$bankId')">
                                                                        <span class="pl-bank-caret"></span>
                                                                        <span class="pl-bank-name">$grp.getBankName()</span>
                                                                        <span class="pl-bank-badges">
                                                                                #if($grp.getDominantOffer())
                                                                        <span class="pl-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>
                                                                        <span class="pl-bank-sub">
                                                                                #if($plans.size() == 0)No plans
                                                                                #else $plans.size() plan#if($plans.size() > 1)s#end
                                                                                #end
                                                                        </span>
                                                                </div>
                                                                <div class="pl-bank-body">
                                                                        #if($plans.size() == 0)
                                                                                <div class="pl-empty">No EMI plans captured.</div>
                                                                        #else
                                                                                #foreach($pl in $plans)
                                                                                        <div class="pl-plan">
                                                                                                <div class="pl-plan-main">
                                                                                                        <span class="pl-plan-emi">#if($pl.getEmiAmountRupees())₹$pl.getEmiAmountRupees()#else
                                                                                                                -#end</span>
                                                                                                        <span class="pl-plan-x">×</span>
                                                                                                        <span class="pl-plan-tenure">$pl.getTenureLabel()</span>
                                                                                                        #if($pl.getOfferType())
                                                                                                                <span class="pl-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="pl-plan-sub">
                                                                                                        #if($product.getPriceRupees())
                                                                                                                <span><strong>Price</strong> ₹$product.getPriceRupees()</span>#end
                                                                                                        #if($pl.getDiscountRupees()) &nbsp;·&nbsp; <span
                                                                                                                        style="color:#1b5e20;"><strong>Brand Discount</strong>
                                                                                                                &minus;₹$pl.getDiscountRupees()</span>#end
                                                                                                        #if($pl.getInterestRupees()) &nbsp;·&nbsp; <strong>Interest</strong>
                                                                                                                ₹$pl.getInterestRupees()#if($pl.getInterestRatePct())
                                                                                                                @${pl.getInterestRatePct()}%#end#end
                                                                                                        #if($pl.getTotalCostRupees()) &nbsp;·&nbsp; <span
                                                                                                                        style="color:#0d47a1;"><strong>Effective Cost</strong>
                                                                                                                ₹$pl.getTotalCostRupees()</span>#end
                                                                                                </div>
                                                                                        </div>
                                                                                #end
                                                                        #end
                                                                </div>
                                                        </div>
                                                #end
                                        </div>
                                        #set($ctIdx = $ctIdx + 1)
                                #end
                        #end
                </div>
        #end
</div>

<script type="text/javascript">
        (function () {
                // Expose on window because this template may be injected via AJAX into #main-content
                // and inline onclick handlers resolve against window.
                window.plSwitchTab = function (idx) {
                        var tabs = document.querySelectorAll('.pl-wrap .pl-tabs .pl-tab');
                        var panes = document.querySelectorAll('.pl-wrap .pl-pane');
                        tabs.forEach(function (t, i) {
                                t.classList.toggle('active', i === idx);
                        });
                        panes.forEach(function (p, i) {
                                p.classList.toggle('active', i === idx);
                        });
                };
                window.plToggleBank = function (id) {
                        var el = document.getElementById(id);
                        if (el) el.classList.toggle('open');
                };
        })();
</script>