@extends('admin.layouts.container')

@section('content')

    <section class="general-report">
        <div class="row no-gutters justify-content-center">
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>اشتراكات الدورات</p>
                            <h2 class="counter">{{$currentCoursesCount ?? 0}}</h2>
                        </div>
                        <span class="icon">
                                <i class="fas fa-th-large"></i>
                            </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left">
                            <span><i class="fas fa-sort-{{$countPercentage > 0 ? 'up text-success' : 'down text-danger'}}"></i> {{$countPercentage . ' %'}} </span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right">
                            <span><b>{{$prevCoursesCount ?? 0}}</b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>عائدات الدورات</p>
                            <h2 class="counter">{{$currentTotal ?? 0}}</h2>
                        </div>
                        <span class="icon">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left">
                            <span><i class="fas fa-sort-{{$totalPercentage > 0 ? 'up text-success' : 'down text-danger'}}"></i> {{$totalPercentage . ' %'}} </span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right">
                            <span><b>{{$previousTotal}}</b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>المنتجات</p>
                            <h2 class="counter">{{$currentOrdersCount ?? 0}}</h2>
                        </div>
                        <span class="icon">
                                <i class="fas fa-th-large"></i>
                            </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left">
                            <span><i class="fas fa-sort-{{$ordersCountPercentage > 0 ? 'up text-success' : 'down text-danger'}}"></i>{{$ordersCountPercentage . ' %'}}</span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right">
                            <span><b>{{$prevOrdersCount ?? 0}}</b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>عائدات المنتجات</p>
                            <h2 class="counter">{{$currentPrice ?? 0}}</h2>
                        </div>
                        <span class="icon">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left">
                            <span><i class="fas fa-sort-{{$ordersTotalPercentage > 0 ? 'up text-success' : 'down text-danger'}}"></i>{{$ordersCountPercentage . ' %'}}</span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right">
                            <span><b>{{$prevPrice ?? 0}}</b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>عائدات المنتجات</p>
                            <h2 class="counter">{{$currentPrice ?? 0}}</h2>
                        </div>
                        <span class="icon">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left">
                            <span><i class="fas fa-sort-{{$ordersTotalPercentage > 0 ? 'up text-success' : 'down text-danger'}}"></i>{{$ordersCountPercentage . ' %'}}</span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right">
                            <span><b>{{$prevPrice ?? 0}}</b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="items">
                    <div class="top">
                        <div>
                            <p>عدد المتدربين المسجلين</p>
                            <h2 class="counter">{{$traineesCount ?? 0}}</h2>
                        </div>
                        <span class="icon">
                            <i class="fas fa-users"></i>
                        </span>
                    </div>
                    <div class="bottom">
                        <div class="item text-left" style="opacity: 0">
                            <span><i class="fas fa-sort-up"></i></span>
                            <small>هذا الشهر</small>
                        </div>
                        <div class="item text-right" style="opacity: 0">
                            <span><b></b></span>
                            <small>الشهر الماضى</small>
                        </div>
                    </div>
                </div>
            </div>

            {{--##################################################--}}
            {{--            <div class="col-md-6 col-lg-3">--}}
            {{--                <div class="items">--}}
            {{--                    <div class="top">--}}
            {{--                        <div>--}}
            {{--                            <p>المخزون</p>--}}
            {{--                            <h2 class="counter">508</h2>--}}
            {{--                        </div>--}}
            {{--                        <span class="icon">--}}
            {{--                                <i class="fas fa-warehouse"></i>--}}
            {{--                            </span>--}}
            {{--                    </div>--}}
            {{--                    <div class="bottom">--}}
            {{--                        <div class="item text-left">--}}
            {{--                            <span><i class="fas fa-sort-down"></i> 18% </span>--}}
            {{--                            <small>هذا الشهر</small>--}}
            {{--                        </div>--}}
            {{--                        <div class="item text-right">--}}
            {{--                            <span><i class="fas fa-sort-up"></i> 22% </span>--}}
            {{--                            <small>الشهر الماضي</small>--}}
            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            </div>--}}
            {{--            <div class="col-md-6 col-lg-3">--}}
            {{--                <div class="items">--}}
            {{--                    <div class="top">--}}
            {{--                        <div>--}}
            {{--                            <p>الشراء والمصروفات</p>--}}
            {{--                            <h2 class="counter">5208</h2>--}}
            {{--                        </div>--}}
            {{--                        <span class="icon">--}}
            {{--                                <i class="fas fa-shopping-bag"></i>--}}
            {{--                            </span>--}}
            {{--                    </div>--}}
            {{--                    <div class="bottom">--}}
            {{--                        <div class="item text-left">--}}
            {{--                            <span><i class="fas fa-sort-down"></i> 18% </span>--}}
            {{--                            <small>هذا الشهر </small>--}}
            {{--                        </div>--}}
            {{--                        <div class="item text-right">--}}
            {{--                            <span><i class="fas fa-sort-up"></i> 22% </span>--}}
            {{--                            <small>الشهر الماضى</small>--}}
            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            </div>--}}
            {{--##################################################--}}




        </div>
    </section>

    <div class="charts_container">
        <div class="row mt-5">
            {{-- Sales report--}}
            <div class="col-md-12 col-lg-6 p-1">
                <div class="chartLine1">
                    <div class="head p-2">
                        <h6>تقرير المبيعات (الدورات-المنتجات)</h6>
                        {{--                        <input type="text" name="daterange" />--}}
                    </div>
                    <div class="border_items">
                        <div class="chartLine1_det">
                            <div class="items">
                                <h2 class="main-color"> $ <span class="counter current_month"> 13,789</span></h2>
                                <h6> هذا الشهر </h6>
                            </div>
                            <div class="items">
                                <h2> $ <span class="counter prev_month"> 11,759</span></h2>
                                <h6> الشهر الماضى </h6>
                            </div>
                            <div class="float-right col-md-5">
                                <form>
                                    <select name="courses_products" class="custom-select">
                                        {{--                                        <option selected>الترتيب بـ</option>--}}
                                        <option value="courses">الدورات</option>
                                        <option value="products">المنتجات</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                        <div class="chart-container" style="position: relative; height:300px; width:100%">
                            <canvas id="chartLine1" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Sales report--}}
            <div class="col-md-6 col-lg-3 p-2">
                <div class="head p-2">
                    <h6>افضل المبيعات (الدورات) </h6>
                    {{--                    <a href="#">مشاهده الكل</a>--}}
                </div>
                <div class="border_items p-4">
                    <form class="form-row">
                        <div class="form-group col-12 m-0">
                            <select class="custom-select course_category">
                                @if(count($courseCategories))
                                    @foreach($courseCategories as $courseCategory)
                                        <option value="{{$courseCategory->id}}">{{$courseCategory->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </form>
                    <canvas id="myChart" width="200" height="230"></canvas>
                    <div class="pie-det mt-5">
                        <ul class="course_data"></ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 p-2">
                <div class="head p-2">
                    <h6>إفضل المبيعات (المنتجات) </h6>
                    {{--                    <a href="#">مشاهده الكل</a>--}}
                </div>
                <div class="border_items p-4">
                    <form class="form-row">
                        <div class="form-group col-12 m-0">
                            <select class="custom-select product_category">
                                @if(count($productsCategories))
                                    @foreach($productsCategories as $productsCategory)
                                        <option value="{{$productsCategory->id}}">{{$productsCategory->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </form>
                    <canvas id="myChart2" width="200" height="230"></canvas>
                    <div class="pie-det mt-5">
                        <ul class="product_data"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--<section class="general-report">-->
    <!--    <div class="row no-gutters">-->
    <!--        <div class="col-md-6 col-lg-3">-->
    <!--            <div class="items">-->
    <!--                <div class="top">-->
    <!--                    <div>-->
    <!--                        <p>عدد المتدربين المسجلين</p>-->
    <!--                        <h2 class="counter">{{$traineesCount ?? 0}}</h2>-->
    <!--                    </div>-->
    <!--                    <span class="icon">-->
    <!--                        <i class="fas fa-users"></i>-->
    <!--                    </span>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

@endsection

@section('inner_js')
    <script src="{{asset('assets/admin/js/lib/Chart.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lib/chart.js@2.8.0') }}"></script>
    <script src="{{ asset('assets/admin/js/charts.js') }}"></script>

    <script>
        $(document).ready(function () {

            let productCourseSelect = $('select[name="courses_products"]'),
                courseCategory = $('select.course_category'),
                productCategory = $('select.product_category');

            productCourseSelect.change(async function () {
                let data = {type:$(this).val()},
                    url = "{{route('getSalesReportForCoursesAndProducts')}}",
                    method = 'get';

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response){
                    $('.current_month').html(response.currentTotal ?? response.currentPrice);
                    $('.prev_month').html(response.previousTotal ?? response.prevPrice);
                    let courseProductData = [],
                        max = (response.prevOrdersCount ?? response.prevCoursesCount) > (response.currentOrdersCount ?? response.currentCoursesCount) ? (response.prevOrdersCount ?? response.prevCoursesCount) : (response.currentOrdersCount ?? response.currentCoursesCount),
                        date = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        color = '#f10075',
                        currentLocal = "{{getCurrentLocale()}}";

                    if (data.type === 'products'){
                        color = '#00cccc';
                    }

                    for (let i = 0; i < date.length; i++){
                        if (date[i] === response.previousMonth){
                            courseProductData.push((response.prevOrdersCount ?? response.prevCoursesCount))
                        } else if(date[i] === response.currentMonth){
                            courseProductData.push((response.currentOrdersCount ?? response.currentCoursesCount))
                        }
                        else {
                            courseProductData.push(0)
                        }
                    }
                    salesReport(courseProductData, max, color, currentLocal);
                }
            });

            courseCategory.change(async function () {
                let data = {category_id:$(this).val()},
                    url = "{{route('bestCourseSel')}}",
                    method = 'get';

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response){
                    let courseData = [],
                        courseLabels = [],
                        courseDataUl = $('.course_data');
                    courseDataUl.html('');
                    let bgColor = ['info', 'danger', 'warning'];

                    for (let i = 0; i < response.length; i++){
                        courseDataUl.append(`
                        <li><span class="circ bg-`+bgColor[i]+`"></span>`+response[i][0].name+`<strong>`+response[i][0].course_count+`</strong></li>
                    `);
                        courseData.push(response[i][0].course_count);
                        courseLabels.push(response[i][0].name+ ' (' +response[i][0].course_count + ')');
                    }
                    chartForCourses(courseData, courseLabels);

                }
            });

            productCategory.change(async function () {
                let data = {category_id:$(this).val()},
                    url = "{{route('bestProductSel')}}",
                    method = 'get';

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method
                });

                if (response){
                    let productData = [],
                        courseLabels = [],
                        productDataUl = $('.product_data');
                    productDataUl.html('');
                    let bgColor = ['info', 'danger', 'warning'];

                    for (let i = 0; i < response.length; i++){
                        productDataUl.append(`
                        <li><span class="circ bg-`+bgColor[i]+`"></span>`+response[i][0].name+`<strong>`+response[i][0].product_count+`</strong></li>
                    `);
                        productData.push(response[i][0].product_count);
                        courseLabels.push(response[i][0].name+ ' (' +response[i][0].product_count + ')');
                    }
                    chartForProducts(productData);

                }
            });

            productCourseSelect.trigger('change');
            courseCategory.trigger('change');
            productCategory.trigger('change');

        })
    </script>

@endsection