Subversion Repositories SmartDukaan

Rev

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Smart Dukaan Partner Dashboard">
    <meta name="author" content="smartdukaan">

    <meta name="referer" content="no-referer">
    <meta name="referrer" content="no-referrer">

    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
    <link rel="shortcut icon" href="assets/images/icons/favicon.png">

    <title>Smart Dukaan - Partner Dashboard</title>

    <!-- Bootstrap CSS -->
    <!-- bootstrap theme -->
    <!--external css-->
    <!-- font icon -->
    <link href="resources/css/elegant-icons-style.css" rel="stylesheet"/>
    <link href="resources/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- full calendar css-->
    <!-- owl carousel -->
    <link rel="stylesheet" href="resources/css/owl.carousel.css" type="text/css">
    <link href="resources/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
    <!-- Custom styles -->
    <link href="resources/css/widgets.css" rel="stylesheet">
    <link href="resources/css/style.css?v=${cssVersion}" rel="stylesheet">
    <link href="resources/css/card.css?v=${cssVersion}" rel="stylesheet">
    <link href="resources/css/brand-logo.css?v=${cssVersion}" rel="stylesheet">
    <link href="resources/css/style-responsive.css?v=${cssVersion}" rel="stylesheet"/>
    <link href="resources/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
    <link type="text/css" href="resources/css/bootstrap.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />-->
    <link href="resources/css/bootstrap-theme.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="resources/js/daterangepicker/daterangepicker.css"/>

    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap-multiselect.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/datatables.bootstrap.min.css"/>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'
          integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap-tagsinput.css">
    <!-- Include the Toastify CSS file -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style>

        <!--
        Small desktops-- >

        @media (max-width: 1920px) {
            body {
                zoom: 80% !important;
            }
        }

        @media (max-width: 1280px) {
            div.count {
                font-size: 18px;
            }
        }


        .current-margin {
            cursor: pointer;
        }

        .margin-calculator {
            cursor: pointer;
        }

        .Vivo:hover {
            border-radius: 40px;
            background: blue;
        }


        .Samsung:hover {
            border-radius: 4px;
            background: blue;
        }

        .Vivo:hover {
            border-radius: 4px;
            background: mediumblue;
        }

        .Oppo:hover {
            border-radius: 4px;
            background: green;
        }

        .Lava:hover {
            border-radius: 4px;
            background: salmon;
        }

        .Live:hover {
            border-radius: 4px;
            background: coral;
        }

        .Nokia:hover {
            border-radius: 4px;
            background: blue;
        }

        .Realme:hover {
            border-radius: 4px;
            background: yellow;
        }

        .Tecno:hover {
            border-radius: 4px;
            background: DarkTurquoise;
        }

        .Samsung {

            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;


        }

        .Vivo {
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Oppo {
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Lava {

            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Realme {
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Tecno {
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Nokia {
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;

        }

        .Live {

            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 8px 12px;
            text-decoration: none;
            cursor: pointer;
        }

        #accesoriesStock:hover {
            cursor: pointer;
            border-radius: 4px;
            background: white;
        }

        #accesoriesStock {

            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 5px black;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(#4682B4, #dae5f4);
            color: #FFF;
            padding: 14px 3px 18px 3px;
            text-decoration: none;
            object-fit: cover;
            width: 100%;
            height: 90px;

        }

        .loading {
            display: none;
        }

        .breadcrumb {
            padding: 0 15px;
        }

        .purple-bg {

            background-image: linear-gradient(#800080, #DDA0DD);
            box-shadow: 6px 5px 6px purple;
        }

        .stars-outer {
            display: inline-block;
            position: relative;
            font-family: 'Mukta', FontAwesome;
        }

        .stars-outer::before {
            content: "\f006 \f006 \f006 \f006 \f006";
        }

        .stars-inner {
            position: absolute;
            top: 0;
            left: 0;
            white-space: nowrap;
            overflow: hidden;
            width: 0;
        }

        .stars-inner::before {
            content: "\f005 \f005 \f005 \f005 \f005";
            color: #f8ce0b;
        }


        .table-striped > tbody > tr:nth-child(odd) > td {
            background: white;
            background-color: #dae5f4;
        }

        .table-striped > tbody > tr:nth-child(even) > td {
            background: #f2f2f2;
            background-color: #b8d1f3;
        }

        .btn:hover {
            color: grey;
            text-decoration: none;
        }

        .btn-primary:hover {
            color: grey;
            text-decoration: none;
        }

        .sale-details {
            cursor: pointer;
        }

        .fa-2x {
            font-size: 1.4em;
        }

        .cover {
            object-fit: cover;
            width: 92%;
            height: 90px;
        }

        .info-box .notifications i {
            display: inline-block;
            margin-top: 0px;
            height: 25px;
            font-size: 16px;
            line-height: 25px;
            width: 25px;
            float: none;
            text-align: center;
            padding-right: 0px;
            color: #768399;
        }

        #preview {
            position: relative;
            color: #fff;
            float: left;
            width: 100%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            clear: both;
        }

        #canvas-preview {
            width: 100%;
            position: relative;
            top: -15px;
        }

        #preview-textfield {
            position: absolute;
            top: -10px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            color: white;
            font-family: 'Amaranth', sans-serif, Hind, 'Mukta';
        }

        #descriptionMenu {
            list-style: desc !important;
            list-style-type: square;
            text-align: left;
        }

        .messagebutton {
            margin-left: 1px;

        }

        .partnerTypeList a {
            color: #1f1d1d;
            border-bottom: none !important;
            background-color: #efecec;
            border: 1px solid #dad5d5 !important;
            padding: 10px 15px !important;
        }

        .Partnerdropdiv {
            background-color: #efecec !important;
            padding: 0 !important;
        }

        .partnerGold:hover {
            background-color: #D4AF37 !important;
            background-image: unset !important;
        }

        .partnerBronz:hover {
            background-color: #CD7F32 !important;
            background-image: unset !important;
        }

        .partnerPlatinum:hover {
            background-color: #799096 !important;
            background-image: unset !important;
        }

        .partnerSilver:hover {
            background-color: #BCC6CC !important;
            background-image: unset !important;
        }

        .partnerDiamond:hover {
            background-color: #B9F2FF !important;
            background-image: unset !important;
        }

        /*Custom Css by Vikas*/
        .info-box .row div, .info-box .row strong {
            font-size: 16px !important;
        }

        .info-box.light-salmon-bg div.title {
            font-size: 12px !important;
        }

        .info-box.orange-bg button div {
            font-size: 10px !important;
        }

    </style>
</head>

<body style="background-color:#f7f7f7">
<!--<div class="loading"><img src="resources/images/icons/loading.gif"></div>-->
<!-- container section start -->
<section id="container">


    <header class="header dark-bg indian-flag">
        <div class="toggle-nav">
            <div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"><i
                    class="icon_menu"></i></div>
        </div>
        <a href="${rc.contextPath}/analysisDashboard?fofoId=$fofoId" class="logo" style="margin-top: 7px"> <img
                src="resources/images/SmartDukaan-135x45.jpg" alt="smartDukaan" width="140"
                height="45">$fofoStore.getCode()</a>

        <ul class="nav pull-left top-menu">
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <img src="${partnerTypeImage}" width="60px">
                    <span class="username" style="font-size:15px">  <span
                            style="color:red">$partnerType.getValue()</span></span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu Partnerdropdiv">
                    <li class="eborder-top partnerTypeList">
                        <a href="javascript:void(0);" class="partnerGold">Rising Star - New</a>
                        <a href="javascript:void(0);" class="partnerBronze">Bronze+ - 0-2.99L</a>
                        <a href="javascript:void(0);" class="partnerSilver">Silver - 3L-7.99L</a>
                        <a href="javascript:void(0);" class="partnerGold">Gold - 8L-14.99L</a>
                        <a href="javascript:void(0);" class="partnerDiamond">Diamond - 15L-20.99L</a>
                        <a href="javascript:void(0);" class="partnerPlatinum">Platinum - 21L & ABOVE</a>
                    </li>
                </ul>
            </li>
        </ul>
    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li class="active">
                    <a href="${rc.contextPath}/analysisDashboard?fofoId=$fofoId">
                        <i class="icon_house_alt"></i>
                        <span>#springMessage("dashboard.dashboard")</span>
                    </a>
                </li>

                <li class="sub-menu">
                    <a href="javascript:void(0);" class="">
                        <i class="icon_table"></i>
                        <span>#springMessage("menu.reports")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="analysis-partner-collection-summary" data-fofoid="$fofoId"
                               href="javascript:void(0);">#springMessage(
                                                    "submenu.reportsdailycollections")</a></li>
                        <li><a class="analysis-franchise-sales" data-fofoid="$fofoId"
                               href="javascript:void(0);">#springMessage(
                            "submenu.reportsmysales")</a></li>
                        <li><a class="analysis-wallet_statement" data-fofoid="$fofoId"
                               href="javascript:void(0);">#springMessage(
                            "submenu.reportswalletstatement")</a></li>
                        <li><a class="analysis-loan-statement" data-fofoid="$fofoId" href="javascript:void(0);">Loan
                            Statement</a></li>
                        <li><a class="analysis-account-statement" data-fofoid="$fofoId" href="javascript:void(0);">Account
                            Statement</a></li>

                        <li><a class="analysis-scheme-payout-report" href="javascript:void(0);"
                               data-fofoid="$fofoId">#springMessage(
                                                    "submenu.reportsschemespayout")</a></li>

                        <li><a class="analysis-price-drop-report" href="javascript:void(0);"
                               data-fofoid="$fofoId">#springMessage(
                                                    "submenu.reportspricedrop")</a></li>

                        <li><a class="analysis-credit-note" href="javascript:void(0);" data-fofoid="$fofoId">Credit
                            Note</a></li>

                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.margins")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="analysis-schemes" data-fofoid="$fofoId" href="javascript:void(0);">#springMessage(
                            "submenu.marginsmodelwisemargin")</a></li>
                        <li><a class="analysis-partner-price-circular" data-fofoid="$fofoId"
                               href="javascript:void(0);">#springMessage(
                            "submenu.marginsnlcpriccecircular")</a></li>

                    </ul>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <!--overview start-->
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header" style="position:relative"><i class="fa fa-laptop"></i> Dashboard</h3>

                    <ol class="breadcrumb">
                        <li><i class="fa fa-home"></i><a
                                href="${rc.contextPath}/analysisDashboard?fofoId=$fofoId">Home</a></li>
                        <li><i class="fa fa-laptop"></i>Dashboard</li>
                    </ol>


                </div>
            </div>
            <!-- overview end -->
            <div class="row">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="info-box blue-bg">
                                <i class="fa fa-chart-line"></i>
                                <h4 style="margin-top:-2px;margin-bottom:12px"><strong>#springMessage(
                                    "dashboard.sale")</strong>
                                    <span>   <a href="#videoModal" class="btn btn-danger" data-toggle="modal"
                                                data-src="GQziSgeI3ZM"><span
                                            class="glyphicon glyphicon-play-circle"></span> Play Video</a> </span>


                                </h4>
                                <div class="row">
                                    <div class="col-lg-4 row">
                                        <div style="margin-top:0px" class="count currency">$nf.format($salesMap.get(
                                            "lmtdSale"))</div>
                                        <div class="title">LMTD</div>
                                    </div>
                                    <div class="col-lg-4 row">
                                        <div style="margin-top:0px" class="count currency">$nf.format($salesMap.get(
                                            "mtdSale"))</div>
                                        <div class="title">MTD</div>
                                    </div>
                                    <div class="col-lg-3 row">
                                        <div style="margin-top:0px" class="count currency">$nf.format($salesMap.get(
                                            "todaySale"))</div>
                                        <div class="title">Today&apos;s</div>
                                    </div>

                                    <div class="col-lg-1 row" style="margin-left: -20px;margin-top: 20px;">
                                        <i class="fk_more fa fa-angle-double-down" id="blue-dropdown"
                                           style="cursor:pointer;font-size: 27px;width: 27px;height: 27px;margin-top: 0px;color: rgba(255, 255, 255, 0.75);line-height: 27px;"></i>
                                    </div>
                                </div>

                                <div class="row monthsaleContainer" style="margin:5px">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5 row">
                            <div class="info-box brown-bg">

                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 style="margin-top:-2px;margin-bottom:3px"><strong>Current Rate</strong></h4>
                                        <div style="margin-top:0px" class="count">
                                            <span class="currency">$nf.format($salesMap.get("currentRate"))</span>/day
                                        </div>
                                        <img src="${salesMap.get('currentTypeImage')}" width="60px"
                                             class="target-slide1">
                                    </div>
                                    <div class="col-lg-6">
                                        <h4 style="margin-top:-2px;margin-bottom:3px"><strong>Reqd Rate</strong></h4>
                                        <div style="margin-top:0px" class="count currency">
                                            <span class="currency">$nf.format($salesMap.get("requiredRate"))</span>/day
                                        </div>
                                        <img src="${salesMap.get('requiredTypeImage')}" width="60px"
                                             class="target-slide1">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="info-box purple-bg">
                                <div class="col-lg-12 row">
                                    <i class="fa fa-coins"></i>
                                    <h4 style="margin-top:-2px;margin-bottom:12px"><strong>#springMessage(
                                        "dashboard.investment")</strong></h4>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="row">
                                                <div style="margin-top:0px" class="count currency">$investments.get(
                                                    "today")</div>
                                                <div class="title">#springMessage("dashboard.current")</div>
                                                <div class="col-lg-1" style="margin-left: -20px;margin-top: -6px;">
                                                    <i class="fk_more fa fa-angle-double-down flash"
                                                       id="purple-dropdown"
                                                       style="cursor:pointer;font-size: 27px;width: 145px;height: 27px;margin-top: 0px;color: rgba(255, 255, 255, 0.75);line-height: 4px; margin-left: 25px;"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count">$investments.get("minimum")</div>
                                            <div class="title">min</div>
                                        </div>
                                        <div class="col-lg-3 row"
                                            #if(!$isInvestmentOk)
                                             style="color:red; background: white;"
                                            #end
                                        >
                                            #if($investments.get("short")<=0)
                                                <div style="margin-top:0px" class="count">100%</div>
                                                <div class="title">OK</div>
                                            #else
                                                <div style="margin-top:0px" class="count">$investments.get("short")%
                                                </div>
                                                <div class="title">short</div>
                                            #end
                                        </div>
                                    </div>
                                    <div class="row investmentContainer" style="margin:5px">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 row">
                            #if($staticScheme)
                                <div class="info-box white-bg" style="padding:0;height: 159px">
                                    <div class="col-lg-6"
                                         style="background-size: 135px !important;background:url('/resources/images/super-retailer.jpg') no-repeat;height: 161px;"
                                    >
                                        <div
                                                style="position: absolute;bottom: 4px;left: auto;width: 100%;left:-5px;
                                                text-align: center;color: #333333;margin-bottom: 4px;font-size: 18px; font-weight: bold">
                                            $schemeCategory</div>
                                    </div>
                                    <div class="col-lg-6 row">
                                        <div class="row" style="margin-top:6px">
                                            <div style="text-align: center;font-size: 13px;font-weight: bold;color: black;margin-top: 3px">
                                                Aug 1 - Nov 30
                                            </div>
                                            <p style="margin: 0 0 8px"></p>
                                            <div style="text-align: center;font-size: 13px;font-weight: bold;color: black">
                                                TOTAL TARGET
                                            </div>
                                            <div class="rcurrency"
                                                 style="text-align: center;font-size: 20px;font-weight: bold;color: red">
                                                $staticScheme.getTarget()
                                            </div>
                                        </div>
                                        <hr style="margin-top:6px;margin-bottom: 6px"/>
                                        <div class="row">
                                            <div style="text-align: center;font-size: 13px;font-weight: bold;color: black">
                                                TOTAL ACHIEVEMENT
                                            </div>
                                            <div class="rcurrency red"
                                                 style="text-align: center;font-size: 20px;font-weight: bold;color: red">
                                                $nf.format($schemeAchievement)
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            #else
                                <div class="info-box orange-bg"
                                     style="background-image: linear-gradient(#ff7f50 ,orange); box-shadow: 6px 5px 6px #ff7f50;">
                                    <i class="fa fa-chart-line"></i>
                                    <h4 style="margin-top:-2px;margin-bottom:12px"><strong>#springMessage(
                                        "dashboard.onlinesale")</strong></h4>
                                    <div class="row">
                                        <div class="col-lg-3" style="margin:5px">
                                            <div style="margin-top:0px; margin-left:24px;"
                                                 class="count currency">$countOrder</div>
                                            <button class="btn-warning">
                                                <div class="title pending_order_dashboard"
                                                     style="cursor: pointer; color:black;">
                                                    #springMessage("dashboard.pendingorder")
                                                </div>
                                            </button>
                                        </div>

                                        <div class="col-lg-4 row" style="margin:5px">
                                            #if($onlineDeliveredOrderSum)
                                                <div style="margin-top:0px; margin-left:37px;"
                                                     class="count currency">$onlineDeliveredOrderSum</div>
                                            #else
                                                <div style="margin-top:0px; margin-left:20px;" class="count currency">
                                                    0
                                                </div>
                                            #end
                                            <button class="btn-warning">
                                                <div class="title total_sale_dashboard"
                                                     style="cursor: pointer; color:black;">Online Sales
                                                </div>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            #end
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-lg-9">
                            <div class="info-box pink-bg" style="height: 160px;">
                                <h4 style="margin-top:-2px;margin-bottom:12px"><strong>Order Summary</strong></h4>

                                <div class="col-lg-3 row">
                                    <h4 style="margin-top:-2px;margin-bottom:12px;"><strong
                                            style="font-size: 16px; cursor:pointer; margin-left: 9px;"
                                            class="pndg-status">Pending</strong></h4>
                                    #if($submittedCount && $submittedValue)
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">$submittedCount</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">$submittedValue</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>
                                    #else
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>

                                    #end


                                </div>

                                <div class="col-lg-3">
                                    <h4 style="margin-top:-2px;margin-bottom:12px"><strong
                                            style="font-size: 19px; cursor:pointer; margin-left: 15px;"
                                            class="billed-status">#springMessage("dashboard.billed")</strong></h4>

                                    #if($billedCount && $billedValue)
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">$billedCount</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">$billedValue</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>
                                    #else
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>

                                    #end
                                </div>

                                <div class="col-lg-3">
                                    <h4 style="margin-top:-2px;margin-bottom:12px"><strong
                                            style="font-size: 19px;  cursor:pointer; margin-left: 15px;"
                                            class="shipped-status">#springMessage("dashboard.dispatched")</strong></h4>

                                    #if($shippedCount && $shippedValue)
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">$shippedCount</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">$shippedValue</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>
                                    #else
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count">0</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count">0</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>

                                    #end
                                </div>

                                <div class="col-lg-3">
                                    <h4 style="margin-top:-2px;margin-bottom:12px"><strong
                                            style="font-size: 19px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;  cursor:pointer;"
                                            class="grn-status">#springMessage("dashboard.grnpending")</strong></h4>

                                    #if($grnPendingCount &&  $grnPendingValue )
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px"
                                                 class="count currency">$grnPendingCount</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px"
                                                 class="count currency">$grnPendingValue</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>
                                    #else
                                        <div class="col-lg-3">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title">Qty</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="margin-top:0px" class="count currency">0</div>
                                            <div class="title" style="margin-left:5px;">Value</div>
                                        </div>

                                    #end
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 row" style="height: 190px;">
                            <div class="info-box green-bg" style="min-height: 160px;">
                                <i class="fa fa-cubes"></i>
                                <div class="count currency">$investments.get("inStock")</div>
                                <div class="title">#springMessage("dashboard.totalstock")</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-lg-8 partnerIncomeContainer"></div>

                        <div class="col-lg-4">
                            <div class="info-box green-bg" style="height: 145px;">
                                <h4 style="margin-top:-2px;margin-bottom:12px"><strong>#springMessage(
                                    "dashboard.monthlytarget")</strong></h4>

                                <div class="col-lg-6">
                                    <h4 style="margin-top:-2px;margin-bottom:12px;">
                                        <strong style="cursor:pointer; margin-left: 9px;">Sale</strong>
                                    </h4>
                                    <div class="col-lg-6">
                                        #if($monthlyTarget && $monthlyTarget.getSaleTarget() >0)
                                            <div style="margin-top:0px"
                                                 class="count currency">$monthlyTarget.getSaleTarget()</div>
                                        #else
                                            <div style="margin-top:0px" class="count currency">-</div>
                                        #end
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <h4 style="margin-top:-2px;margin-bottom:12px;"><strong
                                            style="font-size: 16px; cursor:pointer; margin-left: 9px;"
                                    >#springMessage("dashboard.purchase")</strong></h4>
                                    <div class="col-lg-6">
                                        #if($monthlyTarget && $monthlyTarget.getPurchaseTarget() > 0)
                                            <div style="margin-top:0px"
                                                 class="count currency">$monthlyTarget.getPurchaseTarget()</div>

                                        #else
                                            <div style="margin-top:0px" class="count currency"> -</div>

                                        #end
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="Mobile">
                            #foreach($brandStockPrice in $brandStockPrices)

                                <div class="col-lg-3">
                                    <div class="card card-default">
                                                        <span class="card-body" style="padding-bottom:0px">
                                                                <table>
                                                                        <thead>
                                                                                <tr><td colspan="2">Current Stock</td></tr>
                                                                        </thead>
                                                                        <tbody>
                                                                                <tr><th>Qty</th><td>$brandStockPrice.getTotalQty()pc</td></tr>
                                                                                <tr><th>Value</th><td><span
                                                class="currency">$brandStockPrice.getTotalValue()</span></td></tr>
                                                                        </tbody>
                                                                </table>
                                #if($brandStockPrice.getAgedValue()>0)
                                    <p style="color:#d15a57;font-weight:700" title="Focus Stock">
                                                                        <span class="currency">$brandStockPrice.getAgedValue()</span> / $brandStockPrice.getAgedQty()
                                                                </p>
                                #else
                                    <p>&nbsp;</p>
                                #end
                                                        </span>
                                        <span class="card-img" style="text-align:center">
                                                        <img src="${brandStockPrice.getBrandUrl()}" data-stockbrand="$brandStockPrice.getBrand()"
                                 class="cover $brandStockPrice.getBrand()" id="stockcatalog"
                                 class="$brandStockPrice.getBrand()">
                                                        </span></span>
                                    </div>
                                </div>
                            #end
                        </div>
                        <div class="row">

                            <div class="col-lg-3">
                                <div class="card card-default">
                                                        <span class="card-body" style="padding-bottom:38px;">
                                                                <table>
                                                                        <thead>
                                                                                <tr><td colspan="2">Current Stock</td></tr>
                                                                        </thead>
                                                                        <tbody>
                                                                                <tr><th>Value</th><td><span class="currency">$accesoriesStock</span></td></tr>
                                                                        </tbody>
                                                                </table>
                                                        </span>
                                    <span class="card-img">
                                                                <img src="resources/images/accessories.jpg" id="accesoriesStock"
                                     class="accesoriesClass">
                                                        </span>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>

                <div class="col-lg-6">
                    <div class="row">

                        <div class="form-group">
                            <label class="control-label col-lg-4" for="months">#springMessage(
                                "dashboard.offerforthemonth")</label>
                            <div class="col-lg-2">
                                <select class="form-control input-sm" id="mk_offer_brand_filter" name="offerBrandFilter"
                                        placeholder="brand" style="margin:auto;">
                                    <option value="" disabled selected>Select Brand</option>
                                    <option value="">All</option>
                                    #foreach($brand in $brands)
                                        <option value="$brand">$brand</option>
                                    #end
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <select class="form-control input-sm" id="offer-months" name="months"
                                        placeholder="months" style="margin:auto;">
                                    <option value="" disabled selected>Month</option>
                                    #foreach($mVM in $monthValueMap.entrySet())
                                        #if($mVM.getKey()== $month )
                                            <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
                                        #else
                                            <option value="$mVM.getKey()">$mVM.getValue()</option>
                                        #end
                                    #end
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <!--Training Video -->
                                <a href="#videoModal" class="btn btn-danger" data-toggle="modal"
                                   data-src="Nv7J2L_BPCU"><span
                                        class="glyphicon glyphicon-play-circle"></span> Play Video</a>
                            </div>
                        </div>
                    </div>
                    <div id="offer-container">
                        #parse("published-offers.vm")
                    </div>
                    <div class="offer-margin-container">
                        <div class="modal  text-center" id="offerDescription">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row col-lg-12 info-box white-bg" id="performanceContainer">
                        #parse("performance.vm")
                    </div>
                    <!--<div class="row col-lg-12 info-box white-bg" id="performanceContainer">
                        ##parse("performance-weekly.vm")
                    </div>-->
                    #if($activatedImeis > 0)
                        <div class="row col-lg-12 info-box white-bg">
                            #parse("analysis-dashboard-activated-imeis.vm")
                        </div>
                    #end
                    #if($imeiActivationPendingCount > 0)
                        <div class="row col-lg-12 info-box white-bg">
                            #parse("dashboard-grn-pending-activated-imeis.vm")
                        </div>
                    #end
                    <div class="row col-lg-12">
                        <ul class="nav nav-tabs">
                            <li class="analysis_bar_chart" data-fofoid="$fofoId"><a class="ba">Sale</a></li>
                            <li class="analysis_lms_line_chart" data-fofoid="$fofoId"><a class="la">#springMessage(
                                "dashboard.monthlysale")</a></li>
                            <li class="analysis_purchase_line_chart" data-fofoid="$fofoId"><a class="pa">#springMessage(
                                "dashboard.monthlypurchase")</a></li>
                            <li class="analysis_priceDrop_chart" data-fofoid="$fofoId"><a class="pd">#springMessage(
                                "dashboard.pricedrop")</a></li>
                            <li class="analysis_pending_activation_chart" data-fofoid="$fofoId"><a class="pac">Pending
                                Activation</a></li>

                        </ul>
                        <div style="float:left;margin-top: 2% ; font-size: 20px ;margin-left: 5%" id="dateRangeDiv">
                            From:
                            <input type="date" name="from" id="chartForm" value="">
                            To:
                            <input type="date" name="to" id="chartTo" value="">

                            <select name="quantityType" id="quantity_type_id">
                                <option value="false" selected>Value</option>
                                <option value="true">Quantity</option>
                            </select>
                            <button id="analysis_viewSaleBarChart" data-fofoid="$fofoId" class="btn-success">
                                Veiw Chart
                            </button>
                        </div>
                        <br>
                        <div class="row ChartContainer" style="margin:5px;margin-top: 4%">

                        </div>


                    </div>
                    <div class="clearfix"></div>
                    <div class="model_charbar_container">

                    </div>


                </div>
            </div>
            </div>
        </section>
        <div class="text-center">
            <div id="like_button_container"></div>
            <div class="credits">
                <p>All rights reserved.&copy;2017, Smart Dukaan</p>
            </div>
        </div>

    </section>
    <div class="modal fade" id="modelChartModal" tabindex="-1" role="dialog"
         aria-labelledby="modelChartModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document"> <!-- modal-lg for large modal -->
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modelChartModalLabel">Model-wise Chart
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </h3>
                </div>
                <div class="modal-body model_charbar_container">
                    <!-- Chart will be injected here -->
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        context = "${rc.contextPath}";
        webApiScheme = "$webApiScheme";
        webApiRoot = "$webApiRoot";
        webApiHost = "$webApiHost";
        webApiPort = "$webApiPort";
    </script>
    #parse("include-scripts.vm")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#offerDescription").modal({backdrop: "static", keyboard: true, focus: true, show: false});
            var salesCloseFlag = true;
            $("#blue-dropdown").click(function () {
                // console.log("clicked");
                if (salesCloseFlag) {
                    var containerWidth = $(".blue-bg").width()
                    doGetAjaxRequestHandler(context + "/getMonthSale", function (response) {
                        $('.monthsaleContainer').html(response);

                        $(".blue-bg").css({"position": "absolute", "z-index": "10"}).width(containerWidth);
                    });
                } else {
                    $(".blue-bg").removeAttr('style');
                    $('.monthsaleContainer').html('');
                }
                salesCloseFlag = !salesCloseFlag;
            });

            $(".analysis_bar_chart").click();

            var month = 0;
            doGetAjaxRequestHandler(context + "/partnerTotalIncomeByMonth/" + month, function (response) {
                console.log(response);
                $(".partnerIncomeContainer").html(response);
            });

            var investmentCloseFlag = true;
            $("#purple-dropdown").click(function () {
                console.log('hello');
                $(".flash").stop();
                // console.log("clicked");
                if (investmentCloseFlag) {
                    var containerWidth = $(".purple-bg").width()
                    doGetAjaxRequestHandler(context + "/investmentDetails", function (response) {
                        $('.investmentContainer').html(response);
                        $(".purple-bg").css({"position": "absolute", "z-index": "10"}).width(containerWidth);
                    });
                } else {
                    $(".purple-bg").removeAttr('style');
                    $('.investmentContainer').html('');
                }
                investmentCloseFlag = !investmentCloseFlag;
            });
        });

        function sleep(delay) {
            var start = new Date().getTime();
            while (new Date().getTime() < start + delay) ;
        }

        $(document).on("click", ".analysis_priceDrop_chart",
                function () {
                    $(".pd").css("color", "blue");
                    $(".pd").css("background-color", "white");
                    $(".ba").css("color", "white");
                    $(".ba").css("background-color", "#C0C0C0");
                    $(".pa").css("color", "white");
                    $(".pa").css("background-color", "#C0C0C0");
                    $(".la").css("color", "white");
                    $(".la").css("background-color", "#C0C0C0");

                    $(".pac").css("color", "white");
                    $(".pac").css("background-color", "#C0C0C0");


                    $(".puo").css("color", "white");
                    $(".puo").css("background-color", "#C0C0C0");

                    var fofoId = $(this).data("fofoid")
                    sleep(500);
                    doGetAjaxRequestHandler(context + "/getMonthlyPriceDrop?fofoId=" + fofoId, function (response) {

                        $('.ChartContainer').html(response);
                    });
                });


        $(document).on("click", ".analysis_pending_activation_chart",
                function () {
                    $(".pac").css("color", "blue");
                    $(".pac").css("background-color", "white");

                    $(".pd").css("color", "white");
                    $(".pd").css("background-color", "#C0C0C0");
                    $(".ba").css("color", "white");
                    $(".ba").css("background-color", "#C0C0C0");
                    $(".pa").css("color", "white");
                    $(".pa").css("background-color", "#C0C0C0");
                    $(".la").css("color", "white");
                    $(".la").css("background-color", "#C0C0C0");

                    $(".puo").css("color", "white");
                    $(".puo").css("background-color", "#C0C0C0");
                    var fofoId = $(this).data("fofoid")
                    sleep(500);
                    doGetAjaxRequestHandler(context + "/getMonthlyActivation?fofoId=" + fofoId, function (response) {

                        $('.ChartContainer').html(response);
                    });
                });

        $(document).on("click", ".analysis_purchase_line_chart",
                function () {
                    $(".pa").css("color", "blue");
                    $(".pa").css("background-color", "white");
                    $(".ba").css("color", "white");
                    $(".ba").css("background-color", "#C0C0C0");
                    $(".pd").css("color", "white");
                    $(".pd").css("background-color", "#C0C0C0");
                    $(".la").css("color", "white");
                    $(".la").css("background-color", "#C0C0C0");

                    $(".pac").css("color", "white");
                    $(".pac").css("background-color", "#C0C0C0");

                    $(".puo").css("color", "white");
                    $(".puo").css("background-color", "#C0C0C0");
                    var fofoId = $(this).data("fofoid")
                    doGetAjaxRequestHandler(context + "/getMonthlyPurchaseLineChart?fofoId=" + fofoId, function (response) {
                        $('.ChartContainer').html(response);
                    });
                });

        $(document).on("click", ".analysis_lms_line_chart",
                function () {

                    $(".ba").css("color", "white");
                    $(".ba").css("background-color", "#C0C0C0");
                    $(".pa").css("color", "white");
                    $(".pa").css("background-color", "#C0C0C0");
                    $(".la").css("color", "blue");
                    $(".la").css("background-color", "white");
                    $(".pd").css("color", "white");
                    $(".pd").css("background-color", "#C0C0C0");

                    $(".pac").css("color", "white");
                    $(".pac").css("background-color", "#C0C0C0");

                    $(".puo").css("color", "white");
                    $(".puo").css("background-color", "#C0C0C0");
                    var fofoId = $(this).data("fofoid")
                    doGetAjaxRequestHandler(context + "/getlmsLineChart?fofoId=" + fofoId, function (response) {
                        $('.ChartContainer').html(response);
                    });
                });

        $(document).on("click", ".analysis_bar_chart",
                function () {
                    $(".ba").css("color", "blue");
                    $(".ba").css("background-color", "white");
                    $(".la").css("color", "white");
                    $(".la").css("background-color", "#C0C0C0");
                    $(".pa").css("color", "white");
                    $(".pa").css("background-color", "#C0C0C0");
                    $(".pd").css("color", "white");
                    $(".pd").css("background-color", "#C0C0C0");

                    $(".pac").css("color", "white");
                    $(".pac").css("background-color", "#C0C0C0");

                    $(".puo").css("color", "white");
                    $(".puo").css("background-color", "#C0C0C0");

                    var fofoId = $(this).data("fofoid")
                    doGetAjaxRequestHandler(context + "/analysis/getBarChart?fofoId=" + fofoId, function (response) {
                        $('.ChartContainer').html(response);
                    });
                });


        $(document).on("click", ".pending_upgrade_offer",
                function () {

                    $(".puo").css("color", "blue");
                    $(".puo").css("background-color", "white");

                    $(".ba").css("color", "white");
                    $(".ba").css("background-color", "#C0C0C0");
                    $(".la").css("color", "white");
                    $(".la").css("background-color", "#C0C0C0");
                    $(".pa").css("color", "white");
                    $(".pa").css("background-color", "#C0C0C0");
                    $(".pd").css("color", "white");
                    $(".pd").css("background-color", "#C0C0C0");

                    $(".pac").css("color", "white");
                    $(".pac").css("background-color", "#C0C0C0");

                    doGetAjaxRequestHandler(context + "/getMonthlySamsungUpgradeOffer", function (response) {
                        $('.ChartContainer').html(response);
                    });
                });


        $(document).on("click", ".description-offer",
                function (e) {
                    var offerid = $(this).data('offerid');
                    console.log(offerid);
                    doGetAjaxRequestHandler(context + "/getOfferMargins?offerId="
                            + offerid, function (response) {
                        $('.offer-margin-container .modal-content').html(response);
                        $("#offerDescription").modal('handleUpdate');
                        $("#offerDescription").modal('show');
                    });
                });


        $(document).on("click", ".cancel-description",
                function (e) {
                    $("#descriptionMenu").empty();
                });


        $(document).on("click", "#cancel-model", function (e) {
            $("#descriptionMenu").empty();
        });

        $(document).on('change', "#month-wise-total-income", function () {

            var month = $(this).val();
            console.log(month);

            doGetAjaxRequestHandler(context + "/partnerTotalIncomeByMonth/" + month, function (response) {
                console.log(response);
                $(".partnerIncomeContainer").html(response);
            });
        });


        $(document).on('change', "#performance-months", function () {

            var month = $("#performance-months").val();
            console.log(month);

            doGetAjaxRequestHandler(context + "/getMonthsInvestment?month=" + month, function (response) {
                console.log(response);
                $("#performanceContainer").html(response);

            });
        });


        $(document).on('change', "#offer-months,#mk_offer_brand_filter", function () {
            var monthSearch = $('#offer-months').val();
            var brandFilter = $('#mk_offer_brand_filter').val();
            console.log("monthSearch - ", monthSearch)
            console.log("brandFilter - ", brandFilter)
            var url;
            if (!brandFilter) {
                url = `${context}/published-offers?yearMonth=${monthSearch}`;
            } else {
                url = `${context}/published-offers?yearMonth=${monthSearch}&brandFilter=${brandFilter}`;
            }
            console.log("url - ", url);
            doGetAjaxRequestHandler(url, function (response) {
                $("#offer-container").html(response);
            });
        });


        $(document).on("click", ".pndg-status", function () {
            console.log("Hello");
            pendingOrderStatus("main-content");
        });

        function pendingOrderStatus(domId) {
            doGetAjaxRequestHandler(context + "/getPendingOrderStatus", function (response) {
                console.log(response);
                $('#' + domId).html(response);
            });
        }

        $(document).on("click", ".billed-status", function () {
            console.log("Hello");
            billedOrderStatus("main-content");
        });

        function billedOrderStatus(domId) {
            doGetAjaxRequestHandler(context + "/getBilledOrderStatus", function (response) {
                console.log(response);
                $('#' + domId).html(response);
            });
        }

        $(document).on("click", ".shipped-status", function () {
            console.log("Hello");
            shippedOrderStatus("main-content");
        });

        function shippedOrderStatus(domId) {
            doGetAjaxRequestHandler(context + "/getShippedOrderStatus", function (response) {
                console.log(response);
                $('#' + domId).html(response);
            });
        }

        $(document).on("click", ".grn-status", function () {
            console.log("Hello");
            grnOrderStatus("main-content");
        });

        function grnOrderStatus(domId) {
            doGetAjaxRequestHandler(context + "/getGrnPendingOrderStatus", function (response) {
                console.log(response);
                $('#' + domId).html(response);
            });
        }

        function lastMonthCreditIncome(domId) {
            let monthVal = $("#month-wise-total-income").val();
            doGetAjaxRequestHandler(`${context}/monthWisePartnerIncome/${monthVal}`, function (response) {
                console.log(response);
                $('#' + domId).html(response);
            });
        }

        $(document).on("click", ".pending-income", function () {
            console.log("Hello");
            lastMonthCreditIncome("main-content");
        });

        $(document).on("click", ".total-income-calc", function () {
            console.log("Hello");
            lastMonthCreditIncome("main-content");
        });


    </script>
    <script>

        //knob
        $(function () {
            /*$(".knob").knob({
              'draw' : function () {
                $(this.i).val(this.cv + '%')
              }
            });*/
            $.fn.dataTable.moment('DD/MM/YYYY');
            $.fn.dataTable.moment('DD/MM/YYYY hh:mm');
            $('.currency').each(function (index, ele) {
                if (!isNaN(parseInt($(ele).html()))) {
                    $(ele).html(numberToComma($(ele).html()));
                }
            });
        });

        $(function () {
            var profile = localStorage.getItem('profile');
            if (profile) {
                $("#photo").attr("src", JSON.parse(profile).image_url);
                $("#fofo_name").text(JSON.parse(profile).name);
            } else {
                $("#photo").attr("src", "");
                $("#fofo_name").text("Welcome, User");
            }
        });

        $(function () {
            var bag = localStorage.getItem('bag');
            console.log(bag);
            if (bag) {
                console.log("yes");
                //$("#cart_bar").find('span').text(10);
                $("#cart_bar").find('span').text(Object.keys(JSON.parse(bag)).length);
            } else {
                $("#cart_bar").find('span').text(0);
            }
        });

        $("#logout").click(function () {
            localStorage.profile = undefined;
        });
            #set($partnerInvestment = $investments.get("investment"))
        saleAmount = numberToComma($partnerInvestment.getSalesAmount());
        minimumInvestmentAmount = numberToComma($partnerInvestment.getMinInvestment());
        totalInvestedAmount = numberToComma($partnerInvestment.getTotalInvestment());
        shortPercentage = numberToComma($partnerInvestment.getShortPercentage());
        grnPendingStockAmount = numberToComma($partnerInvestment.getGrnPendingAmount());
        unbilledStockAmount = numberToComma($partnerInvestment.getUnbilledAmount());
        inStockAmount = numberToComma($partnerInvestment.getInStockAmount());
        walletAmount = numberToComma($partnerInvestment.getWalletAmount());
        shortAmount = numberToComma($partnerInvestment.getShortInvestment());
        minAmountToBeAdded = numberToComma($partnerInvestment.getMinAmountToBeAdded());
        isInvestmentOk = $isInvestmentOk;
        starTotal = 5;
        /*ratings = {
            current: $currentMonthRating,
            last: $lastMonthRating,
            tilldate: $ratingTillDate
        };
        for (const rating in ratings) {
            // 2
            const starPercentage = (ratings[rating] / starTotal) * 100;
            // 3
            const starPercentageRounded = `${starPercentage}%`;
            // 4
            document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
        }*/

        hasGift =$hasGift;
        giftItemId = $giftItemId;
        monthDays =$monthDays;
        dayOfMonth = $dayOfMonth;
        $(function () {
            $('#links_bar').popover({
                container: ".notification-row",
                template: `<div class="popover" style="min-width: 18%;">
                                                        <div class="arrow"></div>
                                                        <div class="popover-inner">
                                                                <h4 class="popover-title">
                                                                </h4>
                                                                <div class="popover-content"><p></p></div>
                                                        </div>
                                                </div>`,
                html: true,
                content: `<div class="container-fluid">
                                                <div class="row"><h5 class="page-header" style="color:#333;margin:6px 0 3px">Quick Links</h5></div>
                                                <div class="row">
                                                            <div class="col-lg-3">
                                                                    <a href="/spicemoney/getToken" target="_blank" href="">
                                                                        <img title="Spice Money" src="/resources/images/icons/provider-logos/spicemoney.jpg" style="width:40px"></img>
                                                                    </a>
                                                                </div>
                                                        </div>
                                        </div>`,
                placement: "bottom",
                trigger: "focus"
            });
        });

        function showAttendanceModal() {
            var today = new Date().getTime();
            if ($.cookie("punchIn") == undefined) {
                document.cookie = "punchIn=" + today;
            }
            if (today >= parseInt($.cookie("punchIn"))) {
                doGetAjaxRequestHandler(context + "/getPunchInOutForModel", function (response) {
                    if (response == 'true') {
                        $('#punchInOutModal').modal('hide');
                        clearInterval(stopInterval);
                    } else {
                        $("#punch-in-out-model").html(response);
                        $('#punchInOutModal').modal('show');
                        var time = today + 30 * 60 * 1000
                        document.cookie = "punchIn=" + time;
                    }
                });
            }
        }

        var stopInterval;
        $(document).ready(function () {
            stopInterval = setInterval(showAttendanceModal, 100000000);

            $('div.message-filter').on('click', 'button', function () {

                messageType = $(this).data("messagetype");
                notifyTypeChange(messageType, $(this));

            });
        });


        $(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                console.log("Geolocation is not supported by browser.");
            }
            loaderDialogObj = bootbox.dialog({
                message: '<div class="container text-center"><i class="fa fa-spin fa-spinner"></i>Loading...</div>',
                show: false
            });

            /* Assign empty url value to the iframe src attribute when
                modal hide, which stop the video playing */
            $("#videoModal").on('hide.bs.modal', function () {
                $("#trainingVideo").attr('src', '');
            });

            /* Assign the initially stored url back to the iframe src
            attribute when modal is displayed again */
            $("#videoModal").on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget);
                let youtubeUrl = button.data("src");
                $("#trainingVideo").attr('src', `//www.youtube.com/embed/${youtubeUrl}?autoplay=1`);
            });

        });
    </script>
    <div id="punchInOutModal" class="modal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Punch In Out</h4>
                </div>
                <div class="modal-body">
                    <div id="punch-in-out-model">

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>

<!-- Modal HTML -->
<div id="videoModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="trainingVideo" referrerpolicy="strict-origin-when-cross-origin" class="embed-responsive-item" width="560" height="315"
                            allowfullscreen allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</html>
<style>


    .popover2 {
        min-width: 30em;
        height: 410px;
        overflow: auto;
        padding: 8px 5px;
        overflow-x: hidden;

    }

    .popover1 {
        min-width: 30em;


    }

    .mark {
        font-size: 13px;
        padding: 5px 6px;
        border: solid 3px red;
        margin-bottom: -14px;
        color: red;

    }

    .mark.btn-pressed {
        color: black;
        background: white;
        font-size: 17px;
        border-radius: 3px;
        border: solid 2px black;
    }

    .price {
        padding: 5px 6px;
        font-size: 13px;
        border: solid 1px black;
        border: solid 3px red;
        margin-bottom: -14px;
        color: red;

    }

    .price.btn-pressed {
        color: black;
        background: white;
        font-size: 17px;
        border: solid 2px black;
    }

    .schem {
        color: red;
        padding: 5px 6px;
        font-size: 13px;
        border: solid 3px red;
        margin-bottom: -14px;

    }

    .schem.btn-pressed {
        color: black;
        background: white;
        font-size: 17px;
        border: solid 2px black;
    }

    .notify-messages {
        min-height: 65px;
    }

    .notifi {
        padding: 5px 6px;
        font-size: 13px;
        margin-bottom: -14px;

        color: red;
        border: solid 3px red;
    }

    .notifi.btn-pressed {
        color: black;
        font-size: 17px;
        border: solid 2px black;
        background: white;
    }

    #offer-container {
        overflow-y: auto;
        max-height: 367px;
    }


    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>
</script>


<script type="text/javascript">
    window.onload = function () {
        if (window.innerWidth < 1920) document.body.style.zoom = "80%";
        var options = $chartMap;
        var ctx = document.getElementById('barchart').getContext('2d');
        window.bar = new Chart1(ctx, options);
    };
</script>


<script>
    function makeAjaxRequest() {
        $.ajax({
            url: 'https://partners.smartdukaan.com/psi/auth-endpoint',
            method: 'GET',
            dataType: 'xml', // Assuming the response is in XML format
            success: function (responseXml) {
                var responseUrl = $(responseXml).find('response').text();
                if (responseUrl) {
                    // Open a new tab with the response URL
                    window.open(responseUrl, '_blank');
                } else {
                    console.error('Response URL not found in the XML');
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error('AJAX Request Failed:', textStatus, errorThrown);
            }
        });
    }


    $(document).on('click', '#analysis_viewSaleBarChart', function () {
        let partnerId = $(this).data("fofoid");
        let from = $('#chartForm').val();
        let to = $('#chartTo').val();
        let quantity_type = $('select[name="quantityType"]').val();
        console.log("from - ", from);
        console.log("to - ", to);
        console.log("tquantity_typeo - ", quantity_type);
        console.log("fofoId - ", partnerId);

        doGetAjaxRequestHandler(`${context}/analysis/getBarChart?fofoId=${partnerId}&from=${from}&to=${to}&isQuantity=${quantity_type}`, function (response) {
            console.log("res - ", response);
            $('.model_charbar_container').html("");
            $('.ChartContainer').html(response);
        });
    });
</script>