<!-- Bar chart -->
<div class="card" id="c3-chart">
    <div class="card-header header-elements-inline">
        <h5 class="card-title"></h5>
        <div class="header-elements">
            {{-- <p id="title-txt" style="border: 5px solid #C9C9C9; padding: 0.3em 1em;border-radius: 2px; position: absolute; left: 42%; top: 3%;">
            </p> --}}

            <select id="chart-type-select" onchange="ChartsC3.chart_type_change(this)">
                @foreach ($moealSetFile['ChartStyleOptions'] as $option)
                    <option value="{{ $option['Value'] }}">{{ $option['Caption'] }}</option>
                @endforeach
                {{-- <option value="spline" selected>라인차트</option>
                <option value="bar">막대차트</option>
                <option value="pie">파이차트</option>
                <option value="donut">도넛차트</option>
                <option value="scatter">분포차트</option> --}}
            </select>
        </div>
    </div>

    <div class="card-body">
        <div class="chart-container" id="chart-group">
        </div>
    </div>
</div>
<!-- /bar chart -->

@push('js')
    <script>
        $(document).ready(function() {
            // ChartsC3.show_popup_callback()
        });

        (function( ChartsC3, $, undefined ) {
            ChartsC3.moealSetFile = {!! json_encode($moealSetFile) !!};
            ChartsC3.draw_parameter;

            ChartsC3.chart_type_change = function ($this) {
                drawBars(ChartsC3.draw_parameter['columns'], ChartsC3.draw_parameter['categories'])
            }

            ChartsC3.get_parameter = function (type1_parameter) {
                let parameter = {
                    QueryVars: {
                        QueryName: ChartsC3.moealSetFile['QueryVars']['QueryName']
                    },
                    ChartLine2Vars: {
                        ListToken: type1_parameter['ListType1Vars']['ListToken'],

                        FilterDate: ChartsC3.moealSetFile['QueryVars']['FilterDate'],
                        StartDate: type1_parameter['ListType1Vars']['StartDate'],
                        EndDate: type1_parameter['ListType1Vars']['EndDate'],

                        FilterFirst: type1_parameter['ListType1Vars']['FilterFirst'],
                        StartFirst: type1_parameter['ListType1Vars']['StartFirst'],
                        EndFirst: type1_parameter['ListType1Vars']['EndFirst'],

                        FilterSecond: type1_parameter['ListType1Vars']['FilterSecond'],
                        StartSecond: type1_parameter['ListType1Vars']['StartSecond'],
                        EndSecond: type1_parameter['ListType1Vars']['EndSecond'],

                        FilterThird: type1_parameter['ListType1Vars']['FilterThird'],
                        StartThird: type1_parameter['ListType1Vars']['StartThird'],
                        EndThird: type1_parameter['ListType1Vars']['EndThird'],

                        FilterFourth: type1_parameter['ListType1Vars']['FilterFourth'],
                        StartFourth: type1_parameter['ListType1Vars']['StartFourth'],
                        EndFourth: type1_parameter['ListType1Vars']['EndFourth'],

                        Balance: type1_parameter['ListType1Vars']['Balance'],

                        OrderBy: type1_parameter['ListType1Vars']['OrderBy'],
                    },
                    PageVars: {
                        Limit: type1_parameter['PageVars']['Limit'],
                        Offset: type1_parameter['PageVars']['Offset'],
                    }
                }

                // console.log(parameter)
                return parameter;
            }

            ChartsC3.show_popup_callback = async function (type1_parameter) {
                $('#c3-chart').find('#chart-group').html(`
                    <div class="chart" id="c3-bar-chart"></div>
                `)

                let response = await get_api_data(ChartsC3.moealSetFile['General']['PageApi'], ChartsC3.get_parameter(type1_parameter));

                let data = response.data;
                let body_page = data.BodyPage;

                let options = {
                    row: 'X',
                    column: 'Y',
                    value: 'Sum'
                };
                let output = jsonToPivotjson(body_page, options)
                .map(function (obj) {
                    delete obj.X;
                    delete obj.a;
                    return obj;
                })

                let keys = _.uniq(_.pluck(body_page, 'Y')).filter(key => key != 'a');
                let columns = keys.map(function (key) {
                    let arr = _.pluck(output, key);
                    arr.unshift(key);
                    return arr;
                });

                let categories = _.uniq(_.pluck(body_page, 'X')).map(function (date) {
                    return moment(new Date(date)).format(ChartsC3.moealSetFile['FormVars']['Title']['AxisXForamt']);
                })

                ChartsC3.draw_parameter = { columns: columns, categories: categories }
                drawBars(columns, categories)
            }
        }( window.ChartsC3 = window.ChartsC3 || {}, jQuery ));

        var drawBars = function (columns, categories) {
            if (typeof c3 == 'undefined') {
                console.warn('Warning - c3.min.js is not loaded.');
                return;
            }

            // Generate chart
            var bar_chart = c3.generate({
                bindto: '#c3-bar-chart',
                size: { height: 400, width: 960 },
                data: {
                    // columns: [
                    //     ['blbz', 0, 200, 0, 400, 150, 250],
                    //     ['aipn', 130, 100, 140, 200, 150, 50],
                    //     ['black', 120, 85, 140, 90, 60, 20],
                    //     ['white', 115, 55, 80, 120, 115, 75],
                    // ],
                    columns,
                    type: $('#chart-type-select').val(),
                    // bar, pie, line, donut
                },
                axis: {
                    x: {
                        type: 'category',
                        categories: categories,
                        label: ChartsC3.moealSetFile['FormVars']['Title']['AxisXLabel']
                    },
                    y: {
                        tick: {
                            format: d3.format(ChartsC3.moealSetFile['FormVars']['Title']['AxisYForamt'])
                        },
                        label: ChartsC3.moealSetFile['FormVars']['Title']['AxisYLabel']
                    },
                },
                color: {
                    pattern: [
                        '#2196F3', '#FF9800', '#4CAF50', '#FF0000',
                        "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177" ,"#0d5ac1" ,
                        "#f205e6" ,"#1c0365" ,"#14a9ad" ,"#4ca2f9" ,"#a4e43f" ,"#d298e2" ,"#6119d0",
                        "#d2737d" ,"#c0a43c" ,"#f2510e" ,"#651be6" ,"#79806e" ,"#61da5e" ,"#cd2f00" ,
                        "#9348af" ,"#01ac53" ,"#c5a4fb" ,"#996635","#b11573" ,"#4bb473" ,"#75d89e" ,
                        "#2f3f94" ,"#2f7b99" ,"#da967d" ,"#34891f" ,"#b0d87b" ,"#ca4751" ,"#7e50a8" ,
                        "#c4d647" ,"#e0eeb8" ,"#11dec1" ,"#289812" ,"#566ca0" ,"#ffdbe1" ,"#2f1179" ,
                        "#935b6d" ,"#916988" ,"#513d98" ,"#aead3a", "#9e6d71", "#4b5bdc", "#0cd36d",
                        "#250662", "#cb5bea", "#228916", "#ac3e1b", "#df514a", "#539397", "#880977",
                        "#f697c1", "#ba96ce", "#679c9d", "#c6c42c", "#5d2c52", "#48b41b", "#e1cf3b",
                        "#5be4f0", "#57c4d8", "#a4d17a", "#225b8", "#be608b", "#96b00c", "#088baf",
                        "#f158bf", "#e145ba", "#ee91e3", "#05d371", "#5426e0", "#4834d0", "#802234",
                        "#6749e8", "#0971f0", "#8fb413", "#b2b4f0", "#c3c89d", "#c9a941", "#41d158",
                        "#fb21a3", "#51aed9", "#5bb32d", "#807fb", "#21538e", "#89d534", "#d36647",
                        "#7fb411", "#0023b8", "#3b8c2a", "#986b53", "#f50422", "#983f7a", "#ea24a3",
                        "#79352c", "#521250", "#c79ed2", "#d6dd92", "#e33e52", "#b2be57", "#fa06ec",
                        "#1bb699", "#6b2e5f", "#64820f", "#1c271", "#21538e", "#89d534", "#d36647",
                        "#7fb411", "#0023b8", "#3b8c2a", "#986b53", "#f50422", "#983f7a", "#ea24a3",
                        "#79352c", "#521250", "#c79ed2", "#d6dd92", "#e33e52", "#b2be57", "#fa06ec",
                        "#1bb699", "#6b2e5f", "#64820f", "#1c271", "#9cb64a", "#996c48", "#9ab9b7",
                        "#06e052", "#e3a481", "#0eb621", "#fc458e", "#b2db15", "#aa226d", "#792ed8",
                        "#73872a", "#520d3a", "#cefcb8", "#a5b3d9", "#7d1d85", "#c4fd57", "#f1ae16",
                        "#8fe22a", "#ef6e3c", "#243eeb", "#1dc18", "#dd93fd", "#3f8473", "#e7dbce",
                        "#421f79", "#7a3d93", "#635f6d", "#93f2d7", "#9b5c2a", "#15b9ee", "#0f5997",
                        "#409188", "#911e20", "#1350ce", "#10e5b1", "#fff4d7", "#cb2582", "#ce00be",
                        "#32d5d6", "#17232", "#608572", "#c79bc2", "#00f87c", "#77772a", "#6995ba",
                        "#fc6b57", "#f07815", "#8fd883", "#060e27", "#96e591", "#21d52e", "#d00043",
                        "#b47162", "#1ec227", "#4f0f6f", "#1d1d58", "#947002", "#bde052", "#e08c56",
                        "#28fcfd", "#bb09b", "#36486a", "#d02e29", "#1ae6db", "#3e464c", "#a84a8f",
                        "#911e7e", "#3f16d9", "#0f525f", "#ac7c0a", "#b4c086", "#c9d730", "#30cc49",
                        "#3d6751", "#fb4c03", "#640fc1", "#62c03e", "#d3493a", "#88aa0b", "#406df9",
                        "#615af0", "#4be47", "#2a3434", "#4a543f", "#79bca0", "#a8b8d4", "#00efd4",
                        "#7ad236", "#7260d8", "#1deaa7", "#06f43a", "#823c59", "#e3d94c", "#dc1c06",
                        "#f53b2a", "#b46238", "#2dfff6", "#a82b89", "#1a8011", "#436a9f", "#1a806a",
                        "#4cf09d", "#c188a2", "#67eb4b", "#b308d3", "#fc7e41", "#af3101", "#ff065",
                        "#71b1f4", "#a2f8a5", "#e23dd0", "#d3486d", "#00f7f9", "#474893", "#3cec35",
                        "#1c65cb", "#5d1d0c", "#2d7d2a", "#ff3420", "#5cdd87", "#a259a4", "#e4ac44",
                        "#1bede6", "#8798a4", "#d7790f", "#b2c24f", "#de73c2", "#d70a9c", "#25b67",
                        "#88e9b8", "#c2b0e2", "#86e98f", "#ae90e2", "#1a806b", "#436a9e", "#0ec0ff",
                        "#f812b3", "#b17fc9", "#8d6c2f", "#d3277a", "#2ca1ae", "#9685eb", "#8a96c6",
                        "#dba2e6", "#76fc1b", "#608fa4", "#20f6ba", "#07d7f6", "#dce77a", "#77ecca"
                    ]
                },
                bar: {
                    width: {
                        ratio: 0.5
                    }
                },
                grid: {
                    y: {
                        show: true
                    }
                }
            });

            // Resize chart on sidebar width change
            $('.sidebar-control').on('click', function() {
                bar_chart.resize();
            });
        }
    </script>
@endpush
