| Line 624... |
Line 624... |
| 624 |
</div>
|
624 |
</div>
|
| 625 |
</div>
|
625 |
</div>
|
| 626 |
<!-- overview end -->
|
626 |
<!-- overview end -->
|
| 627 |
|
627 |
|
| 628 |
#if($staticScheme)
|
628 |
#if($staticScheme)
|
| 629 |
## ================= Super Retailer Club 5 banner =================
|
629 |
## ================= Super Retailer Club 5 card =================
|
| 630 |
## Banner image includes: logo, scheme duration, "YOUR ASSIGNED TARGET" label,
|
630 |
## Reward text is placeholder for every tier — edit the map below
|
| 631 |
## and Download Scheme Letter graphic. Only the target amount is overlaid dynamically.
|
631 |
## once final reward strings are approved.
|
| - |
|
632 |
#set($srcTierRewards = {
|
| - |
|
633 |
"Shuruaat": "1 GM GOLD COIN",
|
| - |
|
634 |
"Udaan": "1 GM GOLD COIN",
|
| - |
|
635 |
"Raftaar": "1 GM GOLD COIN",
|
| - |
|
636 |
"Tarakki": "1 GM GOLD COIN",
|
| - |
|
637 |
"Vijeta": "1 GM GOLD COIN",
|
| - |
|
638 |
"Maharaja": "1 GM GOLD COIN"
|
| - |
|
639 |
})
|
| - |
|
640 |
#set($srcTierTrophies = {
|
| - |
|
641 |
"Shuruaat": "/resources/images/src-images/Shuruaat.png",
|
| - |
|
642 |
"Udaan": "/resources/images/src-images/Udaan.png",
|
| - |
|
643 |
"Raftaar": "/resources/images/src-images/Raftaar.png",
|
| - |
|
644 |
"Tarakki": "/resources/images/src-images/Tarakki.png",
|
| - |
|
645 |
"Vijeta": "/resources/images/src-images/Vijeta.png",
|
| - |
|
646 |
"Maharaja": "/resources/images/src-images/Maharaja.png"
|
| - |
|
647 |
})
|
| 632 |
## Clicking anywhere on the banner downloads the scheme letter PDF.
|
648 |
#set($aimReward = $srcTierRewards.get($aimingTier))
|
| - |
|
649 |
#set($aimTrophy = $srcTierTrophies.get($aimingTier))
|
| - |
|
650 |
#set($barPct = $achievementPercent)
|
| - |
|
651 |
#if($barPct > 100) #set($barPct = 100) #end
|
| - |
|
652 |
|
| 633 |
<div class="row" style="margin: 0 0 15px 0;">
|
653 |
<div class="row" style="margin: 0 0 15px 0;">
|
| 634 |
<div class="col-lg-12" style="padding: 0 15px;">
|
654 |
<div class="col-lg-12" style="padding: 0 15px;">
|
| 635 |
<a href="/resources/images/super-retailer-club-scheme.pdf"
|
655 |
<div style="background:#fff;border:1px solid #eee;border-radius:12px;
|
| - |
|
656 |
box-shadow:0 1px 3px rgba(0,0,0,0.04);overflow:hidden;">
|
| 636 |
download
|
657 |
<div style="display:grid;
|
| - |
|
658 |
grid-template-columns: 220px 220px 400px 1fr;
|
| - |
|
659 |
align-items:start;gap:24px;padding:26px 26px 22px 26px;">
|
| - |
|
660 |
|
| - |
|
661 |
## --- Col 1: SRC5 logo ---
|
| 637 |
style="display: block; position: relative; text-decoration: none;">
|
662 |
<div style="display:flex;align-items:center;justify-content:center;min-height:170px;">
|
| 638 |
<img src="/resources/images/super-retailer-club-5.jpeg"
|
663 |
<img src="/resources/images/src-images/Group%204.png"
|
| 639 |
alt="Super Retailer Club 5"
|
664 |
alt="Super Retailer Club 5"
|
| - |
|
665 |
style="width:100%;max-width:220px;height:auto;">
|
| - |
|
666 |
</div>
|
| - |
|
667 |
|
| - |
|
668 |
## --- Col 2: Total Target ---
|
| - |
|
669 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;">
|
| - |
|
670 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:22px;white-space:nowrap;height:44px;">
|
| - |
|
671 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
672 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
673 |
<img src="/resources/images/src-images/Target.png" alt=""
|
| - |
|
674 |
style="height:22px;">
|
| - |
|
675 |
</span>
|
| - |
|
676 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">TOTAL TARGET</span>
|
| - |
|
677 |
</div>
|
| - |
|
678 |
<div style="font-size:34px;font-weight:800;color:#111;white-space:nowrap;">
|
| - |
|
679 |
₹$totalTargetDisplay
|
| - |
|
680 |
</div>
|
| - |
|
681 |
</div>
|
| - |
|
682 |
|
| - |
|
683 |
## --- Col 3: Total Achievement (with breakdown) ---
|
| - |
|
684 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;">
|
| - |
|
685 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;white-space:nowrap;height:44px;">
|
| - |
|
686 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
687 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
688 |
<img src="/resources/images/src-images/TOTAL%20ACHIEVEMENT.png" alt=""
|
| - |
|
689 |
style="height:22px;">
|
| - |
|
690 |
</span>
|
| - |
|
691 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">TOTAL ACHIEVEMENT</span>
|
| - |
|
692 |
</div>
|
| - |
|
693 |
<div style="font-size:30px;font-weight:800;color:#d32f2f;margin-bottom:8px;white-space:nowrap;">
|
| - |
|
694 |
₹$schemeAchievementDisplay
|
| - |
|
695 |
</div>
|
| - |
|
696 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
| - |
|
697 |
<div style="flex:1;height:12px;background:#f2f2f2;border-radius:6px;overflow:hidden;">
|
| 640 |
style="width: 100%; height: auto; display: block; border-radius: 8px;">
|
698 |
<div style="width:${barPct}%;height:100%;background:#d32f2f;border-radius:6px;"></div>
|
| - |
|
699 |
</div>
|
| - |
|
700 |
<div style="font-weight:800;color:#1a1a1a;min-width:50px;text-align:right;font-size:17px;">
|
| - |
|
701 |
${achievementPercent}%
|
| - |
|
702 |
</div>
|
| - |
|
703 |
</div>
|
| 641 |
## Target amount overlay — positioned below the "YOUR ASSIGNED TARGET"
|
704 |
<button type="button" id="srcAchToggle"
|
| - |
|
705 |
style="display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
|
| - |
|
706 |
background:none;border:none;padding:4px 0;cursor:pointer;
|
| - |
|
707 |
color:#5b2b8c;font-weight:700;font-size:13px;letter-spacing:0.3px;">
|
| 642 |
## label baked into the image. Tweak top/left if the image aspect changes.
|
708 |
<span id="srcAchToggleText">Click to expand</span>
|
| - |
|
709 |
<span id="srcAchToggleIcon"
|
| - |
|
710 |
style="display:inline-flex;transition:transform 0.2s ease;">
|
| - |
|
711 |
<i class="fa fa-chevron-down"></i>
|
| - |
|
712 |
</span>
|
| - |
|
713 |
</button>
|
| - |
|
714 |
<div id="srcAchBreakdown" style="display:none;">
|
| - |
|
715 |
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;">
|
| - |
|
716 |
<div style="display:flex;align-items:center;gap:14px;color:#1a1a1a;">
|
| - |
|
717 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
718 |
width:44px;height:44px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
719 |
<img src="/resources/images/src-images/Mobile%20And%20tv.png" alt=""
|
| - |
|
720 |
style="height:24px;">
|
| - |
|
721 |
</span>
|
| - |
|
722 |
<span style="font-weight:700;font-size:17px;">Mobiles & LEDs</span>
|
| - |
|
723 |
</div>
|
| - |
|
724 |
<div style="font-weight:800;color:#d32f2f;white-space:nowrap;font-size:17px;">
|
| - |
|
725 |
₹$mobileLedAchievementDisplay</div>
|
| - |
|
726 |
</div>
|
| - |
|
727 |
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;">
|
| - |
|
728 |
<div style="display:flex;align-items:center;gap:14px;color:#1a1a1a;">
|
| - |
|
729 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
730 |
width:44px;height:44px;border-radius:50%;background:#efe4fc;flex-shrink:0;">
|
| - |
|
731 |
<img src="/resources/images/src-images/accessories.png" alt=""
|
| - |
|
732 |
style="height:24px;">
|
| - |
|
733 |
</span>
|
| - |
|
734 |
<span style="font-weight:700;font-size:17px;">Accessories</span>
|
| - |
|
735 |
</div>
|
| - |
|
736 |
<div style="font-weight:800;color:#d32f2f;white-space:nowrap;font-size:17px;">
|
| - |
|
737 |
₹$accessoriesAchievementDisplay</div>
|
| - |
|
738 |
</div>
|
| - |
|
739 |
</div>
|
| - |
|
740 |
</div>
|
| - |
|
741 |
|
| - |
|
742 |
## --- Col 4: Currently Aiming For + trophy ---
|
| - |
|
743 |
<div style="border-left:1px solid #f0f0f0;padding-left:24px;
|
| - |
|
744 |
display:flex;align-items:center;gap:18px;">
|
| 643 |
<div style="position: absolute;
|
745 |
<div style="flex:1;min-width:0;">
|
| - |
|
746 |
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;white-space:nowrap;height:44px;">
|
| - |
|
747 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
748 |
width:44px;height:44px;border-radius:50%;background:#efe4fc;flex-shrink:0;">
|
| - |
|
749 |
<img src="/resources/images/src-images/CURRENTLY%20AIMING%20FOR.png"
|
| - |
|
750 |
alt="" style="height:22px;">
|
| 644 |
top: 52%; left: 68%;
|
751 |
</span>
|
| - |
|
752 |
<span style="font-weight:800;color:#1a1a1a;letter-spacing:0.6px;font-size:15px;">CURRENTLY AIMING FOR</span>
|
| - |
|
753 |
</div>
|
| - |
|
754 |
<div style="font-size:34px;font-weight:900;color:#5b2b8c;text-transform:uppercase;margin-bottom:14px;white-space:nowrap;letter-spacing:0.5px;">
|
| - |
|
755 |
$!aimingTier
|
| - |
|
756 |
</div>
|
| 645 |
transform: translate(-50%, 0);
|
757 |
#if($aimReward)
|
| - |
|
758 |
<div style="display:inline-flex;align-items:center;gap:10px;
|
| - |
|
759 |
border:1px solid #e5d1f2;border-radius:28px;
|
| - |
|
760 |
padding:10px 16px;background:#faf5ff;white-space:nowrap;">
|
| - |
|
761 |
<img src="/resources/images/src-images/1%20GM%20Gold%20Coin.png" alt=""
|
| 646 |
font-size: clamp(14px, 1.6vw, 22px);
|
762 |
style="height:22px;">
|
| - |
|
763 |
<span style="font-weight:800;color:#5b2b8c;font-size:14px;letter-spacing:0.4px;">$aimReward</span>
|
| - |
|
764 |
</div>
|
| - |
|
765 |
#end
|
| - |
|
766 |
</div>
|
| 647 |
font-weight: 700;
|
767 |
#if($aimTrophy)
|
| - |
|
768 |
<div style="flex:0 0 280px;display:flex;align-items:center;justify-content:flex-end;">
|
| - |
|
769 |
<img src="$aimTrophy" alt="$!aimingTier trophy"
|
| - |
|
770 |
style="max-height:280px;max-width:100%;width:100%;height:auto;">
|
| 648 |
color: #d32f2f;
|
771 |
</div>
|
| - |
|
772 |
#end
|
| - |
|
773 |
</div>
|
| - |
|
774 |
</div>
|
| - |
|
775 |
|
| - |
|
776 |
## --- Footer: scheme period + download ---
|
| - |
|
777 |
<div style="display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
|
| - |
|
778 |
padding:16px 26px;border-top:1px solid #f0f0f0;background:#fafafa;gap:16px;">
|
| - |
|
779 |
<div style="display:flex;align-items:center;gap:12px;color:#1a1a1a;white-space:nowrap;font-size:15px;">
|
| - |
|
780 |
<span style="display:inline-flex;align-items:center;justify-content:center;
|
| - |
|
781 |
width:36px;height:36px;border-radius:50%;background:#fdecec;flex-shrink:0;">
|
| - |
|
782 |
<img src="/resources/images/src-images/calendar_.png" alt=""
|
| - |
|
783 |
style="height:20px;">
|
| 649 |
white-space: nowrap;">
|
784 |
</span>
|
| - |
|
785 |
<span style="font-weight:800;"><strong>Scheme Period:</strong> $!schemePeriodDisplay</span>
|
| - |
|
786 |
</div>
|
| - |
|
787 |
<div style="color:#1a1a1a;font-size:15px;text-align:center;font-weight:700;">
|
| - |
|
788 |
Refer to the Scheme Letter for complete Terms & Conditions.
|
| - |
|
789 |
</div>
|
| - |
|
790 |
<a href="/resources/images/super-retailer-club-scheme.pdf" download
|
| - |
|
791 |
style="display:inline-flex;align-items:center;gap:10px;justify-self:end;
|
| - |
|
792 |
color:#d32f2f;font-weight:900;text-decoration:none;font-size:16px;">
|
| - |
|
793 |
<img src="/resources/images/src-images/download.png" alt="" style="height:20px;">
|
| 650 |
₹$nf.format($staticScheme.getTarget())
|
794 |
Download Scheme Letter
|
| - |
|
795 |
</a>
|
| 651 |
</div>
|
796 |
</div>
|
| 652 |
</a>
|
797 |
</div>
|
| 653 |
</div>
|
798 |
</div>
|
| 654 |
</div>
|
799 |
</div>
|
| - |
|
800 |
<script>
|
| - |
|
801 |
(function () {
|
| - |
|
802 |
var toggle = document.getElementById('srcAchToggle');
|
| - |
|
803 |
var panel = document.getElementById('srcAchBreakdown');
|
| - |
|
804 |
var label = document.getElementById('srcAchToggleText');
|
| - |
|
805 |
var icon = document.getElementById('srcAchToggleIcon');
|
| - |
|
806 |
if (!toggle || !panel) return;
|
| - |
|
807 |
toggle.addEventListener('click', function (e) {
|
| - |
|
808 |
e.preventDefault();
|
| - |
|
809 |
var isOpen = panel.style.display !== 'none';
|
| - |
|
810 |
panel.style.display = isOpen ? 'none' : 'block';
|
| - |
|
811 |
if (label) label.textContent = isOpen ? 'Click to expand' : 'Click to collapse';
|
| - |
|
812 |
if (icon) icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
|
| - |
|
813 |
});
|
| - |
|
814 |
})();
|
| - |
|
815 |
</script>
|
| 655 |
#end
|
816 |
#end
|
| 656 |
|
817 |
|
| 657 |
<div class="row">
|
818 |
<div class="row">
|
| 658 |
<div class="col-lg-6">
|
819 |
<div class="col-lg-6">
|
| 659 |
<div class="row">
|
820 |
<div class="row">
|