@extends('backend.layouts.app')

@section('content')
    @if(auth()->user()->can('smtp_settings') && env('MAIL_USERNAME') == null && env('MAIL_PASSWORD') == null)
        <!--begin::Alert-->
        <div class="alert alert-primary d-flex align-items-center">
            <!--begin::Icon-->
            <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span
                    class="path2"></span></i>
            <!--end::Icon-->

            <!--begin::Wrapper-->
            <div class="d-flex flex-column">

                <h5 class="mb-1 tesxt-dark">{{translate('Please Configure SMTP Setting to work all email
            sending functionality')}}</h5>
                <!--begin::Content-->
                <a class="font-weight-bold"
                   href="{{ route('smtp_settings.index') }}">{{ translate('Configure Now') }}</a>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Alert-->
    @endif
    @can('admin_dashboard')

        <style>
            .bgi-no-repeat {
                background-repeat: repeat
            }

            .chart-cc {
                background-color: #003aff2b;
            }
        </style>

        <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
            <!--begin::Col-->
            <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                <!--begin::Card widget 20-->
                <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-5 mb-xl-10 "
                     style="background-color: #F1416C; background-image:url('https://preview.keenthemes.com/metronic8/demo1/assets/media/patterns/vector-1.png');">
                    <!--begin::Header-->
                    <div class="card-header pt-4">
                        <!--begin::Title-->
                        <div class="card-title d-flex flex-column">
                            <!--begin::Amount-->
                            <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{ \App\Models\User::where('user_type',
                        'customer')->where('email_verified_at', '!=',
                        null)->count() }}</span>
                            <!--end::Amount-->

                            <!--begin::Subtitle-->
                            <span class="text-white opacity-75 pt-1 fw-semibold fs-6">{{ translate('Customer') }}</span>
                            <!--end::Subtitle-->
                        </div>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->

                    <!--begin::Card body-->
                    <div class="card-body d-flex align-items-end pt-0">
                        <!--begin::Progress-->
                        <!--end::Progress-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card widget 20-->

                <!--begin::Card widget 7-->
                <div class="card card-flush h-md-50 mb-5 mb-xl-10 ">
                    <!--begin::Header-->
                    <div class="card-header pt-4">
                        <!--begin::Title-->
                        <div class="card-title d-flex flex-column">
                            <!--begin::Amount-->

                            <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{ \App\Models\Category::count()
                        }}</span>
                            <!--end::Amount-->

                            <!--begin::Subtitle-->
                            <span class="text-gray-500 pt-1 fw-semibold fs-6">{{ translate('Total') }} {{ translate('Product
                        category') }}</span>
                            <!--end::Subtitle-->
                        </div>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                </div>
                <!--end::Card widget 7-->
            </div>
            <!--end::Col-->

            <!--begin::Col-->
            <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">

                <!--begin::Card widget 17-->
                <div class="card card-flush h-md-50 mb-5 mb-xl-10 ">
                    <!--begin::Header-->
                    <div class="card-header pt-4">
                        <!--begin::Title-->
                        <div class="card-title d-flex flex-column">
                            <!--begin::Info-->
                            <div class="d-flex align-items-center">
                                <!--begin::Amount-->
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{ \App\Models\Order::count()
                            }}</span>
                                <!--end::Amount-->
                                <!--end::Badge-->
                            </div>
                            <!--end::Info-->

                            <!--begin::Subtitle-->
                            <span class="text-gray-500 pt-1 fw-semibold fs-6">{{ translate('Total') }} {{ translate('Order')
                        }}</span>
                            <!--end::Subtitle-->
                        </div>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-2 pb-4 d-flex flex-wrap align-items-center">
                        <!--begin::Labels-->
                        <div class="d-flex flex-column content-justify-center flex-row-fluid">
                            <!--begin::Label-->
                            <div class="d-flex fw-semibold align-items-center">
                                <!--begin::Bullet-->
                                <div class="bullet w-8px h-3px rounded-2 bg-success me-3"></div>
                                <!--end::Bullet-->

                                <!--begin::Label-->
                                <div class="text-gray-500 flex-grow-1 me-4">Pending Orders</div>
                                <!--end::Label-->

                                <!--begin::Stats-->
                                <div class="fw-bolder text-gray-700 text-xxl-end">${{
                            \App\Models\Order::where('delivery_status','pending')->count() }}</div>
                                <!--end::Stats-->
                            </div>
                            <!--end::Label-->

                            <!--begin::Label-->
                            <div class="d-flex fw-semibold align-items-center my-3">
                                <!--begin::Bullet-->
                                <div class="bullet w-8px h-3px rounded-2 bg-primary me-3"></div>
                                <!--end::Bullet-->

                                <!--begin::Label-->
                                <div class="text-gray-500 flex-grow-1 me-4">Completed Orders</div>
                                <!--end::Label-->

                                <!--begin::Stats-->
                                <div class="fw-bolder text-gray-700 text-xxl-end">${{
                            \App\Models\Order::where('delivery_status','delievered')->where('payment_status',
                            'paid')->count() }}</div>
                                <!--end::Stats-->
                            </div>
                            <!--end::Label-->

                            <!--begin::Label-->
                            <div class="d-flex fw-semibold align-items-center">
                                <!--begin::Bullet-->
                                <div class="bullet w-8px h-3px rounded-2 me-3" style="background-color: #E4E6EF"></div>
                                <!--end::Bullet-->

                                <!--begin::Label-->
                                <div class="text-gray-500 flex-grow-1 me-4">Average Order</div>
                                <!--end::Label-->

                                <!--begin::Stats-->
                                <div class=" fw-bolder text-gray-700 text-xxl-end">
                                    %{{ round($getAverageOrder / 100, 2) }}
                                </div>
                                <!--end::Stats-->
                            </div>
                            <!--end::Label-->
                        </div>
                        <!--end::Labels-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card widget 17-->

                <!--begin::Card widget 17-->
                <div class="card card-flush h-md-50 mb-5 mb-xl-10 ">
                    <!--begin::Header-->
                    <div class="card-header pt-4">
                        <!--begin::Title-->
                        <div class="card-title d-flex flex-column">
                            <!--begin::Info-->
                            <div class="d-flex align-items-center">
                                <!--begin::Amount-->
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{ \App\Models\Order::count()
                            }}</span>
                                <!--end::Amount-->
                                <!--end::Badge-->
                            </div>
                            <!--end::Info-->

                            <!--begin::Subtitle-->
                            <span class="text-gray-500 pt-1 fw-semibold fs-6">{{ translate('Total') }} {{ translate('Product
                        brand')
                        }}</span>
                            <!--end::Subtitle-->
                        </div>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->

                    <!--begin::Card body-->
                    <div class="card-body pt-2 pb-4 d-flex flex-wrap align-items-center">
                        <!--begin::Chart-->
                        <div class="d-flex flex-center me-5 pt-2">
                            <div id="kt_card_widget_17_chart" style="min-width: 70px; min-height: 70px"
                                 data-kt-size="70"
                                 data-kt-line="11">
                                <span></span>
                                <canvas height="70" width="70"></canvas>
                            </div>
                        </div>
                        <!--end::Chart-->

                        <!--begin::Labels-->
                        <div class="d-flex flex-column content-justify-center flex-row-fluid">
                            {{--                    <!--begin::Label-->--}}
                            {{--                    <div class="d-flex fw-semibold align-items-center">--}}
                            {{--                        <!--begin::Bullet-->--}}
                            {{--                        <div class="bullet w-8px h-3px rounded-2 bg-success me-3"></div>--}}
                            {{--                        <!--end::Bullet-->--}}

                            {{--                        <!--begin::Label-->--}}
                            {{--                        <div class="text-gray-500 flex-grow-1 me-4">Top Brand</div>--}}
                            {{--                        <!--end::Label-->--}}

                            {{--                        <!--begin::Stats-->--}}
                            {{--                        <div class="fw-bolder text-gray-700 text-xxl-end">{{ $Brands[0] }}</div>--}}
                            {{--                        <!--end::Stats-->--}}
                            {{--                    </div>--}}
                            {{--                    <!--end::Label-->--}}


                            {{--                    <!--begin::Label-->--}}
                            {{--                    <div class="d-flex fw-semibold align-items-center">--}}
                            {{--                        <!--begin::Bullet-->--}}
                            {{--                        <div class="bullet w-8px h-3px rounded-2 me-3" style="background-color: #E4E6EF"></div>--}}
                            {{--                        <!--end::Bullet-->--}}

                            {{--                        <!--begin::Label-->--}}
                            {{--                        <div class="text-gray-500 flex-grow-1 me-4">Newly Brand</div>--}}
                            {{--                        <!--end::Label-->--}}

                            {{--                        <!--begin::Stats-->--}}
                            {{--                        <div class=" fw-bolder text-gray-700 text-xxl-end">{{ $Brands[1] }}</div>--}}
                            {{--                        <!--end::Stats-->--}}
                            {{--                    </div>--}}
                            <!--end::Label-->
                        </div>
                        <!--end::Labels-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card widget 17-->


            </div>
            <!--end::Col-->
            <!--begin::Player widget 1-->
            <div class="col-md-12 col-lg-6 card card-flush h-xl-100 mb-0">
                <!--begin::Header-->
                <div class="card-header pt-7">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-900">Recent Products</span>
                        @foreach(\App\Models\Product::orderBy('created_at', 'desc')->take(1)->get() as $rencetDate)
                            <span
                                class="text-gray-500 mt-1 fw-semibold fs-6">{{$rencetDate->created_at->diffForHumans()}}</span>
                        @endforeach
                    </h3>
                    <!--end::Title-->
                    <!--begin::Toolbar-->
                    <div class="card-toolbar">
                        <a href="account/statements.html" class="btn btn-sm btn-light">More</a>
                    </div>
                    <!--end::Toolbar-->
                </div>
                <!--end::Header-->
                <!--begin::Card body-->
                <div class="card-body pt-7">
                    <!--begin::Row-->
                    <div class="row g-5 g-xl-9 mb-5 mb-xl-9">
                        <!--begin::Col-->
                        @foreach($getLastSIxProductIds as $sixProducts)
                            <div class="col-sm mb-3 mb-sm-0">
                                <!--begin::Player card-->
                                <div class="m-0">
                                    <!--begin::User pic-->
                                    <div class="card-rounded position-relative mb-5">
                                        <!--begin::Img-->
                                        <div
                                            class="bgi-position-center bgi-no-repeat bgi-size-cover h-200px card-rounded"
                                            style="background-image:url('assets/media/stock/600x600/img-61.jpg')"></div>
                                        <!--end::Img-->
                                    </div>
                                    <!--end::User pic-->
                                    <!--begin::Info-->
                                    <div class="m-0">
                                        <!--begin::Title-->
                                        <a href="#"
                                           class="text-gray-800 text-hover-primary fs-3 fw-bold d-block mb-2">{{$sixProducts->name}}</a>
                                        <!--end::Title-->
                                        <span
                                            class="fw-bold fs-7 text-gray-500 d-block lh-1">by:{{$sixProducts->user->name}}</span>
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Player card-->
                            </div>
                        @endforeach
                        <!--end::Col-->
                    </div>
                    <!--end::Row-->
                    <!--begin::Row-->
                    <div class="row g-5 g-xl-9 mb-xl-3">
                        <!--begin::Col-->
                        @foreach($getLastSIxProductIds->skip(3) as $sixProducts)
                            <div class="col-sm mb-3 mb-sm-0">
                                <!--begin::Player card-->
                                <div class="m-0">
                                    <!--begin::User pic-->
                                    <div class="card-rounded position-relative mb-5">
                                        <!--begin::Img-->
                                        <div
                                            class="bgi-position-center bgi-no-repeat bgi-size-cover h-200px card-rounded"
                                            style="background-image:url('assets/media/stock/600x600/img-57.jpg')"></div>
                                        <!--end::Img-->
                                        <!--begin::Play-->
                                        <button
                                            class="btn btn-icon h-auto w-auto p-0 ms-4 mb-4 position-absolute bottom-0 right-0"
                                            data-kt-element="list-play-button">
                                            <i class="bi bi-play-fill text-white fs-2x"
                                               data-kt-element="list-play-icon"></i>
                                            <i class="bi bi-pause-fill text-white fs-2x d-none"
                                               data-kt-element="list-pause-icon"></i>
                                        </button>
                                        <!--end::Play-->
                                    </div>
                                    <!--end::User pic-->
                                    <!--begin::Info-->
                                    <div class="m-0">
                                        <!--begin::Title-->
                                        <a href="#"
                                           class="text-gray-800 text-hover-primary fs-3 fw-bold d-block mb-2">{{$sixProducts->name}}</a>
                                        <!--end::Title-->
                                        <span class="fw-bold fs-6 text-gray-500 d-block lh-1">by:{{ $sixProducts->user->name
                                }}</span>
                                    </div>
                                    <!--end::Info-->
                                </div>
                                <!--end::Player card-->
                            </div>
                        @endforeach
                        <!--end::Col-->
                    </div>
                    <!--end::Row-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Player widget 1-->
            <!--begin::Col-->

            {{-- <div class="col-lg-6">
                <div class="row gutters-10">
                    <div class="col-6">
                        <div class="card ">
                            <div class="card-header">
                                <h6 class="mb-0 fs-14">{{ translate('Products') }}</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="pie-1" class="w-100" height="305"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card ">
                            <div class="card-header">
                                <h6 class="mb-0 fs-14">{{ translate('Sellers') }}</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="pie-2" class="w-100" height="305"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
            <!--end::Col-->
        </div>

        {{-- <div class="row gutters-10">
            <div class="col-lg-6">
                <div class="row gutters-10">
                    <div class="col-6">
                        <div class="bg-danger text-white rounded-lg mb-4 overflow-hidden
                        border border-2 border-primary-subtle shadow-sm c-background h-100">
                            <div class="px-3 pt-3">
                                <div class="h3 fw-700 mb-3 text-white fw-light">
                                    {{ \App\Models\User::where('user_type', 'customer')->where('email_verified_at', '!=',
                                    null)->count() }}
                                </div>
                                <div class="opacity-50">
                                    <span class="fs-12 d-block">{{ translate('Total') }}</span>
                                    {{ translate('Customer') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="bg-white text-white rounded-lg mb-4 overflow-hidden h-100
                        border border-2 border-primary-subtle shadow-sm">
                            <div class="px-3 pt-3">
                                <div class="h3 fw-700 mb-3">{{ \App\Models\Order::count() }}</div>
                                <div class="opacity-50 text-black">
                                    <span class="fs-12 d-block">{{ translate('Total') }}</span>
                                    {{ translate('Order') }}
                                </div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                    d="M0,128L34.3,112C68.6,96,137,64,206,96C274.3,128,343,224,411,250.7C480,277,549,235,617,213.3C685.7,192,754,192,823,181.3C891.4,171,960,149,1029,117.3C1097.1,85,1166,43,1234,58.7C1302.9,75,1371,149,1406,186.7L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="bg-grad-1 text-white rounded-lg mb-4 overflow-hidden">
                            <div class="px-3 pt-3">
                                <div class="opacity-50">
                                    <span class="fs-12 d-block">{{ translate('Total') }}</span>
                                    {{ translate('Product category') }}
                                </div>
                                <div class="h3 fw-700 mb-3">{{ \App\Models\Category::count() }}</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                    d="M0,128L34.3,112C68.6,96,137,64,206,96C274.3,128,343,224,411,250.7C480,277,549,235,617,213.3C685.7,192,754,192,823,181.3C891.4,171,960,149,1029,117.3C1097.1,85,1166,43,1234,58.7C1302.9,75,1371,149,1406,186.7L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="bg-grad-4 text-white rounded-lg mb-4 overflow-hidden">
                            <div class="px-3 pt-3">
                                <div class="opacity-50">
                                    <span class="fs-12 d-block">{{ translate('Total') }}</span>
                                    {{ translate('Product brand') }}
                                </div>
                                <div class="h3 fw-700 mb-3">{{ \App\Models\Brand::count() }}</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                                <path fill="rgba(255,255,255,0.3)" fill-opacity="1"
                                    d="M0,128L34.3,112C68.6,96,137,64,206,96C274.3,128,343,224,411,250.7C480,277,549,235,617,213.3C685.7,192,754,192,823,181.3C891.4,171,960,149,1029,117.3C1097.1,85,1166,43,1234,58.7C1302.9,75,1371,149,1406,186.7L1440,224L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

        </div> --}}

        {{-- <div class="row gutters-10">
            <div class="col-md-6">
                <div class="card  chart-cc">
                    <div class="card-header">
                        <h6 class="mb-0 fs-14">{{ translate('Category wise product sale') }}</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="graph-1" class="w-100" height="500"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card  chart-cc">
                    <div class="card-header">
                        <h6 class="mb-0 fs-14">{{ translate('Category wise product stock') }}</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="graph-2" class="w-100" height="500"></canvas>
                    </div>
                </div>
            </div>
        </div> --}}
        {{--
        <div class="card ">
            <div class="card-header">
                <h6 class="mb-0">{{ translate('Top 12 Products') }}</h6>
            </div>
            <div class="card-body">
                <div class="aiz-carousel gutters-10 half-outside-arrow" data-items="6" data-xl-items="5" data-lg-items="4"
                    data-md-items="3" data-sm-items="2" data-arrows='true'>
                    @foreach (filter_products(\App\Models\Product::where('published', 1)->orderBy('num_of_sale',
                    'desc'))->limit(12)->get() as $key => $product)
                    <div class="carousel-box">
                        <div
                            class="aiz-card-box border border-light rounded shadow-sm hov-shadow-md mb-2 has-transition bg-white mw-25">
                            <div class="position-relative">
                                <a href="{{ route('product', $product->slug) }}" class="d-block">
                                    <img class="img-fit lazyload mx-auto h-210px"
                                        src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                        data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                                        alt="{{  $product->getTranslation('name')  }}"
                                        onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
                                </a>
                            </div>
                            <div class="p-md-3 p-2 text-left">
                                <div class="fs-15">
                                    @if(home_base_price($product) != home_discounted_base_price($product))
                                    <del class="fw-600 opacity-50 mr-1">{{ home_base_price($product) }}</del>
                                    @endif
                                    <span class="fw-700 text-primary">{{ home_discounted_base_price($product) }}</span>
                                </div>
                                <div class="rating rating-sm mt-1">
                                    {{ renderStarRating($product->rating) }}
                                </div>
                                <h3 class="fw-600 fs-13 text-truncate-2 lh-1-4 mb-0">
                                    <a href="{{ route('product', $product->slug) }}" class="d-block text-reset">{{
                                        $product->getTranslation('name') }}</a>
                                </h3>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div> --}}
    @endcan

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="">
            <!--begin::Row-->
            <div class="row g-5 g-xl-10 mb-xl-10">
                <!--begin::Col-->
                <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                    <!--begin::Card widget 4-->
                    <div class="card card-flush h-md-50 mb-5 mb-xl-10">
                        <!--begin::Header-->
                        <div class="card-header pt-5">
                            <!--begin::Title-->
                            <div class="card-title d-flex flex-column">
                                <!--begin::Info-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Currency-->
                                    <span class="fs-4 fw-semibold text-gray-500 me-1 align-self-start">$</span>
                                    <!--end::Currency-->
                                    <!--begin::Amount-->
                                    <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{
                                    \App\Models\Order::where('delivery_status',
                                    'delivered')->where('payment_status', 'paid')->sum('grand_total') }}</span>
                                    <!--end::Amount-->
                                    <!--begin::Badge-->
                                    <span class="badge badge-light-success fs-base">
                                    <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>{{ $getPercentageChangeInSales }}%</span>
                                    <!--end::Badge-->
                                </div>
                                <!--end::Info-->
                                <!--begin::Subtitle-->
                                <span class="text-gray-500 pt-1 fw-semibold fs-6">Expected Earnings</span>
                                <!--end::Subtitle-->
                            </div>
                            <!--end::Title-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-2 pb-4 d-flex align-items-center">
                            <!--begin::Chart-->
                            <div class="d-flex flex-center me-5 pt-2">
                                <div id="kt_card_widget_4_chart" style="min-width: 70px; min-height: 70px"
                                     data-kt-size="70"
                                     data-kt-line="11"></div>
                            </div>
                            <!--end::Chart-->
                            <!--begin::Labels-->
                            <div class="d-flex flex-column content-justify-center w-100">
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-semibold align-items-center">
                                    <!--begin::Bullet-->
                                    <div class="bullet w-8px h-6px rounded-2 bg-danger me-3"></div>
                                    <!--end::Bullet-->
                                    <!--begin::Label-->
                                    <div class="text-gray-500 flex-grow-1 me-4">Shoes</div>
                                    <!--end::Label-->
                                    <!--begin::Stats-->
                                    <div class="fw-bolder text-gray-700 text-xxl-end">$7,660</div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Label-->
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-semibold align-items-center my-3">
                                    <!--begin::Bullet-->
                                    <div class="bullet w-8px h-6px rounded-2 bg-primary me-3"></div>
                                    <!--end::Bullet-->
                                    <!--begin::Label-->
                                    <div class="text-gray-500 flex-grow-1 me-4">Gaming</div>
                                    <!--end::Label-->
                                    <!--begin::Stats-->
                                    <div class="fw-bolder text-gray-700 text-xxl-end">$2,820</div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Label-->
                                <!--begin::Label-->
                                <div class="d-flex fs-6 fw-semibold align-items-center">
                                    <!--begin::Bullet-->
                                    <div class="bullet w-8px h-6px rounded-2 me-3"
                                         style="background-color: #E4E6EF"></div>
                                    <!--end::Bullet-->
                                    <!--begin::Label-->
                                    <div class="text-gray-500 flex-grow-1 me-4">Others</div>
                                    <!--end::Label-->
                                    <!--begin::Stats-->
                                    <div class="fw-bolder text-gray-700 text-xxl-end">$45,257</div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Labels-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card widget 4-->
                    <!--begin::Card widget 5-->
                    <div class="card card-flush h-md-50 mb-xl-10">
                        <!--begin::Header-->
                        <div class="card-header pt-5">
                            <!--begin::Title-->
                            <div class="card-title d-flex flex-column">
                                <!--begin::Info-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Amount-->
                                    <span
                                        class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{ $newOrdersCount }}</span>
                                    <!--end::Amount-->
                                    <!--begin::Badge-->
                                    <span class="badge badge-light-danger fs-base">
                                    <i class="ki-duotone ki-arrow-down fs-5 text-danger ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>{{ $precentageChangeOfDailyOrders }}%</span>
                                    <!--end::Badge-->
                                </div>
                                <!--end::Info-->
                                <!--begin::Subtitle-->
                                <span class="text-gray-500 pt-1 fw-semibold fs-6">Orders This Month</span>
                                <!--end::Subtitle-->
                            </div>
                            <!--end::Title-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body d-flex align-items-end pt-0">
                            <!--begin::Progress-->
                            <div class="d-flex align-items-center flex-column mt-3 w-100">
                                <div class="d-flex justify-content-between w-100 mt-auto mb-2">
                                    <span class="fw-bolder fs-6 text-gray-900">1,048 to Goal</span>
                                    <span class="fw-bold fs-6 text-gray-500">62%</span>
                                </div>
                                <div class="h-8px mx-3 w-100 bg-light-success rounded">
                                    <div class="bg-success rounded h-8px" role="progressbar" style="width: 62%;"
                                         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <!--end::Progress-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card widget 5-->
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
                    <!--begin::Card widget 6-->
                    <div class="card card-flush h-md-50 mb-5 mb-xl-10">
                        <!--begin::Header-->
                        <div class="card-header pt-5">
                            <!--begin::Title-->
                            <div class="card-title d-flex flex-column">
                                <!--begin::Info-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Currency-->
                                    <span class="fs-4 fw-semibold text-gray-500 me-1 align-self-start">$</span>
                                    <!--end::Currency-->
                                    <!--begin::Amount-->
                                    <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{
                                    round($averageDailySales,1)
                                    }}</span>
                                    <!--end::Amount-->
                                    <!--begin::Badge-->
                                    <span class="badge badge-light-success fs-base">
                                    <i class="ki-duotone ki-arrow-up fs-5 text-success ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>{{ $salesComparisonPercentage }}</span>
                                    <!--end::Badge-->
                                </div>
                                <!--end::Info-->
                                <!--begin::Subtitle-->
                                <span class="text-gray-500 pt-1 fw-semibold fs-6">Average Daily Sales</span>
                                <!--end::Subtitle-->
                            </div>
                            <!--end::Title-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body d-flex align-items-end px-0 pb-0">
                            <!--begin::Chart-->
                            <div id="kt_card_widget_6_chart" class="w-100" style="height: 80px"></div>
                            <!--end::Chart-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card widget 6-->
                    <!--begin::Card widget 7-->
                    <div class="card card-flush h-md-50 mb-xl-10">
                        <!--begin::Header-->
                        <div class="card-header pt-5">
                            <!--begin::Title-->
                            <div class="card-title d-flex flex-column">
                                <!--begin::Amount-->
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">{{ $neCustomerCount }}</span>
                                <!--end::Amount-->
                                <!--begin::Subtitle-->
                                <span
                                    class="text-gray-500 pt-1 fw-semibold fs-6">{{translate('New Customers This Month')}}</span>
                                <!--end::Subtitle-->
                            </div>
                            <!--end::Title-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body d-flex flex-column justify-content-end pe-0">
                            <!--begin::Title-->
                            <span class="fs-6 fw-bolder text-gray-800 d-block mb-2">Today’s Heroes</span>
                            <!--end::Title-->
                            <!--begin::Users group-->
                            <div class="symbol-group symbol-hover flex-nowrap">
                                @foreach ($topSellers as $key => $seller)
                                    <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
                                         title="{{$seller->user? $seller->user->name :'' }}">
                                        @if(isset($seller->user) && $seller->user->avatar )
                                            <img alt="Pic"
                                                 src="{{ env('APP_URL') }}/assets/img/{{ $seller->user->avatar }}"/>
                                        @else
                                            <img alt="Pic" src="{{ asset('assets/img/avatar-place.png') }}"/>
                                        @endif
                                    </div>
                                @endforeach

                                <a href="#" class="symbol symbol-35px symbol-circle" data-bs-toggle="modal"
                                   data-bs-target="#kt_modal_view_users">
                                <span class="symbol-label bg-light text-gray-400 fs-8 fw-bold">{{ $remainingSellersCount
                                    }}</span>
                                </a>
                            </div>
                            <!--end::Users group-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card widget 7-->
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-lg-12 col-xl-12 col-xxl-6 mb-5 mb-xl-0">
                    <!--begin::Chart widget 3-->
                    <div class="card card-flush overflow-hidden h-md-100">
                        <!--begin::Header-->
                        <div class="card-header py-5">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-900">Sales This Months</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">Products from all categories</span>
                            </h3>
                            <!--end::Title-->
                            <!--begin::Toolbar-->
                            <div class="card-toolbar">
                                <!--begin::Menu-->
                                <button
                                    class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                    data-kt-menu-overflow="true">
                                    <i class="ki-duotone ki-dots-square fs-1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                </button>
                                <!--begin::Menu 2-->
                                <div
                                    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                    data-kt-menu="true">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions
                                        </div>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu separator-->
                                    <div class="separator mb-3 opacity-75"></div>
                                    <!--end::Menu separator-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Ticket</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Customer</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                         data-kt-menu-placement="right-start">
                                        <!--begin::Menu item-->
                                        <a href="#" class="menu-link px-3">
                                            <span class="menu-title">New Group</span>
                                            <span class="menu-arrow"></span>
                                        </a>
                                        <!--end::Menu item-->
                                        <!--begin::Menu sub-->
                                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Admin Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Staff Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Member Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                        </div>
                                        <!--end::Menu sub-->
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Contact</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu separator-->
                                    <div class="separator mt-3 opacity-75"></div>
                                    <!--end::Menu separator-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <div class="menu-content px-3 py-3">
                                            <a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
                                        </div>
                                    </div>
                                    <!--end::Menu item-->
                                </div>
                                <!--end::Menu 2-->
                                <!--end::Menu-->
                            </div>
                            <!--end::Toolbar-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
                            <!--begin::Statistics-->
                            <div class="px-9 mb-5">
                                <!--begin::Statistics-->
                                <div class="d-flex mb-2">
                                    <span class="fs-4 fw-semibold text-gray-500 me-1">$</span>
                                    <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{
                                    \App\Models\Order::where('payment_status', 'paid')->sum('grand_total') }}</span>
                                </div>
                                <!--end::Statistics-->
                                <!--begin::Description-->
                                <span class="fs-6 fw-semibold text-gray-500">Another $48,346 to Goal</span>
                                <!--end::Description-->
                            </div>
                            <!--end::Statistics-->
                            <!--begin::Chart-->
                            <div id="kt_charts_widget_3" class="min-h-auto ps-4 pe-6" style="height: 300px"></div>
                            <!--end::Chart-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Chart widget 3-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">
                <!--begin::Col-->
                <div class="col-xl-6 mb-xl-10">
                    <!--begin::Table widget 2-->
                    <div class="card h-md-100">
                        <!--begin::Header-->
                        <div class="card-header align-items-center border-0">
                            <!--begin::Title-->
                            <h3 class="fw-bold text-gray-900 m-0">{{translate('Top Sales')}}</h3>

                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        <div class="card-body pt-2">
                            <!--begin::Nav-->
                            <!-- Loop through categories to render category tabs -->
                            <ul class="nav nav-pills nav-pills-custom mb-3">
                                @foreach(\App\Models\Category::where('top', '1')->get() as $category)
                                    <li class="nav-item mb-3 me-3 me-lg-6">
                                        <a class="nav-link d-flex justify-content-between flex-column flex-center overflow-hidden @if($loop->first) active @endif w-80px h-85px py-4"
                                           data-bs-toggle="pill" href="#kt_stats_widget_2_tab_{{ $category->id }}">
                                            <!-- Tab content -->
                                            <div class="nav-icon">
                                                <img alt="" src="assets/media/svg/products-categories/t-shirt.svg"
                                                     class="">
                                            </div>
                                            <span
                                                class="nav-text text-gray-700 fw-bold fs-6 lh-1">{{ $category->name }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>

                            <!-- Tab content -->
                            <div class="tab-content">
                                @foreach(\App\Models\Category::where('top', '1')->get() as $category)
                                    <div class="tab-pane fade show @if($loop->first) active @endif"
                                         id="kt_stats_widget_2_tab_{{ $category->id }}">
                                        <!-- Render products for the current category -->
                                        <div class="table-responsive">
                                            <table class="table table-row-dashed align-middle gs-0 gy-4 my-0">
                                                <thead>
                                                <tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
                                                    <th class="ps-0 w-50px">ITEM</th>
                                                    <th class="pe-0 text-end min-w-100px">PRICE</th>
                                                    <th class="pe-0 text-end min-w-100px">Num Sale</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($products_sales->where('category_id',$category->id)->take(6) as $product)
                                                    <tr>
                                                        <td>
                                                            <img
                                                                src="{{ $product->image_url ? $product->image_url : asset('assets/media/stock/ecommerce/210.png') }}"
                                                                class="w-50px ms-n1" alt=""/>
                                                        </td>
                                                        <td class="text-end pe-0">
                                                    <span class="text-gray-800 fw-bold d-block fs-6">{{ home_discounted_base_price($product) }}
                                                     @if(home_base_price($product) != home_discounted_base_price($product))
                                                            <del>{{ home_base_price($product) }}</del>
                                                        @endif

                                                    </span>
                                                        </td>
                                                        <td class="text-end pe-0">
                                                    <span class="text-gray-800 fw-bold d-block fs-6">{{$product->num_of_sale }}</span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!--end::Nav-->
                        </div>
                        <!--end: Card Body-->
                    </div>
                    <!--end::Table widget 2-->
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-6 mb-5 mb-xl-10">
                    <!--begin::Chart widget 4-->
                    <div class="card card-flush overflow-hidden h-md-100">
                        <!--begin::Header-->
                        <div class="card-header py-5">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-900">Discounted Product Sales</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">Users from all channels</span>
                            </h3>
                            <!--end::Title-->
                            <!--begin::Toolbar-->
                            <div class="card-toolbar">
                                <!--begin::Menu-->
                                <button
                                    class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                    data-kt-menu-overflow="true">
                                    <i class="ki-duotone ki-dots-square fs-1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                </button>
                                <!--begin::Menu 2-->
                                <div
                                    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                    data-kt-menu="true">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions
                                        </div>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu separator-->
                                    <div class="separator mb-3 opacity-75"></div>
                                    <!--end::Menu separator-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Ticket</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Customer</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                         data-kt-menu-placement="right-start">
                                        <!--begin::Menu item-->
                                        <a href="#" class="menu-link px-3">
                                            <span class="menu-title">New Group</span>
                                            <span class="menu-arrow"></span>
                                        </a>
                                        <!--end::Menu item-->
                                        <!--begin::Menu sub-->
                                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Admin Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Staff Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link px-3">Member Group</a>
                                            </div>
                                            <!--end::Menu item-->
                                        </div>
                                        <!--end::Menu sub-->
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3">New Contact</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu separator-->
                                    <div class="separator mt-3 opacity-75"></div>
                                    <!--end::Menu separator-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <div class="menu-content px-3 py-3">
                                            <a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
                                        </div>
                                    </div>
                                    <!--end::Menu item-->
                                </div>
                                <!--end::Menu 2-->
                                <!--end::Menu-->
                            </div>
                            <!--end::Toolbar-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body d-flex justify-content-between flex-column pb-1 px-0">
                            <!--begin::Info-->
                            <div class="px-9 mb-5">
                                <!--begin::Statistics-->
                                <div class="d-flex align-items-center mb-2">
                                    <!--begin::Currency-->
                                    <span class="fs-4 fw-semibold text-gray-500 align-self-start me-1">$</span>
                                    <!--end::Currency-->
                                    <!--begin::Value-->
                                    <span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{
                                    App\Models\Order::where('coupon_discount','>','0.00')->where('delivery_status',
                                    'delievered')->where('payment_status', 'paid')->sum('grand_total')}}</span>
                                    <!--end::Value-->
                                    <!--begin::Label-->
                                    <span class="badge badge-light-success fs-base">
                                    <i class="ki-duotone ki-arrow-down fs-5 text-success ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>{{ $getDiscountedOrdersChange }}%</span>
                                    <!--end::Label-->
                                </div>
                                <!--end::Statistics-->
                                <!--begin::Description-->
                                <span class="fs-6 fw-semibold text-gray-500">Total Discounted Sales This Month</span>
                                <!--end::Description-->
                            </div>
                            <!--end::Info-->
                            <!--begin::Chart-->
                            <div id="kt_charts_widget_4" class="min-h-auto ps-4 pe-6" style="height: 300px"></div>
                            <!--end::Chart-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Chart widget 4-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row gy-5 g-xl-10">
                <!--begin::Col-->
                <div class="col-xl-4 mb-xl-10">
                    <!--begin::Engage widget 1-->
                    <div class="card h-md-100" dir="ltr">
                        <!--begin::Body-->
                        <div class="card-body d-flex flex-column flex-center">
                            <!--begin::Heading-->
                            <div class="mb-2">
                                <!--begin::Title-->
                                <h1 class="fw-semibold text-gray-800 text-center lh-lg">Have you tried
                                    <br/>new
                                    <span class="fw-bolder">eCommerce App ?</span>
                                </h1>
                                <!--end::Title-->
                                <!--begin::Illustration-->
                                <div class="py-10 text-center">
                                    <img
                                        src="https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/illustrations/easy/2.svg"
                                        class="theme-light-show w-200px" alt=""/>
                                    <img
                                        src="https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/illustrations/easy/2-dark.svg"
                                        class="theme-dark-show w-200px" alt=""/>
                                </div>
                                <!--end::Illustration-->
                            </div>
                            <!--end::Heading-->
                            <!--begin::Links-->
                            <div class="text-center mb-1">
                                <!--begin::Link-->
                                <a class="btn btn-sm btn-primary me-2" href="apps/ecommerce/sales/listing.html">View
                                    App</a>
                                <!--end::Link-->
                                <!--begin::Link-->
                                <a class="btn btn-sm btn-light" href="apps/ecommerce/catalog/add-product.html">New
                                    Product</a>
                                <!--end::Link-->
                            </div>
                            <!--end::Links-->
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::Engage widget 1-->
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-8 mb-5 mb-xl-10">
                    <!--begin::Table Widget 4-->
                    <div class="card card-flush h-xl-100">
                        <!--begin::Card header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">{{translate('Last Orders')}}</span>
                            </h3>
                            <!--end::Title-->
                            <!--begin::Actions-->
                            <div class="card-toolbar">
                                <!--begin::Filters-->
                                <div class="d-flex flex-stack flex-wrap gap-4">
                                    <!--begin::Search-->
                                    <div class="position-relative my-1">
                                        <i
                                            class="ki-duotone ki-magnifier fs-2 position-absolute top-50 translate-middle-y ms-4">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                        <input type="text" data-kt-table-widget-4="search"
                                               class="form-control w-150px fs-7 ps-12" placeholder="Search"/>
                                    </div>
                                    <!--end::Search-->
                                </div>
                                <!--begin::Filters-->
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-2 overflow-scroll">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-3 hidden"
                                   id="kt_table_widget_4_table">
                                <!--begin::Table head-->
                                <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0 overflow-scroll">
                                    <th class="min-w-100px">{{translate('Order ID')}}</th>
                                    <th class="text-end min-w-100px">{{translate('Created')}}</th>
                                    <th class="text-end min-w-125px">{{translate('Customer')}}</th>
                                    <th class="text-end min-w-100px">{{translate('Total')}}</th>
                                    <th class="text-end min-w-100px">{{translate('Delivery')}}</th>
                                    <th class="text-end min-w-50px">{{translate('Status')}}</th>
                                </tr>
                                <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600">

                                @foreach($lastOrders as $order)
                                <tr class=" border-bottom-0">
                                    <td>
                                        <a href="{{route('all_orders.show',['id'=>encrypt($order->id)])}}" class="text-gray-800 text-hover-primary">#{{$order->code}}</a>
                                    </td>

                                    <td class="text-end">{{ $order->created_at->diffForHumans() }}</td>
                                    <td class="text-end">
                                        <a class="text-gray-600 text-hover-primary">{{
                                            $order->user->name }}</a>
                                    </td>
                                    <td class="text-end"> {{ single_price($order->grand_total) }}</td>
                                    <td class="text-end">
                                        <span class="text-gray-800 fw-bolder">{{ $order->delivery_status}}</span>
                                    </td>
                                    <td class="text-end">
                                        <span
                                            class="badge py-3 px-4 fs-7 {{ $order->payment_status === 'paid' ? 'badge-light-success' : 'badge-light-warning' }}">{{
                                            $order->payment_status }}</span>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Table Widget 4-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row gy-5 g-xl-10 mb-5">
                <!--begin::Col-->
                <div class="col-xl-4">
                    <!--begin::List widget 5-->
                    <div class="card card-flush h-xl-100">
                        <!--begin::Header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-900">Product Delivery</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">{{
                                \App\Models\Order::orderBy('created_at')->where('delivery_status','delivered')->count()
                                }} Products Shipped so far</span>
                            </h3>
                            <!--end::Title-->
                            <!--begin::Toolbar-->
                            <div class="card-toolbar">
                                <a href="apps/ecommerce/sales/details.html" class="btn btn-sm btn-light">Order
                                    Details</a>
                            </div>
                            <!--end::Toolbar-->
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        <div class="card-body">
                            <!--begin::Scroll-->
                            @foreach($orderDetailsStatus as $order)
                                <div class="hover-scroll-overlay-y pe-6 me-n6" style="height: fit-content">
                                    <!--begin::Item-->
                                    <div class="border border-dashed border-gray-300 rounded px-7 py-3 mb-6">
                                        <!--begin::Info-->
                                        <div class="d-flex flex-stack mb-3">
                                            <!--begin::Wrapper-->
                                            <div class="me-3">
                                                <!--begin::Icon-->
                                                <img
                                                    src="https://preview.keenthemes.com/metronic8/demo1/assets/media/stock/ecommerce/210.png"
                                                    class="w-50px ms-n1 me-1" alt=""/>
                                                <!--end::Icon-->
                                                <!--begin::Title-->
                                                <a href="apps/ecommerce/catalog/edit-product.html"
                                                   class="text-gray-800 text-hover-primary fw-bold">{{
                                            $order->order->user->name }}</a>
                                                <!--end::Title-->
                                            </div>
                                            <!--end::Wrapper-->
                                            <!--begin::Action-->
                                            <div class="m-0">
                                                <!--begin::Menu-->
                                                <button
                                                    class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end"
                                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
                                                    data-kt-menu-overflow="true">
                                                    <i class="ki-duotone ki-dots-square fs-1">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                        <span class="path3"></span>
                                                        <span class="path4"></span>
                                                    </i>
                                                </button>
                                                <!--begin::Menu 2-->
                                                <div
                                                    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                                                    data-kt-menu="true">
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">
                                                            Quick
                                                            Actions
                                                        </div>
                                                    </div>
                                                    <!--end::Menu item-->
                                                    <!--begin::Menu separator-->
                                                    <div class="separator mb-3 opacity-75"></div>
                                                    <!--end::Menu separator-->
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3">New Ticket</a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3">New Customer</a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3" data-kt-menu-trigger="hover"
                                                         data-kt-menu-placement="right-start">
                                                        <!--begin::Menu item-->
                                                        <a href="#" class="menu-link px-3">
                                                            <span class="menu-title">New Group</span>
                                                            <span class="menu-arrow"></span>
                                                        </a>
                                                        <!--end::Menu item-->
                                                        <!--begin::Menu sub-->
                                                        <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3">Admin Group</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3">Staff Group</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                            <!--begin::Menu item-->
                                                            <div class="menu-item px-3">
                                                                <a href="#" class="menu-link px-3">Member Group</a>
                                                            </div>
                                                            <!--end::Menu item-->
                                                        </div>
                                                        <!--end::Menu sub-->
                                                    </div>
                                                    <!--end::Menu item-->
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <a href="#" class="menu-link px-3">New Contact</a>
                                                    </div>
                                                    <!--end::Menu item-->
                                                    <!--begin::Menu separator-->
                                                    <div class="separator mt-3 opacity-75"></div>
                                                    <!--end::Menu separator-->
                                                    <!--begin::Menu item-->
                                                    <div class="menu-item px-3">
                                                        <div class="menu-content px-3 py-3">
                                                            <a class="btn btn-primary btn-sm px-4" href="#">Generate
                                                                Reports</a>
                                                        </div>
                                                    </div>
                                                    <!--end::Menu item-->
                                                </div>
                                                <!--end::Menu 2-->
                                                <!--end::Menu-->
                                            </div>
                                            <!--end::Action-->
                                        </div>
                                        <!--end::Info-->
                                        <!--begin::Customer-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Name-->

                                            <span class="text-gray-500 fw-bold">To:
                                        <a href="apps/ecommerce/sales/details.html"
                                           class="text-gray-800 text-hover-primary fw-bold">{{ $order->product?$order->product->getTranslation('name'):''}}</a></span>
                                            <!--end::Name-->
                                            <!--begin::Label-->
                                            <span
                                                class="badge badge-light-{{ $order->delivery_status === 'pending' ? 'warning' : 'success' }}">{{
                                        $order->delivery_status }}</span>
                                            </span>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Customer-->
                                    </div>
                                    <!--end::Item-->

                                </div>
                            @endforeach
                            <!--end::Scroll-->
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end::List widget 5-->
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-8">
                    <!--begin::Table Widget 5-->
                    <div class="card card-flush h-xl-100 overflow-scroll">
                        <!--begin::Card header-->
                        <div class="card-header pt-7">
                            <!--begin::Title-->
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-900">Stock Report</span>
                                <span class="text-gray-500 mt-1 fw-semibold fs-6">Total 2,356 Items in the Stock</span>
                            </h3>
                            <!--end::Title-->
                            <!--begin::Actions-->
                            <div class="card-toolbar">
                                <!--begin::Filters-->
                                <div class="d-flex flex-stack flex-wrap gap-4">
                                    <!--begin::Destination-->
                                    <div class="d-flex align-items-center fw-bold">
                                        <!--begin::Label-->
                                        <div class="text-muted fs-7 me-2">Cateogry</div>
                                        <!--end::Label-->
                                        <!--begin::Select-->
                                        <select
                                            class="form-select form-select-transparent text-gray-900 fs-7 lh-1 fw-bold py-0 ps-3 w-auto"
                                            data-control="select2" data-hide-search="true"
                                            data-dropdown-css-class="w-150px"
                                            data-placeholder="Select an option">
                                            <option></option>
                                            <option value="Show All" selected="selected">Show All</option>
                                            <option value="a">Category A</option>
                                            <option value="b">Category B</option>
                                        </select>
                                        <!--end::Select-->
                                    </div>
                                    <!--end::Destination-->
                                    <!--begin::Status-->
                                    <div class="d-flex align-items-center fw-bold">
                                        <!--begin::Label-->
                                        <div class="text-muted fs-7 me-2">Status</div>
                                        <!--end::Label-->
                                        <!--begin::Select-->
                                        <select
                                            class="form-select form-select-transparent text-gray-900 fs-7 lh-1 fw-bold py-0 ps-3 w-auto"
                                            data-control="select2" data-hide-search="true"
                                            data-dropdown-css-class="w-150px"
                                            data-placeholder="Select an option" data-kt-table-widget-5="filter_status">
                                            <option></option>
                                            <option value="Show All" selected="selected">Show All</option>
                                            <option value="In Stock">In Stock</option>
                                            <option value="Out of Stock">Out of Stock</option>
                                            <option value="Low Stock">Low Stock</option>
                                        </select>
                                        <!--end::Select-->
                                    </div>
                                    <!--end::Status-->
                                    <!--begin::Search-->
                                    <a href="apps/ecommerce/catalog/products.html" class="btn btn-light btn-sm">View
                                        Stock</a>
                                    <!--end::Search-->
                                </div>
                                <!--begin::Filters-->
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-3" id="kt_table_widget_5_table">
                                <!--begin::Table head-->
                                <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="min-w-150px">Item</th>
                                    <th class="text-end pe-3 min-w-100px">Product ID</th>
                                    <th class="text-end pe-3 min-w-150px">Date Added</th>
                                    <th class="text-end pe-3 min-w-100px">Price</th>
                                    <th class="text-end pe-0 min-w-75px">Qty</th>
                                </tr>
                                <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-gray-600">
                                @foreach($products_sales->take(10) as $stock)
                                    <tr>
                                        <!--begin::Item-->
                                        <td>
                                            <a href="apps/ecommerce/catalog/edit-product.html"
                                               class="text-gray-900 text-hover-primary">{{ $stock->name }}</a>
                                        </td>
                                        <!--end::Item-->
                                        <!--begin::Product ID-->
                                        <td class="text-end">{{ $stock->id }}</td>
                                        <!--end::Product ID-->
                                        <!--begin::Date added-->
                                        <td class="text-end">{{ $stock->created_at->format('Y-m-d') }}</td>
                                        <!--end::Date added-->
                                        <!--begin::Price-->
                                        <td class="text-end">${{ $stock->unit_price }}</td>
                                        <!--end::Price-->
                                        <!--begin::Qty-->
                                        <td class="text-end" data-order="58">
                                            <span class="text-gray-900 fw-bold">{{ $stock->current_stock }} PCS</span>
                                        </td>
                                        <!--end::Qty-->
                                    </tr>
                                @endforeach
                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Table Widget 5-->
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
        <!--end::Content container-->
    </div>
    <!--end::Content-->

@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('[aria-controls="kt_table_widget_4_table"]').remove();
            $('.dataTables_filter label').remove();
        });


        AIZ.plugins.chart('#pie-1', {
            type: 'doughnut',
            data: {
                labels: [
                    '{{translate('Total published products')}}',
                    '{{translate('Total sellers products')}}',
                    '{{translate('Total admin products')}}'
                ],
                datasets: [
                    {
                        data: [
                            {{ \App\Models\Product::where('published', 1)->count() }},
                            {{ \App\Models\Product::where('published', 1)->where('added_by', 'seller')->count() }},
                            {{ \App\Models\Product::where('published', 1)->where('added_by', 'admin')->count() }}
                        ],
                        backgroundColor: [
                            "#fd3995",
                            "#34bfa3",
                            "#5d78ff",
                            '#fdcb6e',
                            '#d35400',
                            '#8e44ad',
                            '#006442',
                            '#4D8FAC',
                            '#CA6924',
                            '#C91F37'
                        ]
                    }
                ]
            },
            options: {
                cutoutPercentage: 70,
                legend: {
                    labels: {
                        fontFamily: 'Poppins',
                        boxWidth: 10,
                        usePointStyle: true
                    },
                    onClick: function () {
                        return '';
                    },
                    position: 'bottom'
                }
            }
        });

        AIZ.plugins.chart('#pie-2', {
            type: 'doughnut',
            data: {
                labels: [
                    '{{translate('Total sellers')}}',
                    '{{translate('Total approved sellers')}}',
                    '{{translate('Total pending sellers')}}'
                ],
                datasets: [
                    {
                        data: [
                            {{ \App\Models\Shop::count() }},
                            {{ \App\Models\Shop::where('verification_status', 1)->count() }},
                            {{ \App\Models\Shop::where('verification_status', 0)->count() }}
                        ],
                        backgroundColor: [
                            "#fd3995",
                            "#34bfa3",
                            "#5d78ff",
                            '#fdcb6e',
                            '#d35400',
                            '#8e44ad',
                            '#006442',
                            '#4D8FAC',
                            '#CA6924',
                            '#C91F37'
                        ]
                    }
                ]
            },
            options: {
                cutoutPercentage: 70,
                legend: {
                    labels: {
                        fontFamily: 'Montserrat',
                        boxWidth: 10,
                        usePointStyle: true
                    },
                    onClick: function () {
                        return '';
                    },
                    position: 'bottom'
                }
            }
        });
        AIZ.plugins.chart('#graph-1', {
            type: 'bar',
            data: {
                labels: [
                    @foreach ($root_categories as $key => $category)
                        '{{ $category->getTranslation('name') }}',
                    @endforeach
                ],
                datasets: [{
                    label: '{{ translate('Number of sale') }}',
                    data: [
                        {{ $cached_graph_data['num_of_sale_data'] }}
                    ],
                    backgroundColor: [
                        @foreach ($root_categories as $key => $category)
                            'rgba(55, 125, 255, 0.4)',
                        @endforeach
                    ],
                    borderColor: [
                        @foreach ($root_categories as $key => $category)
                            'rgba(55, 125, 255, 1)',
                        @endforeach
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        gridLines: {
                            color: '#f2f3f8',
                            zeroLineColor: '#f2f3f8'
                        },
                        ticks: {
                            fontColor: "#8b8b8b",
                            fontFamily: 'Poppins',
                            fontSize: 10,
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            color: '#f2f3f8'
                        },
                        ticks: {
                            fontColor: "#8b8b8b",
                            fontFamily: 'Poppins',
                            fontSize: 10
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontFamily: 'Poppins',
                        boxWidth: 10,
                        usePointStyle: true
                    },
                    onClick: function () {
                        return '';
                    },
                }
            }
        });
        AIZ.plugins.chart('#graph-2', {
            type: 'bar',
            data: {
                labels: [
                    @foreach ($root_categories as $key => $category)
                        '{{ $category->getTranslation('name') }}',
                    @endforeach
                ],
                datasets: [{
                    label: '{{ translate('Number of Stock') }}',
                    data: [
                        {{ $cached_graph_data['qty_data'] }}
                    ],
                    backgroundColor: [
                        @foreach ($root_categories as $key => $category)
                            'rgba(253, 57, 149, 0.4)',
                        @endforeach
                    ],
                    borderColor: [
                        @foreach ($root_categories as $key => $category)
                            'rgba(253, 57, 149, 1)',
                        @endforeach
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        gridLines: {
                            color: '#f2f3f8',
                            zeroLineColor: '#f2f3f8'
                        },
                        ticks: {
                            fontColor: "#8b8b8b",
                            fontFamily: 'Poppins',
                            fontSize: 10,
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            color: '#f2f3f8'
                        },
                        ticks: {
                            fontColor: "#8b8b8b",
                            fontFamily: 'Poppins',
                            fontSize: 10
                        }
                    }]
                },
                legend: {
                    labels: {
                        fontFamily: 'Poppins',
                        boxWidth: 10,
                        usePointStyle: true
                    },
                    onClick: function () {
                        return '';
                    },
                }
            }
        });


        var KTChartsWidget3 = function () {

            let salesData = @json($getSalesLastSixDays);


            var e = {self: null, rendered: !1},

                t = function (e) {
                var t = document.getElementById("kt_charts_widget_3");
                if (t) {
                    var a = parseInt(KTUtil.css(t, "height")), l = KTUtil.getCssVariableValue("--bs-gray-500"),
                        r = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
                        o = KTUtil.getCssVariableValue("--bs-success"), i = {
                            series: [{
                                name: "Sales",
                                data: salesData['total_sales']
                            }],
                            chart: {fontFamily: "inherit", type: "area", height: a, toolbar: {show: !1}},
                            plotOptions: {},
                            legend: {show: !1},
                            dataLabels: {enabled: !1},
                            fill: {
                                type: "gradient",
                                gradient: {shadeIntensity: 1, opacityFrom: .4, opacityTo: 0, stops: [0, 80, 100]}
                            },
                            stroke: {curve: "smooth", show: !0, width: 3, colors: [o]},
                            xaxis: {
                                categories: salesData['date'],
                                axisBorder: {show: !1},
                                axisTicks: {show: !1},
                                tickAmount: 6,
                                labels: {rotate: 0, rotateAlways: !0, style: {colors: l, fontSize: "12px"}},
                                crosshairs: {position: "front", stroke: {color: o, width: 1, dashArray: 3}},
                                tooltip: {enabled: !0, formatter: void 0, offsetY: 0, style: {fontSize: "12px"}}
                            },
                            yaxis: {
                                tickAmount: 4,
                                max: 24,
                                min: 10,
                                labels: {
                                    style: {colors: l, fontSize: "12px"},
                                    formatter: function (e) {
                                        return "$" + e + "K"
                                    }
                                }
                            },
                            states: {
                                normal: {filter: {type: "none", value: 0}},
                                hover: {filter: {type: "none", value: 0}},
                                active: {allowMultipleDataPointsSelection: !1, filter: {type: "none", value: 0}}
                            },
                            tooltip: {
                                style: {fontSize: "12px"}, y: {
                                    formatter: function (e) {
                                        return "$" + e + "K"
                                    }
                                }
                            },
                            colors: [KTUtil.getCssVariableValue("--bs-success")],
                            grid: {borderColor: r, strokeDashArray: 4, yaxis: {lines: {show: !0}}},
                            markers: {strokeColor: o, strokeWidth: 3}
                        };
                    e.self = new ApexCharts(t, i), setTimeout((function () {
                        e.self.render(), e.rendered = !0
                    }), 200)
                }
            };

            return {

                init: function () {
                    t(e), KTThemeMode.on("kt.thememode.change", (function () {

                        e.rendered && e.self.destroy(), t(e)
                    }))
                }
            }
        }();
        "undefined" != typeof module && (module.exports = KTChartsWidget3), KTUtil.onDOMContentLoaded((function () {
            KTChartsWidget3.init()
        }));


        var KTChartsWidget4 = function () {
            let DiscountedsalesData = @json($getSalesthirtyDays);

            var e = {self: null, rendered: !1}, t = function () {
                var t = document.getElementById("kt_charts_widget_4");
                if (t) {
                    var a = parseInt(KTUtil.css(t, "height")), l = KTUtil.getCssVariableValue("--bs-gray-500"),
                        r = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
                        o = KTUtil.getCssVariableValue("--bs-primary"), i = {
                            series: [{
                                name: "Sales",
                                data: DiscountedsalesData['total_sales']
                            }],
                            chart: {fontFamily: "inherit", type: "area", height: a, toolbar: {show: !1}},
                            plotOptions: {},
                            legend: {show: !1},
                            dataLabels: {enabled: !1},
                            fill: {
                                type: "gradient",
                                gradient: {shadeIntensity: 1, opacityFrom: .4, opacityTo: 0, stops: [0, 80, 100]}
                            },
                            stroke: {curve: "smooth", show: !0, width: 3, colors: [o]},
                            xaxis: {
                                categories: DiscountedsalesData['date'],
                                axisBorder: {show: !1},
                                axisTicks: {show: !1},
                                tickAmount: 6,
                                labels: {rotate: 0, rotateAlways: !0, style: {colors: l, fontSize: "12px"}},
                                crosshairs: {position: "front", stroke: {color: o, width: 1, dashArray: 3}},
                                tooltip: {enabled: !0, formatter: void 0, offsetY: 0, style: {fontSize: "12px"}}
                            },
                            yaxis: {
                                max: 36.3,
                                min: 33,
                                tickAmount: 6,
                                labels: {
                                    style: {colors: l, fontSize: "12px"}, formatter: function (e) {
                                        return "$" + parseInt(10 * e)
                                    }
                                }
                            },
                            states: {
                                normal: {filter: {type: "none", value: 0}},
                                hover: {filter: {type: "none", value: 0}},
                                active: {allowMultipleDataPointsSelection: !1, filter: {type: "none", value: 0}}
                            },
                            tooltip: {
                                style: {fontSize: "12px"}, y: {
                                    formatter: function (e) {
                                        return "$" + parseInt(10 * e)
                                    }
                                }
                            },
                            colors: [KTUtil.getCssVariableValue("--bs-primary")],
                            grid: {borderColor: r, strokeDashArray: 4, yaxis: {lines: {show: !0}}},
                            markers: {strokeColor: o, strokeWidth: 3}
                        };
                    e.self = new ApexCharts(t, i), setTimeout((function () {
                        e.self.render(), e.rendered = !0
                    }), 200)
                }
            };
            return {
                init: function () {
                    t(), KTThemeMode.on("kt.thememode.change", (function () {
                        e.rendered && e.self.destroy(), t()
                    }))
                }
            }
        }();
        "undefined" != typeof module && (module.exports = KTChartsWidget4), KTUtil.onDOMContentLoaded((function () {
            KTChartsWidget4.init()
        }));


        var KTCardsWidget6 = {
            init: function () {
                !(function () {
                    var e = document.getElementById("kt_card_widget_6_chart");
                    let SalesSubSevenAverageDailyTotal = @json($getAverageDailyTotalSales);
                    if (e) {
                        var t = parseInt(KTUtil.css(e, "height")),
                            a = KTUtil.getCssVariableValue("--bs-gray-500"),
                            l = KTUtil.getCssVariableValue("--bs-border-dashed-color"),
                            r = KTUtil.getCssVariableValue("--bs-primary"),
                            o = KTUtil.getCssVariableValue("--bs-gray-300"),
                            i = new ApexCharts(e, {
                                series: [
                                    {
                                        name: "Sales",
                                        data: SalesSubSevenAverageDailyTotal['total_sales'],
                                    },
                                ],
                                chart: {
                                    fontFamily: "inherit",
                                    type: "bar",
                                    height: t,
                                    toolbar: {show: !1},
                                    sparkline: {enabled: !0},
                                },
                                plotOptions: {
                                    bar: {
                                        horizontal: !1,
                                        columnWidth: ["55%"],
                                        borderRadius: 6,
                                    },
                                },
                                legend: {show: !1},
                                dataLabels: {enabled: !1},
                                stroke: {show: !0, width: 9, colors: ["transparent"]},
                                xaxis: {
                                    axisBorder: {show: !1},
                                    axisTicks: {show: !1, tickPlacement: "between"},
                                    labels: {
                                        show: !1,
                                        style: {colors: a, fontSize: "12px"},
                                    },
                                    crosshairs: {show: !1},
                                },
                                yaxis: {
                                    labels: {
                                        show: !1,
                                        style: {colors: a, fontSize: "12px"},
                                    },
                                },
                                fill: {type: "solid"},
                                states: {
                                    normal: {filter: {type: "none", value: 0}},
                                    hover: {filter: {type: "none", value: 0}},
                                    active: {
                                        allowMultipleDataPointsSelection: !1,
                                        filter: {type: "none", value: 0},
                                    },
                                },
                                tooltip: {
                                    style: {fontSize: "12px"},
                                    x: {
                                        formatter: function (e) {
                                            return "Feb: " + e;
                                        },
                                    },
                                    y: {
                                        formatter: function (e) {
                                            return e + "$";
                                        },
                                    },
                                },
                                colors: [r, o],
                                grid: {
                                    padding: {left: 10, right: 10},
                                    borderColor: l,
                                    strokeDashArray: 4,
                                    yaxis: {lines: {show: !0}},
                                },
                            });
                        setTimeout(function () {
                            i.render();
                        }, 300);
                    }
                })();
            },
        };
        "undefined" != typeof module && (module.exports = KTCardsWidget6),
            KTUtil.onDOMContentLoaded(function () {
                KTCardsWidget6.init();
            });

    </script>
@endsection