@extends('backEnd.layouts.master')
@section('title','Dashboard')
@section('css')
<!-- Plugins css -->
<link href="{{asset('public/backEnd/')}}/assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('public/backEnd/')}}/assets/libs/selectize/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{asset('public/backEnd/')}}/assets/virtualgarage/libs/selectize/css/selectize.bootstrap3.css">
<style>
.order_count_content{
    gap: 20px;
}
.order-created-count p, .order-created-count p{
    white-space: nowrap;
    margin-bottom: 4px;
}
</style>
@endsection
@section('content')
<!-- Start Content-->
<div class="container-fluid d-none">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                
                </div>
                <h4 class="page-title">Dashboard</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 

    <div class="row">
        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="avatar-lg rounded-circle bg-soft-primary border-primary border">
                                <i class="fe-shopping-cart font-22 avatar-title text-primary"></i>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-end">
                                <h3 class="text-dark mt-1"><span data-plugin="counterup">{{$total_order}}</span></h3>
                                <p class="text-muted mb-1 text-truncate">Total Oreder</p>
                            </div>
                        </div>
                    </div> <!-- end row-->
                </div>
            </div> <!-- end widget-rounded-circle-->
        </div> <!-- end col-->

        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                                <i class="fe-shopping-bag font-22 avatar-title text-success"></i>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-end">
                                <h3 class="text-dark mt-1"><span data-plugin="counterup">{{$today_order}}</span></h3>
                                <p class="text-muted mb-1 text-truncate">Today's Order</p>
                            </div>
                        </div>
                    </div> <!-- end row-->
                </div>
            </div> <!-- end widget-rounded-circle-->
        </div> <!-- end col-->

        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="avatar-lg rounded-circle bg-soft-info border-info border">
                                <i class="fe-database font-22 avatar-title text-info"></i>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-end">
                                <h3 class="text-dark mt-1"><span data-plugin="counterup">{{$total_product}}</span></h3>
                                <p class="text-muted mb-1 text-truncate">Products</p>
                            </div>
                        </div>
                    </div> <!-- end row-->
                </div>
            </div> <!-- end widget-rounded-circle-->
        </div> <!-- end col-->

        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="avatar-lg rounded-circle bg-soft-warning border-warning border">
                                <i class="fe-user font-22 avatar-title text-warning"></i>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-end">
                                <h3 class="text-dark mt-1"><span data-plugin="counterup">{{$total_customer}}</span></h3>
                                <p class="text-muted mb-1 text-truncate">Customer</p>
                            </div>
                        </div>
                    </div> <!-- end row-->
                </div>
            </div> <!-- end widget-rounded-circle-->
        </div> <!-- end col-->
    </div>
    <!-- end row-->


    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Edit Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Latest 5 Orders</h4>

                    <div class="table-responsive">
                        <table class="table table-borderless table-hover table-nowrap table-centered m-0">

                            <thead class="table-light">
                                <tr>
                                    <th colspan="2">Id</th>
                                    <th>Invoice</th>
                                    <th>Amount</th>
                                    <th>Customer</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latest_order as $order)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td style="width: 36px;">
                                        <img src="{{ asset(optional(optional($order->product)->image)->image ?? '') }}" alt="contact-img" title="contact-img" class="rounded-circle avatar-sm" />
                                    </td>

                                    <td>
                                        {{$order->invoice_id}}
                                    </td>

                                    <td>
                                        {{$order->amount}}
                                    </td>

                                    <td>
                                        {{$order->customer?$order->customer->name:''}}
                                    </td>
                                    <td>
                                        {{$order->order_status}}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->

        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Edit Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Latest Customers</h4>

                    <div class="table-responsive">
                        <table class="table table-borderless table-nowrap table-hover table-centered m-0">

                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latest_customer as $customer)
                                <tr>
                                    <td>
                                        <h5 class="m-0 fw-normal">{{$loop->iteration}}</h5>
                                    </td>

                                    <td>
                                        {{$customer->name}}
                                    </td>

                                    <td>
                                        {{$customer->phone}}
                                    </td>

                                    <td>
                                        {{$customer->created_at->format('d-m-Y')}}
                                    </td>

                                    <td>
                                        {{$customer->status}}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div> <!-- end .table-responsive-->
                </div>
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
    <!-- end row -->
    
</div> <!-- container -->

<div class="row">
    <div class="col-lg-8 d-flex align-items-stretch">
        <div class="card w-100 bg-primary-subtle overflow-hidden shadow-none">
        <div class="card-body position-relative">
            <div class="row">
            <div class="col-sm-7">
                <div class="d-flex align-items-center mb-7">
                <div class="rounded-circle overflow-hidden me-6">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/profile/user-1.jpg" alt="modernize-img" width="40" height="40">
                </div>
                
                <h5 class="fw-semibold mb-0 fs-5">Welcome {{Auth::user()->name}}</h5>
                </div>
                <div class="d-flex align-items-center">
                <div class="border-end pe-4 border-muted border-opacity-10">
                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $today_order_amount }} TK.<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
                    </h3>
                    <p class="mb-0 text-dark">Today’s Sales</p>
                </div>
                <div class="ps-4">
                    <h3 class="mb-1 fw-semibold fs-8 d-flex align-content-center">{{ $today_order }}<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
                    </h3>
                    <p class="mb-0 text-dark">Order Today</p>
                </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="welcome-bg-img mb-n7 text-end">
                <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/backgrounds/welcome-bg.svg" alt="modernize-img" class="img-fluid">
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
  
    <div class="col-sm-6 col-lg-4 d-flex align-items-stretch d-none">
        <div class="card w-100">
            <div class="card-body p-4">
                <h4 class="fw-semibold">{{ number_format($expenseData['amounts']->sum(), 2) }} TK.</h4>
                <p class="mb-2 fs-3">Expense (Last 3 Months)</p>
                <div id="expense"></div>
            </div>
        </div>
    </div>
    <!-- <div class="col-sm-6 col-lg-2 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body p-4">
            <h4 class="fw-semibold">$65,432</h4>
            <p class="mb-1 fs-3">Sales</p>
            <div id="sales" class="sales-chart mx-n2"></div>
        </div>
        </div>
    </div> -->
    <!-- <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <h4 class="card-title fw-semibold">Revenue Updates</h4>
            <p class="card-subtitle mb-4">Overview of Profit</p>
            <div class="d-flex align-items-center">
            <div class="me-4">
                <span class="round-8 text-bg-primary rounded-circle me-2 d-inline-block"></span>
                <span class="fs-2">Footware</span>
            </div>
            <div>
                <span class="round-8 text-bg-secondary rounded-circle me-2 d-inline-block"></span>
                <span class="fs-2">Fashionware</span>
            </div>
            </div>
            <div id="revenue-chart" class="revenue-chart mx-n3"></div>
        </div>
        </div>
    </div> -->
   
    <!-- <div class="col-lg-4">
        <div class="row">
        <div class="col-sm-6 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <div class="p-2 bg-primary-subtle rounded-2 d-inline-block mb-3">
                <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-cart.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div id="sales-two" class="mb-3 mx-n4"></div>
                <h4 class="mb-1 fw-semibold d-flex align-content-center">$16.5k<i class="ti ti-arrow-up-right fs-5 text-success"></i>
                </h4>
                <p class="mb-0">Sales</p>
            </div>
            </div>
        </div>
        <div class="col-sm-6 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <div class="p-2 bg-info-subtle rounded-2 d-inline-block mb-3">
                <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-bar.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div id="growth" class="mb-3"></div>
                <h4 class="mb-1 fw-semibold d-flex align-content-center">24%<i class="ti ti-arrow-up-right fs-5 text-success"></i>
                </h4>
                <p class="mb-0">Growth</p>
            </div>
            </div>
        </div>
        </div>
        <div class="card">
        <div class="card-body">
            <div class="row alig n-items-start">
            <div class="col-8">
                <h4 class="card-title mb-9 fw-semibold"> Monthly Earnings </h4>
                <div class="d-flex align-items-center mb-3">
                <h4 class="fw-semibold mb-0 me-8">$6,820</h4>
                <div class="d-flex align-items-center">
                    <span class="me-2 rounded-circle bg-success-subtle text-success round-20 d-flex align-items-center justify-content-center">
                    <i class="ti ti-arrow-up-left"></i>
                    </span>
                    <p class="text-dark me-1 fs-3 mb-0">+9%</p>
                </div>
                </div>
            </div>
            <div class="col-4">
                <div class="d-flex justify-content-end">
                <div class="p-2 bg-primary-subtle rounded-2 d-inline-block">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-master-card-2.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                </div>
            </div>
            </div>
            <div id="monthly-earning"></div>
        </div>
        </div>
    </div> -->
    <!-- <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <h4 class="card-title fw-semibold">Weekly Stats</h4>
            <p class="card-subtitle mb-0">Average sales</p>
            <div id="weekly-stats" class="mb-4 mt-7"></div>
            <div class="position-relative">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div class="d-flex">
                <div class="p-6 bg-primary-subtle text-primary rounded-2 me-6 d-flex align-items-center justify-content-center">
                    <i class="ti ti-grid-dots fs-6"></i>
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Top Sales</h6>
                    <p class="fs-3 mb-0">Johnathan Doe</p>
                </div>
                </div>
                <div class="bg-primary-subtle text-primary badge">
                <p class="fs-3 fw-semibold mb-0">+68</p>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div class="d-flex">
                <div class="p-6 bg-success-subtle text-success rounded-2 me-6 d-flex align-items-center justify-content-center">
                    <i class="ti ti-grid-dots fs-6"></i>
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Best Seller</h6>
                    <p class="fs-3 mb-0">Footware</p>
                </div>
                </div>
                <div class="bg-success-subtle text-success badge">
                <p class="fs-3 fw-semibold mb-0">+68</p>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex">
                <div class="p-6 bg-danger-subtle text-danger rounded-2 me-6 d-flex align-items-center justify-content-center">
                    <i class="ti ti-grid-dots fs-6"></i>
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Most Commented</h6>
                    <p class="fs-3 mb-0">Fashionware</p>
                </div>
                </div>
                <div class="bg-danger-subtle text-danger badge">
                <p class="fs-3 fw-semibold mb-0">+68</p>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div> -->
    <!-- <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <div>
            <h4 class="card-title fw-semibold">Yearly Sales</h4>
            <p class="card-subtitle">Every month</p>
            <div id="salary" class="mb-7 pb-8 mx-n4"></div>
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                <div class="bg-primary-subtle text-primary rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                    <i class="ti ti-grid-dots fs-6"></i>
                </div>
                <div>
                    <p class="fs-3 mb-0 fw-normal">Total Sales</p>
                    <h6 class="fw-semibold text-dark fs-4 mb-0">$36,358</h6>
                </div>
                </div>
                <div class="d-flex align-items-center">
                <div class="bg-light-subtle text-muted rounded-2 me-8 p-8 d-flex align-items-center justify-content-center">
                    <i class="ti ti-grid-dots fs-6"></i>
                </div>
                <div>
                    <p class="fs-3 mb-0 fw-normal">Expenses</p>
                    <h6 class="fw-semibold text-dark fs-4 mb-0">$5,296</h6>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div> -->
    <!-- <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <h4 class="card-title fw-semibold">Payment Gateways</h4>
            <p class="card-subtitle mb-7">Platform for Income</p>
            <div class="position-relative">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div class="d-flex">
                <div class="p-8 bg-primary-subtle rounded-2 d-flex align-items-center justify-content-center me-6">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-paypal2.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">PayPal</h6>
                    <p class="fs-3 mb-0">Big Brands</p>
                </div>
                </div>
                <h6 class="mb-0 fw-semibold">+$6,235</h6>
            </div>
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div class="d-flex">
                <div class="p-8 bg-success-subtle rounded-2 d-flex align-items-center justify-content-center me-6">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-wallet.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Wallet</h6>
                    <p class="fs-3 mb-0">Bill payment</p>
                </div>
                </div>
                <h6 class="mb-0 fw-semibold text-muted">+$345</h6>
            </div>
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div class="d-flex">
                <div class="p-8 bg-warning-subtle rounded-2 d-flex align-items-center justify-content-center me-6">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-credit-card.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Credit card</h6>
                    <p class="fs-3 mb-0">Money reversed</p>
                </div>
                </div>
                <h6 class="mb-0 fw-semibold">+$2,235</h6>
            </div>
            <div class="d-flex align-items-center justify-content-between mb-7 pb-1">
                <div class="d-flex">
                <div class="p-8 bg-danger-subtle rounded-2 d-flex align-items-center justify-content-center me-6">
                    <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/svgs/icon-pie2.svg" alt="modernize-img" class="img-fluid" width="24" height="24">
                </div>
                <div>
                    <h6 class="mb-1 fs-4 fw-semibold">Refund</h6>
                    <p class="fs-3 mb-0">Bill payment</p>
                </div>
                </div>
                <h6 class="mb-0 fw-semibold text-muted">-$32</h6>
            </div>
            </div>
            <button class="btn btn-outline-primary w-100">View all transactions</button>
        </div>
        </div>
    </div> -->
    <div class="col-12">
        <div class="row">
            <div class="col-12 d-flex justify-content-between align-content-start mb-4">
    
                <h4>Overview</h4>
      
                <select class="form-select fw-semibold ordercount_by_status_filter" style="max-width: 200px;">
                    <option value="today" selected>Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="7days">Last 7 Days</option>
                    <option value="1month">Last 1 Month</option>
                    <option value="1year">Last 1 Year</option>
                    <option value="customdate">Custom Date</option>
                </select>
            </div>
        </div>
        <div class="orders_by_status_stats row"></div>
    </div>
    <div class="col-md-4 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-content-start">
                <div>
                    <h4 class="card-title fw-semibold">Web Order Report</h4>
                    <!-- <p class="card-subtitle mb-2 current_status">Every Month</p> -->
                </div>
                <select class="form-select fw-semibold weborder_performance">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="7days" selected>Last 7 Days</option>
                    <option value="1month">Last 1 Month</option>
                    <option value="1year">Last 1 Year</option>
                    <option value="customdate">Custom Date</option>
                </select>
            </div>
            
            
            <div id="sales-overview" class="mb-4"></div>

        </div>
        </div>
    </div>

    <div class="col-md-4 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-content-start">
                <div>
                    <h4 class="card-title fw-semibold">Order Source</h4>
                </div>
                <select class="form-select fw-semibold order_source_filter">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="7days" selected>Last 7 Days</option>
                    <option value="1month">Last 1 Month</option>
                    <option value="1year">Last 1 Year</option>
                    <option value="customdate">Custom Date</option>
                </select>
            </div>
            
            
            <div id="order-source-chart" class="mb-4"></div>

        </div>
        </div>
    </div>


    <div class="col-md-4 col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-content-start">
                <div>
                    <h4 class="card-title fw-semibold">Employee Report</h4>
                </div>
                <select class="form-select fw-semibold employeee_performance">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="7days" selected>Last 7 Days</option>
                    <option value="1month">Last 1 Month</option>
                    <option value="1year">Last 1 Year</option>
                    <option value="customdate">Custom Date</option>
                </select>
            </div>
            
            
            <div id="employeee-overview" class="mb-4"></div>
            <div class="d-flex align-items-center justify-content-between">
            </div>
        </div>
        </div>
    </div>

    <div class="col-md-12 col-lg-12 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
                    <div class="mb-3 mb-sm-0">
                        <h4 class="card-title fw-semibold">Order Counts</h4>
                        <p class="card-subtitle">Orders created vs order send to courier</p>
                    </div>
                    <div class="d-sm-flex align-items-center justify-content-center order_count_content">
                        <select class="form-select fw-semibold order_count_select">
                            <option value="today">Today</option>
                            <option value="7days" selected>Last 7 Days</option>
                            <option value="1month">Last 1 Month</option>
                            <option value="1year">Last 1 Year</option>
                            <option value="customdate">Custom Date</option>
                            <!-- customdate -->
                        </select>
                        <div class="order-created-count order-count-number">
                            <p>Order Created</p>
                            <p></p>
                        </div>
                        <div class="order-created-count">
                            <p>Sent to Courier</p>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div id="order-count"></div>
            </div>
        </div>
    </div>
  
    <div class="col-md-12 col-lg-12 d-flex align-items-stretch">
        <div class="card w-100">
        <div class="card-body">
            <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
            <div class="mb-3 mb-sm-0">
                <h4 class="card-title fw-semibold">Hot Sale Product Performances</h4>
                <p class="card-subtitle">What Impacts Product Performance?</p>
            </div>
            <div>
                <select class="form-select fw-semibold product_performance">
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="7days" selected>Last 7 Days</option>
                    <option value="1month">Last 1 Month</option>
                    <option value="1year">Last 1 Year</option>
                    <option value="customdate">Custom Date</option>
                    <!-- <option value="custom_date"> <input type="date" placeholder="Enter Date" /> </option> -->
                </select>
            </div>
            </div>
           <div class="">
            <div class="table-responsive top-selling-product-table">
                <table class="table align-middle text-nowrap mb-0">
                    <thead>
                    <tr class="text-muted fw-semibold">
                        <th scope="col" class="ps-0">Product Name</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Number of Orders</th>
                        <th scope="col">% of Sales</th>
                        <th scope="col">Total Revenue</th>
                    </tr>
                    </thead>
                    <!-- <tbody class="border-top">
                        <tr>
                            <td class="ps-0">
                            <div class="d-flex align-items-center">
                                <div class="me-2 pe-1">
                                <img src="https://bootstrapdemos.adminmart.com/modernize/dist/assets/images/products/product-1.jpg" class="rounded-2" width="48" height="48" alt="modernize-img" />
                                </div>
                                <div>
                                <h6 class="fw-semibold mb-1">Minecraf App</h6>
                                </div>
                            </div>
                            </td>
                            <td>
                                <p class="mb-0 fs-3 text-dark">73</p>
                            </td>
                            <td>10</td>
                            <td>
                                <p class="fs-3 text-dark mb-0">10%</p>
                            </td>
                            <td>300</td>
                        </tr>
                
                    </tbody> -->
                </table>
                </div>
           </div>
        </div>
        </div>
    </div>
</div>
<div class="modal fade" id="customdate-modal" tabindex="-1" aria-labelledby="exampleModalLabel12">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title" id="exampleModalLabel12">
                    Custom Date Picker
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="custom-filter-target">
                    <div class="mb-3">
                        <label for="recipient-name" class="">Date Picker:</label>
                        <div class="input-daterange input-group" id="date-range">
                            <input type="text" class="form-control" name="start" id="start-date" />
                            <span class="input-group-text bg-primary b-0 text-white">TO</span>
                            <input type="text" class="form-control" name="end" id="end-date" />
                        </div>
                    </div>
                </form>
                <div id="user_number_details"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-danger-subtle text-danger " data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" id="apply-custom-date" class="btn btn-success">
                    Submit
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    let expenseData = null;
</script>

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
<script src="{{asset('public/backEnd/')}}/assets/virtualgarage/libs/apexcharts/dist/apexcharts.min.js"></script>
  <!-- <script src="{{asset('public/backEnd/')}}/assets/virtualgarage/js/dashboards/dashboard2.js"></script> -->
  <script src="{{asset('public/backEnd/')}}/assets/virtualgarage/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
  <script src="{{asset('public/backEnd/')}}/assets/virtualgarage/js/forms/datepicker-init.js"></script>
  <script>
$(document).ready(function () {
    // Initialize date picker
   
    $('#date-range input').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true
    });

    // Sample order data with dates
    const orders = null;

    // Function to format date to YYYY-MM-DD
    function formatDate(dateStr) {
        let parts = dateStr.split('/');
        if (parts.length === 3) {
            return `${parts[2]}-${parts[0].padStart(2, '0')}-${parts[1].padStart(2, '0')}`;
        }
        return dateStr;
    }

    function updateChart(filteredOrders) {
        var orderCount = {
            series: [
                {
                    name: "Created Orders",
                    data: filteredOrders.map(o => o.created_orders)
                },
                {
                    name: "Sent to Courier",
                    data: filteredOrders.map(o => o.sent_orders)
                }
            ],
            chart: {
                type: 'bar',
                height: 300,
                fontFamily: "inherit",
                stacked: true,
                toolbar: { show: false }
            },
            colors: ["#007bff", "#49beff"], // Different colors for bars
            grid: { show: false },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '100%',
                    borderRadius: 4,
                    distributed: false,
                }
            },
            dataLabels: { enabled: false },
            stroke: { show: true, width: 5, colors: ['rgba(0,0,0,0.01)'] },
            xaxis: {
                categories: filteredOrders.map(o => o.date),
                labels: { show: true }
            },
            yaxis: { labels: { show: true } },
            tooltip: { theme: 'dark' }
        };

        $("#order-count").html(""); // Clear previous chart
        var chart = new ApexCharts(document.querySelector("#order-count"), orderCount);
        chart.render();
    }

    function fetchOrders(range = "7days") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: "customdate" }
            : { range: range };
        data._token = "{{ csrf_token() }}";
        $.ajax({
            url: "{{ route('ordercount_state') }}",
            method: "POST",
            data: data,
            success: function (response) {
                updateChart(response);

                let totalCreatedOrders = response.reduce((sum, item) => sum + item.created_orders, 0);
                let totalSentOrders = response.reduce((sum, item) => sum + item.sent_orders, 0);

                $(".order-count-number p:last-child").text(totalCreatedOrders);
                $(".order-created-count:last-child p:last-child").text(totalSentOrders);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }


    $(".order_count_select").on("change", function () {
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("ordercount_state");
            $("#customdate-modal").modal("show");
        }
        else {
            fetchOrders($(this).val());
        }
        
    });
    fetchOrders();
    function fetchTopProducts(range = "7days") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: "customdate" }
            : { range: range };

        data._token = "{{ csrf_token() }}";

        $.ajax({
            url: "{{ route('top_performance_product') }}",
            method: "POST",
            dataType: "html",
            data: data,
            success: function (response) {
                $(".top-selling-product-table").html(response);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }

    fetchTopProducts()
    $(".product_performance").on("change", function () {
        
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("product_performance");
            $("#customdate-modal").modal("show");
        }
        else {
            fetchTopProducts($(this).val());
        }
    });
  

    function webOrderReport (webOrder) {
        let options = {
            color: "#adb5bd",
            series: webOrder.map(o => o.count),
            labels: webOrder.map(o => o.label),
            chart: {
            type: "donut",
            fontFamily: "inherit",
            foreColor: "#adb0bb",
        },
            plotOptions: {
                pie: {
                    donut: {
                        size: '78%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                offsetY: 7,
                            },
                            value: {
                                show: false,
                            },
                            // total: {
                            //     show: true,
                            //     color: '#7C8FAC',
                            //     fontSize: '20px',
                            //     fontWeight: "600",
                            //     label: '$500,458',
                            // },
                        },
                    },
                },
            },
            stroke: {
                show: false,
            },
            dataLabels: {
                enabled: false,
            },

            legend: {
                show: true, // Enable legend
                position: "bottom", // Optional: Adjust legend position
                labels: {
                    colors: "#adb0bb", // Ensure label colors are visible
                    useSeriesColors: true, // Optional: Match legend colors to chart
                },
            },
            colors: [
                        "#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#A833FF", 
                        "#33FFF5", "#FFD700", "#FF8C00", "#DC143C", "#8A2BE2"
                    ],

            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };
        $("#sales-overview").html(""); 
        var chart = new ApexCharts(document.querySelector("#sales-overview"), options);
        chart.render();
    }
    function fetchWebOrderReport(range = "today") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: "customdate" }
            : { range: range };

        data._token = "{{ csrf_token() }}";
        $.ajax({
            url: "{{ route('web_order_report') }}",
            method: "POST",
            data,
            success: function (response) {
                console.log(response);
                webOrderReport(response)
                
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }
    $(".weborder_performance").on("change", function () {
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("web_order_report");
            $("#customdate-modal").modal("show");
        }else {
            fetchWebOrderReport($(this).val());
        }
        
    });
    fetchWebOrderReport("7days")
    // ============ Order source =========
    function renderOrderSourceChart(data) {
        let options = {
            color: "#adb5bd",
            series: data.map(o => o.count),
            labels: data.map(o => o.label),
            chart: {
                type: "donut",
                fontFamily: "inherit",
                foreColor: "#adb0bb",
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '78%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                offsetY: 7,
                            },
                            value: {
                                show: false,
                            },
                        },
                    },
                },
            },
            stroke: { show: false },
            dataLabels: { enabled: false },
            legend: {
                show: true,
                position: "bottom",
                labels: {
                    colors: "#adb0bb",
                    useSeriesColors: true,
                },
            },
            colors: [
                "#00C49F", "#FFBB28", "#FF8042"
            ],
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        $("#order-source-chart").html(""); // clear previous chart
        var chart = new ApexCharts(document.querySelector("#order-source-chart"), options);
        chart.render();
    }

    function fetchOrderSourceChart(range = "7days") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: null }
            : { range: range, start_date: null, end_date: null };
        $.ajax({
            url: "{{ route('order_source_report') }}",
            method: "POST",
            data: {
                filter: data.range || null,
                start_date: data.start_date,
                end_date: data.end_date,
                _token: "{{ csrf_token() }}"
            },
            success: function (response) {
                console.log(response);
                renderOrderSourceChart(response);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }

    $(".order_source_filter").on("change", function () {
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("order_source_report");
            $("#customdate-modal").modal("show");
        }else{
            fetchOrderSourceChart($(this).val());
        }
        
    });
    fetchOrderSourceChart("7days"); 

    function fetchOrdersByStatus(range = "7days") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: null }
            : { range: range, start_date: null, end_date: null };

        // data._token = "{{ csrf_token() }}";

        $.ajax({
            url: "{{ route('orders_by_status') }}",
            method: "POST",
            type: "html",
            data: {
                filter: data.range || null,
                start_date: data.start_date,
                end_date: data.end_date,
                _token: "{{ csrf_token() }}"
            },
            success: function (response) {
                console.log(response);
                
               $(".orders_by_status_stats").html(response)
                // renderOrderSourceChart(response);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }

    $(".ordercount_by_status_filter").on("change", function () {
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("orders_by_status");
            $("#customdate-modal").modal("show");
        }else {
            fetchOrdersByStatus($(this).val());
        }
        
    });
    fetchOrdersByStatus("today"); 

    function employeeReport(employeeData) {
        // Extract user names and statuses dynamically
        const userNames = Object.keys(employeeData);
        const statusNames = [...new Set(userNames.flatMap(user => Object.keys(employeeData[user])))];

        // Assign unique colors for each status
        const colors = [
            "#007bff", "#49beff", "#28a745", "#ffc107", "#dc3545",
            "#6610f2", "#17a2b8", "#fd7e14", "#6f42c1", "#20c997"
        ];

        // Generate series dynamically based on status
        let series = statusNames.map((status, index) => ({
            name: status,
            data: userNames.map(user => employeeData[user][status] || 0), // Ensure missing statuses show as 0
            color: colors[index % colors.length]
        }));

        let options = {
            series: series,
            chart: {
                type: 'bar',
                height: 300,
                fontFamily: "inherit",
                stacked: true,
                toolbar: { show: false }
            },
            colors: series.map(s => s.color),
            grid: { show: false },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '80%',
                    borderRadius: 4,
                    distributed: false,
                }
            },
            dataLabels: { enabled: false },
            stroke: { show: true, width: 5, colors: ['rgba(0,0,0,0.01)'] },
            xaxis: {
                categories: userNames, // Employee names
                labels: { show: true }
            },
            yaxis: { labels: { show: true } },
            tooltip: { theme: 'dark' }
        };

        $("#employeee-overview").html("");
        var chart = new ApexCharts(document.querySelector("#employeee-overview"), options);
        chart.render();
    }

    function fetchEmployeeReport(range = "today") {
        let data = typeof range === 'object'
            ? { start_date: range.start, end_date: range.end, range: "customdate" }
            : { range: range };

        data._token = "{{ csrf_token() }}";

        $.ajax({
            url: "{{ route('employee_dashboard_report') }}",
            method: "POST",
            data,
            success: function (response) {
                console.log(response);
                employeeReport(response)
                
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }
    $(".employeee_performance").on("change", function () {
        let val = $(this).val();
        if (val === 'customdate') {
            $("#custom-filter-target").val("employee_dashboard_report");
            $("#customdate-modal").modal("show");
        }else {
            fetchEmployeeReport($(this).val());
        }
        
    });
    fetchEmployeeReport("7days")



    if (typeof expenseData !== 'undefined') {
        var expense = {
            series: expenseData.amounts,
            labels: ["", "", ""],
            chart: {
                height: 110,
                type: "donut",
                fontFamily: "inherit",
                foreColor: "#c6d1e9",
            },

            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },

            colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-yellow)"],
            dataLabels: {
                enabled: false,
            },

            legend: {
                show: false,
            },

            stroke: {
                show: false,
            },

            plotOptions: {
                pie: {
                    donut: {
                        size: "70%",
                        background: "none",
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: "18px",
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                            },
                        },
                    },
                },
            },
        };

        var chart = new ApexCharts(document.querySelector("#expense"), expense);
        chart.render();
    }
    // Listen for date changes
    // $('#date-range input').on('change', function () {
    //     let startDate = formatDate($('#start-date').val());
    //     let endDate = formatDate($('#end-date').val());

    //     console.log("Filtered Date Range:", startDate, endDate);

    //     if (startDate && endDate) {
    //         const filteredOrders = orders.filter(order => order.date >= startDate && order.date <= endDate);
    //         updateChart(filteredOrders);
    //     }
    // });

    $("#apply-custom-date").on("click", function () {
        let startDate = formatDate($('#start-date').val());
        let endDate = formatDate($('#end-date').val());
        let target = $("#custom-filter-target").val();

        if (!startDate || !endDate || !target) {
            alert("Please select a valid date range.");
            return;
        }

        $("#customdate-modal").modal("hide");

        switch (target) {
            case 'product_performance':
                fetchTopProducts({start: startDate, end: endDate});
                break;
            case 'web_order_report':
                fetchWebOrderReport({start: startDate, end: endDate});
                break;
            case 'order_source_report':
                fetchOrderSourceChart({start: startDate, end: endDate});
                break;
            case 'employee_dashboard_report':
                fetchEmployeeReport({start: startDate, end: endDate});
                break;
            case 'orders_by_status':
                fetchOrdersByStatus({start: startDate, end: endDate});
                break;
            case 'ordercount_state':
                fetchOrders({start: startDate, end: endDate});
                break;
            default:
                console.warn("No target matched.");
        }
    });



    });

  </script>
 <!-- Plugins js-->
        <!-- <script src="{{asset('public/backEnd/')}}/assets/libs/flatpickr/flatpickr.min.js"></script>
        <script src="{{asset('public/backEnd/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>
        <script src="{{asset('public/backEnd/')}}/assets/libs/selectize/js/standalone/selectize.min.js"></script>
        <script src="{{asset('public/backEnd/')}}/assets/libs/selectize/js/standalone/selectize.min.js"></script> -->

    <!-- <script>

    var colors = ["#f1556c"],
    dataColors = $("#total-revenue").data("colors");
    dataColors && (colors = dataColors.split(","));
    var options = {
          
          chart: {
             height: 242,
             type: "radialBar"
          },
          plotOptions: {
             radialBar: {
                hollow: {
                   size: "65%"
                }
             }
          },
          colors: colors,
          labels: ["Delivery"]
       },
        chart = new ApexCharts(document.querySelector("#total-revenue"), options);
        chart.render();
        colors = ["#1abc9c", "#4a81d4"];
        (dataColors = $("#sales-analytics").data("colors")) && (colors = dataColors.split(","));
        options = {
           series: [{
              name: "Revenue",
              type: "column",
              data: [@foreach($monthly_sale as $sale) {{$sale->amount}}, @endforeach]
           }, {
              name: "Sales",
              type: "line",
              data: [@foreach($monthly_sale as $sale) {{$sale->amount}}, @endforeach]
           }],
           chart: {
              height: 378,
              type: "line",
           },
           stroke: {
              width: [2, 3]
           },
           plotOptions: {
              bar: {
                 columnWidth: "50%"
              }
           },
           colors: colors,
           dataLabels: {
              enabled: !0,
              enabledOnSeries: [1]
           },
           labels: [@foreach($monthly_sale as $sale) {{date('d', strtotime($sale->date))}} + '-' + {{date('m', strtotime($sale->date))}}+ '-' + {{date('Y', strtotime($sale->date))}}, @endforeach],
           legend: {
              offsetY: 7
           },
           grid: {
              padding: {
                 bottom: 20
              }
           },
           fill: {
              type: "gradient",
              gradient: {
                 shade: "light",
                 type: "horizontal",
                 shadeIntensity: .25,
                 gradientToColors: void 0,
                 inverseColors: !0,
                 opacityFrom: .75,
                 opacityTo: .75,
                 stops: [0, 0, 0]
              }
           },
           yaxis: [{
              title: {
                 text: "Net Revenue"
              }
           }]
        };
        (chart = new ApexCharts(document.querySelector("#sales-analytics"), options)).render(), $("#dash-daterange").flatpickr({
           altInput: !0,
           mode: "range",
        });
    </script> -->
    
@endsection