@extends('layout.store_layout.master')
@section('content')
    <div class="card card-flush">
        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
            <!--begin::Card title-->
            <div class="card-title">
                <div class=" w-100 mw-250px">
                {{--<label class="form-label fs-5 fw-semibold mb-3">تاريخ الاضافة:</label>--}}
                <!--begin::Flatpickr-->
                    <div class="input-group min-w-250px">
                        <input class="form-control form-control-solid rounded rounded-end-0" placeholder="اختر الفترة الزمنية" id="reports_date_range_flatpickr" />
                        <button class="btn btn-icon btn-light" id="reports_date_range_flatpickr_clear">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.svg-->
                            <span class="svg-icon svg-icon-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="7.05025" y="15.5356" width="12" height="2" rx="1" transform="rotate(-45 7.05025 15.5356)" fill="currentColor" />
                                        <rect x="8.46447" y="7.05029" width="12" height="2" rx="1" transform="rotate(45 8.46447 7.05029)" fill="currentColor" />
                                    </svg>
                                </span>
                            <!--end::Svg Icon-->
                        </button>
                    </div>
                    <!--end::Flatpickr-->
                </div>
            </div>
            <!--end::Card title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                <a href="" class="btn btn-light-success">تصدير</a>
                <a href="" class="btn btn-light">طباعه</a>
            </div>
            <!--end::Card toolbar-->
        </div>
        <div class="card-body pb-0">
            <div class="pb-12">
                <!--begin::Wrapper-->
                <div class="d-flex flex-column gap-7 gap-md-7">
                    <!--begin::Message-->
                    <h3 class="fw-bold fs-2">ملخص</h3>

                    <div class="bg-light p-5 d-flex flex-column gap-7 gap-md-10">
                        <!--begin::Separator-->
                        {{--<div class="separator"></div>--}}
                        <!--begin::Separator-->
                        <!--begin::Order details-->
                        <div class="d-flex flex-column flex-sm-row gap-7 gap-md-10 fw-bold">
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">إجمالي مبيعات الشراء</span>
                                <span class="fs-5">250 رس</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">إجمالي مبيعات التفصيل</span>
                                <span class="fs-5">500 رس</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">تكاليف المنتجات</span>
                                <span class="fs-5">300 رس</span>
                            </div>
                        </div>
                        <!--end::Order details-->
                        <!--begin::Billing & shipping-->
                        <div class="d-flex flex-column flex-sm-row gap-7 gap-md-10 fw-bold">
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">كوبونات التخفيض</span>
                                <span class="fs-5">0 رس</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">الضرائب</span>
                                <span class="fs-5">-</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">الشحن</span>
                                <span class="fs-5">25 رس</span>
                            </div>
                            {{--<div class="flex-root d-flex flex-column">--}}
                                {{--<span class="text-muted">Shipping Address</span>--}}
                                {{--<span class="fs-6">Unit 1/23 Hastings Road,--}}
                                                                    {{--<br />Melbourne 3000,--}}
                                                                    {{--<br />Victoria,--}}
                                                                    {{--<br />Australia.</span>--}}
                            {{--</div>--}}
                        </div>
                        <!--end::Billing & shipping-->
                        <div class="d-flex bg-white p-5 rounded-4 border-dashed border">
                            <div class="col-4 text-dark fs-3 fw-bold">صافي المبيعات</div>
                            <div class="text-dark fs-3 fw-bolder">0 رس</div>
                        </div>

                    </div>




                </div>
                <!--end::Wrapper-->
            </div>
        </div>
    </div>

    <div class=" py-5 mt-5">
        <h3 class="fw-bold fs-2">نوع التقرير</h3>
    </div>

    <!--begin::Row-->
    <style>
        .nav .card.active{
            background-color: #f4f6fa;
        }
    </style>
    <div class="row g-4 g-xl-9 mb-6 mb-xl-9 nav">
        <!--begin::Col-->
        <div class="col-md-6 col-lg-4 col-xl-3">
            <a  class="card hover-elevate-up shadow-sm parent-hover active" data-bs-toggle="tab" href="#report_1">
                <div class="card-body d-flex align-items">
                    <i class="bi bi-house fs-2x "></i>
                    <span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
                            مبيعات الشراء
                     </span>
                </div>
            </a>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6 col-lg-4 col-xl-3">
            <a  class="card hover-elevate-up shadow-sm parent-hover" data-bs-toggle="tab" href="#report_2">
                <div class="card-body d-flex align-items">
                    <i class="bi bi-images fs-2x "></i>
                    <span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
                            مبيعات التفصيل
                     </span>
                </div>
            </a>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6 col-lg-4 col-xl-3">
            <a  class="card hover-elevate-up shadow-sm parent-hover" data-bs-toggle="tab" href="#report_3">
                <div class="card-body d-flex align-items">
                    <i class="bi bi-phone fs-2x "></i>
                    <span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
                            العملاء
                     </span>
                </div>
            </a>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6 col-lg-4 col-xl-3">
            <a  class="card hover-elevate-up shadow-sm parent-hover" data-bs-toggle="tab" href="#report_4">
                <div class="card-body d-flex align-items">
                    <i class="bi bi-phone fs-2x "></i>
                    <span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
                            المندوبين
                     </span>
                </div>
            </a>
        </div>
        <!--end::Col-->
        <!--begin::Col-->
        <div class="col-md-6 col-lg-4 col-xl-3">
            <a  class="card hover-elevate-up shadow-sm parent-hover" data-bs-toggle="tab" href="#report_5">
                <div class="card-body d-flex align-items">
                    <i class="bi bi-phone fs-2x "></i>
                    <span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
                            المنتجات
                     </span>
                </div>
            </a>
        </div>
        <!--end::Col-->


    </div>
    <!--end:Row-->

<!--begin::Products-->
{{--<div class="card card-flush mt-6">--}}
    <!--begin::Card body-->
    {{--<div class="card-body pt-0">--}}
        {{--<div class="card-header align-items-center py-5 gap-2 gap-md-5">--}}
            {{--<h3 class="fw-bold fs-2">نوع التقرير</h3>--}}
        {{--</div>--}}
        <!--begin::Navs-->
        {{--<ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">--}}
            {{--<!--begin::Nav item-->--}}
            {{--<li class="nav-item mt-2">--}}
                {{--<a class="nav-link text-active-primary ms-0 me-10 py-5 active" data-bs-toggle="tab" href="#report_1">مبيعات الشراء</a>--}}
            {{--</li>--}}
            {{--<!--end::Nav item-->--}}
            {{--<!--begin::Nav item-->--}}
            {{--<li class="nav-item mt-2">--}}
                {{--<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#report_2">مبيعات التفصيل</a>--}}
            {{--</li>--}}
            {{--<!--end::Nav item-->--}}
            {{--<!--begin::Nav item-->--}}
            {{--<li class="nav-item mt-2">--}}
                {{--<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#report_3">العملاء</a>--}}
            {{--</li>--}}
            {{--<!--end::Nav item-->--}}
            {{--<!--begin::Nav item-->--}}
            {{--<li class="nav-item mt-2">--}}
                {{--<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#report_4">المندوبين</a>--}}
            {{--</li>--}}
            {{--<!--end::Nav item-->--}}
            {{--<!--begin::Nav item-->--}}
            {{--<li class="nav-item mt-2">--}}
                {{--<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#report_5">المنتجات</a>--}}
            {{--</li>--}}
            {{--<!--end::Nav item-->--}}
            {{----}}
        {{--</ul>--}}
        <!--begin::Navs-->


    {{--</div>--}}
    <!--end::Card body-->
{{--</div>--}}

    <div class="tab-content" id="reports_tabs">
        <div class="tab-pane fade " id="report_1" role="tabpanel">
            <div class="card card-flush mt-6">
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_products_table">
                            <!--begin::Table head-->
                            <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-150px">@lang('admin.product')</th>
                                <th class="">@lang('admin.main_category')</th>
                                <th class="">@lang('admin.sub_category')</th>
                                <th class="">@lang('admin.quantity')</th>
                                <th class="">@lang('admin.price')</th>
                                <th class="min-w-150px">@lang('admin.created_date')</th>
                                <th class="">@lang('admin.status')</th>
                                <th class="">@lang('admin.reservation_feature')</th>
                                <th class="">@lang('admin.hide_product') <i class="fas fa-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="تفعيل أو تعطيل خاصية اخفاء المنتج عند نفاذ الكمية"></i></th>

                            </tr>
                            <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <!--begin::Thumbnail-->
                                        <a href="{{ route('admin.products.show') }}" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{image("stock/ecommerce/1.gif")}}');"></span>
                                        </a>
                                        <!--end::Thumbnail-->
                                        <div class="ms-5">
                                            <!--begin::Title-->
                                            <a href="{{ route('admin.products.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold" >طقم رسمي</a>
                                            <!--end::Title-->
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    <a href="#" class="text-gray-600 text-hover-primary mb-1">ملابس</a>
                                </td>

                                <td>
                                    <a href="#" class="text-gray-600 text-hover-primary mb-1">اطفال</a>
                                </td>

                                <td>48</td>
                                <td>25</td>

                                <td>14 Dec 2020, 8:43 pm</td>

                                <td>
                                    @lang('general.enable')
                                </td>
                                <td>
                                    @lang('general.enable')
                                </td>
                                <td>
                                    @lang('general.enable')
                                </td>


                            </tr>
                            <tr>

                                <td>
                                    <div class="d-flex align-items-center">
                                        <!--begin::Thumbnail-->
                                        <a href="{{ route('admin.products.show') }}" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{image("stock/ecommerce/2.gif")}}');"></span>
                                        </a>
                                        <!--end::Thumbnail-->
                                        <div class="ms-5">
                                            <!--begin::Title-->
                                            <a href="{{ route('admin.products.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold" >منتج 2</a>
                                            <!--end::Title-->
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    <a href="#" class="text-gray-600 text-hover-primary mb-1">ملابس</a>
                                </td>

                                <td>
                                    <a href="#" class="text-gray-600 text-hover-primary mb-1">رجالي</a>
                                </td>

                                <td>33</td>
                                <td>25</td>

                                <td>14 Dec 2020, 8:43 pm</td>

                                <td>
                                    @lang('general.enable')
                                </td>
                                <td>
                                    @lang('general.enable')
                                </td>
                                <td>
                                    @lang('general.enable')
                                </td>


                            </tr>
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="report_2" role="tabpanel">
            <div class="card card-flush mt-6">
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="cs_datatable_cloths_models">
                            <!--begin::Table head-->
                            <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0 bg-light">
                                <th class="min-w-200px">الموديل</th>
                                <th class="min-w-100px">قسم التفصيل</th>
                                <th class="min-w-100px">عدد الطلبات</th>
                                <th class=" min-w-100px">تاريخ الانشاء</th>
                                <th class=" min-w-100px">الحالة</th>
                            </tr>
                            <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-semibold text-gray-600">

                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="#" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{asset("assets/media//stock/ecommerce/5.gif")}}');"></span>
                                        </a>
                                        <div class="ms-5">
                                            <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-ecommerce-product-filter="product_name">موديل 1</a>
                                        </div>
                                    </div>

                                </td>
                                <td class="text-center">
                                    <a href="" class=" text-hover-primary fw-bold ">
                                        بلايز
                                    </a>
                                </td>
                                <td class="">
                                    <a href="">
                                        <span class="fw-bold ms-3">23</span>
                                    </a>
                                </td>

                                <td >
                                    14 Dec 2020, 8:43 pm
                                </td>
                                <td class="">
                                    مفعل
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="#" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{asset("assets/media//stock/ecommerce/72.gif")}}');"></span>
                                        </a>
                                        <div class="ms-5">
                                            <a href="#" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-ecommerce-product-filter="product_name">جلبابات</a>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <a href="" class=" text-hover-primary fw-bold">
                                        جلبابات
                                    </a>
                                </td>
                                <td class="">
                                    <a href="">
                                        <span class="fw-bold ms-3">38</span>
                                    </a>
                                </td>

                                <td >
                                    14 Dec 2020, 8:43 pm
                                </td>
                                <td class="" data-search="disabled">
                                    مفعل
                                </td>

                            </tr>



                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="report_3" role="tabpanel">

            <div class="row">
                <div class="col-lg-6 mb-6">
                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>اجمالي العملاء</h3>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; width:300px;margin: 0 auto">
                                <canvas id="myChart1" ></canvas>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-lg-6 mb-6">
                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>توزيع العملاء على فترات</h3>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; height:300px;margin: 0 auto">
                                <canvas id="myChart2"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row ">
                <div class="col-lg-6 mb-6">
                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>العملاء الأكثر دفعا</h3>
                        </div>
                        <div class="card-body ">

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center fw-bold fs-3">العميل</th>
                                            <th class="text-center fw-bold fs-3">المبلغ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                    </a>
                                                    <div class="ms-5">
                                                        <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="fs-2 fw-bold">250 رس</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                    </a>
                                                    <div class="ms-5">
                                                        <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="fs-2 fw-bold">250 رس</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                        <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                    </a>
                                                    <div class="ms-5">
                                                        <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <span class="fs-2 fw-bold">250 رس</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-6">

                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>العملاء الاكثر طلبا</h3>
                        </div>
                        <div class="card-body ">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th class="text-center fw-bold fs-3">العميل</th>
                                        <th class="text-center fw-bold fs-3">عدد الطلبات</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="fs-2 fw-bold">250 </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="fs-2 fw-bold">25</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="fs-2 fw-bold">2</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="report_4" role="tabpanel">
            <div class="card mt-6">
                <div class="card-header align-items-center">
                    <h3>أعلى المندوبين تقييماً</h3>
                </div>
                <div class="card-body ">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th class=" fw-bold fs-3">المندوب</th>
                                <th class="text-center fw-bold fs-3">التقييم</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                        </a>
                                        <div class="ms-5">
                                            <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <i class="fa fa-star-half-alt me-1 text-warning fs-4"></i>
                                    <span class="text-gray-800 fw-bold fs-4">4.2</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                        </a>
                                        <div class="ms-5">
                                            <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <i class="fa fa-star-half-alt me-1 text-warning fs-4"></i>
                                    <span class="text-gray-800 fw-bold fs-4">4.2</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                            <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                        </a>
                                        <div class="ms-5">
                                            <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <i class="fa fa-star-half-alt me-1 text-warning fs-4"></i>
                                    <span class="text-gray-800 fw-bold fs-4">4.2</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade  active show" id="report_5" role="tabpanel">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>أكثر المنتجات مبيعاً</h3>
                        </div>
                        <div class="card-body ">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th class=" fw-bold fs-3">المنتج</th>
                                        <th class="text-center fw-bold fs-3">الكمية</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">4250</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">3000</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">250</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card mt-6">
                        <div class="card-header align-items-center">
                            <h3>أعلى المنتجات إعادة للشراء</h3>
                        </div>
                        <div class="card-body ">

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th class=" fw-bold fs-3">المنتج</th>
                                        <th class="text-center fw-bold fs-3">عدد الطلبات</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">20</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">15</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('admin.customers.show') }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{asset("assets/media/avatars/300-1.jpg")}}');"></span>
                                                </a>
                                                <div class="ms-5">
                                                    <a href="{{ route('admin.customers.show') }}" class="text-gray-800 text-hover-primary fs-5 fw-bold">مؤنس محمد</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-gray-800 fw-bold fs-4">11</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





@endsection
@push('custom_css')
    <style>
        .table td{
            vertical-align: middle;
        }
    </style>
{{--    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css"/>--}}
@endpush
@push('custom_js')
{{--    <script src="{{asset('assets/js/chartjs_utils.js')}}"></script>--}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
            $(document).ready(function(){
                // init flatpickr
                var reports_flatpickr = $('#reports_date_range_flatpickr').flatpickr({
                    altInput: true,
                    altFormat: "d/m/Y",
                    dateFormat: "Y-m-d",
                    mode: "range",
                    onChange: function (selectedDates, dateStr, instance) {
                        // handleFlatpickr(selectedDates, dateStr, instance);
                        // do some things
                    },
                });
                $(document).on('click','#reports_date_range_flatpickr_clear',function (e) {
                    e.preventDefault();
                    reports_flatpickr.clear();
                });

                var table = $('#kt_products_table')[0];
                datatable = $(table).DataTable({
                        "info": false,
                        'order': [],
                        'columnDefs': [
                            // { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
                            { orderable: false, targets: 6 }, // Disable ordering on column 6 (stauts)
                            // { orderable: false, targets: 7 }, // Disable ordering on column 6 (actions)
                        ]
                    });


                $('#cs_datatable_cloths_models').DataTable({
                    "info": false,
                    'order': [],
                    'pageLength': 10,
                    'columnDefs': [
                        // { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
                        // { orderable: false, targets: 5 }, // Disable ordering on column 3 (actions)
                    ]
                });



                // customer_statistics_func();
            });

            const ctx = document.getElementById('myChart1');
            const labels1 = ['قام بالشراء', 'لم يقم بالشراء'];

            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels1,
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 88],
                        borderWidth: 1
                    }]
                },
                // options: {
                //     scales: {
                //         y: {
                //             beginAtZero: true
                //         }
                //     }
                // }
            });


            const labels2 = [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December'
            ];
            const data2 = {
                labels: labels2,
                datasets: [{
                    label: 'توزيع العملاء',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            };
            const ctx2 = document.getElementById('myChart2');
            const config2 = {
                type: 'line',
                data: data2,
            };
            new Chart(ctx2, config2);

        function customer_statistics_func(){
                var ctx = document.getElementById('customers_statistics');

                // Define colors
                // var primaryColor = KTUtil.getCssVariableValue('--kt-primary');
                var dangerColor = KTUtil.getCssVariableValue('--kt-danger');
                var successColor = KTUtil.getCssVariableValue('--kt-success');
                // var warningColor = KTUtil.getCssVariableValue('--kt-warning');
                // var infoColor = KTUtil.getCssVariableValue('--kt-info');

                // Define fonts
                var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

                // Chart labels
                const labels = ['قام بالشراء', 'لم يقم بالشراء'];

                // Chart data
                const data = {
                    labels: labels,
                    datasets: [
                        {
                            label: '# of Votes',
                            data: [20, 80],
                            borderWidth: 1
                        },
                    ]
                };

                // Chart config
                const config = {
                    type: 'pie',
                    data: data,
                    options: {
                        plugins: {
                            title: {
                                display: false,
                            }
                        },
                        responsive: true,
                    },
                    defaults:{
                        global: {
                            defaultFont: fontFamily
                        }
                    }
                };

                // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
                var myChart = new Chart(ctx, config);
        }

    </script>
@endpush