Subversion Repositories SmartDukaan

Rev

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

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

        var object = {
            timePicker: true,
            locale: {
                format: 'DD/MM/YYYY hh A'
            }
        };

        $('input[name="scheduleTime"]').daterangepicker(
                $.extend(getSingleDatePicker(), object));

        $('input[name="editScheduleTime"]').daterangepicker(
                $.extend(getSingleDatePicker(), object));
    });

    $(".lead-request").click(function () {
        $("#newEntryLeadModal").modal({
            backdrop: false
        });

    });

    $(".lead-edit-request").click(function () {
        $("#editLeadData").modal({
            backdrop: false
        });

    });

    $('#statusFilter').multiselect({
        includeSelectAllOption: true,
        multiple: true,
        maxHeight: 200,
        buttonWidth: '180px',
        numberDisplayed: 1,
        nonSelectedText: 'Status',
        nSelectedText: ' - Status Selected',
        allSelectedText: 'All Status Selected',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true
    });

    $('#colorFilter').multiselect({
        includeSelectAllOption: true,
        multiple: true,
        maxHeight: 200,
        buttonWidth: '180px',
        numberDisplayed: 1,
        nonSelectedText: 'Color Status',
        nSelectedText: ' - Color Selected',
        allSelectedText: 'All Status Selected',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true
    });
</script>


<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <i class="icon_document_alt"></i>LEAD DASHBOARD
            </h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a
                        href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Lead</li>
                <li>
                    <button class="btn btn-primary newLead" data-toggle="modal"
                            data-target="#newEntryLeadModal" type="button">New
                    </button>
                </li>
            </ol>
        </div>
    </div>

    <table style="Width: 100%">
        <tr>
            <td align="left" style="Width: 20%">
                <div class="row">
                    <div class="col-lg-2 form-group" style="width: 12%;">
                        <select id="statusFilter" name="statusFilter" placeholder="Status"
                                class="form-control input-sm">
                            <option value="" disabled selected>Status</option> #foreach($ls
                        in $leadStatus) #if($ls == $selectedLeadStatus)
                            <option value="$ls" selected>$ls</option> #else
                            <option value="$ls">$ls</option> #end #end
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <button class="btn btn-primary show-lead" type="button"
                        >Submit
                        </button>
                    </div>

                    <div class="col-lg-4">

                        #if($startDate)
                            <input type="date" id="startDate" placeholder="Start Date"
                                   value="$startDate" name="">
                        #else
                            <input type="date" id="startDate" placeholder="Start Date" name="">
                        #end

                        #if($endDate)
                            <input type="date" id="endDate" placeholder="End Date"
                                   value="$endDate" name="">
                        #else
                            <input type="date" id="endDate" placeholder="End Date" name="">
                        #end

                        <button type="button" class="btn btn-default submitDateWiseLead">
                            submit
                        </button>
                        <button type="button" class="btn btn-default downloadDateWiseLead">
                            Download
                        </button>

                    </div>

                    #if($showBulkUploader)
                        <div class="col-lg-3 text-right">
                            <button type="button" class="btn btn-default reassign">
                                Bulk Reassign Leads
                            </button>
                        </div>
                    #end
                    <input type="file" id="bulkReassignFile"
                           accept=".csv"
                           style="display:none;">


                </div>
            </td>
        </tr>

        <tr>
            <td align="left" style="Width: 20%">
                <div class="row">
                    <div class="col-lg-2 form-group" style="width: 12%;">

                        <select id="colorFilter" name="colorFilter" placeholder="Status"
                                class="form-control input-sm">
                            <option value="" disabled selected>Status</option>

                            #if($colors.contains("All") && $colors.contains("yellow") && $colors.contains("green"))

                                <option value="All" selected>All</option>

                            #else
                                <option value="All">All</option>
                            #end

                            #if($colors.contains("yellow")&& !$colors.contains("green"))

                                <option value="yellow" selected>yellow</option>

                            #else
                                <option value="yellow">yellow</option>

                            #end

                            #if($colors.contains("green") && !$colors.contains("yellow"))
                                <option value="green" selected>green</option>
                            #else
                                <option value="green">green</option>
                            #end


                        </select>
                    </div>

                    <div class="col-lg-1">
                        <button class="btn btn-primary show-colowise-lead" type="button"
                        >Submit
                        </button>
                    </div>

                    <div class="row col-lg-5" style="width:518px;height:272px; margin-left: 650px;">
                        <canvas id="chart-leadstatus" style="width:auto"></canvas>

                        <canvas id="chart-lead-search" class="" style="width:auto"></canvas>

                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td align="left">
                <div class="row">
                    <div class="col-lg-10">
                        <table class="table table-border table-condensed table-bordered" id="lead-weakwise-table"
                               style="width:100%">

                            <thead class="row htable" style="background:#F5F5F5;">

                            <tr style="color:black;">
                                <th></th>
                                <th>Week 4</th>
                                <th>Week 3</th>
                                <th>Week 2</th>
                                <th colspan="7">Week</th>
                                <th></th>
                            </tr>

                            <tr style="color:black;">
                                <th>Created By</th>
                                <th>$weekDates.get(0) - $weekDates.get(1)</th>
                                <th>$weekDates.get(2) - $weekDates.get(3)</th>
                                <th>$weekDates.get(4) - $weekDates.get(5)</th>

                                #foreach($lwDay in $lwDays )
                                    <th>$lwDay.getMonth().format($dateMonthChYear)</th>
                                #end

                                <th>Result</th>
                            </tr>
                            </thead>
                            <tbody>
                                #foreach($leadCreator in $leadCreators)
                                <tr>

                                    <td>
                                        $leadCreator
                                    </td>
                                    #if($leadLasts.get($leadCreator))
                                        <td>
                                            $leadLasts.get($leadCreator)
                                        </td>
                                    #else
                                        <td style="background:rgba(255,153,153,0.55);"> 0
                                        </td>
                                    #end
                                    #if($leadThirds.get($leadCreator))
                                        <td>
                                            $leadThirds.get($leadCreator)
                                        </td>
                                    #else
                                        <td style="background:#FF99998B;"> 0
                                        </td>
                                    #end
                                    #if( $leadSeconds.get($leadCreator))
                                        <td>
                                            $leadSeconds.get($leadCreator)
                                        </td>
                                    #else
                                        <td style="background:#FF99998B;">0</td>
                                    #end


                                    #foreach($lwDay in $lwDays )

                                        #if($leadFirsts.get($leadCreator).get($lwDay.getMonth()))
                                            <td>
                                                $leadFirsts.get($leadCreator).get($lwDay.getMonth())

                                            </td>
                                        #else
                                            <td style="background:#FF99998B;">0</td>
                                        #end

                                    #end

                                    #if($leadFirsts.get($leadCreator).get($lastDate))

                                        #if($leadFirsts.get($leadCreator).get($lastDate) >= 8)
                                            <td style="color:green;">Appreciate</td>

                                        #else

                                            <td>Meet more prospects</td>
                                        #end
                                    #else
                                        <td style="color:red;">
                                            No leads created yesterday
                                        </td>
                                    #end

                                </tr>

                                #end
                            </tbody>

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


                </div>
            </td>
        </tr>
    </table>


    <div id="lead-request-table">
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-border table-condensed table-bordered"
                       id="lead-table">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Source</th>
                        <th>Partner Name</th>
                        <th>Outlet Name</th>
                        <th>Potential</th>
                        <th>Mobile</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Created By</th>
                        <th>Status</th>
                        <th>Created On</th>
                        <th>Updated On</th>
                        <th>ScheduleTimestamp</th>
                        <th>Closure Timestamp</th>
                        <th>Assign To</th>
                        <th>view</th>
                        <th>Action</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                        #if(!$leads.isEmpty())
                            #foreach( $lead in $leads )

                                #if($lead.getColor() == "Green")
                                <tr class="open-lead" bgcolor="#98FB98" data="$lead.getId()">

                                #else
                                <tr class="open-lead" bgcolor="$lead.getColor()"
                                    data="$lead.getId()">

                                #end
                                #parse("edit-lead.vm")

                            </tr>

                            #end

                        #else
                        <tr>
                            <td colspan="12" style="text-align: center;">NO MATCHING
                                DATA FOUND FOR CRITERIA
                            </td>
                        </tr>
                        #end
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <div id="fetchLeadActivityData" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content"></div>
        </div>
    </div>


    <div id="editLeadData" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Lead</h4>
                </div>
                <div class="modal-body" style="height:500px; overflow:auto">
                    <div id="lead-edit-request">


                        <div class="row" id="lead-detail-view">
                            <div class="col-lg-3">
                                <label style="font-weight:bold">Outlet Name</label>

                                <div class="input-group">
                                    <input placeholder="Outlet Name" id="outletName" name="outletName"
                                           type="text" value="" class="form-control input-sm">

                                </div>
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Front</label>
                                <input type="hidden" class="frontp" value="">
                                <input type="file" class="frontp" placeholder="Front" id="frontp" name="frontp"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal With Market</label>

                                <input type="hidden" class="internalMarket" value="">
                                <input type="file" class="internalMarket" placeholder="Internal With Market"
                                       id="internalMarket" name="internalMarket"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Long Shot</label>

                                <input type="hidden" class="leftShot" value="">
                                <input type="file" class="leftShot" placeholder="Internal Long Shot" id="leftShot"
                                       name="leftShot"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Left Wall</label>
                                <input type="hidden" class="leftWall" value="">
                                <input type="file" class="leftWall" placeholder="Internal Left Wall" id="leftWall"
                                       name="leftWall"
                                       value="">
                            </div>


                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Right Wall</label>

                                <input type="hidden" class="rightWall" value="">
                                <input type="file" class="rightWall" placeholder="Internal Right Wall" id="rightWall"
                                       name="rightWall"
                                       value="">
                            </div>


                            <div class="col-lg-3 form-group">
                                <input id="counterSize" placeholder="Counter Size"
                                       name="counterSize" type="text" value=""
                                       class="form-control input-sm">
                            </div>
                            <div class="col-lg-5 form-group">

                                <table class="table table-border table-condensed table-bordered" id="editbrandtable">
                                    <tr>
                                        <th>Brand</th>
                                        <th>Value</th>
                                    </tr>

                                    #foreach($brand in $brandsDisplays)
                                        <tr>
                                            <td>$brand.getName()</td>
                                            <td><input type="number" class="$brand.getName()" placeholder="Value"
                                                       name="$brand.getName()"
                                                       value="0"></td>
                                        </tr>


                                    #end
                                </table>
                            </div>
                            <div class="col-lg-2 form-group">

                                <button type="button" class="btn btn-default lead-detail-entry">Submit</button>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="input-group">
                                    <select class="form-control input-sm" id="assignTo"
                                            name="assignTo" placeholder="Assign">
                                        <option value="" disabled selected>Assign To</option>
                                        #foreach($authUser in $authUsers)
                                            <option value="$authUser.getId()">$authUser.getFirstName() $authUser.getLastName()</option>
                                        #end
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 form-group">
                                <input placeholder="Remark" id="remark" name="remark"
                                       type="text" value="" class="form-control input-sm">
                            </div>

                            <div class="col-lg-3 form-group">
                                <select id="reason" name="reason" placeholder="Reason"
                                        class="form-control input-sm">
                                    <option value="" disabled selected>Reason</option>
                                    <option value="No budget">No budget</option>
                                    <option value="No authority to take decision">No
                                        authority to take decision
                                    </option>
                                    <option value="No need for new business">No need for
                                        new business
                                    </option>
                                    <option value="Not ready in near future">Not ready in
                                        near future
                                    </option>
                                    <option value="No store availability">No store
                                        availability
                                    </option>
                                    <option value="Duplicate Number"> Duplicate Number</option>
                                    <option value="reassigning Lead">Reassigning Lead</option>
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <select id="editStatus" name="editStatus" placeholder="Status"
                                        class="form-control input-sm" onchange="editStatusAction()">
                                    <option value="" disabled selected>Status</option>
                                    <option value="followUp">Follow Up</option>
                                    <option value="notInterested">Not Interested</option>
                                    <option value="finalized">Finalized</option>
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <input id="editScheduleTime" placeholder="scheduleTime"
                                       name="editScheduleTime" type="text" value=""
                                       class="form-control input-sm">
                            </div>

                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="communicationType" name="communicationType"
                                        placeholder="Communication Type">
                                    <option value="" disabled selected>Communication Type</option>
                                    #foreach($communicationType in $communicationTypes)
                                        <option value="$communicationType">$communicationType</option> #end
                                </select>
                            </div>


                            <div class="col-lg-2 form-group">
                                <select class="form-control input-sm" id="conversionprobability"
                                        name="conversionprobability" placeholder="Conversion Probability">
                                    <option value="false" disabled selected>Conversion Probability</option>
                                    <option value="false">Low</option>
                                    <option value="true">High</option>

                                </select>
                            </div>
                            <div class="col-lg-2 form-group">
                                <input id="editCity" name="editCity" placeholder="City"
                                       type="text" value="" class="form-control input-sm">
                            </div>

                            <div class="col-lg-2 form-group">
                                <select class="form-control input-sm" id="editState" name="editState"
                                        placeholder="State">
                                    <option value="" disabled selected>State</option>
                                    #foreach($stateName in $stateNames)
                                        <option value="$stateName">$stateName</option>
                                    #end
                                </select>
                            </div>

                            <div class="col-lg-2 form-group">
                                <select class="form-control input-sm" id="editSource" name="editSource"
                                        placeholder="Source">
                                    <option value="" disabled selected>Source</option>
                                    <option value="SELF">SELF</option>
                                    <option value="NEWSPAPER">NEWSPAPER</option>
                                    <option value="INTERNET">INTERNET</option>
                                    <option value="PARTNER">PARTNER</option>
                                    <option value="WEBINAR">WEBINAR</option>
                                </select>
                            </div>


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

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal"
                            class="btn btn-default cancel-lead-request">Cancel
                    </button>
                    <button type="button" class="btn btn-default lead-edit-request">Submit</button>

                </div>

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


    <div id="newEntryLeadModal" class="modal">
        <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">Create Lead</h4>
                </div>
                <div class="modal-body" style="height:500px; overflow:auto">
                    <div id="lead-request">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="input-group">
                                    <input placeholder="First Name" name="firstName" id="firstName"
                                           type="text" class="form-control input-sm">
                                </div>
                            </div>

                            <div class="col-lg-3 form-group">
                                <input placeholder="Last Name" id="lastName" name="lastName"
                                       type="text" value="" class="form-control input-sm">
                            </div>

                            <div class="col-lg-3 form-group">
                                <input placeholder="mobile" id="mobile" name="mobile"
                                       type="number" value="" class="form-control input-sm">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-3 form-group">
                                <input id="address" name="address" placeholder="address"
                                       id="address" type="text" value="" class="form-control input-sm">
                            </div>
                            <div class="col-lg-3 form-group">
                                <input id="city" name="city" placeholder="city" type="text"
                                       value="" class="form-control input-sm">
                            </div>
                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="state" name="state"
                                        placeholder="State">
                                    <option value="" disabled selected>State</option>
                                    #foreach($stateName in $stateNames)
                                        <option value="$stateName">$stateName</option> #end
                                </select>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-lg-3 form-group">
                                <select id="status" name="status" placeholder="Status"
                                        class="form-control input-sm" onchange="statusAction()">
                                    <option value="" disabled selected>Status</option>
                                    <option value="followUp">Follow Up</option>
                                    <option value="notInterested">Not Interested</option>
                                    <option value="finalized">Finalized</option>
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <input id="scheduleTime" placeholder="scheduleTime"
                                       name="scheduleTime" type="text" value=""
                                       class="form-control input-sm">
                            </div>

                            <div class="col-lg-3 form-group">
                                <input id="createRemark" name="createRemark"
                                       placeholder="Remark" type="text" value=""
                                       class="form-control input-sm">
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="communicationTye" name="communicationType"
                                        placeholder="Communication Type">
                                    <option value="" disabled selected>Communication Type</option>
                                    #foreach($communicationType in $communicationTypes)
                                        <option value="$communicationType">$communicationType</option> #end
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="createAssignTo"
                                        name="createAssignTo" placeholder="Assign">
                                    <option value="" disabled selected>Assign To</option>
                                    #foreach($authUser in $authUsers)
                                        <option value="$authUser.getId()">$authUser.getFirstName() $authUser.getLastName()</option>
                                    #end
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="leadSource"
                                        name="leadSource" placeholder="Source">
                                    <option value="" disabled selected>Source</option>
                                    <option value="SELF">SELF</option>
                                    <option value="NEWSPAPER">NEWSPAPER</option>
                                    <option value="INTERNET">INTERNET</option>
                                    <option value="PARTNER">PARTNER</option>
                                    <option value="WEBINAR">WEBINAR</option>
                                </select>
                            </div>

                            <div class="col-lg-3 form-group">
                                <select class="form-control input-sm" id="conversionprobabilit"
                                        name="conversionprobability" placeholder="Conversion Probability">
                                    <option value="" disabled selected>Conversion Probability</option>
                                    <option value="false">Low</option>
                                    <option value="true">High</option>

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


                        <div class="row">
                            <div class="col-lg-3">
                                <label style="font-weight:bold">Outlet Name</label>

                                <div class="input-group">
                                    <input placeholder="Outlet Name" id="outletName" name="leadoutletName"
                                           type="text" value="" class="form-control input-sm">

                                </div>
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Front</label>
                                <input type="hidden" class="frontph" value="">
                                <input type="file" class="frontp" placeholder="Front" id="frontp" name="frontp"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal With Market</label>

                                <input type="hidden" class="internalMarketh" value="">
                                <input type="file" class="internalMarket" placeholder="Internal With Market"
                                       id="internalMarket" name="internalMarket"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Long Shot</label>

                                <input type="hidden" class="leftShoth" value="">
                                <input type="file" class="leftShot" placeholder="Internal Long Shot" id="leftShot"
                                       name="leftShot"
                                       value="">
                            </div>

                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Left Wall</label>
                                <input type="hidden" class="leftWallh" value="">
                                <input type="file" class="leftWall" placeholder="Internal Left Wall" id="leftWall"
                                       name="leftWall"
                                       value="">
                            </div>


                            <div class="col-lg-4 form-group">
                                <label style="font-weight:bold">Internal Right Wall</label>

                                <input type="hidden" class="rightWallh" value="">
                                <input type="file" class="rightWall" placeholder="Internal Right Wall" id="rightWall"
                                       name="rightWall"
                                       value="">
                            </div>


                            <div class="col-lg-3 form-group">
                                <input id="counterSize" placeholder="Counter Size"
                                       name="leadcounterSize" type="text" value=""
                                       class="form-control input-sm">
                            </div>

                            <div class="col-lg-5 form-group">

                                <table class="table table-border table-condensed table-bordered" id="brandtable">
                                    <tr>
                                        <th>Brand</th>
                                        <th>Value</th>
                                    </tr>



                                    #foreach($brand in $brandsDisplays)
                                        <tr>
                                            <td>$brand.getName()</td>
                                            <td><input type="number" class="$brand.getName()" placeholder="Value"
                                                       name="$brand.getName()"
                                                       value="0"></td>
                                        </tr>
                                    #end
                                </table>

                            </div>


                            <form>
                                <div class="row" style="margin-bottom: 12px; padding:12px">
                                    <form class="form-horizontal">
                                        <div class="col-lg-6">
                                            <labelfor
                                            ="excelfile">Ivory Template:</label>
                                            <a class="btn btn-primary" id="uploadIvoryLead"> Download Template </a>
                                        </div>
                                    </form>

                                    <div class="col-lg-6 form-group">
                                        <div class="input-group">
                                            <input type="file" class="form-control input-sm fileLeadGenerate"
                                                   name="fileLeadGenerate" value="Upload CSv">
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-primary submitLeadGenerate">
                                                            Uplaod
                                                        </button>
                                                  </span>
                                        </div>
                                    </div>
                                </div>

                            </form>

                        </div>
                    </div>


                </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal"
                            class="btn btn-default cancel-lead-request">Cancel
                    </button>
                    <button type="button" class="btn btn-default lead-request">Submit</button>

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


<script type="text/javascript">
    var editor;
    var searchCount = 0;
    var ab;
    $(document)
            .ready(
                    function () {
                        let table = $('#lead-table').DataTable({
                            orderCellsTop: true,
                            "lengthMenu": [100, 250, 1000, -1],

                            fixedHeader: true,
                            "bPaginate": true,
                            "bLengthChange": true,
                            "bFilter": true,
                            "bInfo": false,
                            "bAutoWidth": false,

                            "columnDefs": [{
                                type: 'date-euro',
                                targets: 12
                            }, {
                                type: 'date-euro',
                                targets: 11
                            }, {
                                type: 'date-euro',
                                targets: 10
                            }, {
                                type: 'date-euro',
                                targets: 9
                            }

                            ]
                        });

                        $('#lead-table thead tr').clone(true).appendTo(
                                '#lead-table thead');
                        $('#lead-table thead tr:eq(1) th')
                                .each(
                                        function (i) {
                                            var title = $(this).text();
                                            $(this).html(
                                                    '<input type="text"  class="search-lead" style = "width:60%;" placeholder="Search '
                                                    + title
                                                    + '" />');

                                            $('input', this)
                                                    .on(
                                                            'keyup change',
                                                            function () {
                                                                if (table
                                                                        .column(
                                                                                i)
                                                                        .search() !== this.value) {
                                                                    table
                                                                            .column(
                                                                                    i)
                                                                            .search(
                                                                                    this.value)
                                                                            .draw();
                                                                }
                                                            });
                                        });


                        var myPieChart = null;
                        $(document).on("keyup", ".search-lead",
                                function (e) {
                                    console.log('Currently applied global search:');
                                    if (myPieChart != null) {
                                        myPieChart.destroy();
                                    }


                                    myFunction(searchCount);


                                });

                        function myFunction() {
                            if (searchCount == 0) {
                                ab = setTimeout(function () {
                                    datatableChart();
                                }, 3000);
                                searchCount++;
                            } else {
                                clearTimeout(ab);
                                ab = setTimeout(function () {
                                    datatableChart();
                                }, 3000);
                            }
                        }


                        function datatableChart() {


                            $('#chart-leadstatus').remove();

                            let count = 0;
                            let ni = 0;

                            let fwup = 0;
                            let htld = 0;
                            let pend = 0;
                            let final = 0;

                            table.rows({
                                "search": "applied"
                            }).every(function () {
                                var data = this.data();
                                var status = data[8];
                                var hotLeads = data[16];

                                console.log("status" + status);

                                if (hotLeads == "Green") {
                                    htld++;
                                }

                                if (status == "notInterested") {
                                    ni++;
                                } else if (status == "followUp") {
                                    fwup++;
                                } else if (status == "pending") {

                                    pend++;
                                } else if (status == "finalized") {

                                    final++;
                                }
                                var count = table.rows({search: 'applied'}).count();

                            });
                            var ctx = document.getElementById('chart-lead-search').getContext('2d');

                            myPieChart = new Chart1(ctx, {
                                "type": "pie",
                                "data": {
                                    "labels": [
                                        "notInterested",
                                        "followUp",
                                        "pending",
                                        "finalized",
                                        "HotLeads"
                                    ],
                                    "datasets": [
                                        {
                                            "data": [
                                                ni, fwup, pend, final, htld
                                            ],
                                            "backgroundColor": ["red", "#9ACD32", "pink", "blue", "green"],
                                            "label": "DataSet 1"
                                        }
                                    ]
                                },
                                "options": {
                                    "responsive": true,
                                    "legend": {
                                        "labels": {
                                            "fontColor": "black",
                                            "fontSize": 15
                                        },
                                        "position": "left"
                                    }
                                }
                            });

                            if (ni <= 0) {
                                myPieChart.getDatasetMeta(0).data[0].hidden = true;
                            }
                            if (fwup <= 0) {
                                myPieChart.getDatasetMeta(0).data[1].hidden = true;
                            }
                            if (pend <= 0) {
                                myPieChart.getDatasetMeta(0).data[2].hidden = true;
                            }
                            if (final <= 0) {
                                myPieChart.getDatasetMeta(0).data[3].hidden = true;
                            }

                            if (htld <= 0) {
                                myPieChart.getDatasetMeta(0).data[4].hidden = true;
                            }

                            myPieChart.update();

                        }


                    });
</script>

<script type="text/javascript">


    var config = $chartLead;

    var ctx = document.getElementById('chart-leadstatus').getContext('2d');
    var bar = new Chart1(ctx, config);
</script>