Subversion Repositories SmartDukaan

Rev

Rev 36080 | 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>
        .modal-xl {
            max-width: 70% !important; /* or 90%, adjust as needed */
            width: 100%;
        }

        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}/dashboard" 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>


        <div class="btn-group message-filter" style="margin:14px;">
            <button data-messagetype="notification" type="button" class="btn btn-default notifi"
                    aria-label="Notifications">
                <span class="notify1 Notificat">#springMessage("dashboard.notification")</span></button>
            <button data-messagetype="announcement" type="button" class="btn btn-default price"
                    aria-label="Announcements">
                <span class="notify Price">#springMessage("dashboard.pricedrop")</span></button>
            <button data-messagetype="scheme" type="button" class="btn btn-default schem"
                    aria-label="SmartDukaan Schemes">
                <span class="notify Scheme">#springMessage("dashboard.scheme")</span>
            </button>

            <button data-messagetype="marketing" type="button" class="btn btn-default mark"
                    aria-label="SmartDukaan Schemes">
                <span class="notify market">#springMessage("dashboard.marketing")</span>
            </button>

            <button type="button" class="btn btn-default mark">
                <span class="today-offer">Today Offer</span>
            </button>
        </div>


        <div class="top-nav notification-row">
            <!-- notification dropdown start-->
            <ul class="nav pull-right top-menu">
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <img style="height:38px" src="/resources/images/icons/care1.jpg"/>
                        <span class="username" style="font-size:15px">CARE</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu extended logout">
                        <div class="log-arrow-up"></div>
                        <li class="eborder-top">
                            <a class="create-ticket" href="javascript:void(0);"><i></i>Create Ticket</a>
                            <a class="my-ticket" href="javascript:void(0);"><i class=""></i>View Tickets</a>
                        </li>
                        <li></li>
                    </ul>
                </li>

                <!--<li class="dropdown" style="margin-top:3px;">
                    <a href="javascript:void(0);" id="links_bar" style="color:#D3181F" class="btn btn-link"
                       data-toggle="popover">
                        <i title="third-party dashboards" class="glyphicon glyphicon-th fa-2x"></i>
                    </a>
                </li>-->

                <li id="wallet_bar" class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle wallet_icon_header" href="javascript:void(0);">
                        <i title="wallet summary" class="fas fa-wallet fa-2x" aria-hidden="true"></i>
                    </a>
                </li>

                <li id="cart_bar" class="dropdown">
                    <a class="cart_icon_header" href="javascript:void(0);">
                        <i class="fas fa-shopping-cart fa-2x" aria-hidden="true"></i>
                        <span class="badge bg-important"></span>
                    </a>
                </li>


                <!-- alert notification start-->
                <!--<li id="alert_notificatoin_bar" class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                        <i class="icon-bell-l"></i>
                        <span class="badge bg-important">0</span>
                    </a>
                    <ul class="dropdown-menu extended notification">
                        <div class="notify-arrow notify-arrow-blue"></div>
                        <li>
                            <p class="blue">You have no new notifications</p>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-primary"><i class="icon_profile"></i></span>
                                Friend Request
                                <span class="small italic pull-right">5 mins</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-warning"><i class="icon_pin"></i></span>
                                John location.
                                <span class="small italic pull-right">50 mins</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-danger"><i class="icon_book_alt"></i></span>
                                Project 3 Completed.
                                <span class="small italic pull-right">1 hr</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-success"><i class="icon_like"></i></span>
                                Mick appreciated your work.
                                <span class="small italic pull-right"> Today</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">See all notifications</a>
                        </li>
                    </ul>
                </li>
                -->
                <!-- alert notification end -->
                <li class="dropdown">
                    <ul class="dropdown-menu extended">
                        <div class="log-arrow-up"></div>
                        <li class="eborder-top">
                            <a href="javascript:void(0);" class="create-ticket">Create Ticket</a>
                        </li>
                    </ul>
                </li>
                <!-- user login dropdown start-->
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="profile-ava">
                                <img class="avatar-custom" id="photo" alt="" src="">
                            </span>
                        <span class="username" id="fofo_name"></span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu extended logout">
                        <div class="log-arrow-up"></div>
                        <li class="eborder-top">
                            <a class="user-profile" href="javascript:void(0);"><i class="icon_profile"></i> My
                                Profile</a>
                            <a href="${rc.contextPath}/mobileapp" class="btn btn-default" target="_blank">SD Mobile
                                App</a>
                            <a class="user-manual" target="_blank"
                               href="http://images.smartdukaan.com/uploads/campaigns/SD_Guide_Book_English.pdf">Sd
                                Policies(En)</a>
                            <a class="user-manual" target="_blank"
                               href="http://images.smartdukaan.com/uploads/campaigns/SD_Guide_Book_Hindi.pdf">Sd
                                Policies(Hi)</a>
                            <a class="user-manual" target="_blank" href="https://apis.smartdukaan.com/download/app-release.apk">
                                <i title="Download Android App" class="glyphicon glyphicon-phone fa-2x"></i> Download App
                            </a>
                            #if($isAdmin)
                                <a class="add-auth-user" href="javascript:void(0);"><i class=""></i>Add User</a>
                                <a class="change-auth-user-password" href="javascript:void(0);"><i class=""></i>Change
                                    Password</a>
                            #end
                        </li>
                        <li>
                            <a href="${rc.contextPath}/logout"><i class="icon_key_alt" id="logout"></i> Log Out</a>
                        </li>
                    </ul>
                </li>
                <!-- user login dropdown end -->
            </ul>
            <!-- notificatoin dropdown end-->
        </div>
    </header>
    <!--header end-->

    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li class="active">
                    <a class="" href="${rc.contextPath}/dashboard">
                        <i class="icon_house_alt"></i>
                        <span>#springMessage("dashboard.dashboard")</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;" class="punch-in-outs">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.punchinout") </span>
                    </a>
                </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="schemes" href="javascript:void(0);">#springMessage(
                            "submenu.marginsmodelwisemargin")</a></li>
                        <li><a class="partner-price-circular" href="javascript:void(0);">#springMessage(
                            "submenu.marginsnlcpriccecircular")</a></li>

                    </ul>
                </li>


                <li class="sub-menu">
                    <a href="javascript:;" class="partner-service">
                        <i class="icon_document_alt"></i>
                        <span>Fin Services</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.returns")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="approved-returns" href="javascript:void(0);">#springMessage(
                            "submenu.returnsapprovedreturns")</a></li>
                        <li><a class="view-debit-note" href="javascript:void(0);">#springMessage(
                            "submenu.returnsviewdebitnotes")</a></li>
                        <li><a class="pending-returns" href="javascript:void(0);">#springMessage(
                            "submenu.returnspendingreturns")</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.prebooking")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="create-prebooking-order" href="javascript:void(0);">#springMessage(
                            "submenu.prebookingcreateorder")</a></li>
                        <li><a class="prebooking-orders" href="javascript:void(0);">#springMessage(
                            "submenu.prebookingorders")</a></li>
                        <li><a class="hid-allocation" href="javascript:void(0);">Hid Allocation</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.recharge")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="create-mobile-recharge" href="javascript:void(0);">#springMessage(
                            "submenu.rechargemobilerecharge")</a></li>
                        <li><a class="create-dth-recharge" href="javascript:void(0);">#springMessage(
                            "submenu.rechargedthrecharge")</a></li>
                        <li><a class="mobile-recharges" href="javascript:void(0);">#springMessage(
                            "submenu.rechargemobrechargehistory")</a></li>
                        <li><a class="dth-recharges" href="javascript:void(0);">#springMessage(
                            "submenu.rechargedthrechargehistory")</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;" class="create_indent">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.monthlyplanning")</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_document_alt"></i>
                        <span>#springMessage("menu.grn")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="new_grn" href="javascript:void(0);">#springMessage("submenu.grnnew")</a></li>
                        <li><a class="grn_history" href="javascript:void(0);">#springMessage("submenu.grnhistory")</a>
                        </li>
                        <li><a class="pending_grn" href="javascript:void(0);">#springMessage("submenu.grnpending")</a>
                        </li>
                        <li><a class="invoice-summary" href="javascript:void(0);">#springMessage(
                            "submenu.grninvoices")</a></li>

                    </ul>
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_genius"></i>
                        <span>#springMessage("submenu.mystrocksmystocks")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="catalog" href="javascript:void(0);">#springMessage("menu.mystrocks")</a></li>
                        <li><a class="product-compare-info" href="javascript:void(0);">#springMessage(
                            "submenu.mystrockscompareproduct")</a></li>
                    </ul>
                </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="partner-collection-summary" href="javascript:void(0);">#springMessage(
                            "submenu.reportsdailycollections")</a></li>
                        <li><a class="franchisee_sales" href="javascript:void(0);">#springMessage(
                            "submenu.reportsmysales")</a></li>
                        <li><a class="wallet_statement" href="javascript:void(0);">#springMessage(
                            "submenu.reportswalletstatement")</a></li>
                        <li><a class="loan-statement" href="javascript:void(0);">Credit Statement</a></li>
                        <li><a class="pending-indent" href="javascript:void(0);">#springMessage(
                            "submenu.reportsorderstatus")</a></li>
                        <li><a class="scheme-payout-report" href="javascript:void(0);">#springMessage(
                            "submenu.reportsschemespayout")</a></li>
                        <li><a class="offer-payout-dump-report" href="javascript:void(0);">Offer Payout</a></li>
                        <li><a class="smartdukaan-billing-statement" href="javascript:void(0);">#springMessage(
                            "submenu.reportsbillingstatement")</a>
                        </li>

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

                        <li><a class="credit-note" href="javascript:void(0);">Credit Note</a></li>
                        <li><a class="item_aging" href="javascript:void(0);">#springMessage("submenu.reportsageing")</a>
                        </li>
                        <!-- remove Report option  of dashBoard side bar-->
                        <!--
                       <li><a class="download_reports" href="javascript:void(0);">#springMessage(
                            "submenu.reportsreports")</a></li>
                       -->

                    </ul>
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_table"></i>
                        <span>#springMessage("menu.itemleder")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="item-ledger-report-download-page" href="javascript:void(0);">#springMessage(
                            "submenu.itemlederdownload")</a></li>
                    </ul>
                </li>


                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_table"></i>
                        <span>#springMessage("menu.online")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="pending_fofo_order" href="javascript:void(0);">#springMessage(
                            "submenu.onlinependingorder")</a></li>
                        <li><a class="billed_order_item" href="javascript:void(0);">#springMessage(
                            "submenu.onlinebilledorder")</a></li>
                        ##                        <li><a class="unsettled_order_item" href="javascript:void(0);">#springMessage("submenu.onlineraiseclaim")</a></li>

                        <li><a class="claim_raised_order_item" href="javascript:void(0);">#springMessage(
                            "submenu.onlinependingclaim") </a></li>

                        <li><a class="settled_order_item" href="javascript:void(0);">#springMessage(
                            "submenu.onlinesettledorder")</a></li>
                        <li><a class="partner_print_resources" href="javascript:void(0);">Print Resources</a></li>

                    </ul>
                </li>

                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon_table"></i>
                        <span>#springMessage("menu.sale")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub">

                        <li><a class="sale-history" href="javascript:void(0);">#springMessage("submenu.salehistory")</a>
                        </li>
                        <!--<li><a class="target-slide" href="javascript:void(0);">Outlet Categories</a></li>-->
                        <li><a class="insurance-policy-details" href="javascript:void(0);">#springMessage(
                            "submenu.saleinsurancehistory")</a></li>
                    </ul>
                </li>
                <li class="sub-menu" style="margin-bottom:20px">
                    <a href="javascript:;" class="">
                        <i class="icon_documents_alt"></i>
                        <span>#springMessage("menu.support")</span>
                        <span class="menu-arrow arrow_carrot-right"></span>
                    </a>
                    <ul class="sub" style="margin-bottom:20px">
                        <li><a class="contact-us" href="#">#springMessage("submenu.supportcontactus")</a></li>
                        <li><a href="https://www.youtube.com/channel/UCr4f-OiscZeKk_liLNQRMtQ"
                               target="blank">#springMessage("submenu.supporttrainingvideo")</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">
                        <div class="row">
                            <div class="col-md-2">
                                <i class="fa fa-laptop"></i> Dashboard
                            </div>
                            <div class="col-md-2"></div>
                            #*#set($fofoId = $targetData.getFofoId())
                            #if(($regionId == 19 || $regionId == 8) && $fofoId && $fofoId.toString() != "")
                                <div class="col-md-4 info-box light-salmon-bg text-center"
                                     style="padding:5px; background-color:#0059a3">
                                    <table width="100%" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td rowspan="3">
                                                <img src="https://images.smartdukaan.com/uploads/campaigns/oppo.jpg"
                                                     alt="Oppo Image" width="80">
                                            </td>
                                            <td colspan="4">
                                                #if($regionId == 19)
                                                    <h4 style="margin: 2px">Happy Diwali! Oppo Score Gift Scheme</h4>
                                                #else
                                                    <h4 style="margin: 2px">Oppo Diwali Additional Reward Scheme</h4>
                                                #end
                                            </td>
                                        </tr>
                                        #if($regionId == 19)
                                            <tr>
                                                <td><h5 style="margin: 2px"><strong>Target 1:</strong>
                                                    <br> ${targetData.getLedTv32Inch()}</h5></td>
                                                <td><h5 style="margin: 2px"><strong>Target 2:</strong>
                                                    <br> ${targetData.getSilverBrick100g()}</h5></td>
                                                <td><h5 style="margin: 2px"><strong>Target 3:</strong>
                                                    <br> ${targetData.getDomesticGoaTrip()}</h5></td>
                                                <td><h5 style="margin: 2px"><strong>Target 4:</strong>
                                                    <br> ${targetData.getInternationalThailandTrip()}</h5></td>
                                            </tr>

                                            <tr>
                                                <td colspan="4"><h5 style="margin: 2px">
                                                    <strong>Achieved:</strong>${rewardsMap.get("quantity")}</h5></td>
                                            </tr>
                                        #else
                                            <tr>
                                                <td colspan="2"><h5 style="margin: 2px">
                                                    <strong>Quantity:</strong>${rewardsMap.get("quantity")}</h5></td>
                                                <td colspan="4"><h5 style="margin: 2px">
                                                    <strong>Points:</strong>${rewardsMap.get("quantity")}</h5></td>
                                            </tr>
                                        #end
                                    </table>
                                </div>
                            #end*#
                        </div>
                        <!--  <span style="position:absolute;top:-55px;right:45%"><a class="digify-retailer-login-test"
                                                                               href="${rc.contextPath}/digify/register"
                                                                               target="_blank">  <img
                                src="resources/images/Buyback-Mobile.png"> </a> </span>-->
                        ##                        <span style="position:absolute;top:-55px;right:1%">
                        ##                            <table>
                        ##                                <tr>
                        ##                                    <td>
                        ##                                        <b style="font-size: 11px;text-transform: capitalize;color: black;">Selling with personal finance ?<br>
                        ##                                        Secure your products with us</b>
                        ##                                    </td>
                        ##                                    <td>
                        ##                                        <a class="digify-retailer-login-test"
                        ##                                           href="javascript:void(0);" onclick="makeAjaxRequest()">  <img
                        ##                                                src="https://images.smartdukaan.com/uploads/campaigns/image2024-02-08/smart-secure-image1707401228511.jpeg"
                        ##                                                style="width: 90px;"> </a>
                        ##                                    </td>
                        ##                                </tr>
                        ##                            </table>
                        ##                        </span>

                    </h3>

                    <ol class="breadcrumb">
                        <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                        <li><i class="fa fa-laptop"></i>Dashboard</li>
                        <li>
                            <button class="btn btn-sm btn-success partner-tasks-btn"
                                    data-target="#partnerTasks">
                                Dashboard Analysis
                            </button>
                        </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">
                                                $staticScheme.getSchemePeriod()
                                            </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 mb-6">
                        <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="offer-container" style="margin-bottom: 12px;">
                        <div class="row">
                            <div class="col-lg-12">
                                <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>Select Brand</option>
                                            <option value="" selected>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>
                        <div class="row">
                            <div class="col-lg-12">
                                <div id="offer-container">
                                    #parse("published-offers.vm")
                                </div>
                            </div>
                        </div>
                        <div class="offer-margin-container">
                            <div class="modal  text-center" id="offerDescription">
                                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                    <div class="modal-content">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="info-box white-bg col-lg-12" id="performanceContainer">
                            #parse("performance.vm")
                        </div>
                    </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("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 role="presentation" class="active bar_chart"><a
                                    href="javascript:void(0)">Sale</a>
                            </li>
                            <li class="lms_line_chart"><a href="javascript:void(0)">#springMessage(
                                "dashboard.monthlysale")</a></li>
                            <li class="purchase_line_chart"><a href="javascript:void(0)">#springMessage(
                                "dashboard.monthlypurchase")</a></li>
                            <li class="priceDrop_chart"><a href="javascript:void(0)">#springMessage(
                                "dashboard.pricedrop")</a></li>
                            <li class="pending_activation_chart"><a href="javascript:void(0)">Pending
                                Activation</a>
                            </li>
                            <li class="pending_upgrade_offer"><a href="javascript:void(0)"> #springMessage(
                                "dashboard.upgradeoffer")</a></li>
                        </ul>
                        <div style="float:left;margin-top: 2% ; font-size: 20px" 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="viewSaleBarChart" 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="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>
                </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="clearfix"></div>
    <div id="partnerTasks" class="modal rounded" role="dialog">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" id="chartData">

            </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;
            });

            $(".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", ".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");


                    sleep(500);
                    doGetAjaxRequestHandler(context + "/getMonthlyPriceDrop", function (response) {

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


        $(document).on("click", ".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");

                    sleep(500);
                    doGetAjaxRequestHandler(context + "/getMonthlyActivation", function (response) {

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

        $(document).on("click", ".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");

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

        $(document).on("click", ".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");

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

        $(document).on("click", ".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");


                    doGetAjaxRequestHandler(context + "/getBarChart", 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', "#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 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>
    .nav-tabs > li {
        font-size: 12px;
    }

    .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 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 Chart(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', '#viewSaleBarChart', function () {
        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);

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

    $(document).on('click', '.nav-tabs li a', function (ev) {
        const $li = $(this).parent();
            $li.siblings().removeClass('active');
            $li.addClass('active');
    });
</script>