Subversion Repositories SmartDukaan

<style>
    .working-green {
        color: green;
    }

    .not-working-red {
        color: red;

    }

    .cover-brand {


    }

    .servicesComment .psComment {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .servicesComment:hover .psComment {
        visibility: visible;
    }

    .financePartnerServices-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .financePartnerServices-table th, .financePartnerServices-table td {
        padding: 4px;
        text-align: left;
    }


    .financePartnerServices-table th.fixed-column, .financePartnerServices-table td.fixed-column {
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 1;
        border-right: 1px solid #ddd;
        min-width: 120px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .financePartnerServices-table th.fixed-column {
        z-index: 2;
    }

    .DTFC_LeftBodyLiner {
        overflow: hidden !important;
    }

    /* Modern Tooltip */
    [data-tip] {
        cursor: pointer;
    }

    #fs-tooltip {
        position: fixed;
        background: #1e293b;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 6px;
        white-space: nowrap;
        z-index: 99999;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.3px;
    }

    #fs-tooltip.visible {
        opacity: 1;
    }

    /* Arrow pointing down (tooltip above cell) */
    #fs-tooltip.arrow-down::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1e293b;
    }

    /* Arrow pointing up (tooltip below cell) */
    #fs-tooltip.arrow-up::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-bottom-color: #1e293b;
    }
</style>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Finance Services</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Finance Services</li>
            </ol>
        </div>
    </div>

    <table class="table table-border table-condensed table-bordered">
        <tr>

            <td>MA -> Mark Applicable</td>
            <td>NA -> Not Applicable</td>

            <td>SNA -> Service Not Applicable</td>
            <td>PNI -> Partner Not Interested</td>

            <td>No-Code -> Code Not Available</td>

        </tr>
        <tr>
            <td>&#10006; -> Brand not started</td>

            <td><span style="color:red;">&#10006; </span>-> More then seven days brand not started</td>
            <td><span style="color:red;">&#10006;&#10006; </span>-> Brand not working from partner side</td>

            <td><span style="color:green;">&#10004 </span> -> Brand proper work</td>
            <td>(--) -> Never work on partner</td>
        </tr>

    </table>

    <div class="col-lg-12">
        <table class="table table-striped table-advance table-hover table-border table-condensed table-bordered financePartnerServices-table"
               id="financePartnerServices" style="width:100%">

            <thead class="row">

            <tr style="color:black;">
                <th rowspan="2" style="display:none">id</th>
                <th rowspan="2" class="fixed-column">Partner Name</th>
                <th rowspan="2" class="fixed-column">Store Code</th>
                <th rowspan="2">Doc Compl</th>

                #foreach($paymentOption in $paymentOptions)
                    #if($serviceBrandsConfigMap.containsKey($paymentOption.getId()))

                        #if($financeAuthorityCheck)

                            #set ( $bandsSize = $serviceBrandsConfigMap.get($paymentOption.getId()).size() + 3 )
                            <th colspan="$bandsSize">
                                $paymentOption.getName()
                            </th>
                        #else

                            #set ( $bandsSize = $serviceBrandsConfigMap.get($paymentOption.getId()).size() + 2)
                            <th colspan="$bandsSize">
                                $paymentOption.getName()
                            </th>

                        #end

                    #end
                #end

            </tr>
            <tr>
                #foreach($paymentOption in $paymentOptions)
                    #if($serviceBrandsConfigMap.containsKey($paymentOption.getId()))
                        #if($financeAuthorityCheck)
                            <th>activation</th>
                        #end
                        #foreach($serviceBrand in $serviceBrandsConfigMap.get($paymentOption.getId()))
                            <th>
                                <img src="${brandUrlMap.get($serviceBrand.getBrand())}"
                                     class="cover-brand $serviceBrand.getBrand()" id="finBrandUrl"
                                     style="height: 30px;">
                            </th>

                        #end
                        <th>Service Comment</th>
                        <th>Follow UP</th>
                    #end
                #end

            </tr>

            </thead>
            <tbody>
                #foreach($entryCr in $customRetailers)
                <tr>
                        #parse("finance-service-row.vm")
                </tr>
                #end
            </tbody>

        </table>
    </div>

</section>

<script>

    // Create tooltip element on body (never clipped by overflow)
    $('body').append('<div id="fs-tooltip"></div>');
    var fsTooltip = $('#fs-tooltip');

    // Abbreviation maps
    var abbreviationMap = {
        'MA': 'Mark Applicable',
        'NA': 'Not Applicable',
        'SNA': 'Service Not Applicable',
        'PNI': 'Partner Not Interested',
        'No Code': 'Code Not Available',
        'NO': 'Document Compliance Not Done',
        'INITIATED': 'Service Initiated \u2013 Pending Activation',
        '--': 'Never Worked On This Partner'
    };

    var classTooltipMap = {
        'working-green': 'Brand Working Properly',
        'not-working-red': 'Brand Not Working (Partner Side)',
        'not-working': 'Brand Not Started'
    };

    function applyTooltips() {
        $('.dataTables_wrapper td').each(function () {
            var el = $(this);
            if (el.attr('data-tip')) return;
            var cellText = el.text().trim();

            if (abbreviationMap[cellText]) {
                el.attr('data-tip', abbreviationMap[cellText]);
                return;
            }

            for (var cls in classTooltipMap) {
                if (el.hasClass(cls)) {
                    el.attr('data-tip', classTooltipMap[cls]);
                    return;
                }
            }
        });

        $('.dataTables_wrapper .service-mark-pni').attr('data-tip', 'Partner Not Interested');
        $('.dataTables_wrapper .service-mark-active').attr('data-tip', 'Mark Applicable');
        $('.dataTables_wrapper .service-mark-not-active').attr('data-tip', 'Not Applicable');
    }

    // Show tooltip on hover using event delegation (works for all rows including clones)
    $(document).on('mouseenter', '[data-tip]', function () {
        var tipText = $(this).attr('data-tip');
        if (!tipText) return;

        fsTooltip.text(tipText).removeClass('arrow-down arrow-up');
        var rect = this.getBoundingClientRect();
        var tipHeight = fsTooltip.outerHeight();
        var tipWidth = fsTooltip.outerWidth();
        var left = rect.left + (rect.width / 2) - (tipWidth / 2);

        // Keep within viewport horizontally
        if (left < 5) left = 5;
        if (left + tipWidth > window.innerWidth - 5) left = window.innerWidth - tipWidth - 5;

        // Find the header bottom to detect overlap
        var headerEl = document.querySelector('.dataTables_scrollHead');
        var headerBottom = headerEl ? headerEl.getBoundingClientRect().bottom : 0;

        var topPos = rect.top - tipHeight - 8;

        if (topPos < headerBottom) {
            // Not enough space above (behind header) — show BELOW the cell
            fsTooltip.css({left: left, top: rect.bottom + 8});
            fsTooltip.addClass('visible arrow-up');
        } else {
            // Normal — show ABOVE the cell
            fsTooltip.css({left: left, top: topPos});
            fsTooltip.addClass('visible arrow-down');
        }
    });

    $(document).on('mouseleave', '[data-tip]', function () {
        fsTooltip.removeClass('visible arrow-down arrow-up');
    });

    var dtable = $('#financePartnerServices').DataTable(
            {
                "scrollX": true,
                "scrollY": "700px",
                "fixedColumns": {
                    leftColumns: 3
                },
                "initComplete": function () {
                    applyTooltips();
                }
            });

    dtable.on('draw.dt', function () {
        setTimeout(applyTooltips, 100);
    });


</script>