@extends('layout')

@section('css')
    
@endsection

@section('content')
    <!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
                                    <h3 class="font-weight-bold"><span class="font-weight-light">Daftar Grafik -</span> Grafik Kubikasi <a href="{{url('grafik-kubikasi')}}"><button id="reset_all_filter" class="btn btn-danger ml-4">Reset All Filter</button></a></h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

    <div class="content">

		<!-- Quick stats boxes -->
		<div class="row">
            {{-- GRAPHIC MARKETING *********************************************************** --}}
			<div class="col-md-12 card">
                <div class="card-header">
                    <h5 class="card-title">Marketing</h5>
                </div>
                <div class="card-body">
                    <form action="" method="get" id='filter_marketing'>
                        <div class="row">
                            <div class="form-group row col-md-9">
                                <div class="col-md-3">
                                    <select id="select_marketing" name="select_marketing" aria-describedby="" class="form-control form-control-select2">
                                        <option value="all">Semua Marketing</option>
                                        @foreach ($marketing as $item)
                                            <option value="{{$item->id}}" data-wilayah='{{$item->wilayah_marketing_id}}'>{{$item->nama}}</option>
                                        @endforeach
                                    </select> 
                                    <span id="" class="form-text text-muted">Pilih marketing</span>
                                </div>
                                <div class="col-md-3">
                                    <select id="select_wilayah" name="select_wilayah" aria-describedby="" class="custom-select">
                                        <option value="all">Jakarta & Semarang</option>
                                        <option value="2">Semarang</option>
                                        <option value="1">Jakarta</option>
                                    </select> 
                                    <span id="" class="form-text text-muted">Pilih wilayah</span>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" id="filter_date"
                                            name="filter_date"
                                            class="daterange-picker form-control"
                                            value=""
                                    >
                                    <span id="filter_date_hint" class="form-text text-muted">Pilih range tanggal</span>
                                    <span id="filter_date_danger" class="form-text text-danger"><i class="icon-alert mr-1"></i>Anda tidak bisa memilih tanggal dengan tahun yang berbeda</span>
                                </div>
                                <div class="col-md-3">
                                    <select id="select_range" name="select_range" aria-describedby="" class="custom-select">
                                        <option value="harian">Harian</option>
                                        <option value="bulanan">Bulanan</option>
                                        <option value="triwulan">Triwulan</option>
                                    </select>
                                    <span id="" class="form-text text-muted">Jenis range tanggal data</span>
                                </div>
                            </div> 
        
                            <div class="form-group row col-md-3">
                                <div class="col-12">
                                    <button id="reset_marketing" class="btn btn-danger">Reset Filter</button>
                                    <button id="submit_filter_marketing" class="btn btn-primary">Filter Marketing</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="filtered_marketing" class="my-2">
                    </div>
                    <div class="panel-body">
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="chart_marketing"></div>
                        </div>
                    </div>
                
                </div>
            </div>
            {{-- END OF GRAPHIC TELEMARKETING ****************************************** --}}
            {{-- GRAPHIC TELEMARKETING ************************************************* --}}
            {{-- <div class="col-md-12 card">
                <div class="card-header">
                    <h5 class="card-title">Tele</h5>
                </div>
                <div class="card-body">
                    <form action="" method="get" id='filter_marketing'>
                        <div class="row">
                            <div class="form-group row col-md-9">
                                <div class="col-md-3">
                                    <select id="select_telemarketing" name="select_telemarketing" aria-describedby="" class="form-control form-control-select2">
                                        <option value="all">Semua Marketing</option>
                                        @foreach ($telemarketing as $item)
                                            <option value="{{$item->id}}" data-wilayah='{{$item->wilayah_marketing_id}}'>{{$item->nama}}</option>
                                        @endforeach
                                    </select> 
                                    <span id="" class="form-text text-muted">Pilih marketing</span>
                                </div>
                                <div class="col-md-3">
                                    <select id="select_telewilayah" name="select_telewilayah" aria-describedby="" class="custom-select">
                                        <option value="all">Jakarta & Semarang</option>
                                        <option value="2">Semarang</option>
                                        <option value="1">Jakarta</option>
                                    </select> 
                                    <span id="" class="form-text text-muted">Pilih wilayah</span>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" id="filter_date_tele"
                                            name="filter_date_tele"
                                            class="daterange-picker-tele form-control"
                                            value=""
                                    >
                                    <span id="filter_date_tele_hint" class="form-text text-muted">Pilih range tanggal</span>
                                    <span id="filter_date_tele_danger" class="form-text text-danger"><i class="icon-alert mr-1"></i>Anda tidak bisa memilih tanggal dengan tahun yang berbeda</span>
                                </div>
                                <div class="col-md-3">
                                    <select id="select_telerange" name="select_telerange" aria-describedby="" class="custom-select">
                                        <option value="harian">Harian</option>
                                        <option value="bulanan">Bulanan</option>
                                        <option value="triwulan">Triwulan</option>
                                    </select>
                                    <span id="" class="form-text text-muted">Jenis range tanggal data</span>
                                </div>
                            </div> 
        
                            <div class="form-group row col-md-3">
                                <div class="col-12">
                                    <button id="reset_telemarketing" class="btn btn-danger">Reset Filter</button>
                                    <button id="submit_filter_telemarketing" class="btn btn-primary">Filter Telemarketing</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="filtered_telemarketing" class="my-2"></div>
                    <div class="panel-body">
                        <div class="chart-container">
                            <div class="chart has-fixed-height" id="chart_tele"></div>
                        </div>
                    </div>
                
                </div>
            </div> --}}
            {{-- END OF GRAPHIC TELEMARKETING ***************************************** --}}

			
		</div>

		<!-- /quick stats boxes -->

	</div>
@endsection

@section('js')
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/echarts/echarts.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/loaders/pace.min.js')}}"></script>

<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script>
{{-- <script src="{{asset('global_assets/js/demo_pages/charts/echarts/columns_waterfalls.js')}}"></script> --}}

<script>

//var initialization 
var MarketingData = {};
var TelemarketingData = {};

var marketing = [];
var telemarketing = [];

var dataAxisX = {};
var labelAxisX = [];
var series = [];
var teledataAxisX = {};
var telelabelAxisX = [];
var teleseries = [];

var $select = $('.form-control-select2').select2();
$("#filter_date_danger").css('display','none');
$("#filter_date_tele_danger").css('display','none');
doWeHaveDataToDisplayForMarketing();
doWeHaveDataToDisplayForTelemarketing();

$('.daterange-picker').daterangepicker({
    applyClass: 'btn-primary',
    cancelClass: 'btn-danger',

   
    startDate: '{{ $start_date }}',
    endDate: '{{ $end_date }}',

    locale: {
    format: 'YYYY/MM/DD'
    }
});

$('.daterange-picker-tele').daterangepicker({
    applyClass: 'btn-primary',
    cancelClass: 'btn-danger',

   
    startDate: '{{ $start_date }}',
    endDate: '{{ $end_date }}',

    locale: {
    format: 'YYYY/MM/DD'
    }
});

// Utility Function *******************************************************
// marketing **************************************************************
function isMarketingHasFilter(){
    if(marketing.length != 0){
        $("#filter_date").prop('disabled', true);
        $("#select_range").prop('disabled', true);
    }else{
        $("#filter_date").prop('disabled', false);
        $("#select_range").prop('disabled', false);
    }
}

function removeThisMarketingFromFilter(element){
    let id = element.id;
    delete MarketingData[element.id];
    marketing = marketing.filter(function(item){ return item != id });
    element.remove();
    marketingChartUpdate(MarketingData,true);
}

function isMarketingFilterable(){
    if(marketing.length > 3){
        $("#submit_filter_marketing").prop('disabled',true);
    }else if(marketing.length <= 3){
        $("#submit_filter_marketing").prop('disabled',false);
    }
}

function doWeHaveDataToDisplayForMarketing(){
    if(marketing.length == 0){
        $("#chart_marketing").css('display','none');
    }else{
        $("#chart_marketing").css('display','block');
    }
}

$("#reset_marketing").on('click', function(element){
    element.preventDefault();
    MarketingData = {};
    marketing = [];
    dataAxisX = {};
    labelAxisX = [];
    series = [];
    marketingChartUpdate(MarketingData);
})
// ************************************************************************
// telemarketing **********************************************************
function isTelemarketingHasFilter(){
    if(telemarketing.length != 0){
        $("#filter_date_tele").prop('disabled', true);
        $("#select_telerange").prop('disabled', true);
    }else{
        $("#filter_date_tele").prop('disabled', false);
        $("#select_telerange").prop('disabled', false);
    }
}

function removeThisTelemarketingFromFilter(element){
    let id = element.id;
    delete TelemarketingData[element.id];
    telemarketing = telemarketing.filter(function(item){ return item != id });
    element.remove();
    telemarketingChartUpdate(TelemarketingData,true);
}

function isTelemarketingFilterable(){
    if(telemarketing.length > 3){
        $("#submit_filter_telemarketing").prop('disabled',true);
    }else if(telemarketing.length <= 3){
        $("#submit_filter_telemarketing").prop('disabled',false);
    }
}

function doWeHaveDataToDisplayForTelemarketing(){
    if(telemarketing.length == 0){
        $("#chart_tele").css('display','none');
    }else{
        $("#chart_tele").css('display','block');
    }
}
$("#reset_telemarketing").on('click', function(element){
    element.preventDefault();
    TelemarketingData = {};
    telemarketing = [];
    teledataAxisX = {};
    telelabelAxisX = [];
    teleseries = [];
    telemarketingChartUpdate(TelemarketingData);
})
// end of telemarketing ***************************************************
// end of Utility Function ************************************************



// select marketing *******************************************************
if(!$("#select_marketing").prop('disabled')){

    $("#select_marketing").on('change', function(){
        if($("#select_marketing").val() !== 'all'){
            $("#select_wilayah").prop('disabled', true);
            $("#select_wilayah").val($("#select_marketing option:selected").data('wilayah'));
        }else{
            $("#select_wilayah").val('all');
            $("#select_wilayah").prop('disabled', false);
        }
        
        
    })

}

// end of select marketing ************************************************

// select wilayah marketing *********************************************************
let populate_marketing = {!! $marketing !!};

if(!$("#select_wilayah").prop('disabled')){
    
    $("#select_wilayah").on('change', function() {
        if($("#select_wilayah").val() !== 'all'){
            $("#select_marketing").empty();
            $("#select_marketing").append($("<option />").val('all').text('Semua Marketing'))
            populate_marketing.forEach(e => {
                if(e.wilayah_marketing_id == $("#select_wilayah option:selected").val()){
                    let opt = `<option value="${e.id}" data-wilayah='${e.wilayah_marketing_id}'>${e.nama}</option>`
                    $("#select_marketing").append(opt);
                }
            })
        }else{
            $("#select_marketing").empty();
            $("#select_marketing").append($("<option />").val('all').text('Semua Marketing'))
            populate_marketing.forEach(e => {
                let opt = `<option value="${e.id}" data-wilayah='${e.wilayah_marketing_id}'>${e.nama}</option>`
                $("#select_marketing").append(opt);
            })
        }
    })
}


// end of select wilayah **************************************************
 
// filter date ************************************************************
/**
 * Take the difference between the dates and divide by milliseconds per day.
 * Round to nearest whole number to deal with DST.
 */
 function datediff(first, second) {        
    return Math.round((second - first) / (1000 * 60 * 60 * 24));
} // in days

/**
 * new Date("dateString") is browser-dependent and discouraged, so we'll write
 * a simple parse function for U.S. date format (which does no error checking)
 */
function parseDate(str) {
    var mdy = str.split('/');
    // return new Date(mdy[2], mdy[0] - 1, mdy[1]);
    return new Date(str);
}

let today = new Date().toISOString().slice(0, 10);
let awalTahun = new Date().getFullYear() + '/01/01';
let akhirTahun = new Date().getFullYear() + '/12/31';

$('#select_range').on('change', function(){
    if($("#select_range").val() == 'harian'){
        $(".daterange-picker").daterangepicker({
            applyClass: 'btn-primary',
            cancelClass: 'btn-danger',
            startDate: today,
            endDate: today,
            locale: {
                format: 'YYYY/MM/DD'
            }
        })
    }else if($("#select_range").val() == 'triwulan'){
        $(".daterange-picker").daterangepicker({
            applyClass: 'btn-primary',
            cancelClass: 'btn-danger',
            startDate: awalTahun,
            endDate: akhirTahun,
            locale: {
                format: 'YYYY/MM/DD'
            }
        })
    }
    $("#filter_date").trigger('change');
})


$("#filter_date").on('change', function(){
    let [awal,akhir] = $("#filter_date").val().split('-');
    let tahunawal = parseInt(awal.split('/')[0]);
    let tahunakhir = parseInt(akhir.split('/')[0])
    $("#filter_date_hint").css('display','block');
    $("#filter_date_danger").css('display','none');
    if(tahunakhir != tahunawal){
        $("#filter_date").val(`${awal} - ${akhirTahun}`);
        $("#filter_date_hint").css('display','none');
        $("#filter_date_danger").css('display','block');
    }
    let diff = datediff(parseDate(awal), parseDate(akhir)) + 1;
    if(diff >= 356 || diff >= 355){
        $("#select_range").val('triwulan')
    }
    else if(diff>31)(
        $("#select_range").val('bulanan')
    )
    else if(diff < 31){
        $("#select_range").val('harian')
    }
});




// end of filter date ******************************************************
// end of MARKETING SECTION ************************************************

// TELEMARKETING ***********************************************************

// select marketing *******************************************************
if(!$("#select_telemarketing").prop('disabled')){

$("#select_telemarketing").on('change', function(){
    if($("#select_telemarketing").val() !== 'all'){
        $("#select_telewilayah").prop('disabled', true);
        $("#select_telewilayah").val($("#select_telemarketing option:selected").data('wilayah'));
    }else{
        $("#select_telewilayah").val('all');
        $("#select_telewilayah").prop('disabled', false);
    }
    
    
})

}

// end of select marketing ************************************************

// select wilayah marketing *********************************************************
let populate_telemarketing = {!! $telemarketing !!};

if(!$("#select_telewilayah").prop('disabled')){

$("#select_telewilayah").on('change', function() {
    if($("#select_telewilayah").val() !== 'all'){
        $("#select_telemarketing").empty();
        $("#select_telemarketing").append($("<option />").val('all').text('Semua Marketing'))
        populate_telemarketing.forEach(e => {
            if(e.wilayah_marketing_id == $("#select_telewilayah option:selected").val()){
                let opt = `<option value="${e.id}" data-wilayah='${e.wilayah_marketing_id}'>${e.nama}</option>`
                $("#select_telemarketing").append(opt);
            }
        })
    }else{
        $("#select_telemarketing").empty();
        $("#select_telemarketing").append($("<option />").val('all').text('Semua Marketing'))
        populate_telemarketing.forEach(e => {
            let opt = `<option value="${e.id}" data-wilayah='${e.wilayah_marketing_id}'>${e.nama}</option>`
            $("#select_telemarketing").append(opt);
        })
    }
})
}


// end of select wilayah **************************************************

// filter date ************************************************************
/**
* Take the difference between the dates and divide by milliseconds per day.
* Round to nearest whole number to deal with DST.
*/
function datediff(first, second) {        
return Math.round((second - first) / (1000 * 60 * 60 * 24));
} // in days

/**
* new Date("dateString") is browser-dependent and discouraged, so we'll write
* a simple parse function for U.S. date format (which does no error checking)
*/
function parseDate(str) {
var mdy = str.split('/');
// return new Date(mdy[2], mdy[0] - 1, mdy[1]);
return new Date(str);
}

let teletoday = new Date().toISOString().slice(0, 10);
let teleawalTahun = new Date().getFullYear() + '/01/01';
let teleakhirTahun = new Date().getFullYear() + '/12/31';

$('#select_telerange').on('change', function(){
if($("#select_telerange").val() == 'harian'){
    $(".daterange-picker-tele").daterangepicker({
        applyClass: 'btn-primary',
        cancelClass: 'btn-danger',
        startDate: teletoday,
        endDate: teletoday,
        locale: {
            format: 'YYYY/MM/DD'
        }
    })
}else if($("#select_telerange").val() == 'triwulan'){
    $(".daterange-picker-tele").daterangepicker({
        applyClass: 'btn-primary',
        cancelClass: 'btn-danger',
        startDate: teleawalTahun,
        endDate: teleakhirTahun,
        locale: {
            format: 'YYYY/MM/DD'
        }
    })
}
})


$("#filter_date_tele").on('change', function(){
let [teleawal,teleakhir] = $("#filter_date_tele").val().split('-');
let tahunawal = parseInt(teleawal.split('/')[0]);
let tahunakhir = parseInt(teleakhir.split('/')[0]);
$("#filter_date_tele_hint").css('display','block');
$("#filter_date_tele_danger").css('display','none');
if(tahunawal !== tahunakhir){
        $("#filter_date_tele").val(`${teleawal} - ${teleakhirTahun}`);
        $("#filter_date_tele_hint").css('display','none');
        $("#filter_date_tele_danger").css('display','block');
    }
let telediff = datediff(parseDate(teleawal), parseDate(teleakhir)) + 1;
if(telediff >= 356 || telediff >= 355){
    $("#select_telerange").val('triwulan')
}
else if(telediff>31)(
    $("#select_telerange").val('bulanan')
)
else if(telediff < 31){
    $("#select_telerange").val('harian')
}
});


// end of TELEMARKETING SECTION ********************************************



// ajax filer marketing ****************************************************

$("#submit_filter_marketing").on('click',function(event){
    event.preventDefault();
    let formData = {
        marketing_id: $("#select_marketing option:selected").val(),
        wilayah_id: $("#select_wilayah option:selected").val(),
        filter_date: $("#filter_date").val(),
        range_type: $("#select_range option:selected").val(),
        filter_type: 'marketing',
    };

    $.ajax({
        type: 'GET',
        url: `{{url('/grafik-kubikasi-filter')}}`,
        data: formData,
        dataType: 'json',
        encode: true,
        
        success:function(data){
            MarketingData[Object.keys(data)[0]] = Object.values(data)[0];
            marketingChartUpdate(data);
        }
    })
})

// end of ajax filter marketing ********************************************
// ajax filter telemarketing ***********************************************

$("#submit_filter_telemarketing").on('click',function(event){
    event.preventDefault();
    let formData = {
        marketing_id: $("#select_telemarketing option:selected").val(),
        wilayah_id: $("#select_telewilayah option:selected").val(),
        filter_date: $("#filter_date_tele").val(),
        range_type: $("#select_telerange option:selected").val(),
        filter_type: 'telemarketing',
    };

    $.ajax({
        type: 'GET',
        url: `{{url('/grafik-kubikasi-filter')}}`,
        data: formData,
        dataType: 'json',
        encode: true,
        
        success:function(data){
            TelemarketingData[Object.keys(data)[0]] = Object.values(data)[0];
            telemarketingChartUpdate(data);
        }
    })
})

// end of ajax filter telemarketing ****************************************



    // update barchart function marketing**************************************
    function marketingChartUpdate(data,del=false){
        
        if(Object.keys(data) && del == false){
            Object.keys(data).forEach(e => {
                marketing.push(e);
            })
            labelAxisX = []; 
        }else if(Object.keys(data) && del == true){
            marketing = [];
            Object.keys(data).forEach(e => {
                marketing.push(e);
            })
            dataAxisX = [];
        }
        for(const [key,val] of Object.entries(data)){
            if(!(key in dataAxisX)){
                dataAxisX[key] = [];
            }
            for(const [k,v] of Object.entries(val)){
                if(del == false)
                {
                    labelAxisX.push(k);
                }
                dataAxisX[key].push(v.toFixed(2));
            }
        }
        series = [];
        let multi = [];
        $("#filtered_marketing").html('');
        marketing.forEach(e => {
            let buttonLabelMarketing = `<button type="button" id="${e}" class="btn btn-info mx-2" onclick="removeThisMarketingFromFilter(this)">${e}<i class="icon-x ml-2"></i></button>`
            $("#filtered_marketing").append(buttonLabelMarketing);
            multi.push({
                name: e,
                type: 'bar',
                data: dataAxisX[e],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontWeight: 500
                            }
                        }
                    }
                },
            })
        })
        
        multi.forEach(e => {
            series.push(e);
        })
        
        
        isMarketingHasFilter();
        isMarketingFilterable();

        let chartMarketing = document.getElementById('chart_marketing');
        doWeHaveDataToDisplayForMarketing();
        let echartMarketing = echarts.init(chartMarketing);

        echartMarketing.setOption({

        // Define colors
        color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],

        // Global text styles
        textStyle: {
            fontFamily: 'Roboto, Arial, Verdana, sans-serif',
            fontSize: 13
        },

        // Chart animation duration
        animationDuration: 750,

        // Setup grid
        grid: {
            left: 0,
            right: 40,
            top: 35,
            bottom: 0,
            containLabel: true
        },

        // Add legend
        legend: {
            data: marketing,
            itemHeight: 8,
            itemGap: 20,
            textStyle: {
                padding: [0, 5]
            },
        },

        // Add tooltip
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.75)',
            padding: [10, 15],
            textStyle: {
                fontSize: 13,
                fontFamily: 'Roboto, sans-serif'
            }
        },

        // Horizontal axis
        xAxis: [{
            type: 'category',
            data: labelAxisX,
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            }
        }],

        // Vertical axis
        yAxis: [{
            type: 'value',

            axisLabel: {
                color: '#333',
                formatter: '{value} cbm'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
                }
            },
        }],
        
        // Add series
        series: series,
        }, true);
    }
    // end of update barchart function *******************************
    // update barchart function telemarketing**************************************
    function telemarketingChartUpdate(data,del=false){
        if(Object.keys(data) && del == false){
            Object.keys(data).forEach(e => {
                telemarketing.push(e);
            })
            telelabelAxisX = []; 
        }else if(Object.keys(data) && del == true){
            telemarketing = [];
            Object.keys(data).forEach(e => {
                telemarketing.push(e);
            })
            teledataAxisX = [];
        }
        for(const [key,val] of Object.entries(data)){
            if(!(key in teledataAxisX)){
                teledataAxisX[key] = [];
            }
            for(const [k,v] of Object.entries(val)){
                if(del == false)
                {
                    telelabelAxisX.push(k);
                }
                teledataAxisX[key].push(v.toFixed(2));
            }
        }
        teleseries = [];
        let multi = [];
        $("#filtered_telemarketing").html('');
        telemarketing.forEach(e => {
            let buttonLabelMarketing = `<button type="button" id="${e}" class="btn btn-info mx-2" onclick="removeThisTelemarketingFromFilter(this)">${e}<i class="icon-x ml-2"></i></button>`
            $("#filtered_telemarketing").append(buttonLabelMarketing);
            multi.push({
                name: e,
                type: 'bar',
                data: teledataAxisX[e],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontWeight: 500
                            }
                        }
                    }
                },
            })
        })
        
        multi.forEach(e => {
            teleseries.push(e);
        })
        
        
        isTelemarketingHasFilter();
        isTelemarketingFilterable();

        let chartTele = document.getElementById('chart_tele');
        doWeHaveDataToDisplayForTelemarketing();
        let echartTele = echarts.init(chartTele);
        
        

        

        echartTele.setOption({

        // Define colors
        color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],

        // Global text styles
        textStyle: {
            fontFamily: 'Roboto, Arial, Verdana, sans-serif',
            fontSize: 13
        },

        // Chart animation duration
        animationDuration: 750,

        // Setup grid
        grid: {
            left: 0,
            right: 40,
            top: 35,
            bottom: 0,
            containLabel: true
        },

        // Add legend
        legend: {
            data: telemarketing,
            itemHeight: 8,
            itemGap: 20,
            textStyle: {
                padding: [0, 5]
            }
        },

        // Add tooltip
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.75)',
            padding: [10, 15],
            textStyle: {
                fontSize: 13,
                fontFamily: 'Roboto, sans-serif'
            }
        },

        // Horizontal axis
        xAxis: [{
            type: 'category',
            data: telelabelAxisX,
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                    type: 'dashed'
                }
            }
        }],

        // Vertical axis
        yAxis: [{
            type: 'value',

            axisLabel: {
                color: '#333',
                formatter: '{value} cbm'
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
                }
            },
        }],
        
        // Add series
        series: teleseries,
        },true);
    }
    // end of update barchart function *******************************


        // Initialize module
        // ------------------------------

    // document.addEventListener('DOMContentLoaded', function() {

        // EchartsColumnsWaterfalls.init();
        // let formData = {
        // marketing_id: $("#select_telemarketing option:selected").val(),
        // wilayah_id: $("#select_telewilayah option:selected").val(),
        // filter_date: $("#filter_date_tele").val(),
        // range_type: $("#select_telerange option:selected").val(),
        // filter_type: 'telemarketing',
        // };

        // $.ajax({
        //     type: 'GET',
        //     url: `{{url('/grafik-kubikasi-filter')}}`,
        //     data: formData,
        //     dataType: 'json',
        //     encode: true,
            
        //     success:function(data){
        //         telemarketingChartUpdate(data);
        //         TelemarketingData=data;
        //     }
        // })

        // formData = {
        // marketing_id: $("#select_marketing option:selected").val(),
        // wilayah_id: $("#select_wilayah option:selected").val(),
        // filter_date: $("#filter_date").val(),
        // range_type: $("#select_range option:selected").val(),
        // filter_type: 'marketing',
        // };

        // $.ajax({
        //     type: 'GET',
        //     url: `{{url('/grafik-kubikasi-filter')}}`,
        //     data: formData,
        //     dataType: 'json',
        //     encode: true,
            
        //     success:function(data){
        //         marketingChartUpdate(data);
        //         MarketingData=data;
        //     }
        // })

    // });
    
    
</script>

@endsection