@extends('layouts.admin')

@section('content')
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Payment Graph</x-page.header>
        <div class="p-5 mb-6 bg-white item2-gl-nav shadow-sm">
            <div class="">
                <label class="me-2 mt-3 mb-sm-1">Filter By Certain Period:</label>
                <form action="{{route('admin.summary.payment.graph')}}" id="search_month_form" method="get">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="mt-3 mb-sm-1"> from: </label>
                            <div>
                                <input value="{{ request()->start_date }}" type="date" class="form-control" name="start_date" id="from" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="mt-3 mb-sm-1"> to: </label>
                            <div>
                                <input value="{{ request()->end_date }}" type="date" class="form-control" name="end_date" id="to" required>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center mt-4">
                        <input type="submit" class="btn btn-primary me-2" value="Submit">
                        <a href="{{route('admin.summary.payment.graph')}}" class="btn btn-danger" title="Reset">Reset</a>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    @if(!request()->start_date && !request()->end_date)
                    <div class="card-header">
                        <h4 class="card-title">{{ Carbon\Carbon::now()->monthName }}</h4>
                    </div>
                    @endif
                    <div class="card-body">
                        <label class="me-2 mt-3 mb-sm-1">Opay</label>
                        <div id="echart1" class="chart-pie overflow-hidden"></div>
                    </div>
                    <div class="card-body">
                        <label class="me-2 mt-3 mb-sm-1">PaymobUAE</label>
                        <div id="echart2" class="chart-pie overflow-hidden"></div>
                    </div>
                    <div class="card-body">
                        <label class="me-2 mt-3 mb-sm-1">PaymobEGP</label>
                        <div id="echart3" class="chart-pie overflow-hidden"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('admin-js')
<!-- CHARTJS CHART -->
<script src="{{ env('SECURE_ASSETS').'/plugins/echarts/echarts.js' }}"></script>
{{-- <script src="{{ env('SECURE_ASSETS').'/js/index4.js' }}"></script> --}}
<script>
    $(function() {
        let days=@json($days);
        let opay=@json($opay);
        let paymob=@json($paymob);
        let paymobEG=@json($paymob_eg);
        let refund_visa=@json($refund_visa);
        let refund_paymob_aed=@json($refund_paymob_aed);
        let refund_paymob_egp=@json($refund_paymob_egp);

        // <-- Begin::Opay chart -->
        var chartdata = [
            {
                name: 'Opay',
                type: 'bar',
                data: opay,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            },
            {
                name: 'Refund Visa',
                type: 'bar',
                data: refund_visa,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            }
        ];

        var chart = document.getElementById('echart1');
        var barChart = echarts.init(chart);

        var option = {
            grid: {
                top: '6',
                right: '50',
                bottom: '20',
                left: '0',
            },
            xAxis: {
                data: days,
                name:'days',
                nameLocation : 'end',
                axisLine: {
                    lineStyle: {
                    color: '#000'
                    }
                },
                axisLabel: {
                    fontSize: 12,
                    color: '#9e9db5'
                }
                },
            tooltip: {
                show: true,
                showContent: true,
                alwaysShowContent: false,
                triggerOn: 'mousemove',
                trigger: 'axis',
                axisPointer:
                {
                    label: {
                        show: false,
                    }
                }

            },
            yAxis: {
                // data:,
                splitLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#a7b4c9'
                }
            },
            series: chartdata,
            animation:true,
            animationEasing:'cubicInOut',
            color:[ '#223756', '#8c2828', '#ef5050',],
            barMaxWidth: 10,
            @if (request()->start_date && request()->end_date)
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                },

            ],
            @endif
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false,title:'data view',lang:['data view', 'turn off', 'refresh'] },
                    restore: { show: true,title:'restore', },
                    saveAsImage: {
                        show: true, name:'Payment chart', excludeComponents:['toolbox'],
                        title:'save as image',
                    }
                }
            },

        };

        barChart.setOption(option);
        // <-- End::Opay chart -->

        // <-- Begin::Paymob UAE chart -->
        var chartdata2 = [
            {
                name: 'PaymobUAE',
                type: 'bar',
                data: paymob,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            },
            {
                name: 'Refund Paymob AED',
                type: 'bar',
                data: refund_paymob_aed,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            }
        ];

        var chart2 = document.getElementById('echart2');
        var barChart2 = echarts.init(chart2);

        var option2 = {
            grid: {
                top: '6',
                right: '50',
                bottom: '20',
                left: '0',
            },
            xAxis: {
                data: days,
                name:'days',
                nameLocation : 'end',
                axisLine: {
                    lineStyle: {
                    color: '#000'
                    }
                },
                axisLabel: {
                    fontSize: 12,
                    color: '#9e9db5'
                }
                },
            tooltip: {
                show: true,
                showContent: true,
                alwaysShowContent: false,
                triggerOn: 'mousemove',
                trigger: 'axis',
                axisPointer:
                {
                    label: {
                        show: false,
                    }
                }

            },
            yAxis: {
                // data:,
                splitLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#a7b4c9'
                }
            },
            series: chartdata2,
            animation:true,
            animationEasing:'cubicInOut',
            color:[ '#223756', '#8c2828', '#ef5050',],
            barMaxWidth: 10,
            @if (request()->start_date && request()->end_date)
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                },

            ],
            @endif
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false,title:'data view',lang:['data view', 'turn off', 'refresh'] },
                    restore: { show: true,title:'restore', },
                    saveAsImage: {
                        show: true, name:'Payment chart', excludeComponents:['toolbox'],
                        title:'save as image',
                    }
                }
            },

        };

        barChart2.setOption(option2);
        // <-- End::Paymob UAE chart -->

        // <-- Begin::Paymob EG chart -->
        var chartdata3 = [
            {
                name: 'PaymobEG',
                type: 'bar',
                data: paymobEG,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            },
            {
                name: 'Refund Paymob EGP',
                type: 'bar',
                data: refund_paymob_egp,
                barMaxWidth: 10,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: [50, 50]
                    },
                    normal: {
                        barBorderRadius: [50, 50, 0 ,0 ]
                    }
                }
            }
        ];

        var chart3 = document.getElementById('echart3');
        var barChart3 = echarts.init(chart3);

        var option3 = {
            grid: {
                top: '6',
                right: '50',
                bottom: '20',
                left: '0',
            },
            xAxis: {
                data: days,
                name:'days',
                nameLocation : 'end',
                axisLine: {
                    lineStyle: {
                    color: '#000'
                    }
                },
                axisLabel: {
                    fontSize: 12,
                    color: '#9e9db5'
                }
                },
            tooltip: {
                show: true,
                showContent: true,
                alwaysShowContent: false,
                triggerOn: 'mousemove',
                trigger: 'axis',
                axisPointer:
                {
                    label: {
                        show: false,
                    }
                }

            },
            yAxis: {
                // data:,
                splitLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(227, 237, 252,0.5)'
                    }
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#a7b4c9'
                }
            },
            series: chartdata3,
            animation:true,
            animationEasing:'cubicInOut',
            color:[ '#223756', '#8c2828', '#ef5050',],
            barMaxWidth: 10,
            @if (request()->start_date && request()->end_date)
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                },

            ],
            @endif
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false,title:'data view',lang:['data view', 'turn off', 'refresh'] },
                    restore: { show: true,title:'restore', },
                    saveAsImage: {
                        show: true, name:'Payment chart', excludeComponents:['toolbox'],
                        title:'save as image',
                    }
                }
            },

        };

        barChart3.setOption(option3);
        // <-- End::Paymob EG chart -->
    });
</script>

@endsection