@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></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>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="#summary" class="summary" data-toggle="tab" aria-expanded="true"
                                data-tab="0">SUMMARY</a>
                        </li>
                        <li class="purchases {{($dasboard_tab == 1)?'active': ''}}">
                            <a href="#district" class="district" data-toggle="tab" aria-expanded="true"
                                data-tab="1">DISTRICT</a>
                        </li>
                        {{-- <li class="purchases {{($dasboard_tab == 2)?'active': ''}}">
                            <a href="#calendar" class="calendar" data-toggle="tab" aria-expanded="true" data-tab="2">
                                CALENDAR</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>



                                <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> --}}
                                    @if($dasboard_tab == 1)

                                    <select name="district" id="district"
                                        class="form-control select2 district select2-hidden-accessible" tabindex="-1"
                                        aria-hidden="true">
                                        @foreach($districts as $district)
                                        <option value="{{ $district->id }}">{{ $district->name }}</option>
                                        @endforeach

                                    </select>


                                    @endif
                                </div>

                            </div>
                        </div>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane {{($dasboard_tab == 0)?'active': ''}}" id="summary">
                            <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">Total Members</div>
                                                <div class="filter_result new">
                                                    <!--<a href="http://localhost/gbs-newcrm/leads/leads_list">-->
                                                    <span class="this_total">{{ $data['total_member_today'] }}</span>
                                                    @if($data['total_member_today'] >= $data['total_member_yesterday'])
                                                    <i class="fa fa-arrow-up up_arrow"></i>
                                                    @else
                                                    <i class="fa fa-arrow-down down_arrow"></i>
                                                    @endif
                                                    <!--</a>-->
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;"> Yesterday
                                                    </span>

                                                    <span class="pre_total">{{ $data['total_member_yesterday'] }}</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With No Risk</div>
                                                <div class="filter_result">
                                                    <span class="this_all_total">{{ $data['no_risk'] }}</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_all_total">{{ $data['no_risk_percentage'] }}%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With Less Risk </div>
                                                <div class="filter_result">
                                                    <span class="this_converted">{{ $data['less_risk'] }}</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_converted">{{ $data['less_risk_percentage'] }}%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With Moderate Risk</div>
                                                <div class="filter_result">
                                                    <span class="this_lost">{{ $data['moderate_risk'] }}</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                <span class="pre_lost">{{ $data['moderate_risk_percentage'] }}%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With High Risk</div>
                                                <div class="filter_result">
                                                    <span class="time_spent">{{ $data['high_risk'] }}</span>
                                                </div>
                                                <div class="comparison">
                                                <span class="last_tenure" style="display: inline;">Percentage</span>
                                                :
                                            <span class="pre_lost">{{ $data['high_risk_percentage'] }}%</span>
                                            </div>
                                            </div>

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


                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Total Members
                                                </div>
                                                <div id="chartdiv_1_full" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Members With No Risk
                                                </div>
                                                <div id="chartdiv_2_full" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Potential Less Risk
                                                </div>
                                                <div id="chartdiv_3_full" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Potential Suspects
                                                </div>
                                                <div id="chartdiv_4_full" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Members With High Risk
                                                </div>
                                                <div id="chartdiv_5_full" style="width: 100%; height: 400px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane {{($dasboard_tab == 1)?'active': ''}}" id="district">
                            <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">Total Members</div>
                                                <div class="filter_result new">
                                                    <!--<a href="http://localhost/gbs-newcrm/leads/leads_list">-->
                                                    <span class="this_total_district">0</span>
                                                    <i class="fa fa-arrow-up up_arrow"></i>
                                                  
                                                    <!--</a>-->
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;"> Yesterday
                                                    </span>

                                                    <span class="pre_total_district">0</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With No Risk</div>
                                                <div class="filter_result">
                                                    <span class="this_all_total_district">0</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_all_total_district">0%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With Less Risk </div>
                                                <div class="filter_result">
                                                    <span class="this_converted_district">0</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_converted_district">0%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With Moderate Risk</div>
                                                <div class="filter_result">
                                                    <span class="this_lost_district">0</span>
                                                    
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_lost_district">0%</span>
                                                </div>
                                            </div>
                                            <div class="each_highlight box">
                                                <div class="main_filter">Members With High Risk</div>
                                                <div class="filter_result">
                                                    <span class="time_spent_district">0</span>
                                                </div>
                                                <div class="comparison">
                                                    <span class="last_tenure" style="display: inline;">Percentage</span>
                                                    :
                                                    <span class="pre_time_spent_district">0%</span>
                                                </div>
                                            </div>

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


                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Total Members
                                                </div>
                                                <div id="chartdiv_1_full_district" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Members With No Risk
                                                </div>
                                                <div id="chartdiv_2_full_district" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Potential Less Risk
                                                </div>
                                                <div id="chartdiv_3_full_district" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Potential Suspects
                                                </div>
                                                <div id="chartdiv_4_full_district" style="width: 100%; height: 400px;"></div>
                                            </div>
                                            <div class="each_widget box" style="width: 99%;">
                                                <div class="widget_head">
                                                    Members With High Risk
                                                </div>
                                                <div id="chartdiv_5_full_district" style="width: 100%; height: 400px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="tab-pane {{($dasboard_tab == 2)?'active': ''}}" id="calendar">
                    <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;
    }

    .breadcrumbs li:after {
        content: '';
    }

</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="{{ asset('js/mycolor.js') }}" type="text/javascript"></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>
    function amchartDiv1(json_count, div,color) {
        am4core.ready(function () {

            // Themes begin
            am4core.useTheme(am4themes_animated);
            am4core.color("red");
            // 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);
            // });
            
            series.columns.template.fill = am4core.color(color);
           
            // Cursor
            chart.cursor = new am4charts.XYCursor();

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


    $(document).ready(function () {

        var obj = '{{$risk}}';
        amChartDiv3('{{ $json_total_owner }}', 'chartdiv_1_full', obj);

        amchartDiv1('{{ $json_no_risk_owner }}', 'chartdiv_2_full','#006400');
        amchartDiv1('{{ $json_less_risk_owner }}', 'chartdiv_3_full','#FFA500');
        amchartDiv1('{{ $json_moderate_risk_owner }}', 'chartdiv_4_full','#FF4500');
        amchartDiv1('{{ $json_high_risk_owner }}', 'chartdiv_5_full','#FF0000');

        var obj = '{{$dasboard_tab}}';

        if(obj == 1){
            $('#district').trigger('change');
        }


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

    });
    $(document).on('change', '#district', function () {


        var val = $(this).val();
        var action = "{{ url('admin/dashboard-district')}}?val=" + val;
        $.ajax({
            url: action,
            method: 'GET',
            success: function (response) {
                if (response.status == 1000) {
                    console.log(response);

                    $('.this_total_district').html(response.data.total_member_today);
                        $('.pre_total_district').html(response.data.total_member_yesterday);

                        $('.this_all_total_district').html(response.data.no_risk);

                        $('.pre_all_total_district').html(response.data.no_risk_percentage + '%');

                        
                        $('.this_converted_district').html(response.data.less_risk);
                        $('.pre_converted_district').html(response.data.less_risk_percentage + '%');


                        $('.this_lost_district').html(response.data.moderate_risk);
                        $('.pre_lost_district').html(response.data.moderate_risk_percentage + '%');

                        
                        $('.time_spent_district').html(response.data.high_risk);
                        $('.pre_time_spent_district').html(response.data.high_risk_percentage + '%');

                        
                        
                        amChartDiv3(response.json_total_owner, 'chartdiv_1_full_district', response.risk);

                        amchartDiv1(response.json_no_risk_owner, 'chartdiv_2_full_district','#006400');
                        amchartDiv1(response.json_less_risk_owner, 'chartdiv_3_full_district','#FFA500');
                        amchartDiv1(response.json_moderate_risk_owner, 'chartdiv_4_full_district','#FF4500');
                        amchartDiv1(response.json_high_risk_owner, 'chartdiv_5_full_district','#FF0000');

                }
            }
       
            });
    });



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

            // Themes begin
            am4core.useTheme(am4themes_animated);
            am4core.useTheme(am4themes_dataviz);
            
            // 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 = false;
            valueAxis.renderer.labels.template.disabled = false;
            valueAxis.renderer.minWidth = 50;
            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}";

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

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

</script>
@stop