| Line 556... |
Line 556... |
| 556 |
</div>
|
556 |
</div>
|
| 557 |
</div>
|
557 |
</div>
|
| 558 |
<!-- overview end -->
|
558 |
<!-- overview end -->
|
| 559 |
|
559 |
|
| 560 |
#if($staticScheme)
|
560 |
#if($staticScheme)
|
| 561 |
## ================= Super Retailer Club 5 banner =================
|
561 |
## ================= Super Retailer Club 5 card =================
|
| - |
|
562 |
#set($srcTierRewards = {
|
| - |
|
563 |
"Shuruaat": "1 GM GOLD COIN",
|
| - |
|
564 |
"Udaan": "1 GM GOLD COIN",
|
| - |
|
565 |
"Raftaar": "1 GM GOLD COIN",
|
| - |
|
566 |
"Tarakki": "1 GM GOLD COIN",
|
| - |
|
567 |
"Vijeta": "1 GM GOLD COIN",
|
| - |
|
568 |
"Maharaja": "1 GM GOLD COIN"
|
| - |
|
569 |
})
|
| - |
|
570 |
#set($srcTierTrophies = {
|
| 562 |
## Banner image includes: logo, scheme duration, "YOUR ASSIGNED TARGET" label,
|
571 |
"Shuruaat": "/resources/images/src-images/Shuruaat.png",
|
| - |
|
572 |
"Udaan": "/resources/images/src-images/Udaan.png",
|
| - |
|
573 |
"Raftaar": "/resources/images/src-images/Raftaar.png",
|
| 563 |
## and Download Scheme Letter graphic. Only the target amount is overlaid dynamically.
|
574 |
"Tarakki": "/resources/images/src-images/Tarakki.png",
|
| - |
|
575 |
"Vijeta": "/resources/images/src-images/Vijeta.png",
|
| - |
|
576 |
"Maharaja": "/resources/images/src-images/Maharaja.png"
|
| - |
|
577 |
})
|
| 564 |
## Clicking anywhere on the banner downloads the scheme letter PDF.
|
578 |
#set($aimReward = $srcTierRewards.get($aimingTier))
|
| - |
|
579 |
#set($aimTrophy = $srcTierTrophies.get($aimingTier))
|
| - |
|
580 |
#set($barPct = $achievementPercent)
|
| - |
|
581 |
#if($barPct > 100) #set($barPct = 100) #end
|
| - |
|
582 |
|
| 565 |
<div class="row" style="margin: 0 0 15px 0;">
|
583 |
<div class="row" style="margin: 0 0 15px 0;">
|
| 566 |
<div class="col-lg-12" style="padding: 0 15px;">
|
584 |
<div class="col-lg-12" style="padding: 0 15px;">
|
| 567 |
<a href="/resources/images/super-retailer-club-scheme.pdf"
|
585 |
<div style="background:#fff;border:1px solid #eee;border-radius:12px;
|
| - |
|
586 |
box-shadow:0 1px 3px rgba(0,0,0,0.04);overflow:hidden;">
|
| 568 |
download
|
587 |
<div style="display:grid;
|
| - |
|
588 |
grid-template-columns: 220px 220px 400px 1fr;
|
| - |
|
589 |
align-items:start;gap:24px;padding:26px 26px 22px 26px;">
|
| - |
|
590 |
|
| - |
|
591 |
## --- Col 1: SRC5 logo ---
|
| 569 |
style="display: block; position: relative; text-decoration: none;">
|
592 |
<div style="display:flex;align-items:center;justify-content:center;min-height:170px;">
|
| 570 |
<img src="/resources/images/super-retailer-club-5.jpeg"
|
593 |
<img src="/resources/images/src-images/Group%204.png"
|
| 571 |
alt="Super Retailer Club 5"
|
594 |
alt="Super Retailer Club 5"
|
| - |
|
595 |
style="width:100%;max-width:220px;height:auto;">
|
| - |
|
596 |
</div>
|
| - |
|
597 |
|
| - |
|
598 |
## --- Col 2: Total Target ---
|
| - |
|
599 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;">
|
| - |
|
600 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:22px;white-space:nowrap;height:44px;">
|
| - |
|
601 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
602 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
603 |
<img src="/resources/images/src-images/Target.png" alt=""
|
| - |
|
604 |
style="height:22px;">
|
| - |
|
605 |
</span>
|
| - |
|
606 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">TOTAL TARGET</span>
|
| - |
|
607 |
</div>
|
| - |
|
608 |
<div style="font-size:34px;font-weight:800;color:#111;white-space:nowrap;">
|
| - |
|
609 |
₹$totalTargetDisplay
|
| - |
|
610 |
</div>
|
| - |
|
611 |
</div>
|
| - |
|
612 |
|
| - |
|
613 |
## --- Col 3: Total Achievement (with breakdown) ---
|
| - |
|
614 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;">
|
| - |
|
615 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;white-space:nowrap;height:44px;">
|
| - |
|
616 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
617 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
618 |
<img src="/resources/images/src-images/TOTAL%20ACHIEVEMENT.png" alt=""
|
| - |
|
619 |
style="height:22px;">
|
| - |
|
620 |
</span>
|
| - |
|
621 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">TOTAL ACHIEVEMENT</span>
|
| - |
|
622 |
</div>
|
| - |
|
623 |
<div style="font-size:30px;font-weight:800;color:#d32f2f;margin-bottom:8px;white-space:nowrap;">
|
| - |
|
624 |
₹$schemeAchievementDisplay
|
| - |
|
625 |
</div>
|
| - |
|
626 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
| - |
|
627 |
<div style="flex:1;height:12px;background:#f2f2f2;border-radius:6px;overflow:hidden;">
|
| 572 |
style="width: 100%; height: auto; display: block; border-radius: 8px;">
|
628 |
<div style="width:${barPct}%;height:100%;background:#d32f2f;border-radius:6px;"></div>
|
| - |
|
629 |
</div>
|
| - |
|
630 |
<div style="font-weight:800;color:#1a1a1a;min-width:50px;text-align:right;font-size:17px;">
|
| - |
|
631 |
${achievementPercent}%
|
| - |
|
632 |
</div>
|
| - |
|
633 |
</div>
|
| - |
|
634 |
<button type="button" id="srcAchToggle"
|
| - |
|
635 |
style="display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
|
| - |
|
636 |
background:none;border:none;padding:4px 0;cursor:pointer;
|
| - |
|
637 |
color:#5b2b8c;font-weight:700;font-size:13px;letter-spacing:0.3px;">
|
| - |
|
638 |
<span id="srcAchToggleText">Click to expand</span>
|
| - |
|
639 |
<span id="srcAchToggleIcon"
|
| - |
|
640 |
style="display:inline-flex;transition:transform 0.2s ease;">
|
| - |
|
641 |
<i class="fa fa-chevron-down"></i>
|
| - |
|
642 |
</span>
|
| - |
|
643 |
</button>
|
| - |
|
644 |
<div id="srcAchBreakdown" style="display:none;">
|
| - |
|
645 |
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;">
|
| - |
|
646 |
<div style="display:flex;align-items:center;gap:14px;color:#1a1a1a;">
|
| - |
|
647 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
648 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
649 |
<img src="/resources/images/src-images/Mobile%20And%20tv.png" alt=""
|
| - |
|
650 |
style="height:24px;">
|
| - |
|
651 |
</span>
|
| - |
|
652 |
<span style="font-weight:700;font-size:17px;">Mobiles & LEDs</span>
|
| - |
|
653 |
</div>
|
| - |
|
654 |
<div style="font-weight:800;color:#d32f2f;white-space:nowrap;font-size:17px;">
|
| - |
|
655 |
₹$mobileLedAchievementDisplay</div>
|
| - |
|
656 |
</div>
|
| - |
|
657 |
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;">
|
| - |
|
658 |
<div style="display:flex;align-items:center;gap:14px;color:#1a1a1a;">
|
| - |
|
659 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
660 |
width:44px;height:44px;border-radius:50%;background:#efe4fc;flex-shrink:0;">
|
| - |
|
661 |
<img src="/resources/images/src-images/accessories.png" alt=""
|
| - |
|
662 |
style="height:24px;">
|
| - |
|
663 |
</span>
|
| - |
|
664 |
<span style="font-weight:700;font-size:17px;">Accessories</span>
|
| - |
|
665 |
</div>
|
| - |
|
666 |
<div style="font-weight:800;color:#d32f2f;white-space:nowrap;font-size:17px;">
|
| - |
|
667 |
₹$accessoriesAchievementDisplay</div>
|
| - |
|
668 |
</div>
|
| - |
|
669 |
</div>
|
| - |
|
670 |
</div>
|
| - |
|
671 |
|
| - |
|
672 |
## --- Col 4: Currently Aiming For + trophy ---
|
| - |
|
673 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;
|
| - |
|
674 |
display:flex;align-items:center;gap:18px;">
|
| 573 |
<div style="position: absolute;
|
675 |
<div style="flex:1;min-width:0;">
|
| - |
|
676 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;white-space:nowrap;height:44px;">
|
| - |
|
677 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
678 |
width:44px;height:44px;border-radius:50%;background:#efe4fc;flex-shrink:0;">
|
| - |
|
679 |
<img src="/resources/images/src-images/CURRENTLY%20AIMING%20FOR.png"
|
| - |
|
680 |
alt="" style="height:22px;">
|
| 574 |
top: 52%; left: 68%;
|
681 |
</span>
|
| - |
|
682 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">CURRENTLY AIMING FOR</span>
|
| - |
|
683 |
</div>
|
| - |
|
684 |
<div style="font-size:34px;font-weight:900;color:#5b2b8c;text-transform:uppercase;margin-bottom:14px;white-space:nowrap;letter-spacing:0.5px;">
|
| - |
|
685 |
$!aimingTier
|
| - |
|
686 |
</div>
|
| 575 |
transform: translate(-50%, 0);
|
687 |
#if($aimReward)
|
| - |
|
688 |
<div style="display:inline-flex;align-items:center;gap:10px;
|
| - |
|
689 |
border:1px solid #e5d1f2;border-radius:28px;
|
| - |
|
690 |
padding:10px 16px;background:#faf5ff;white-space:nowrap;">
|
| - |
|
691 |
<img src="/resources/images/src-images/1%20GM%20Gold%20Coin.png" alt=""
|
| 576 |
font-size: clamp(14px, 1.6vw, 22px);
|
692 |
style="height:22px;">
|
| - |
|
693 |
<span style="font-weight:800;color:#5b2b8c;font-size:14px;letter-spacing:0.4px;">$aimReward</span>
|
| - |
|
694 |
</div>
|
| - |
|
695 |
#end
|
| - |
|
696 |
</div>
|
| 577 |
font-weight: 700;
|
697 |
#if($aimTrophy)
|
| - |
|
698 |
<div style="flex:0 0 280px;display:flex;align-items:center;justify-content:flex-end;">
|
| - |
|
699 |
<img src="$aimTrophy" alt="$!aimingTier trophy"
|
| - |
|
700 |
style="max-height:280px;max-width:100%;width:100%;height:auto;">
|
| 578 |
color: #d32f2f;
|
701 |
</div>
|
| - |
|
702 |
#end
|
| - |
|
703 |
</div>
|
| - |
|
704 |
</div>
|
| - |
|
705 |
|
| - |
|
706 |
## --- Footer: scheme period + download ---
|
| - |
|
707 |
<div style="display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
|
| - |
|
708 |
padding:16px 26px;border-top:1px solid #f0f0f0;background:#fafafa;gap:16px;">
|
| - |
|
709 |
<div style="display:flex;align-items:center;gap:12px;color:#1a1a1a;white-space:nowrap;font-size:15px;">
|
| - |
|
710 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
711 |
width:36px;height:36px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
712 |
<img src="/resources/images/src-images/calendar_.png" alt=""
|
| - |
|
713 |
style="height:20px;">
|
| 579 |
white-space: nowrap;">
|
714 |
</span>
|
| - |
|
715 |
<span style="font-weight:800;"><strong>Scheme Period:</strong> $!schemePeriodDisplay</span>
|
| - |
|
716 |
</div>
|
| - |
|
717 |
<div style="color:#1a1a1a;font-size:15px;text-align:center;font-weight:700;">
|
| - |
|
718 |
Refer to the Scheme Letter for complete Terms & Conditions.
|
| - |
|
719 |
</div>
|
| - |
|
720 |
<a href="/resources/images/super-retailer-club-scheme.pdf" download
|
| - |
|
721 |
style="display:inline-flex;align-items:center;gap:10px;justify-self:end;
|
| - |
|
722 |
color:#d32f2f;font-weight:900;text-decoration:none;font-size:16px;">
|
| - |
|
723 |
<img src="/resources/images/src-images/download.png" alt="" style="height:20px;">
|
| 580 |
₹$nf.format($staticScheme.getTarget())
|
724 |
Download Scheme Letter
|
| - |
|
725 |
</a>
|
| 581 |
</div>
|
726 |
</div>
|
| 582 |
</a>
|
727 |
</div>
|
| 583 |
</div>
|
728 |
</div>
|
| 584 |
</div>
|
729 |
</div>
|
| - |
|
730 |
<script>
|
| - |
|
731 |
(function () {
|
| - |
|
732 |
var toggle = document.getElementById('srcAchToggle');
|
| - |
|
733 |
var panel = document.getElementById('srcAchBreakdown');
|
| - |
|
734 |
var label = document.getElementById('srcAchToggleText');
|
| - |
|
735 |
var icon = document.getElementById('srcAchToggleIcon');
|
| - |
|
736 |
if (!toggle || !panel) return;
|
| - |
|
737 |
toggle.addEventListener('click', function (e) {
|
| - |
|
738 |
e.preventDefault();
|
| - |
|
739 |
var isOpen = panel.style.display !== 'none';
|
| - |
|
740 |
panel.style.display = isOpen ? 'none' : 'block';
|
| - |
|
741 |
if (label) label.textContent = isOpen ? 'Click to expand' : 'Click to collapse';
|
| - |
|
742 |
if (icon) icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
|
| - |
|
743 |
});
|
| - |
|
744 |
})();
|
| - |
|
745 |
</script>
|
| 585 |
#end
|
746 |
#end
|
| 586 |
|
747 |
|
| 587 |
<div class="row">
|
748 |
<div class="row">
|
| 588 |
<div class="col-lg-6">
|
749 |
<div class="col-lg-6">
|
| 589 |
<div class="row">
|
750 |
<div class="row">
|