@extends('admin.layouts.app')

@section('title', 'Business Dashboard')

@section('content')

@php
if(session()->has('dashboard_tab')){
$dasboard_tab_session = session()->get("dashboard_tab");
}else {
$dasboard_tab_session = -1;
}
@endphp

<!-- TOPBAR -->
<div class="top_bar page-content" style="min-height:534px">
    <!-- LOADER -->
    <div class="loader">
        <div class="top_status_bar load">
            <div class="progress_bar bar" style="left: 0px;">
            </div>
        </div>
    </div>
    <!-- END LOADER -->
    <!-- BREADCRUMBS -->
    <div class="breadcrumbs">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="#" class="">Feeds</a></li>
        </ul>
        <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
    </div>
    <!-- END BREADCRUMBS -->
</div>
<!-- END TOPBAR -->
<!-- PAGE CONTENT -->
<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- Begin: life time stats -->
            <div class="portlet">
                <div class="portlet-title"
                    style="border-bottom: 1px solid #eee !important; margin-bottom: 6px !important;">
                    <div class="caption">
                        <h2>Business Dashboard</h2>
                    </div>
                    <div class="actions hide">
                        <div class="actions_dropdown">
                            <span>Actions</span>
                            <ul class="actions_list">
                                <li data-toggle="modal" class="">
                                    <a href="" class="" style="margin-right: 8px;">
                                        Lorem Ipsim
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tabbable-line">
                    <ul class="nav nav-tabs dashboard-tabs">

                        <li class="purchases {{($dasboard_tab == 0)?'active': ''}}">
                            <a href="#leads" class="leads" data-toggle="tab" aria-expanded="true" data-tab="0">LEADS</a>
                        </li>
                        <li class="purchases {{($dasboard_tab == 1)?'active': ''}}">
                            <a href="#opportunities" class="opportunities" data-toggle="tab" aria-expanded="true"
                                data-tab="1">OPPORTUNITIES</a>
                        </li>
                        <li class="purchases {{($dasboard_tab == 2)?'active': ''}}">
                            <a href="#team" class="team" data-toggle="tab" aria-expanded="true" data-tab="2">TEAM
                                PERFORMANCE</a>
                        </li>

                        <div class="row">
                            <div class="col-md-8 duration_by_wrap">
                                <div class="col-md-1 filter_dates" style="display: none;">
                                    <button class="theme_btn_round btn filter_all" type="button" name="load"
                                        value="Filter" style="">Filter
                                    </button>
                                </div>
                                <div class="col-md-3 filter_dates" style="display: none;">
                                    <div class="input-group">
                                        <input name="filter_end_date"
                                            class="form-control filter_end_date calender_popup_date_open"
                                            placeholder="End Date" value="" type="text" index="lead_expiry">
                                        <span class="input-group-btn">
                                            <button class="btn default custom_calender_date_open" type="button"
                                                style="margin: 0">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-3 filter_dates" style="display: none;">
                                    <div class="input-group">
                                        <input name="filter_start_date"
                                            class="form-control filter_start_date calender_popup_date_open" value=""
                                            type="text" placeholder="Start Date" index="lead_expiry">
                                        <span class="input-group-btn">
                                            <button class="btn default custom_calender_date_open" type="button"
                                                style="margin: 0">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                @php

                                $response_status = Config("global.response_status");
                                $time_zones = BusinessTimeZone();
                                $start_date = [];
                                $end_date = [];
                                $this_month = getDatesFilter("this_month", $start_date,
                                $end_date);

                                $last_month = getDatesFilter("last_month", $start_date,
                                $end_date);

                                $this_quarter = getDatesFilter("this_quarter",$start_date,
                                $end_date);

                                $last_quarter = getDatesFilter("last_quarter",$start_date,
                                $end_date);

                                $this_year = getDatesFilter("year",$start_date,
                                $end_date);

                                $last_year = getDatesFilter("last_year", $start_date,
                                $end_date);
                                $this_week = getDatesFilter("this_week", $start_date,
                                $end_date);



                                @endphp
                                <div class="col-md-3" style="float: right">
                                    <select class="form-control select2 duration_by select2-hidden-accessible"
                                        tabindex="-1" aria-hidden="true" name="period_filter" id="period_filter">
                                        <option value=""></option>
                                        <option
                                            value="{{ $this_month["search_from_date"].'/'.$this_month["search_to_date"] }}"
                                            selected="selected" data-id="this_month">This month</option>
                                        <option
                                            value="{{ $last_month["search_from_date"].'/'.$last_month["search_to_date"] }}"
                                            data-id="last_month">
                                            Last month</option>
                                        <option
                                            value="{{ $this_quarter["search_from_date"].'/'.$this_quarter["search_to_date"] }}"
                                            data-id="this_quarter">
                                            This quarter</option>
                                        <option
                                            value="{{ $last_quarter["search_from_date"].'/'.$last_quarter["search_to_date"] }}"
                                            data-id="last_quarter">
                                            Last quarter</option>
                                        <option
                                            value="{{ $this_year["search_from_date"].'/'.$this_year["search_to_date"] }}"
                                            data-id="this_year">
                                            This year</option>
                                        <option
                                            value="{{ $last_year["search_from_date"].'/'.$last_year["search_to_date"] }}"
                                            data-id="last_year">
                                            Last year</option>
                                    </select>
                                </div>
                                <label class="col-md-2 text-right" style="float: right">Filter By</label>
                            </div>
                        </div>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane {{($dasboard_tab == 0)?'active': ''}}" id="leads">
                            <div class="portlet-body">
                                <div class="table-container">
                                    <div class="portlet-body flip-scroll" style="margin-bottom: 24px;">
                                        <div class="lead_highlights">
                                            <div class="each_highlight box">
                                                <div class="main_filter">New</div>
                                                <div class="filter_result new">
                                                    <!--<a href="http://localhost/gbs-newcrm/leads/leads_list">-->
                                                    <span class="this_total">0</span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                    <!--</a>-->
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_total">0</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Total</div>
                                                <div class="filter_result">
                                                    <span class="this_all_total">0</span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_all_total">0</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Qualified </div>
                                                <div class="filter_result">
                                                    <span class="this_converted">0</span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_converted">0</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Qualification Rate</div>
                                                <div class="filter_result">
                                                    <span class="this_conversion">0%</span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_conversion">0%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Disqualified</div>
                                                <div class="filter_result">
                                                    <span class="this_lost">0</span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_lost">0</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Time Spent</div>
                                                <div class="filter_result">
                                                    <span class="time_spent">0</span>
                                                </div>
                                                <div class="comparison">Minutes</div>
                                            </div>

                                        </div>
                                        <div class="leads_widget">
                                            <div class="each_widget box">

                                                <div class="widget_head">
                                                    Leads Created Across Months - Last 12 Months
                                                </div>

                                                <div id="chartdiv_1_half" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box">

                                                <div class="widget_head">
                                                    Leads to Deals Conversion Funnel - <span class="tenure"></span>
                                                </div>

                                                <div id="chartdiv_2_half" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Leads Created By Each Source - Last 12 Months
                                                </div>
                                                <div id="chartdiv_3_full" style="width: 100%; height: 400px;"></div>
                                            </div>

                                            <div class="each_widget box">

                                                <div class="widget_head">
                                                    Leads Created by Each Owner - <span class="tenure"></span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 50%">Owner</th>
                                                                <th style="width: 50%">Leads Created</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="leads_created_by_owner">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                            <div class="each_widget box">

                                                <div class="widget_head">
                                                    Leads Created By Each Source - <span class="tenure">This
                                                        Quarter</span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 50%">Source</th>
                                                                <th style="width: 50%">Number of leads created
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="leads_created_by_source">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane {{($dasboard_tab == 1)?'active': ''}}" id="opportunities">
                            <div class="portlet-body">
                                <div class="table-container">
                                    <div class="portlet-body flip-scroll" style="margin-bottom: 24px;">
                                        <div class="lead_highlights">
                                            <div class="each_highlight box">
                                                <div class="main_filter">New</div>
                                                <div class="filter_result">
                                                    <span class="this_opp_total"></span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_opp_total"></span>
                                                </div>
                                            </div>

                                            <div class="each_highlight box">
                                                <div class="main_filter">Total</div>
                                                <div class="filter_result">
                                                    <span class="this_opp_all_total"></span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_opp_all_total"></span>
                                                </div>
                                            </div>

                                            <div class="each_highlight box">
                                                <div class="main_filter">Won</div>
                                                <div class="filter_result">
                                                    <span class="this_opp_converted"></span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_opp_converted"></span>
                                                </div>
                                            </div>

                                            <div class="each_highlight box">
                                                <div class="main_filter">Winning Rate</div>
                                                <div class="filter_result">
                                                    <span class="this_conversion"></span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_conversion"></span>
                                                </div>
                                            </div>

                                            <div class="each_highlight box">
                                                <div class="main_filter">Lost</div>
                                                <div class="filter_result">
                                                    <span class="this_opp_lost"></span>
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Last
                                                        Quarter</span>
                                                    :
                                                    <span class="pre_opp_lost"></span>
                                                </div>
                                            </div>

                                            <div class="each_highlight box">
                                                <div class="main_filter">Time Spent</div>
                                                <div class="filter_result">
                                                    <span class="time_opp_spent"></span>
                                                </div>
                                                <div class="comparison">Minutes</div>
                                            </div>
                                        </div>


                                        <div class="leads_widget">
                                            <div class="each_widget box">
                                                <div class="widget_head">
                                                    Opportunities Created Across Months - Last 12 Months
                                                </div>
                                                <div id="chartdiv_opp_1_half" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box">
                                                <div class="widget_head">
                                                    Opportunities Conversion Funnel -
                                                    <span class="tenure" style="display: inline;">This Quarter</span>
                                                </div>
                                                <div id="chartdiv_opp_2_half" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Opportunities Created By Each Source - Last 12 Months
                                                </div>
                                                <div id="chartdiv_opp_3_full" style="width: 100%; height: 400px;"></div>
                                            </div>

                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Opportunity Components - Last 12 Months
                                                </div>
                                                <div id="chartdiv_opp_4_full" style="width: 100%; height: 400px;"></div>
                                            </div>

                                            <div class="each_widget box">
                                                <div class="widget_head">
                                                    Opportunities by Owner - <span class="tenure"
                                                        style="display: inline;">This Quarter</span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 33.33%">Owner</th>
                                                                <th style="width: 33.33%">Opportunities Value</th>
                                                                <th style="width: 33.33%">Opportunities Created</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="opportunities_created_by_owner"></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="each_widget box">
                                                <div class="widget_head">
                                                    Opportunities By Source - <span class="tenure"
                                                        style="display: inline;">This Quarter</span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 33.33%">Source</th>
                                                                <th style="width: 33.33%">Opportunities Value</th>
                                                                <th style="width: 33.33%">Number of opportunities
                                                                    created</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="opportunities_created_by_source">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane {{($dasboard_tab == 2)?'active': ''}}" id="team">
                            <div class="portlet-body">
                                <div class="table-container">
                                    <div class="portlet-body flip-scroll" style="margin-bottom: 24px;">
                                        <div class="team_highlights">
                                            <div class="each_highlight box">
                                                <div class="main_filter">
                                                    Max. Opportunities Won <span class="max_won_name"></span>
                                                </div>
                                                <div class="filter_result">
                                                    <span class="max_won_count"></span>
                                                </div>
                                                <div class="comparison">Min
                                                    <span class="min_won_name"></span>
                                                    :
                                                    <span class="min_won_count"></span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">
                                                    Max. Won <span class="max_won_value_name"></span>
                                                </div>
                                                <div class="filter_result">
                                                    <span class="currrency">﷼</span>
                                                    <span class="max_won_value"></span>
                                                </div>
                                                <div class="comparison">Min
                                                    <span class="min_won_value_name"></span>
                                                    :
                                                    <span class="currrency">﷼</span>
                                                    <span class="min_won_value"></span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">
                                                    Max. Lost <span class="max_lost_value_name"></span>
                                                </div>
                                                <div class="filter_result">
                                                    <span class="currrency">﷼</span>
                                                    <span class="max_lost_value"></span>
                                                </div>
                                                <div class="comparison">Min
                                                    <span class="min_lost_value_name"></span>
                                                    :
                                                    <span class="currrency">﷼</span>
                                                    <span class="min_lost_value"></span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">
                                                    Max. Won % <span class="max_win_percentage_name"></span>
                                                </div>
                                                <div class="filter_result">
                                                    <span class="max_win_percentage"></span>%
                                                </div>
                                                <div class="comparison">Min
                                                    <span class="min_win_percentage_name"></span>
                                                    :
                                                    <span class="min_win_percentage"></span>%
                                                </div>
                                            </div>
                                        </div>
                                        <div class="team_widget">
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Team Performance (Top 10) -
                                                    <span class="tenure" style="display: inline;">This Quarter</span>
                                                </div>
                                                <div id="chartdiv_team" style="width: 100%; height: 400px;"></div>
                                            </div>

                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Sales Person Performance Opportunities-
                                                    <span class="tenure" style="display: inline;">This Quarter</span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 4%">Rank</th>
                                                                <th style="width: 12%">Sales Person</th>
                                                                <th style="width: 12%">Revenue</th>
                                                                <th style="width: 12%">Lost</th>
                                                                <th style="width: 12%">In Process</th>
                                                                <th style="width: 12%">Won Rate</th>
                                                                <th style="width: 12%">Time Spent (Won)</th>
                                                                <th style="width: 12%">Time Spent (Lost)</th>
                                                                <th style="width: 12%">Average Sales Closing Age</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="deales_by_team">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Sales Person Performance Leads - <span class="tenure"
                                                        style="display: inline;">This Quarter</span>
                                                </div>
                                                <div class="tbl_wrap">
                                                    <table class="scroll" width="400px">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 4%">Rank</th>
                                                                <th style="width: 12%">Sales Person</th>
                                                                <th style="width: 12%">New</th>
                                                                <th style="width: 12%">Total</th>
                                                                <th style="width: 12%">Converted</th>
                                                                <th style="width: 12%">Conversion Percentage</th>
                                                                <th style="width: 12%">Qualified</th>
                                                                <th style="width: 12%">DisQualified</th>
                                                                <th style="width: 12%">Time Spent</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="deales_by_team_leads">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End: life time stats -->
        </div>
    </div>
</div>
<!-- END PAGE CONTENT -->
@stop
@section('styles')
<style>
    #leads .each_highlight.box,
    #opportunities .each_highlight.box {
        width: 15.6% !important;
        margin: 0 1% 0 0;
    }

    .amcharts-chart-div a {
        display: none !important;
    }



    .tbl_wrap {
        padding: 10px;
    }

    .scroll tr {
        display: flex;
    }

    .scroll td {
        flex: 1 auto;
        width: 1px;
        word-wrap: break;
        border-collapse: collapse;
        padding: 8px 12px !important;
        border-style: none !important;
        border-right: 1px solid #eee !important;
    }

    /*.scroll thead tr:after {*/
    /*content: '';*/
    /*overflow-y: scroll;*/
    /*visibility: hidden;*/
    /*height: 0;*/
    /*}*/

    .scroll thead th {
        flex: 1 auto;
        display: block;
        border-right: 1px solid #fff;
        border-collapse: collapse;

        font-size: 16px !important;
        background: #636871 !important;
        color: #fff;
        padding: 8px 12px !important;
        font-weight: 400 !important;

    }

    .scroll tbody {
        display: block;
        width: 100%;
        overflow-y: auto;
        /*height: 200px;*/
    }

    .scroll th:first-child {
        border-top-left-radius: 3px;
    }

    .scroll th:last-child {
        border-top-right-radius: 3px;
        border: 0;
    }

    .scroll tbody td,
    .scroll thead tr {
        vertical-align: middle !important;
        position: relative;
    }

    /*.scroll tbody td {*/
    /*border-style: none !important;*/
    /*border-right: 1px solid #eee !important;*/
    /*}*/

    .scroll tbody td:last-child {
        /*border-right: 0 !important;*/
    }

    .scroll tbody tr {
        border: 1px solid #eee;
        border-top: 0;
        border-right: 0;
    }

    .scroll {
        border-collapse: collapse;
    }

    .filter_dates {
        float: right;
        display: none;
    }

</style>
@stop
@section('admin_js')
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />


<script>
    $(document).ready(function () {
        tab = '{{$dasboard_tab }}';
        if (tab == 0) {
            var obj = '{{$sources}}';
            amChartDiv3('{{ $json_stage }}', 'chartdiv_3_full', obj);
            amchartDiv1('{{ $json_count }}', 'chartdiv_1_half');
        } else if (tab == 1) {
            var obj = '{{$component}}';

            amChartDiv3('{{ $json_stage }}', 'chartdiv_opp_3_full', '{{$sources}}');
            amchartDiv1('{{ $json_count }}', 'chartdiv_opp_1_half');
            amChartDiv3('{{ $comp_count }}', 'chartdiv_opp_4_full', obj);
            console.log('{{ $comp_count }}');
            console.log('{{ $json_stage }}');

        }

        $('.duration_by').trigger('change');
    });

    $(document).on('change', '#period_filter', function () {

        var dates = $(this).val();
        var filter_type = $(this).find(":selected").data("id");
        var filter = $(this).find(":selected").text();
        var tab = '{{$dasboard_tab }}';
        $('.tenure').text(filter);
        // $('.last_tenure').text(filter);



        var action = "{{ url('admin/dashboard/view')}}?dates=" + dates + "&filter_type=" + filter_type
        $.ajax({
            url: action,
            method: 'GET',
            success: function (response) {
                if (response.status == 1000) {
                    if (tab == 0) {

                        amchartDiv2(response.json_stage, 'chartdiv_2_half');
                        $('.last_tenure').html(response.data.previous_label);
                        $('.this_all_total').html(response.data.total_leads);
                        $('.pre_all_total').html(response.data.previous_leads_per);
                        if (response.data.total_leads > response.data.previous_leads_per) {
                            $('#leads').find('span.this_all_total').next('i').removeAttr('class');
                            $('#leads').find('span.this_all_total').next('i').attr('class',
                                'fa fa-arrow-up');
                        } else if (response.data.total_leads <= response.data.previous_leads_per) {
                            $('#leads').find('span.this_all_total').next('i').removeAttr('class');
                            $('#leads').find('span.this_all_total').next('i').attr('class',
                                'fa fa-arrow-down down_arrow');
                        }
                        $('.this_total').html(response.data.total_new_leads_per_day);
                        $('.pre_total').html(response.data.previous_new_leads_per_day);
                        if (response.data.total_new_leads_per_day > response.data
                            .previous_new_leads_per_day) {
                            $('#leads').find('span.this_total').next('i').removeAttr('class');
                            $('#leads').find('span.this_total').next('i').attr('class',
                                'fa fa-arrow-up');
                        } else if (response.data.total_new_leads_per_day <= response.data
                            .previous_new_leads_per_day) {
                            $('#leads').find('span.this_total').next('i').removeAttr('class');
                            $('#leads').find('span.this_total').next('i').attr('class',
                                'fa fa-arrow-down down_arrow');
                        }
                        $('.this_converted').html(response.data.total_qualified_leads_per_day);
                        $('.pre_converted').html(response.data.previous_qualified_leads_per_day);
                        if (response.data.total_qualified_leads_per_day > response.data
                            .previous_qualified_leads_per_day) {
                            $('#leads').find('span.this_converted').next('i').removeAttr('class');
                            $('#leads').find('span.this_converted').next('i').attr('class',
                                'fa fa-arrow-up');
                        } else if (response.data.total_qualified_leads_per_day <= response.data
                            .previous_qualified_leads_per_day) {
                            $('#leads').find('span.this_converted').next('i').removeAttr('class');
                            $('#leads').find('span.this_converted').next('i').attr('class',
                                'fa fa-arrow-down down_arrow');
                        }

                        $('.this_lost').html(response.data.total_disqualified_leads_per_day);
                        $('.pre_lost').html(response.data.previous_disqualified_leads_per_day);
                        if (response.data.total_disqualified_leads_per_day <= response.data
                            .previous_disqualified_leads_per_day) {
                            $('#leads').find('span.this_lost').next('i').removeAttr('class');
                            $('#leads').find('span.this_lost').next('i').attr('class',
                                'fa fa-arrow-up');
                        } else if (response.data.total_disqualified_leads_per_day > response.data
                            .previous_disqualified_leads_per_day) {
                            $('#leads').find('span.this_lost').next('i').removeAttr('class');
                            $('#leads').find('span.this_lost').next('i').attr('class',
                                'fa fa-arrow-down down_arrow');
                        }
                        $('.this_conversion').html(response.data.qualification_rate + '%');
                        $('.pre_conversion').html(response.data.previous_qualification_rate + '%');
                        if (response.data.qualification_rate > response.data
                            .previous_qualification_rate) {
                            $('#leads').find('span.this_conversion').next('i').removeAttr('class');
                            $('#leads').find('span.this_conversion').next('i').attr('class',
                                'fa fa-arrow-up');
                        } else if (response.data.qualification_rate <= response.data
                            .previous_qualification_rate) {
                            $('#leads').find('span.this_conversion').next('i').removeAttr('class');
                            $('#leads').find('span.this_conversion').next('i').attr('class',
                                'fa fa-arrow-down down_arrow');
                        }

                        $('.leads_created_by_owner').html('');
                        $.each(response.data.created_by, function (i, v) {
                            if (v.leads.length > 0) {

                                $('.leads_created_by_owner').append('<tr><td>' + v.title +
                                    ' ' + v.firstname + ' ' + v.lastname +
                                    '</td><td style="text-align: center;">' + v.leads
                                    .length + '</td></tr>');
                            }
                        });
                        $('.leads_created_by_source').html('');
                        $.each(response.data.source_count, function (i, v) {
                            if (v.leads.length > 0) {

                                $('.leads_created_by_source').append('<tr><td>' + v.title +
                                    '</td><td style="text-align: center;">' + v.leads
                                    .length + '</td></tr>');
                            }
                        });
                        $('.time_spent').html(response.data.lead_total_time_spent);


                    }
                    if (tab == 1) {
                        console.log(response);

                        $('.last_tenure').html(response.data.previous_label);

                        $('.this_opp_total').html(response.data.total_new_opportunity);
                        $('.pre_opp_total').html(response.data.previous_new_opportunity);
                        $('.this_opp_all_total').html(response.data.total_opportunity);
                        $('.pre_opp_all_total').html(response.data.previous_opportunity);
                        $('.this_opp_converted').html(response.data.total_won_opportunity);
                        $('.pre_opp_converted').html(response.data.previous_won_opportunity);
                        $('.pre_converted').html(response.data.previous_qualified_leads_per_day);

                        $('.this_opp_lost').html(response.data.total_lost_opportunity);
                        $('.pre_opp_lost').html(response.data.previous_lost_opportunity);
                        $('.this_conversion').html(response.data.won_qualification_rate + '%');



                        amchartDiv2(response.json_opp_stage, 'chartdiv_opp_2_half');

                        $('.opportunities_created_by_owner').html('');
                        $.each(response.data.opp_created_by, function (i, v) {
                            if (v.opportunity.length > 0) {

                                $('.opportunities_created_by_owner').append('<tr><td>' + v
                                    .title + ' ' + v.firstname + ' ' + v.lastname +
                                    '</td><td style="text-align: center;">' + v
                                    .opportunity.length + '</td></tr>');
                            }
                        });
                        $('.time_opp_spent').html(response.data.opportunity_total_time_spent);

                    }
                    if (tab == 2) {
                        
                        amchartDiv1(response.json_max_value, 'chartdiv_team');

                        $('.max_won_name').html(" (" + response.data.max_owner + ")");
                        $('.min_won_name').html(" (" + response.data.min_owner + ")");
                        $('.max_won_count').html(response.data.max_owner_count);
                        $('.min_won_count').html(response.data.min_owner_count);
                        $('.max_won_value_name').html(" (" + response.data.max_name_value + ")");
                        $('.min_won_value_name').html(" (" + response.data.min_name_value + ")");
                        $('.max_won_value').html(response.data.max_owner_value);
                        $('.min_won_value').html(response.data.min_owner_value);
                        if(response.data.max_name_value_lost != ''){
                        $('.max_lost_value_name').html(" ( " + response.data.max_name_value_lost +
                            " )");
                        }
                        if(response.data.min_name_value_lost != ''){

                        
                        $('.min_lost_value_name').html(" ( " + response.data.min_name_value_lost +
                            " )");
                        }
                        $('.max_lost_value').html(response.data.max_opp_owner_value_lost);
                        $('.min_lost_value').html(response.data.min_opp_owner_value_lost);
                        $('.max_win_percentage_name').html(" ( "+response.opportunity[0].name+" ) ");
                        $('.max_win_percentage').html(response.opportunity[0].won_rate);
                        
                        var opp_length = response.opportunity.length;
                        $('.min_win_percentage_name').html(" ( " + response.opportunity[opp_length-1].name +
                            " )");
                            $('.min_win_percentage').html(response.opportunity[opp_length-1].won_rate);
                        
                            
                        
                        $('.deales_by_team').html('');
                        var Count = 1;
                        $.each(response.opportunity, function (i, v) {
                            var Avg_won_rate = '-';
                            var won_text_opp = 'Opportunities';
                            var lost_text_opp = 'Opportunities';

                            if (v.Won_value_count < 2) {
                                won_text_opp = 'Opportunity';
                            }
                            if (v.lost_value_count < 2) {
                                lost_text_opp = 'Opportunity';
                            }
                            var total_converted = parseFloat(v.Won_value_count) +
                                parseFloat(v.lost_value_count);
                            if (total_converted != '0') {
                                Avg_won_rate = parseFloat((v.total_days) / (parseFloat(v
                                    .Won_value_count) + parseFloat(v
                                    .lost_value_count))).toFixed(0);
                                if (Avg_won_rate == 1) {
                                    Avg_won_rate = 'Every Day';
                                } else if (Avg_won_rate < 1) {
                                    Avg_won_rate = Avg_won_rate + ' Day';
                                } else {
                                    Avg_won_rate = Avg_won_rate + ' Days';
                                }
                            }



                            $('.deales_by_team').append('<tr><td style="max-width: 4%;">' +
                                Count + '</td><td>' + v.name + '<br><small>' +
                                v.dept + ', ' + "location" +
                                '</small></td><td class="amount_align">' + v.Won_value +
                                '<br><small>' + v.Won_value_count + ' ' + won_text_opp +
                                '</small></td><td class="amount_align">' +
                                v.lost_value + '<br><small>' + v.lost_value_count +
                                ' ' + lost_text_opp +
                                '</small></td><td class="amount_align">' +
                                v.in_process + '<br>' + "" + " " +
                                '</td><td>' + v.won_rate + '%</td><td>' + v.time_spent_won +
                                '</td><td>' + v.time_spent_lost + '</td><td>' + Avg_won_rate +
                                '</td></tr>');
                            Count++;
                        });


                        $('.deales_by_team_leads').html('');
                        var Count = 1;

                        $.each(response.lead, function (i, v) {

                            var won_text_lead = 'Leads';
                            var lost_text_lead = 'Leads';
                            var converted_text_lead = 'Leads';
                            var new_text_lead = 'Leads';
                            var total_text_lead = 'Leads';


                            if (v.converted_lead < 2) {
                                won_text_lead = 'Lead';
                            }
                            if (v.disqualify_lead < 2) {
                                lost_text_lead = 'Lead';
                            }
                            if (v.qualify_lead < 2) {
                                converted_text_lead = 'Lead';
                            }
                            if (v.new_lead < 2) {
                                new_text_lead = 'Lead';
                            }
                            if (v.total_lead < 2) {
                                total_text_lead = 'Lead';
                            }

                            $('.deales_by_team_leads').append(
                                '<tr><td style="max-width: 4%;">' + Count +
                                '</td><td>' + v.name + '<br><small>' + 
                                 v.dept + ', ' + "location" +
                                '</small></td><td class="amount_align">' +
                                v.new_lead + '<br></td><td class="amount_align">' +
                                v.total_lead + '<br></td><td class="amount_align">' +
                                v.converted_lead + '</td><td>' + 
                                parseFloat(v.convert_percentage).toFixed(2) +
                                '%</td><td class="amount_align">' + v.qualify_lead +
                                '</td><td class="amount_align">' + v.disqualify_lead + '</td><td>' +
                                v.time_spent + '</td></tr>');
                            Count++;

                        });




                    }
                }
            }
        });
    });

    $(document).on("click", "ul.dashboard-tabs li a", function () {
        var tab_id = $(this).attr("data-tab");
        if (tab_id != "calendar") {
            var tab_exist = '{{$dasboard_tab }}';
            //            if(tab_exist == tab_id){
            //                return false;
            //            }else{
            var url = "{{route('admin.dashboard-tab')}}";
            //$('#busyloading, .overlay').show();
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    "tab_id": tab_id
                },
                success: function (res) {
                    if (res.status == 1000) {
                        $('#busyloading').show();
                        window.location.reload();
                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });
            //        }
        }

    });


    function amChartDiv3(json_stage, div, source) {
        am4core.ready(function () {

            // Themes begin
            am4core.useTheme(am4themes_animated);
            // Themes end

            // Create chart instance
            var chart = am4core.create(div, am4charts.XYChart);
            var data = json_stage;

            var data_encode = JSON.parse(data.replace(/&quot;/g, '"'))

            // Add data
            chart.data = data_encode;
            // [{
            //     "year": "2016", 
            //     "europe": 2.5,
            //     "namerica": 2.5,
            //     "asia": 2.1,
            //     "lamerica": 0.3,
            //     "meast": 0.2,
            //     "africa": 0.1
            // }, {
            //     "year": "2017",
            //     "europe": 2.6,
            //     "namerica": 2.7,
            //     "asia": 2.2,
            //     "lamerica": 0.3,
            //     "meast": 0.3,
            //     "africa": 0.1
            // }, {
            //     "year": "2018",
            //     "europe": 2.8,
            //     "namerica": 2.9,
            //     "asia": 2.4,
            //     "lamerica": 0.3,
            //     "meast": 0.3,
            //     "africa": 0.1
            // }];

            // Create axes
            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            categoryAxis.dataFields.category = "date";
            categoryAxis.renderer.grid.template.location = 0;


            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.renderer.inside = true;
            valueAxis.renderer.labels.template.disabled = true;
            valueAxis.min = 0;

            // Create series
            function createSeries(field, name) {

                // Set up series
                var series = chart.series.push(new am4charts.ColumnSeries());
                series.name = name;
                series.dataFields.valueY = field;
                series.dataFields.categoryX = "date";
                series.sequencedInterpolation = true;

                // Make it stacked
                series.stacked = true;

                // Configure columns
                series.columns.template.width = am4core.percent(60);
                series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";

                // Add label
                var labelBullet = series.bullets.push(new am4charts.LabelBullet());
                labelBullet.label.text = "{valueY}";
                labelBullet.locationY = 0.5;
                labelBullet.label.hideOversized = true;

                return series;
            }


            sources = JSON.parse(source.replace(/&quot;/g, '"'))
            // console.log(object);
            $.each(sources, function (key, value) {


                createSeries(value, value);

            });

            // Legend
            chart.legend = new am4charts.Legend();

        }); // end am4core.ready()
    }

    function amchartDiv1(json_count, div) {
        am4core.ready(function () {

            // Themes begin
            am4core.useTheme(am4themes_animated);
            // Themes end

            // Create chart instance
            var chart = am4core.create(div, am4charts.XYChart);
            chart.scrollbarX = new am4core.Scrollbar();
            var data = json_count;

            var data_encode = JSON.parse(data.replace(/&quot;/g, '"'))
            chart.data = data_encode;

            // Create axes
            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            categoryAxis.dataFields.category = "date";
            categoryAxis.renderer.grid.template.location = 0;
            categoryAxis.renderer.minGridDistance = 30;
            categoryAxis.renderer.labels.template.horizontalCenter = "right";
            categoryAxis.renderer.labels.template.verticalCenter = "middle";
            categoryAxis.renderer.labels.template.rotation = 270;
            categoryAxis.tooltip.disabled = true;
            categoryAxis.renderer.minHeight = 110;

            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.renderer.minWidth = 50;

            // Create series
            var series = chart.series.push(new am4charts.ColumnSeries());
            series.sequencedInterpolation = true;
            series.dataFields.valueY = "count";
            series.dataFields.categoryX = "date";
            series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
            series.columns.template.strokeWidth = 0;

            series.tooltip.pointerOrientation = "vertical";

            series.columns.template.column.cornerRadiusTopLeft = 10;
            series.columns.template.column.cornerRadiusTopRight = 10;
            series.columns.template.column.fillOpacity = 0.8;

            // on hover, make corner radiuses bigger
            var hoverState = series.columns.template.column.states.create("hover");
            hoverState.properties.cornerRadiusTopLeft = 0;
            hoverState.properties.cornerRadiusTopRight = 0;
            hoverState.properties.fillOpacity = 1;

            series.columns.template.adapter.add("fill", function (fill, target) {
                return chart.colors.getIndex(target.dataItem.index);
            });

            // Cursor
            chart.cursor = new am4charts.XYCursor();

        }); // end am4core.ready()
    }

    function amchartDiv2(json_stage, div) {

        var data = json_stage;

        var data_encode = JSON.parse(data.replace(/&quot;/g, '"'));

        var chart = AmCharts.makeChart(div, {

            "type": "funnel",
            "theme": "none",
            "dataProvider": data_encode,
            "titleField": "title",
            "marginRight": 160,
            "marginLeft": 15,
            "labelPosition": "right",
            "funnelAlpha": 0.9,
            "valueField": "value",
            "startX": 0,
            "neckWidth": "40%",
            "startAlpha": 0,
            "outlineThickness": 1,
            "neckHeight": "30%",
            "balloonText": "[[title]]:<b>[[value]]</b>",

            "export": {
                "enabled": true
            }
        });
    }

</script>


@stop