@php
    use App\Http\Controllers\Mod\ModFinancialCommissionPayment;
    use App\Http\Controllers\ModTool;
    use App\Http\Controllers\ModCronos;
    use \App\Http\Controllers\ModFinancial;

//    $record_fin_commission_pay = ModFinancialCommissionPayment::informationPaySales([
//        'idUserCommission' => $id_user,
//        'idPaymentMethod' => 1, //RECORRENTE
//        'idStatusFinDebt' => 1, //PAGO
//        'idStatusRegSales' => 1, //ATIVO
//        'idStatusRegTable' => 1, //ATIVO
//
//        'dateMonth' => 7,
//        'dateYear' => $date_year,
//        'optionList' => 'f',
//
//    ]);
    $option_value_rec='';
    $option_monthe='';
    $grafic_value_event='';
@endphp

@for($i = $date_monthe_retroact+1; $i <= $date_monthe; $i++)
{{--    $record = DB::table('mod_fin_commission_pay_sales')--}}
{{--    ->where([--}}
{{--    'idUserCommission'=>$profile->idUser,--}}
{{--    'idStatusReg' => 1,--}}
{{--    'idStatusFinDebt' => 1,--}}
{{--    'idManager' => $profile->idManager,--}}

    @php
        $record_fin_commission_pay_rec = ModFinancialCommissionPayment::informationPaySales([

            'idUserCommission' => $id_user,
            'idPaymentMethod' => 1, //RECORRENTE
            'idStatusFinDebt' => 1, //PAGO
            'idStatusRegSales' => 1, //ATIVO
            'idStatusRegTable' => 1, //ATIVO

            'dateMonth' => $i,
            'dateYear' => $date_year,
            'optionList' => 'f',

        ]);


        $record_fin_commission_pay_event = ModFinancialCommissionPayment::informationPaySales([
            'idUserCommission' => $id_user,
            'idPaymentMethod' => 2, //EVENTUAL
            'idStatusFinDebt' => 1, //PAGO
            'idStatusRegSales' => 1, //ATIVO
            'idStatusRegTable' => 1, //ATIVO

            'dateMonth' => $i,
            'dateYear' => $date_year,
            'optionList' => 'f',

        ]);
        $option_monthe.= "'".strtoupper(ModCronos::numbersToMonth($i-1))."',";
        $option_value_rec_i=isset($record_fin_commission_pay_rec->commissionSalesOrderValue)?$record_fin_commission_pay_rec->commissionSalesOrderValue:0;
        $option_value_rec.= "'".intval($option_value_rec_i)."',";
        $grafic_value_event_i=isset($record_fin_commission_pay_event->commissionProdServValue)?$record_fin_commission_pay_event->commissionProdServValue:0;
        $grafic_value_event .= "'".$grafic_value_event_i."',";

    @endphp

@endfor

@php
    $grafic_monthe =ModTool::substr_right($option_monthe,1);
    $grafic_value_rec = ModTool::substr_right($option_value_rec,1);
    $grafic_value_event = ModTool::substr_right($grafic_value_event,1);

@endphp

<script>
    // ==============================================================
    // Bar chart option
    // ==============================================================
    var myChart = echarts.init(document.getElementById('bar-chart'));


    option = {
        tooltip: {
            trigger: 'axis',
            valueFormatter: (value) => formatMoney(value,'pt_BR'),

        },
        legend: {},
        toolbox: {
            show: true,
            feature: {
                // dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // dataView: { readOnly: false },
                magicType: {
                    type: ['line', 'bar'],
                    title:{ line:'Em Linhas',
                            bar:'Em Barras'},
                    iconStyle:{
                       // color:'#FF0000',
                        borderColor:'#99abb4'
                    },
                },


                // restore: {},
                saveAsImage: {
                    title:'Salvar Gráfico',
                    iconStyle:{
                        borderColor:'#99abb4'
                    },
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [{!! $grafic_monthe !!}]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: val => `R$ ${formatMoney(val,'pt_BR')}`

            }
        },
        series: [
            {
                name: 'Recorrente',
                type: 'bar',
                data: [{!! $grafic_value_event !!}],
                lineStyle: {
                    color:'#007bff',
                    // width: 4,
                    // type: 'dashed'
                },
                symbol: 'triangle',
                itemStyle: {
                    // borderWidth: 4,
                    // borderColor: '#000000',
                    color:'#007bff',
                },
                // markPoint: {
                //     data: [
                //         { type: 'max', name: 'Max' },
                //         { type: 'min', name: 'Min' }
                //     ]
                // },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            },
            {
                name: 'Eventual',
                type: 'bar',
                data: [{!! $grafic_value_rec !!}],
                lineStyle: {
                    color:'#26dad2',
                },
                itemStyle: {
                    color:'#26dad2',
                },
                markLine: {
                    data: [
                        { type: 'average', name: 'Avg' },
                        [
                            {
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            },
                            {
                                symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: 'Max'
                                },
                                type: 'max',
                                name: '最高点'
                            }
                        ]
                    ]
                }
            }
        ]
    };
    // use configuration item and data specified to show chart
    myChart.setOption(option, true), $(function () {
        function resize() {
            setTimeout(function () {
                myChart.resize()
            }, 100)
        }

        $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
    });

</script>

{{--{{ dd($grafic_monthe,$grafic_value_rec,$grafic_value_event,) }}--}}