@extends('admin.layout.master')
@section('content')
    <section id="dashboard-ecommerce">
        <div class="row">
            @if(auth()->user()->hasPermission('read_products'))

            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-header d-flex flex-column align-items-start pb-0">
                        <div class="avatar bg-rgba-primary p-50 m-0">
                            <div class="avatar-content">
                                <i class="feather icon-users text-primary font-medium-5"></i>
                            </div>
                        </div>
                        <h2 class="text-bold-700 mt-1">{{\App\Models\Product::where('status','active')->count()}}</h2>
                        <p class="mb-0">@lang('admin.productsactive')</p>
                    </div>

                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-header d-flex flex-column align-items-start pb-0">
                        <div class="avatar bg-rgba-success p-50 m-0">
                            <div class="avatar-content">
                                <i class="feather icon-credit-card text-success font-medium-5"></i>
                            </div>
                        </div>
                        <h2 class="text-bold-700 mt-1">{{\App\Models\Product::where('status','pending')->count()}}</h2>
                        <p class="mb-0">@lang('admin.productspending')</p>
                    </div>

                </div>
            </div>

            @endif
                @if(auth()->user()->hasPermission('read_categories'))

                <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-header d-flex flex-column align-items-start pb-0">
                        <div class="avatar bg-rgba-danger p-50 m-0">
                            <div class="avatar-content">
                                <i class="feather icon-shopping-cart text-danger font-medium-5"></i>
                            </div>
                        </div>
                        <h2 class="text-bold-700 mt-1">{{\App\Models\Category::count()}}</h2>
                        <p class="mb-0">@lang('admin.categories')</p>
                    </div>

                </div>
            </div>
          @endif

                @if(auth()->user()->hasPermission('read_users'))

                <div class="col-lg-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-header d-flex flex-column align-items-start pb-0">
                        <div class="avatar bg-rgba-warning p-50 m-0">
                            <div class="avatar-content">
                                <i class="feather icon-package text-warning font-medium-5"></i>
                            </div>
                        </div>
                        <h2 class="text-bold-700 mt-1">{{\App\Models\User::count()}}</h2>
                        <p class="mb-0">@lang('admin.clients')</p>
                    </div>

                </div>
            </div>

                    @endif
        </div>


        <!-- Wishlist Starts -->
{{--        <div class="card-header d-flex justify-content-between align-items-end">--}}
{{--            <h4 class="card-title">اخر المنتجات المضافه </h4>--}}
{{--        </div>--}}

{{--        <section id="wishlist" class="grid-view wishlist-items">--}}

{{--            @include('admin.products.products.data')--}}

{{--        </section>--}}

        <div class="row">
            @if(auth()->user()->hasPermission('read_users'))
            <div class="col-lg-6 col-md-6 col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-end">
                        <h4 class="mb-0">@lang('admin.users')</h4>
                        <p class="font-medium-5 mb-0"><i class="feather icon-help-circle text-muted cursor-pointer"></i></p>
                    </div>
                    <div class="card-content">
                        <div class="card-body px-0 pb-0">
                            <canvas id="canvas" height="280" width="600"></canvas>

                        </div>
                    </div>
                </div>
            </div>
                @endif

            @if(auth()->user()->hasPermission('read_orders'))
            <div class="col-lg-6 col-md-6 col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-end">
                        <h4 class="mb-0">@lang('admin.orders')</h4>
                        <p class="font-medium-5 mb-0"><i class="feather icon-help-circle text-muted cursor-pointer"></i></p>
                    </div>
                    <div class="card-content">
                        <div class="card-body px-0 pb-0">
                            <div id="goal-overview-chart" class="mt-75"></div>
                            <div class="row text-center mx-0">
                                <div class="col-4 border-top border-right d-flex align-items-between flex-column py-1">
                                    <p class="mb-50">@lang('admin.orders')</p>
                                    <p class="font-large-1 text-bold-700">{{$sales_data_all}}</p>
                                </div>
                                <div class="col-4 border-top d-flex align-items-between flex-column py-1">
                                    <p class="mb-50">@lang('admin.complete')</p>
                                    <p class="font-large-1 text-bold-700">{{$sales_data_complete}}</p>
                                </div>
                                <div class="col-4 border-top d-flex align-items-between flex-column py-1">
                                    <p class="mb-50">@lang('admin.pending')</p>
                                    <p class="font-large-1 text-bold-700">{{$sales_data_pending}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>

        @if(auth()->user()->hasPermission('read_orders'))
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-end">
                        <h4 class="card-title">@lang('admin.sales')</h4>
                        <p class="font-medium-5 mb-0"><i class="feather icon-settings text-muted cursor-pointer"></i></p>
                    </div>
                    <div class="card-content">
                        <div class="card-body">

                            <div class="chart" id="line-chart" style="height: 513px"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        @endif

    </section>

@endsection
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

    {{--morris --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="{{ asset('dashboard/morris.min.js') }}"></script>
<script>
    $('body').on('submit','#delform',function (e) {
        e.preventDefault();
        var url = $(this).attr('action');
        // alert(url);

        $.ajax({
            url: url,
            method: "delete",
            context:this,
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function (response) {
                if (response.status == 'success'){
                    $(this).parent().parent().parent().remove();
                    toastr.success("@lang('admin.successfuly_deleted')");

                    // table.ajax.reload(null, false);
                }
                // console.log(response);
                // window.location.reload();
            }
        });
    });

    $('body').on('submit','.stat',function (e) {
        e.preventDefault();

        var url = $(this).attr('action');

        $.ajax({
            url: url,
            method: "post",
            data: new FormData(this),
            dataType: 'html',

            cache       : false,
            contentType : false,
            processData : false,

            success: function (response) {

                toastr.success("@lang('admin.done_the_statues_is_changed')");

                $('#wishlist').empty()
                $('#wishlist').append(response);


                // $("#addform")[0].reset();

                // window.location.reload();
            },

        });

    });

{{--@dd($data)--}}
    $(window).on("load", function () {
    var $primary = '#7367F0';
    var $success = '#28C76F';
    var $danger = '#EA5455';
    var $warning = '#FF9F43';
    var $info = '#00cfe8';
    var $primary_light = '#A9A2F6';
    var $danger_light = '#f29292';
    var $success_light = '#55DD92';
    var $warning_light = '#ffc085';
    var $info_light = '#1fcadb';
    var $strok_color = '#b9c3cd';
    var $label_color = '#e7e7e7';
    var $white = '#fff';

    var passedArray = {!! json_encode($sales_data_year,true) !!} ;
    var activeProduct = {!! json_encode($activeProduct,true) !!} ;
    var pendingProduct = {!! json_encode($pendingProduct,true) !!} ;

    var revenueChartoptions = {
        chart: {
            height: 270,
            toolbar: { show: false },
            type: 'line',
        },
        stroke: {
            curve: 'smooth',
            dashArray: [0, 8],
            width: [4, 2],
        },
        grid: {
            borderColor: $label_color,
        },
        legend: {
            show: false,
        },
        colors: [$danger_light, $strok_color],

        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                inverseColors: false,
                gradientToColors: [$primary, $strok_color],
                shadeIntensity: 1,
                type: 'horizontal',
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100, 100, 100]
            },
        },
        markers: {
            size: 0,
            hover: {
                size: 5
            }
        },
        xaxis: {
            labels: {
                style: {
                    colors: $strok_color,
                }
            },
            axisTicks: {
                show: false,
            },
            categories: passedArray,
            axisBorder: {
                show: false,
            },
            tickPlacement: 'on',
        },
        yaxis: {
            tickAmount: 5,
            labels: {
                style: {
                    color: $strok_color,
                },
                formatter: function (val) {
                    return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                }
            }
        },
        tooltip: {
            x: { show: false }
        },
        series: [
                @foreach ($sales_data as $data)


            {
            name: "{{$data->year.'-'.$data->month}}",
            data: ["{{number_format($data->sum , 3)}}"]
            },
            @endforeach

        ],

    }

    var revenueChart = new ApexCharts(
        document.querySelector("#revenue-chart"),
        revenueChartoptions
    );

    revenueChart.render();




    //////////////


    var goalChartoptions = {
        chart: {
            height: 250,
            type: 'radialBar',
            sparkline: {
                enabled: true,
            },
            dropShadow: {
                enabled: true,
                blur: 3,
                left: 1,
                top: 1,
                opacity: 0.1
            },
        },
        colors: [$success],
        plotOptions: {
            radialBar: {
                size: 110,
                startAngle: -150,
                endAngle: 150,
                hollow: {
                    size: '77%',
                },
                track: {
                    background: $strok_color,
                    strokeWidth: '50%',
                },
                dataLabels: {
                    name: {
                        show: false
                    },
                    value: {
                        offsetY: 18,
                        color: '#99a2ac',
                        fontSize: '4rem'
                    }
                }
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                type: 'horizontal',
                shadeIntensity: 0.5,
                gradientToColors: ['#00b5b5'],
                inverseColors: true,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            },
        },
        series: [{{$precetage}}],
        stroke: {
            lineCap: 'round'
        },

    }

    var goalChart = new ApexCharts(
        document.querySelector("#goal-overview-chart"),
        goalChartoptions
    );

    goalChart.render();








});

    //line chart
    var line = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: [
                @foreach ($sales_data as $data)
            {
                ym: "{{ $data->year }}-{{ $data->month }}", sum: "{{ $data->sum == 'null' ? 0 : $data->sum }}"
            },
            @endforeach
        ],
        xkey: 'ym',
        ykeys: ['sum'],
        labels: ['@lang('admin.total')'],
        lineWidth: 2,
        hideHover: 'auto',
        gridStrokeWidth: 0.4,
        pointSize: 4,
        gridTextFamily: 'Open Sans',
        gridTextSize: 10
    });

</script>
<script>
    var month = ;
    var user = ;
    var user_notactice = ;
    var barChartData = {
        labels: month,
        datasets: [

            {
                label: "@Lang('admin.aciiveUser')",
                backgroundColor: "yellow",
                data: user,
            },
            {
                label: "@Lang('admin.notActive')",
                backgroundColor: "blue",
                data: user_notactice,
            }

        ],

    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: '#c1c1c1',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: '@Lang('admin.users')'
                }
            }
        });
    };
</script>

@endpush