@extends('admin.layout.layout')
@section('title',__('Home'))

@section('content')
<div class="post d-flex flex-column-fluid mt-5" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
        @can('home-statistics')
        <!--begin::Row-->
        <div class="row gy-5 g-xl-10">

            @if(auth()->user()->type == 1)
            <!--begin::Col-->
            <div class="col-sm-6 col-xl-6 mt-2">
                <!--begin::Card-->
                <div class="card mb-xl-8">
                    <!--begin::Card body-->
                    <div class="card-body p-9">
                        <!--begin::Heading-->
                        <div class="fs-2hx fw-bolder">{{ App\Models\User::count() }}</div>
                        <div class="fs-4 fw-bold text-gray-400 mb-7">{{ __('Current Users') }}</div>
                        <!--end::Heading-->
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-wrap">
                            <!--begin::Chart-->
                            <div class="d-flex flex-center h-100px w-100px me-9 mb-5">
                                <canvas id="kt_project_list_chart" width="100" height="100" style="display: block; box-sizing: border-box; height: 100px; width: 100px;"></canvas>
                            </div>
                            <!--end::Chart-->
                            <!--begin::Labels-->
                            <div class="d-flex flex-column justify-content-center flex-row-fluid pe-11 mb-5">
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-bold align-items-center mb-3">
                                    <div class="bullet bg-primary me-3"></div>
                                    <div class="text-gray-400">{{ __('Active web') }}</div>
                                    <div class="ms-auto fw-bolder text-gray-700">{{ $activeWeb }}</div>
                                </div>
                                <!--end::Label-->
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-bold align-items-center mb-3">
                                    <div class="bullet bg-success me-3"></div>
                                    <div class="text-gray-400">{{ __('Active mobile') }}</div>
                                    <div class="ms-auto fw-bolder text-gray-700">{{ $activeMobile }}</div>
                                </div>
                                <!--end::Label-->
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-bold align-items-center">
                                    <div class="bullet bg-gray-300 me-3"></div>
                                    <div class="text-gray-400">{{ __('Not active') }}</div>
                                    <div class="ms-auto fw-bolder text-gray-700">{{ $notActive }}</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Labels-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <div class="col-6"></div>
            <!--end::Col-->
            @endif
            <!--begin::Col-->
            <div class="col-sm-6 col-xl-6 mt-2">
                <!--begin::Card widget 2-->
                <a class="card bg-body card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen032.svg-->
                        <span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="8" y="9" width="3" height="10" rx="1.5" fill="currentColor"></rect>
                                <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="currentColor"></rect>
                                <rect x="18" y="11" width="3" height="8" rx="1.5" fill="currentColor"></rect>
                                <rect x="3" y="13" width="3" height="6" rx="1.5" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">{{ App\Models\Product::filterByUserStore()->count() }}</div>
                        <div class="fw-bold text-gray-400">{{ __('Products') }}</div>
                    </div>
                    <!--end::Body-->
                </a>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-sm-6 col-xl-6 mt-2">
                <!--begin::Card widget 2-->
                <a class="card bg-body card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen032.svg-->
                        <span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="8" y="9" width="3" height="10" rx="1.5" fill="currentColor"></rect>
                                <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="currentColor"></rect>
                                <rect x="18" y="11" width="3" height="8" rx="1.5" fill="currentColor"></rect>
                                <rect x="3" y="13" width="3" height="6" rx="1.5" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">{{ App\Models\Order::filterOrdersByUser()->count() }}</div>
                        <div class="fw-bold text-gray-400">{{ __('Orders') }}</div>
                    </div>
                    <!--end::Body-->
                </a>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-sm-6 col-xl-4 mt-2">
                <!--begin::Card widget 2-->
                <a class="card bg-body card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen032.svg-->
                        <span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="8" y="9" width="3" height="10" rx="1.5" fill="currentColor"></rect>
                                <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="currentColor"></rect>
                                <rect x="18" y="11" width="3" height="8" rx="1.5" fill="currentColor"></rect>
                                <rect x="3" y="13" width="3" height="6" rx="1.5" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">{{ App\Models\Order::filterOrdersByUser()->whereDate('created_at',date('Y-m-d'))->count() }} ({{ App\Models\Order::whereDate('orders.created_at',date('Y-m-d'))->calculateTotalSales() }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt="">)</div>
                        <div class="fw-bold text-gray-400">{{ __("Today's orders") }} / {{ date('Y-m-d') }}</div>
                    </div>
                    <!--end::Body-->
                </a>
            </div>
            <!--end::Col-->
            
            <!--begin::Col-->
            <div class="col-sm-6 col-xl-4 mt-2 mb-3">
                <!--begin::Card widget 2-->
                <a class="card bg-body card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen032.svg-->
                        <span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="8" y="9" width="3" height="10" rx="1.5" fill="currentColor"></rect>
                                <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="currentColor"></rect>
                                <rect x="18" y="11" width="3" height="8" rx="1.5" fill="currentColor"></rect>
                                <rect x="3" y="13" width="3" height="6" rx="1.5" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">{{ App\Models\Order::filterOrdersByUser()->whereYear('created_at',date('Y'))->whereMonth('created_at',date('m'))->count() }} ({{ App\Models\Order::whereYear('orders.created_at',date('Y'))->whereMonth('orders.created_at',date('m'))->calculateTotalSales() }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt="">)</div>
                        <div class="fw-bold text-gray-400">{{ __("Orders of the month") }} / {{ date('Y-m') }}</div>
                    </div>
                    <!--end::Body-->
                </a>
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-sm-6 col-xl-4 mt-2 mb-3">
                <!--begin::Card widget 2-->
                <a class="card bg-body card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen032.svg-->
                        <span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect x="8" y="9" width="3" height="10" rx="1.5" fill="currentColor"></rect>
                                <rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="currentColor"></rect>
                                <rect x="18" y="11" width="3" height="8" rx="1.5" fill="currentColor"></rect>
                                <rect x="3" y="13" width="3" height="6" rx="1.5" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">{{ App\Models\Order::filterOrdersByUser()->whereYear('created_at',date('Y'))->count() }} ({{ App\Models\Order::whereYear('orders.created_at',date('Y'))->calculateTotalSales() }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt="">)</div>
                        <div class="fw-bold text-gray-400">{{ __("Orders of the year") }} / {{ date('Y') }}</div>
                    </div>
                    <!--end::Body-->
                </a>
            </div>
            <!--end::Col-->

        </div>
        @endcan
        @can('home-charts')
        <!--end::Row-->
        <div class="card p-3 mb-5">
            <div class="d-flex justify-content-between">
                <div>
                    <h5 class="title">{{ __('Products vs Orders') }}</h5>
                </div>
                <div>
                    <select class="select-year form-select" aria-label="Default select example" id="year" onchange="changeYear(this)">
                        <option disabled>{{ __('Year') }}</option>
                        @for ($year=2024; $year<=date('Y'); $year++)
                            <option value="{{ $year }}" @if(date('Y') == $year) selected @endif>{{ $year }}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div id="ShowChartByYear">
                <div style="height: 265px;">
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
        @endcan
    </div>
    <!--end::Container-->
</div>
@endsection

@push('scripts')
<script>
    // chart
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["{{__('December')}}","{{__('November')}}","{{__('October')}}","{{__('September')}}","{{__('August')}}","{{__('July')}}","{{__('June')}}","{{__('May')}}","{{__('April')}}","{{__('March')}}","{{__('February')}}","{{__('January')}}"],
            datasets: [
                {
                    label: "{{__('Orders')}}",
                    data: [{{$orders_12}}, {{$orders_11}}, {{$orders_10}}, {{$orders_9}}, {{$orders_8}}, {{$orders_7}}, {{$orders_6}}, {{$orders_5}}, {{$orders_4}}, {{$orders_3}}, {{$orders_2}}, {{$orders_1}}],
                    backgroundColor: ['#122D4D'],
                    borderRadius: 8,
                    grouped: false,
                },
                {
                    label:"{{__('Products')}}",
                    data: [{{$products_12}}, {{$products_11}}, {{$products_10}}, {{$products_9}}, {{$products_8}}, {{$products_7}}, {{$products_6}}, {{$products_5}}, {{$products_4}}, {{$products_3}}, {{$products_2}}, {{$products_1}}],
                    backgroundColor: ['#FF8C38'],
                    borderRadius: 8,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {labels: {boxWidth: 20,boxHeight: 20,font: {family: 'Noto Kufi Arabic'}}},
                tooltip: {bodyFont: {family: 'Noto Kufi Arabic'},titleFont: {family: 'Noto Kufi Arabic'},footerFont: {family: 'Noto Kufi Arabic'}}
            },
            scales: {
                y: {beginAtZero: true,grid: {display: false},ticks: {font: {family: 'Noto Kufi Arabic'}}},
                x: {ticks: {font: {family: 'Noto Kufi Arabic'}}}
            }
        }
    });

    function changeYear(e) {
        var _token = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var year = e.value;
        $.ajax({
            url: `/admin/products-orders-year/${year}`,
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                $('#ShowChartByYear').html(data);
            },
            error: function() {}
        });
    }
</script>
<script>
    "use strict";
    var KTProjectList = {
        init: function () {
            // Internal function to initialize chart
            (function () {
                var element = document.getElementById("kt_project_list_chart");
                if (element) {
                    var ctx = element.getContext("2d");
                    new Chart(ctx, {
                        type: "doughnut",
                        data: {
                            datasets: [
                                {
                                    data: [{{ $activeWeb }}, {{ $activeMobile }}, {{ $notActive }}],
                                    backgroundColor: ["#00A3FF","#50CD89","#E4E6EF"]
                                }
                            ],
                            labels: ["{{ __('Active web') }}", "{{ __('Active mobile') }}", "{{ __('Not active') }}"]
                        },
                        options: {
                            chart: {fontFamily: "inherit"},
                            cutout: "75%",
                            cutoutPercentage: 65,
                            responsive: true,
                            maintainAspectRatio: false,
                            title: {display: false},
                            animation: {animateScale: true,animateRotate: true},
                            tooltips: {
                                enabled: true,
                                intersect: false,
                                mode: "nearest",
                                bodySpacing: 5,
                                yPadding: 10,
                                xPadding: 10,
                                caretPadding: 0,
                                displayColors: false,
                                backgroundColor: "#20D489",
                                titleFontColor: "#ffffff",
                                cornerRadius: 4,
                                footerSpacing: 0,
                                titleSpacing: 0
                            },
                            plugins: {legend: {display: false}}
                        }
                    });
                }
            })();
        }
    };

    // Initialize when DOM is ready
    KTUtil.onDOMContentLoaded(function () {
        KTProjectList.init();
    });
</script>
@endpush