Subversion Repositories SmartDukaan

Rev

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

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="resources/js/common.js?v=${version}"></script>

    <script type="text/javascript" src="resources/js/retailer.js?v=${version}"></script>

    <script type="text/javascript">
        function numberToComma(x) {

            x = x.toString();
            x = x.split('.');
            var x1 = x[0];
            var x2 = x.length > 1 && x[1] != '0' ? '.' + x[1] : '';
            var lastThree = x1.substring(x1.length - 3);
            var otherNumbers = x1.substring(0, x1.length - 3);
            if (x1.charAt(x1.length - 4) == ',' || x1.charAt(x1.length - 4) == '-') {
                console.log(lastThree)
            } else {
                if (otherNumbers != '')
                    lastThree = ',' + lastThree;
            }
            return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + (lastThree)
                    + x2;

        }

        $(document).ready(function () {
            $('.currency').each(function (index, ele) {
                if (!isNaN(parseInt($(ele).html()))) {
                    $(ele).html(numberToComma($(ele).html()));
                }
            });

            $(document).on('click', '.new-dashboard', function () {
                console.log('click11111')
                var fofoId = $(this).data('fofoid');

                window.open("/analysisDashboard?fofoId=" + fofoId, '_blank');
            });
        })
    </script>

    <style>
        .ms-10 {
            margin-left: 100px !important;
        }
        .yellow {
            background-color: #fdfd96;
        }

        .orange {
            background-color: #FAC898;
        }

        .green {
            background-color: #77dd77;
        }

        .red {
            background-color: #FAA0A0;
        }

        .details {
            color: #A3A3A5;
            font-weight: 400;
        }


        .normal {
            color: #0000ff;
            font-weight: 400;
        }

        .subtitle {
            color: #B46060;
            font-weight: 400;
        }

        .light-red {
            background-color: #FBE4D5;
        }

        .raised th {
            width: 30%
        }

    </style>

</head>

<body>


<div class="container-fluid mt-2 mb-5">
    <div class="row mt-5">
        <div class="col bg-dark text-left px-3 py-2 border-bottom">
            <h5 class="text-light mb-0">Raised Flags
                <button class="new-dashboard btn btn-info btn-sm" data-fofoid="$fofoId">Dashboard Info</button>
                <a id="mobileAppId" href="${rc.contextPath}/mobileapp?emailId=$customRetailer.getEmail()"
                   class="btn btn-danger btn-sm" target="_blank">Franchise App
                </a>

            </h5>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col">
            <div>
                <h6 class=" yellow p-1 m-0">Working status</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Partner Status</th>
                        #if($fofoStore.isActive())
                            <td>ACTIVE</td>
                        #else
                            <td class="text-danger">INACTIVE</td>
                        #end
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <h6 class=" yellow p-1 m-0">Partner Investment Level</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Investment</th>
                        #if($investment.getShortPercentage() <= 0)
                            <td class="text-success"> OK:>100%</td>
                        #elseif($investment.getShortPercentage() > 20)

                            <td class="text-danger">Low:<80%</td>
                        #else
                            <td class="normal">Below Normal:(80% -100%)</td>
                        #end
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <h6 class=" yellow p-1 m-0">Regularity of Buisness</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Last Secondary</th>
                        #if($lastPurchaseDays < 5)

                            <td class="text-success">$lastPurchaseDays days back</td>

                        #else

                            <td class="text-danger">$lastPurchaseDays days back</td>

                        #end
                    </tr>
                    <tr>
                        <th class="details">Last Tertiary</th>
                        #if($lastTertiaryDays)
                            #if($lastTertiaryDays < 5)

                                <td class="text-success">$lastTertiaryDays days back</td>

                            #else

                                <td class="text-danger">$lastTertiaryDays days back</td>

                            #end
                        #end
                    </tr>
                    <tr>
                        <th class="details">Unbilled Activated Stock</th>
                        #if($lastUnbilledActivated > 0)
                            <td class="text-danger">$investment.getUnbilledAmount()</td>


                        #else

                            <td class="text-success"> -</td>

                        #end

                    </tr>
                    </tbody>
                </table>
            </div>

            #if(!$loans.isEmpty())
                <div>
                    <h6 class=" yellow p-1 m-0">Active Loans</h6>
                    <table class="table  table-sm raised">
                        <tbody>
                        <tr>
                            <th>Loan Id</th>
                            <th>Interest Rate(%)</th>
                            <th>Initial Amount</th>
                            <th>Pending Amount</th>
                            <th>Interest Accrued</th>
                            <th>Interest Paid</th>
                            <th>Opening Date</th>
                            <th>Due Date</th>
                        </tr>

                            #foreach($ls in $loans)

                            <tr>

                                <td>$ls.getId()</td>
                                <td>$ls.getInterestRate().setScale(2,$ru)</td>
                                <td>$ls.getIntialAmount().setScale(2,$ru)</td>
                                <td>$ls.getPendingAmount().setScale(2,$ru)</td>
                                <td>$ls.getInterestAccrued().setScale(2,$ru)</td>

                                <td>$ls.getInterestPaid().setScale(2,$ru)</td>
                                <td>$ls.getCreatedOn().format($dateTimeFormatter)</td>
                                <td>$ls.getDueDate().format($dateTimeFormatter)</td>
                            </tr>
                            #end
                        <tr>
                            <td colspan="2" style="text-align: right;">Total</td>
                            <td>$totalInitialAmount.setScale(2,$ru)</td>
                            <td>$totalPendingAmount.setScale(2,$ru)</td>
                            <td>$totalInterestAccured.setScale(2,$ru)</td>
                            <td>$totalInterestPaid.setScale(2,$ru)</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>


                        </tbody>
                    </table>
                </div>
            #end

            <div>
                <button class="btn btn-primary agingDataAfterNintyDays" data-fofoid="$fofoId" data-brand="$brand"
                        data-toggle="modal" data-target="#agingItemWiseBrandStock">AgingDataGt90Days
                </button>

            </div>
            <div id="agingItemWiseBrandStock" class="modal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content" style="width:140%">

                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div>
                <h6 class=" yellow p-1 m-0">Logistics</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Order to Billing time</th>
                        #if($createdToBillingAverage)
                            #if($createdToBillingAverage < 1)
                                <td class="text-success"> Normal < 1 ($decimalFormatter.format($createdToBillingAverage)
                                    days)
                                </td>
                            #else
                                <td class="text-danger"> High >= 1
                                    ($decimalFormatter.format($createdToBillingAverage) days)
                                </td>
                            #end
                        #else
                            <td>-</td>
                        #end

                    </tr>
                    <tr>
                        <th class="details">Billing to Delivery time</th>
                        #if($billingToDeliverAverage)

                            #if($billingToDeliverAverage < 2)
                                <td class="text-success"> Normal < 2
                                    ($decimalFormatter.format($billingToDeliverAverage) days)
                                </td>
                            #else
                                <td class="text-danger"> High >= 2
                                    ($decimalFormatter.format($billingToDeliverAverage) days)
                                </td>
                            #end
                        #else
                            <td>-</td>

                        #end
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <h6 class=" yellow p-1 m-0">Stocking</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Stock Level</th>
                        #if($oneFourthOfTertiary > $totalStock)
                            <td class="text-danger">Low</td>
                        #else
                            <td class="text-success"> High</td>
                        #end

                    </tr>
                    <tr>
                        <th class="details">Sufficient Stock</th>
                        <td class="text-success">  #foreach($suffientModel in $suffientModels)
                            $suffientModel.getBrand(),
                        #end

                        </td>
                    </tr>
                    <tr>
                        <th class="details">Low Stock</th>
                        <td class="text-danger">
                            #foreach($lowModel in $lowModels)
                                $lowModel.getBrand(),
                            #end
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <div>
                <h6 class=" yellow p-1 m-0">Brands</h6>
                <table class="table  table-sm raised">
                    <tbody>
                    <tr>
                        <th class="details">Working Brands</th>


                        <td class="text-success">
                            #foreach($brandsDisplay in $brandsDisplays)
                                #set($brand = $brandsDisplay.getName())
                                #if(!$retailerBlockBrands.get($brand))
                                    $brand ,
                                #end
                            #end
                        </td>


                    </tr>
                    <tr>
                        <th class="details">Blocked Brands</th>
                        <td class="text-danger">
                            #foreach($brandsDisplay in $brandsDisplays)
                                #set($brand = $brandsDisplay.getName())
                                #if($retailerBlockBrands.get($brand))
                                    $brand ,
                                #end
                            #end
                        </td>
                    </tr>

                </table>
            </div>
        </div>

    </div>

    <div class="row mt-2">
        <div class="col bg-dark text-left px-3 py-2 border-bottom">
            <h5 class="text-light mb-0">Partner Basic Details</h5>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <table class="table table-sm">
                <tbody>
                <tr>
                    <th class="details">Partner Code</th>
                    <td class="">$customRetailer.getCode()</td>
                </tr>
                <tr>
                    <th class="details">Partner Name</th>
                    <td>$customRetailer.getBusinessName()</td>
                </tr>
                <tr>
                    <th class="details">City</th>
                    <td>$customRetailer.getAddress().getCity()</td>
                </tr>
                <tr>
                    <th class="details">State</th>
                    <td>$customRetailer.getAddress().getState()</td>
                </tr>
                <tr>
                    <th class="details">Current Category</th>
                    <td>$partnerType.getValue()</td>
                </tr>

                </tbody>
            </table>
        </div>

        <div class="col">
            <table class="table table-sm">
                <tbody>

                <tr>
                    <th class="details">Contact Person</th>
                    <td>#if($customRetailer.getFirstName())$customRetailer.getFirstName() #end #if($customRetailer.getLastName()) $customRetailer.getLastName() #end</td>
                </tr>
                <tr>
                    <th class="details">Partner DOB</th>

                    #if($partnerOnboardingPanel.getDob())
                        <td>$partnerOnboardingPanel.getDob().format($dateFormatter)</td>
                    #else
                        <td> -</td>
                    #end
                </tr>
                <tr>
                    <th class="details">Partner Anniv</th>

                    #if($partnerOnboardingPanel.getAnniversaryDate())
                        <td>$partnerOnboardingPanel.getAnniversaryDate().format($dateFormatter)</td>
                    #else
                        <td> -</td>
                    #end
                </tr>
                <tr>
                    <th class="details">Latitude</th>
                    <td>$fofoStore.getLatitude()</td>
                </tr>
                <tr>
                    <th class="details">Longitude</th>
                    <td>$fofoStore.getLongitude()</td>
                </tr>

                </tbody>
            </table>
        </div>


        <div class="col">
            <table class="table table-sm">
                <tbody>


                <tr>
                    <th class="details">Outlet Potential</th>
                    <td class="currency">$fofoStore.getCounterPotential()</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col bg-dark text-left px-3 py-2 border-bottom">
            <h5 class="text-light mb-0">Logistics</h5>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <table class="table table-sm">
                <tbody>
                <tr>
                    <th class="details">Last courier sent</th>
                    #if($lastCourierSent)
                        <td class="">$lastCourierSent.format($dateFormatter)</td>
                    #else
                        <td>-</td>
                    #end
                </tr>
                <tr>
                    <th class="details">Last courier partner</th>
                    #if($lastCourierPartner)
                        <td>$lastCourierPartner</td>
                    #else
                        <td>-</td>
                    #end
                </tr>
                </tbody>
            </table>
        </div>

        <div class="col">
            <table class="table table-sm">
                <tbody>
                <tr>
                    <th class="details">Order to billing</th>
                    #if($createdToBillingAverage)
                        <td>$decimalFormatter.format($createdToBillingAverage) days</td>
                    #else
                        <td>-</td>
                    #end
                </tr>
                <tr>
                    <th class="details">Billing to delivery</th>
                    #if($billingToDeliverAverage)
                        <td>$decimalFormatter.format($billingToDeliverAverage) days</td>
                    #else
                        <td> -</td>
                    #end
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col bg-dark text-left px-3 py-2 border-bottom">
            <h5 class="text-light mb-0">Investment Trend</h5>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <h6 class=" yellow p-1 text-center">Investment</h6>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <table class="table table-bordered table-sm">
                <tbody>
                <tr>
                    <th class="details">Wallet Value</th>
                    <td class="currency">$investment.getWalletAmount()</td>
                </tr>

                <tr>
                    <th class="details">Agreed Investment</th>
                    <td class="currency">$investment.getMinInvestment()</td>
                </tr>
                <tr>
                    <th class="details">Current investment</th>
                    <td class="light-red currency">$investment.getTotalInvestment() &nbsp; &nbsp;<span
                            class="font-weight-bold ">$nf.format($investment.getShortPercentage()) %</span></td>
                </tr>
                <tr>
                    <th class="details">Short / Excess</th>
                    <td class="light-red currency">$investment.getShortInvestment() &nbsp; &nbsp;



                        #if($investment.getShortPercentage() <= 0)
                            <span
                                    class="text-success font-weight-bold">OK</span>


                        #else
                            <span
                                    class="text-danger font-weight-bold">Short</span>

                        #end

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col">
            <table class="table table-bordered table-sm">
                <thead>
                <tr class="orange">
                    <th scope="col">Month</th>
                    <th scope="col">Days</th>
                </tr>
                </thead>
                <tbody>
                    #foreach($label in $labels)
                    <tr>
                        <td class="details">$label</td>
                        #if($monthOkDaysInvestmentMap.get($label))
                            #if($monthOkDaysInvestmentMap.get($label) > 15)
                                <td class="text-success">$monthOkDaysInvestmentMap.get($label)</td>
                            #else
                                <td class="text-danger">$monthOkDaysInvestmentMap.get($label)</td>
                            #end
                        #else
                            <td>-</td>
                        #end
                    </tr>
                    #end
                </tbody>
            </table>
        </div>
        <div class="col-4 mt-2">

            <canvas id="chartInvestmentJSContainer" width="auto" height="auto"></canvas>

        </div>
    </div>

    <div class="row mt-2">
        <div class="col">
            <h6 class=" yellow p-1 text-center">Current Stock</h6>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-bordered table-sm">
                <thead>
                <th scope="row"></th>
                <td colspan="2" class="text-center">Current</td>
                <td></td>
                <td colspan="2" class="text-center">GRN Pending</td>
                <td colspan="2" class="text-center">Pending Indent</td>
                </thead>
                <thead>
                <tr class="orange">
                    <th scope="col">Brand</th>
                    <th scope="col">Value</th>
                    <th scope="col">Units</th>
                    <th scope="col">Brand status</th>
                    <th scope="col">Value</th>
                    <th scope="col">Units</th>
                    <th scope="col">Value</th>
                    <th scope="col">Units</th>

                </tr>
                </thead>
                <tbody>

                    #foreach($brandsDisplay in $brandsDisplays)
                        #set($brand = $brandsDisplay.getName())
                    <tr>
                        <td class="details">$brand</td>
                        #if($brandStockMap.get($brand))
                            <td class="currency $brandStockMap.get($brand).getColor()">$brandStockMap.get($brand).getTotalValue()</td>
                            <td>$brandStockMap.get($brand).getTotalQty()</td>
                        #else
                            <td class="$brandStockMap.get($brand).getColor()">0</td>
                            <td>0</td>

                        #end
                        #if($retailerBlockBrands.get($brand))
                            <td>Blocked</td>
                        #else
                            <td>ACTIVE</td>
                        #end
                        #if($grnPendingValue.get($brand))
                            <td class="currency">$grnPendingValue.get($brand)</td>
                            <td>$grnPendingQty.get($brand)</td>
                        #else
                            <td>0</td>
                            <td>0</td>

                        #end
                        #if($processingOrderMap.get($brand))
                            <td class="currency">$processingOrderMap.get($brand).get("val")</td>
                            <td class="currency">$processingOrderMap.get($brand).get("qty")</td>

                        #else
                            <td>0</td>
                            <td>0</td>
                        #end

                    </tr>

                    #end

                <tr>
                    <td> Total</td>
                    <td class="currency"> $totalStock</td>
                    <td>$totalQty </td>
                    <td></td>

                    #if($totalGrnPendingStock)
                        <td class="currency"> $totalGrnPendingStock</td>
                    #else
                        <td></td>
                    #end

                    #if($totalGrnPendingQty)
                        <td> $totalGrnPendingQty</td>
                    #else
                        <td></td>
                    #end
                    #if($totalGrnPendingQty)
                        <td class="currency"> $totalPIValue</td>
                        <td> $totalPIQty</td>
                    #else
                        <td></td>
                        <td></td>
                    #end

                </tr>

                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col bg-dark text-left px-3 py-2 border-bottom">
            <h5 class="text-light mb-0">Sales & Income Trend</h5>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#secondary">Secondary</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tertiary">Tertiary</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#earning">Earning</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">

                <div id="secondary" class="container-fluid tab-pane active"><br>
                    <div class="row">
                        <div class="col-6">
                            <div class="p-2 text-center">#if($lastPurchaseDays < 5)
                                <span class="text-success">Last Secondary:  $lastPurchaseDays days back </span>
                            #else
                                <span class="text-danger">Last Secondary: $lastPurchaseDays days back </span>
                            #end
                            </div>

                            <table id="partnerSecondary" class="table table-bordered table-sm">
                                <thead>
                                <tr class="orange">
                                    <th scope="col">Month</th>
                                    #foreach($label in $labels)
                                        <th scope="col">$label</th>
                                    #end
                                </tr>
                                </thead>
                                <tbody>
                                    #foreach($allBrand in $allBrands)
                                        #set($brand = $allBrand.getName())
                                        #set($purchase = $purchaseMap.get($brand))
                                    <tr>
                                        <td class="details brandFocusedStock" data-fofoid="$fofoId" data-brand="$brand"
                                            data-toggle="modal" data-target="#itemWiseBrandStock">$brand</td>
                                        #foreach($label in $labels)
                                            #set($revIndex = $labels.size() - 1 - $foreach.index)
                                            #if($brand.equals("Samsung"))
                                                #if($purchase.get($label))
                                                    #if($purchase.get($label) >= 150000)
                                                        <td class="currency green " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #else
                                                        <td class="currency red " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #end
                                                #else
                                                    <td data-brand="$brand"
                                                        data-index="$revIndex"
                                                        data-month="$label">0
                                                    </td>
                                                #end
                                            #end

                                            #if($brand.equals("Xiaomi"))
                                                #if($purchase.get($label))
                                                    #if($purchase.get($label) >= 100000)
                                                        <td class="currency green " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #else
                                                        <td class="currency red " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #end
                                                #else
                                                    <td data-brand="$brand"
                                                        data-index="$revIndex"
                                                        data-month="$label">0
                                                    </td>
                                                #end
                                            #end

                                            #if($brand.equals("Oppo") || $brand.equals("Vivo"))
                                                #if($purchase.get($label))
                                                    #if($purchase.get($label) >= 200000)
                                                        <td class="currency green " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #else
                                                        <td class="currency red " data-brand="$brand"
                                                            data-index="$revIndex"
                                                            data-month="$label">$purchase.get($label)</td>
                                                    #end
                                                #else
                                                    <td data-brand="$brand"
                                                        data-index="$revIndex"
                                                        data-month="$label">0
                                                    </td>
                                                #end
                                            #end

                                            #if(!$brand.equals("Oppo") && !$brand.equals("Vivo") && !$brand.equals(
                                                "Xiaomi") && !$brand.equals("Samsung"))
                                                #if($purchase.get($label))
                                                    <td class="currency " data-brand="$brand"
                                                        data-index="$revIndex"
                                                        data-month="$label">$purchase.get($label)</td>
                                                #else
                                                    <td data-brand="$brand"
                                                        data-index="$revIndex"
                                                        data-month="$label">0
                                                    </td>
                                                #end
                                            #end
                                        #end
                                    </tr>
                                    #end

                                <tr class="font-weight-bold">
                                    <td class="details">Total</td>
                                    #foreach($label in $labels)
                                        #if($yearMonthPurchase.get($label))
                                            <td class="currency">$yearMonthPurchase.get($label)</td>
                                        #else
                                            <td>0</td>
                                        #end
                                    #end
                                </tr>

                                <tr>
                                    <td class="details">Target</td>
                                    #foreach($label in $labels)
                                        #if($monthlyTarget.get($label).getPurchaseTarget())
                                            <td class="currency">$decimalFormatter.format($monthlyTarget.get($label).getPurchaseTarget())</td>
                                        #else
                                            <td>0</td>
                                        #end
                                    #end
                                </tr>

                                <tr>
                                    <td class="details">% achvmt</td>
                                    #foreach($label in $labels)
                                        #if($yearMonthPurchase.get($label))
                                            #set($ymp = $yearMonthPurchase.get($label))
                                        #else
                                            #set($ymp = 0)
                                        #end

                                        #if($monthlyTarget.get($label).getPurchaseTarget())
                                            #set($mt = $monthlyTarget.get($label).getPurchaseTarget())
                                        #else
                                            #set($mt = 0)
                                        #end

                                        #set($div = ($ymp / $mt) * 100)
                                        #if($div)
                                            #if($div > 65)
                                                <td class="text-success">$math.roundTo(2, $div)%</td>
                                            #else
                                                <td class="text-danger">$math.roundTo(2, $div)%</td>
                                            #end
                                        #else
                                            <td class="text-danger">-</td>
                                        #end
                                    #end
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="rightTable" style="display: none;">
                            <h3 class="ms-10">Item wise sale quantity</h3>
                            <table class="table table-bordered table-sm  ps-5 ms-10">
                                <thead>
                                <tr>

                                    <th>Model</th>
                                    <th>Quantity</th>
                                </tr>
                                </thead>
                                <tbody id="rightTableBody">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-6 mt-2">


                            <canvas id="chartSecondaryJSContainer" width="auto" height="auto"></canvas>

                        </div>


                        <div id="itemWiseBrandStock" class="modal" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content" style="width:140%">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div id="tertiary" class="container-fluid tab-pane fade"><br>
                    <div class="row">
                        <div class="col-6">
                            <div class="p-2  text-center">
                                #if($lastTertiaryDays < 5)
                                    <span class="text-success">Last tertiary: $lastTertiaryDays days back </span>
                                #else
                                    <span class="text-danger">Last tertiary: $lastTertiaryDays days back </span>
                                #end

                                #if($lastUnbilledActivated > 0)
                                    <td class="text-danger">Unbilled Activated : $investment.getUnbilledAmount()</td>


                                #else

                                    <td class="text-success"> Unbilled Activated : 0</td>
                                #end
                            </div>
                            <table class="table table-bordered table-sm">
                                <thead>
                                <tr class="orange">
                                    <th scope="col">Month</th>
                                    #foreach($label in $labels)
                                        <th scope="col">$label</th>
                                    #end
                                </tr>
                                </thead>
                                <tbody>
                                    #foreach($allBrand in $allBrands)
                                        #set($brand = $allBrand.getName())
                                        #set($tertiary= $tertiaryMap.get($brand))
                                    <tr>

                                        <td class="details">$brand</td>
                                        #foreach($label in $labels)
                                            #if($brand.equals("Samsung"))
                                                #if($tertiary.get($label))
                                                    #if($tertiary.get($label) >= 150000)
                                                        <td class="currency green">$tertiary.get($label)</td>
                                                    #else
                                                        <td class="currency red">$tertiary.get($label)</td>
                                                    #end
                                                #else
                                                    <td>0</td>
                                                #end

                                            #end

                                            #if($brand.equals("Xiaomi"))
                                                #if($tertiary.get($label))
                                                    #if($tertiary.get($label) >= 100000)
                                                        <td class="currency green">$tertiary.get($label)</td>
                                                    #else
                                                        <td class="currency red">$tertiary.get($label)</td>
                                                    #end
                                                #else
                                                    <td>0</td>
                                                #end

                                            #end

                                            #if($brand.equals("Oppo") || $brand.equals("Vivo") )
                                                #if($tertiary.get($label))
                                                    #if($tertiary.get($label) >= 200000)
                                                        <td class="currency green">$tertiary.get($label)</td>
                                                    #else
                                                        <td class="currency red">$tertiary.get($label)</td>
                                                    #end
                                                #else
                                                    <td>0</td>
                                                #end

                                            #end

                                            #if(!$brand.equals("Oppo") && !$brand.equals("Vivo") && !$brand.equals(
                                                "Xiaomi") && !$brand.equals("Samsung") )

                                                #if($tertiary.get($label))

                                                    <td class="currency">$tertiary.get($label) </td>

                                                #else
                                                    <td>0</td>
                                                #end

                                            #end


                                        #end

                                    </tr>

                                    #end

                                <tr class="font-weight-bold">
                                    <td class="details">Total</td>
                                    #foreach($label in $labels)
                                        #if($yearMonthTertiary.get($label))

                                            <td class="currency">$yearMonthTertiary.get($label)</td>
                                        #else
                                            <td> 0</td>
                                        #end
                                    #end

                                </tr>


                                <tr class="font-weight-bold">
                                    <td class="details"></td>
                                    #foreach($label in $labels)
                                        #if($yearMonthPartnerType.get($label))

                                            <td>$yearMonthPartnerType.get($label).getValue()</td>
                                        #else
                                            <td> -</td>
                                        #end
                                    #end

                                </tr>
                                <tr>
                                    <td class="details">Target</td>
                                    #foreach($label in $labels)
                                        #if($monthlyTarget.get($label).getSaleTarget())
                                            <td class="currency"> $monthlyTarget.get($label).getSaleTarget()</td>
                                        #else
                                            <td>0</td>
                                        #end

                                    #end

                                </tr>
                                <tr>
                                    <td class="details">% achvmt</td>



                                    #foreach($label in $labels)
                                        #if($yearMonthTertiary.get($label))
                                            #set($ymt = $yearMonthTertiary.get($label))
                                        #else
                                            #set($ymt = 0)
                                        #end

                                        #if($monthlyTarget.get($label).getSaleTarget())
                                            #set($mst = $monthlyTarget.get($label).getSaleTarget())
                                        #else
                                            #set($mst= 0 )
                                        #end
                                        #set($dit=  ($ymt/ $mst)* 100)
                                        #if($dit)
                                            #if($dit >65)
                                                <td class="text-success">$math.roundTo(2, $dit)%</td>
                                            #else
                                                <td class="text-danger">$math.roundTo(2, $dit)%</td>
                                            #end
                                        #else
                                            <td class="text-danger">-</td>
                                        #end

                                    #end
                                </tr>
                                </tbody>
                            </table>

                        </div>
                        <div class="col-6 mt-2">

                            <canvas id="chartTertiaryJSContainer" width="auto" height="auto"></canvas>

                        </div>
                    </div>

                </div>
                <div id="earning" class="container-fluid tab-pane fade"><br>
                    <div class="row">
                        <div class="col-6">
                            <table class="table table-bordered table-sm">
                                <thead>
                                <tr class="orange">
                                    <th scope="col">Month</th>
                                    #foreach($label in $labels)
                                        <th scope="col">$label</th>
                                    #end
                                </tr>


                                </thead>
                                <tbody>

                                    #foreach($allBrand in $allBrands)
                                        #set($brand = $allBrand.getName())

                                    <tr>

                                        <td class="details">$brand</td>
                                        #foreach($label in $labels)
                                            #set($earning= $earningMap.get($label))
                                            #if($earning.get($brand))
                                                <td class="currency">$earning.get($brand)</td>
                                            #else
                                                <td>0</td>
                                            #end
                                        #end

                                    </tr>


                                    #end

                                <tr class="font-weight-bold">
                                    <td class="details">Total</td>
                                    #foreach($label in $labels)
                                        #if($totalEarningPerMonth.get($label))

                                            <td class="currency">$decimalFormatter.format($totalEarningPerMonth.get($label))</td>
                                        #else
                                            <td> -</td>
                                        #end
                                    #end

                                </tr>

                                </tbody>
                            </table>

                        </div>
                        <div class="col-6 mt-2">


                            <canvas id="chartEarningJSContainer" width="auto" height="auto"></canvas>

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->


<script>
    var op = $chartInvestment;
    var px = document.getElementById('chartInvestmentJSContainer').getContext('2d');
    var chart = new Chart1(px, op);
    chart.update();


    var ops = $chartPurchase;
    var pxs = document.getElementById('chartSecondaryJSContainer').getContext('2d');
    var chartSec = new Chart1(pxs, ops);
    chartSec.update();

    var opt = $chartTertiary;
    var pxt = document.getElementById('chartTertiaryJSContainer').getContext('2d');
    var chartTer = new Chart1(pxt, opt);
    chartTer.update();

    var ope = $chartEarning;
    var pxe = document.getElementById('chartEarningJSContainer').getContext('2d');
    var chartEar = new Chart1(pxe, ope);
    chartEar.update();
</script>
</body>

</html>

<script>
    document.querySelectorAll('#partnerSecondary tbody td.currency[data-brand][data-month]').forEach(function (cell) {
        context = "${rc.contextPath}";
        cell.addEventListener('click', function () {
            const brandName = cell.getAttribute('data-brand');
            const monthName = cell.getAttribute('data-month');
            const index = cell.getAttribute('data-index');
            const fofoId = "$!{request.getParameter('fofoId')}";
            const rightTable = document.getElementById('rightTable');
            if (rightTable) {
                rightTable.style.display = 'block';
            }

            const contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 2));
            doGetAjaxRequestHandler(
                    `${context}/getBrandItemwisePartnerSecondarySale?month=${index}&brand=${brandName}&fofoId=${fofoId}`,
                    function (response) {
                        console.log("getting the api response", response)
                        const rightTableBody = document.getElementById('rightTableBody');
                        if (rightTableBody) {
                            rightTableBody.innerHTML = '';
                            let totalQuantity = 0;

                            response.forEach(function (item) {
                                const qty = parseInt(item.quantity.toString().replace(/,/g, ''), 10) || 0; // remove commas, fallback to 0
                                const row = document.createElement('tr');
                                row.classList.add('clickable-brandrow');
                                row.innerHTML =
                                        '<td>' + item.brand + " " + item.modelNumber + '</td>' +
                                        '<td>' + item.quantity + '</td>';

                                rightTableBody.appendChild(row);
                                totalQuantity += qty;
                            });

                            const totalRow = document.createElement('tr');
                            totalRow.innerHTML =
                                    '<td><strong>Total</strong></td>' +
                                    '<td><strong>' + totalQuantity + '</strong></td>';
                            rightTableBody.appendChild(totalRow);
                        }


                        const tableTitle = document.getElementById('tableTitle');
                        if (tableTitle) {
                            tableTitle.textContent = `${brandName} - ${monthName} Details`;
                        }
                    }
            );
        });
    });
</script>