@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
    use App\General\InvoiceClass;
    use App\Models\Product;
    use Illuminate\Support\Str;
    use App\General\ProductClass;
@endphp
@include('Admin.Includes.header')

<style>
    .order_div {
        width: 19% !important;
    }


    .scroll_down::-webkit-scrollbar {
        width: 2px;
    }

    /* Track */
    .scroll_down::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    .scroll_down::-webkit-scrollbar-thumb {
        background: grey;
        border-radius: 10px;
    }

    /* Handle on hover */
    .scroll_down::-webkit-scrollbar-thumb:hover {
        background: grey;
    }
</style>
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">Dashboard</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <span class="breadcrumb-item active">Dashboard</span>
                </div>
            </div>

        </div>
    </div>
    <!--/ Breadcrumb End -->
    <!--================================-->

    <!-- Sales Details Start -->
    <!--================================-->
    <div>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <!-- All Orders Card -->
            <div class="card">
                <div class="card-body">
                    <h1 class="h4 mb-0 tx-rubik">{{ $all_orders }}</h1>
                    <h6 class="tx-14 tx-primary tx-uppercase">All Orders</h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <!-- Complete Orders Card -->
            <div class="card">
                <div class="card-body">
                    <h1 class="h4 mb-0 tx-rubik">{{ $comp_orders }}</h1>
                    <h6 class="tx-14 tx-success tx-uppercase">Complete Orders</h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <!-- In Progress Orders Card -->
            <div class="card">
                <div class="card-body">
                    <h1 class="h4 mb-0 tx-rubik">{{ $inpro_orders }}</h1>
                    <h6 class="tx-14 tx-primary tx-uppercase">In Progress Orders</h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <!-- Pending Orders Card -->
            <div class="card">
                <div class="card-body">
                    <h1 class="h4 mb-0 tx-rubik">{{ $pend_orders }}</h1>
                    <h6 class="tx-14 tx-warning tx-uppercase">Pending Orders</h6>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
            <!-- Cancelled Orders Card -->
            <div class="card">
                <div class="card-body">
                    <h1 class="h4 mb-0 tx-rubik">{{ $canc_orders }}</h1>
                    <h6 class="tx-14 tx-pink tx-uppercase">Cancelled Orders</h6>
                </div>
            </div>
        </div>
    </div>
</div>

    <!--/ Sales Details End -->
    <!--  Start -->
    <!--================================-->
    <div class="row clearfix">
        <!--================================-->
        <!-- Heard Card Start -->
        <!--================================-->
        <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Users</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">{{ $total_users }}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Products</h5>
                    <div class="d-flex justify-content-between align-items-center">

                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">
                            {{ $total_products !== '' ? $total_products : '0' }}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Product Brands</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">
                            {{ $total_brands !== '' ? $total_brands : '0' }}</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Area Groups</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">
                            {{ $total_areagroups !== '' ? $total_areagroups : '0' }}</h2>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Collections</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">
                            {{ $total_collections !== '' ? $total_collections : 0 }}</h2>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">POS Orders</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">{{ $invoice_orders }}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="col-md-6 col-lg-6 col-xl-3">
            <div class="card mg-b-30">
                <div class="card-body">
                    <h5 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 mg-b-2">Online Store Orders</h5>
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="tx-20 tx-sm-18 tx-md-24 mg-b-0 tx-rubik tx-dark tx-normal">{{ $online_orders }}
                        </h2>
                    </div>
                </div>
            </div>
        </div> -->
        <!--/ Heard Card End -->
    </div>
<!--tset-->
<div class="row pb-3">
    <div class="col-lg-12 pl-1">
        <canvas id="barChart" height="600"></canvas>
    </div>
</div>
<!--test-->
    <div class="row">
        <!--================================-->
        <!-- New Customers Start -->
        <!--================================-->
        <div class="col-lg-6 col-xl-4">
            <div class="card mg-b-30">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h6 class="tx-13 mb-0">New Customers</h6>
                    <div class="card-header-btn">
                        <div><a href="/admin/users/list/customer" class=""><i data-feather="users"
                                    class="wd-16 mr-2"></i>All Customer</a></div>
                    </div>
                </div>
                <div class="card-body pd-y-20 scroll_down" style="height: 397px;overflow: auto;">
                    @if ($customers->isNotEmpty())
                        <ul class="list-unstyled mb-0">
                            @foreach ($customers as $customer)
                                <li class="d-flex align-items-center mg-b-15">
                                    <a href="">
                                        <div class=""
                                            style="background:url({{ url('/') . '' . $customer->profile_image }});background-size:cover;background-position:center;width: 35px !important;height: 35px !important; border-radius: 17.5px !important; margin:0px !important;">
                                        </div>
                                    </a>
                                    <div class="media-body pd-l-15 lh-2">
                                        <p class="tx-medium mg-b-2"><a href="">{{ $customer->name }}</a></p>
                                        <span
                                            class="tx-12 tx-gray-500">Joined:{{ InvoiceClass::convertDateToDDMMYYYY($customer->created_at) }}</span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <li class="list-group-item text-center">No Customer Found.</li>
                    @endif
                </div>
            </div>
        </div>
        <!--/ New Customers End -->
        <!--================================-->
        <!-- Transaction History Start -->
        <!--================================-->
        <div class="col-lg-6 col-xl-4">
            <div class="card mg-b-30">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h6 class="tx-13 mb-0">Order History</h6>
                    <div class="card-header-btn">
                        <div class="">
                            <a href="/admin/orders"><i data-feather="box"class="wd-16 mr-2"></i>All Order</a>
                        </div>
                    </div>
                </div>

                <div class="card-body pd-0 pd-y-15 scroll_down" style="height: 397px;overflow: auto;">
                    @if ($orders->isNotEmpty())
                        <ul class="list-group list-group-flush tx-13">
                            @foreach ($orders as $order)
                                @if ($order->status == 'completed')
                                    <li class="list-group-item d-flex pd-y-9 pd-sm-x-20">
                                        <div class="d-none d-sm-block"><span
                                                class="wd-40 ht-40 mg-r-10 d-flex align-items-center justify-content-center rounded bg-success tx-white"><i
                                                    class="ti-check"></i></span></div>
                                        <div class="pd-sm-l-10">
                                            <p class="mg-b-0">{{ $order->f_name }} {{ $order->l_name }}</p>
                                            <span class="tx-12 mg-b-0 tx-gray-500">Order
                                                ID:#{{ $order->id }}</span>
                                        </div>
                                        <div class="mg-l-auto text-right">
                                            <p class="mg-b-0 tx-rubik">${{ $order->total_amount }}</p>
                                            <span class="tx-success tx-12">Completed</span>
                                        </div>
                                    </li>
                                @elseif ($order->status == 'pending')
                                    <li class="list-group-item d-flex pd-y-9 pd-sm-x-20">
                                        <div class="d-none d-sm-block"><span
                                                class="wd-40 ht-40 mg-r-10 d-flex align-items-center justify-content-center rounded bg-warning tx-dark"><i
                                                    class="ti-anchor"></i></span></div>
                                        <div class="pd-sm-l-10">
                                            <p class="mg-b-0">{{ $order->f_name }} {{ $order->l_name }}</p>
                                            <span class="tx-12 mg-b-0 tx-gray-500">Order
                                                ID:#{{ $order->id }}</span>
                                        </div>
                                        <div class="mg-l-auto text-right">
                                            <p class="mg-b-0 tx-rubik">${{ $order->total_amount }}</p>
                                            <span class="tx-warning tx-12">Pending</span>
                                        </div>
                                    </li>
                                @elseif($order->status == 'inProcess')
                                    <li class="list-group-item d-flex pd-y-9 pd-sm-x-20">
                                        <div class="d-none d-sm-block"><span
                                                class="wd-40 ht-40 mg-r-10 d-flex align-items-center justify-content-center rounded bg-primary tx-white"><i
                                                    class="ti-reload"></i></span></div>
                                        <div class="pd-sm-l-10">
                                            <p class="mg-b-0">{{ $order->f_name }} {{ $order->l_name }}</p>
                                            <span class="tx-12 mg-b-0 tx-gray-500">Order
                                                ID:#{{ $order->id }}</span>
                                        </div>
                                        <div class="mg-l-auto text-right">
                                            <p class="mg-b-0 tx-rubik">${{ $order->total_amount }}</p>
                                            <span class="tx-primary tx-12">Inprogress</span>
                                        </div>
                                    </li>
                                @else
                                    <li class="list-group-item d-flex pd-y-9 pd-sm-x-20">
                                        <div class="d-none d-sm-block"><span
                                                class="wd-40 ht-40 mg-r-10 d-flex align-items-center justify-content-center rounded bg-danger tx-white"><i
                                                    class="ti-close"></i></span></div>
                                        <div class="pd-sm-l-10">
                                            <p class="mg-b-0">{{ $order->f_name }} {{ $order->l_name }}</p>
                                            <span class="tx-12 mg-b-0 tx-gray-500">Order
                                                ID:#{{ $order->id }}</span>
                                        </div>
                                        <div class="mg-l-auto text-right">
                                            <p class="mg-b-0 tx-rubik">${{ $order->total_amount }}</p>
                                            <span class="tx-danger tx-12">Canceled</span>
                                        </div>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @else
                        <li class="list-group-item text-center">No Order Found.</li>
                    @endif
                </div>

            </div>
        </div>
        <!--/ Transaction History End -->
        <!--================================-->
        <!-- Mostsell Product Start -->
        <!--================================-->
        <div class="col-xl-4">
            <!-- <div class="card mg-b-30">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h6 class="tx-13 mb-0">Most Sell Product</h6>
                    <div class="card-header-btn">
                        <div class="">
                            <a href="/admin/products"><i data-feather="box"class="wd-16 mr-2"></i>All Product</a>
                        </div>
                    </div>
                </div>
                <div class="card-body " style="height: 400px; overflow: hidden;">
                    <div class="list-group list-group-flush m-t-10 tx-13 scroll_down"
                        style="overflow: auto; height: 400px;">
                        <table class="table table-hover">
                            <thead style="position: sticky; top: 0;background-color: #fff;">
                                <tr>
                                    <th scope="col">Product</th>
                                    <th scope="col">Sold</th>
                                </tr>
                            </thead>
                            <tbody class="scroll_down" style="height:300px; overflow: auto; ">
                                @if ($sellingProducts->count() > 0)
                                @foreach ($sellingProducts->sortByDesc('count') as $product)
                                    <tr>
                                        <td scope="row">
                                        <div class="d-flex align-items-center">
                                            <div
                                                style="background: url({{ $product && $product->product && $product->product->featured_image ? url('/') . '/' . $product->product->featured_image : '/' }}); border: 1px solid gray; width: 50px; height: 50px; background-position: center; background-size: contain; background-repeat: no-repeat;">
                                            </div>
                                            <a href="{{ url('/') }}/product/{{ $product && $product->product ? $product->product->permalink : '' }}"
                                                target="_blank">{{ Str::limit($product && $product->product ? $product->product->title : '', 35, '...') }}</a>
                                        </div>
                                    </td>
                                        <td>{{ $product->count }}</td>
                                    </tr>
                                @endforeach
                                @else
                                    <tr>
                                        <td colspan="2">No records found</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->
        </div>
        <!-- <div class="col-xl-4">
                 <div class="card mg-b-30">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h6 class="tx-13 mb-0">Least & Not Selling Product</h6>
                    <div class="card-header-btn">
                        <div class="">
                            <a href="/admin/products"><i data-feather="box"class="wd-16 mr-2"></i>All Product</a>
                        </div>
                    </div>
                </div>
                <div class="card-body " style="height: 400px; overflow: hidden;">
                    <div class="list-group list-group-flush m-t-10 tx-13 scroll_down"
                        style="overflow: auto; height: 400px;">
                        <table class="table table-hover">
                            <thead style="position: sticky; top: 0;background-color: #fff;">
                                <tr>
                                    <th scope="col">Product</th>
                                    <th scope="col">Sold</th>
                                </tr>
                            </thead>
                            <tbody class="scroll_down" style="height:300px; overflow: auto; ">
                                @if ($lessSellingProducts->count() > 0)
                                @foreach ($lessSellingProducts->sortByDesc('count') as $product)
                                    <tr>
                                        <td scope="row">
                                        <div class="d-flex align-items-center">
                                            <div
                                                style="background: url({{ $product && $product->featured_image ? url('/') . '/' . $product->featured_image : '/' }}); border: 1px solid gray; width: 50px; height: 50px; background-position: center; background-size: contain; background-repeat: no-repeat;">
                                            </div>
                                            <a href="{{ url('/') }}/product/{{ $product ? $product->permalink : '' }}"
                                                target="_blank">{{ Str::limit($product ? $product->title : '', 35, '...') }}</a>
                                        </div>
                                    </td>
                                        <td>{{ $product->order_count }}</td>
                                    </tr>
                                @endforeach
                                @else
                                    <tr>
                                        <td colspan="2">No records found</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->
        <!--/ Mostsell Product End -->
        <!--================================-->
    </div>
</div>
<!--/ Page Inner End -->
@include('Admin.Includes.footer')
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
 
 <script>
//      var ctx = document.getElementById("barChart").getContext('2d');
// var labels = null;
// var data =