@extends('layouts.backend.app')
    @section('content')
    <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
{{-- 
    <!-- Total Users -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-info text-white text-center card-shadow-info">
            <div class="card-body">
                <h6 class="fw-normal">Total Users</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('users.index') }}">{{ $totalUsers }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Total Products -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-primary text-white text-center card-shadow-primary">
            <div class="card-body">
                <h6 class="fw-normal">Total Products</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('products.index') }}">{{ $totalProducts }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Total Categories -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-danger text-white text-center card-shadow-danger">
            <div class="card-body">
                <h6 class="fw-normal">Total Categories</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('categories.index') }}">{{ $totalCategories }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Total Subcategories -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-warning text-white text-center card-shadow-warning">
            <div class="card-body">
                <h6 class="fw-normal">Total Subcategories</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('subcategories.index') }}">{{ $totalSubcategories }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Total Orders -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-success text-white text-center card-shadow-success">
            <div class="card-body">
                <h6 class="fw-normal">Total Orders</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('orders.index') }}">{{ $totalOrders }}</a></h2>
            </div>
        </div>
    </div>
        <!-- Complete Orders -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-secondary text-white text-center card-shadow-secondary">
            <div class="card-body">
                <h6 class="fw-normal">Complete Orders</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('orders.index') }}">{{ $completedOrders }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Pending Orders -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-secondary text-white text-center card-shadow-secondary">
            <div class="card-body">
                <h6 class="fw-normal">Pending Orders</h6>
                <h2 class="mb-0"><a class="text-white text-decoration-none" href="{{ route('orders.index') }}">{{ $pendingOrders }}</a></h2>
            </div>
        </div>
    </div>

    <!-- Total Revenue -->
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card bg-gradient-dark text-white text-center card-shadow-dark">
            <div class="card-body">
                <h6 class="fw-normal">Total Revenue</h6>
                <h2 class="mb-0">₹{{ number_format($totalRevenue, 2) }}</h2>
            </div>
        </div>
    </div>

    <div class="row">

        <!-- Low Stock Products - Left -->
        <div class="col-md-6">
            <div class="card mb-3 border-danger shadow-sm">
                <div class="card-header bg-danger text-white">Low Stock Products</div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        @foreach($lowStockProducts as $product)
                            <li>
                                {{ $product->title }} 
                                (<span class="badge bg-danger">Stock: {{ $product->available }}</span>)
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <!-- Top Products - Right -->
        <div class="col-md-6">
            <div class="card mb-3 border-primary shadow-sm">
                <div class="card-header bg-primary text-white">Top Products</div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Product</th>
                                <th>Orders Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($topProducts as $product)
                                <tr>
                                    <td>{{ $product->title }}</td>
                                    <td>
                                        <span class="badge bg-success">{{ $product->orders_count }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div> --}}

<div class="col-md-3">
  <div class="card text-center border-info shadow-sm">
    <div class="card-header bg-info text-white">Users</div>
    <div class="card-body">
      <h5>Total: {{ $totalUsers }}</h5>
      <p class="text-success">New Today: {{ $newUsersToday }}</p>
    </div>
  </div>
</div>
<div class="col-md-3">
  <div class="card text-center border-primary shadow-sm">
    <div class="card-header bg-primary text-white">Orders</div>
    <div class="card-body">
      <h5>Total: {{ $totalOrders }}</h5>
      <p class="text-warning">Pending: {{ $pendingOrders }}</p>
      <p class="text-info">Processing: {{ $processingOrders }}</p>
      <p class="text-primary">Shipped: {{ $shippedOrders }}</p>
      <p class="text-success">Delivered: {{ $deliveredOrders }}</p>
      <p class="text-danger">Cancelled: {{ $cancelledOrders }}</p>
    </div>
  </div>
</div>

<div class="col-md-3">
  <div class="card text-center border-success shadow-sm">
    <div class="card-header bg-success text-white">Revenue</div>
    <div class="card-body">
      <h5>Today: ₹{{ number_format($todayRevenue, 2) }}</h5>
      <p>This Month: ₹{{ number_format($monthlyRevenue, 2) }}</p>
      <p>Total: ₹{{ number_format($totalRevenue, 2) }}</p>
    </div>
  </div>
</div>
<div class="col-md-3">
  <div class="card text-center border-warning shadow-sm">
    <div class="card-header bg-warning text-dark">Products</div>
    <div class="card-body">
      <h5>Total: {{ $totalProducts }}</h5>
      <p class="text-danger">Low Stock: {{ $lowStockCount }}</p>
      <p class="text-muted">Out of Stock: {{ $outOfStockCount }}</p>
    </div>
  </div>
</div>
<div class="col-md-12 mt-3">
  <div class="card border-danger shadow-sm">
    <div class="card-header bg-danger text-white">Alerts</div>
    <div class="card-body">
      <ul class="list-unstyled">
        @foreach($lowStockProducts as $product)
          <li>⚠️ {{ $product->title }} - 
            <span class="badge bg-danger">Stock: {{ $product->available }}</span>
          </li>
        @endforeach
      
      </ul>
    </div>
  </div>
</div>
<div class="col-md-6">
    <div class="card mb-3 border-warning shadow-sm">
        <div class="card-header bg-warning text-dark">Pending Reviews</div>
        <div class="card-body">
            @if($pendingReviews->count() > 0)
                <ul class="list-unstyled">
                    @foreach($pendingReviews as $review)
                        <li>
                            📝 Review Pending for 
                            <strong>{{ $review->product->title ?? 'Unknown Product' }}</strong>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-muted">No pending reviews</p>
            @endif
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="card mb-3 border-primary shadow-sm">
        <div class="card-header bg-primary text-white">Top Products (by Sales)</div>
        <div class="card-body">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>Product</th>
                        <th>Sold Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($topProducts as $product)
                        <tr>
                            <td>{{ $product->title }}</td>
                            <td>
                                <span class="badge bg-success">
                                    {{ $product->order_items_sum_quantity ?? 0 }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


  <!-- Sales Chart -->
    <div class="row">
        <div class="col-md-12">
            <canvas id="salesChart"></canvas>
        </div>
    </div>



</div>

          {{-- <div class="row">
            <div class="col-lg-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body pb-0">
                  <h4 class="card-title">Daily Sales</h4>
                  <div class="d-flex justify-content-between justify-content-lg-start flex-wrap">
                    <div class="me-5 mb-2">
                      <h3>
                        56789
                      </h3>
                      <h6 class="fw-normal mb-0">
                        Online sales
                      </h6>
                    </div>
                    <div class="mb-2">
                      <h3>
                        12345
                      </h3>
                      <h6 class="fw-normal mb-0">
                        Sales in store
                      </h6>
                    </div>
                  </div>
                </div>
                <div class="card-body d-flex align-items-end p-0">
                  <div class="mt-auto w-100">
                    <div id="chart-sales-legend" class="chartjs-legend mt-2 mb-4 ps-4"></div>
                    <canvas id="chart-sales"></canvas>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <h6 class="card-title">Activity</h6>
                  </div>
                  <div class="list d-flex align-items-center border-bottom pb-3">
                    <img class="img-sm rounded-circle" src="https://via.placeholder.com/43x43" alt="">
                    <div class="wrapper w-100 ms-3">
                      <p><b>Dobrick </b>published an article</p>
                      <small class="text-muted">2 hours ago</small>
                    </div>
                  </div>
                  <div class="list d-flex align-items-center border-bottom py-3">
                    <img class="img-sm rounded-circle" src="https://via.placeholder.com/43x43" alt="">
                    <div class="wrapper w-100 ms-3">
                      <p><b>Stella </b>created an event</p>
                      <small class="text-muted">3 hours ago</small>
                    </div>
                  </div>
                  <div class="list d-flex align-items-center border-bottom py-3">
                    <img class="img-sm rounded-circle" src="https://via.placeholder.com/43x43" alt="">
                    <div class="wrapper w-100 ms-3">
                      <p><b>Peter </b>submitted the reports</p>
                      <small class="text-muted">1 hours ago</small>
                    </div>
                  </div>
                  <div class="list d-flex align-items-center border-bottom py-3">
                    <img class="img-sm rounded-circle" src="https://via.placeholder.com/43x43" alt="">
                    <div class="wrapper w-100 ms-3">
                      <p><b>Nateila </b>updated the docs</p>
                      <small class="text-muted">1 hours ago</small>
                    </div>
                  </div>
                  <div class="list d-flex align-items-center pt-3">
                    <img class="img-sm rounded-circle" src="https://via.placeholder.com/43x43" alt="">
                    <div class="wrapper w-100 ms-3">
                      <p><b>Tom </b>uploaded the demo</p>
                      <small class="text-muted">3 hours ago</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Traffic</h4>
                  <div class="w-50 mx-auto">
                    <canvas id="traffic-chart" width="100" height="100"></canvas>
                  </div>
                  <div class="text-center mt-5">
                    <h4 class="mb-2">Traffic for the day
                    <p class="card-description mb-5">Traffic through the sources google and facebook for the day</p>
                  </h4></div>
                  <div id="traffic-chart-legend" class="chartjs-legend traffic-chart-legend"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="row grid-margin">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Order status</h4>
                  <div class="d-flex table-responsive">
                    <div class="btn-group me-2">
                      <button class="btn btn-sm btn-primary"><i class="mdi mdi-plus-circle-outline"></i> Add</button>
                    </div>
                    <div class="btn-group me-2">
                      <button type="button" class="btn btn-light"><i class="mdi mdi-alert-circle-outline"></i></button>
                      <button type="button" class="btn btn-light"><i class="mdi mdi-delete-empty"></i></button>
                    </div>
                    <div class="btn-group me-2">
                      <button type="button" class="btn btn-light"><i class="mdi mdi-printer"></i></button>
                    </div>
                    <div class="btn-group ms-auto me-2 border-0 d-none d-md-block">
                      <input type="text" class="form-control" placeholder="Search Here">
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-light"><i class="mdi mdi-cloud"></i></button>
                      <button type="button" class="btn btn-light"><i class="mdi mdi-dots-vertical"></i></button>
                    </div>
                  </div>
                  <div class="table-responsive mt-2">
                    <table class="table mt-3 border-top">
                      <thead>
                        <tr>
                          <th>Invoice</th>
                          <th>Customer</th>
                          <th>Ship</th>
                          <th>Best Price</th>
                          <th>Purchsed Price</th>
                          <th>Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>50014</td>
                          <td>David Grey</td>
                          <td>Italy</td>
                          <td>$6300</td>
                          <td>$2100</td>
                          <td><div class="badge badge-success badge-fw">Progress</div></td>
                        </tr>
                        <tr>
                          <td>50015</td>
                          <td>Stella Johnson</td>
                          <td>Brazil</td>
                          <td>$4500</td>
                          <td>$4300</td>
                          <td><div class="badge badge-warning badge-fw">Open</div></td>
                        </tr>
                        <tr>
                          <td>50016</td>
                          <td>Marina Michel</td>
                          <td>Japan</td>
                          <td>$4300</td>
                          <td>$6440</td>
                          <td><div class="badge badge-danger badge-fw">On hold</div></td>
                        </tr>
                        <tr>
                          <td>50017</td>
                          <td>John Doe</td>
                          <td>India</td>
                          <td>$6400</td>
                          <td>$2200</td>
                          <td><div class="badge badge-success badge-fw">Progress</div></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="d-flex align-items-center justify-content-between flex-column flex-sm-row mt-4">
                    <p class="mb-3 mb-sm-0">Showing 1 to 20 of 20 entries</p>
                    <nav>
                      <ul class="pagination pagination-primary mb-0">
                        <li class="page-item"><a class="page-link"><i class="mdi mdi-chevron-left"></i></a></li>
                        <li class="page-item active"><a class="page-link">1</a></li>
                        <li class="page-item"><a class="page-link">2</a></li>
                        <li class="page-item"><a class="page-link">3</a></li>
                        <li class="page-item"><a class="page-link">4</a></li>
                        <li class="page-item"><a class="page-link"><i class="mdi mdi-chevron-right"></i></a></li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12 grid-margin">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Monthly Analytics</h4>
                  <p class="card-description">Products that are creating the most revenue and their sales throughout the year and the variation in behavior of sales.</p>
                  <div id="dashboard-monthly-analytics-legend" class="chartjs-legend mt-4 mb-5 analytics-legend"></div>
                  <div class="demo-chart">
                    <canvas id="dashboard-monthly-analytics"></canvas>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 grid-margin grid-margin-md-0">
              <div class="card">
                <div class="card-body">
                  <div class="wrapper d-flex align-items-center justify-content-start justify-content-sm-center flex-wrap">
                    <img src="https://via.placeholder.com/36x36" alt="image" class="profile-pic">
                    <div class="wrapper ms-4">
                      <p class="fw-medium">Tim Cook</p>
                      <p class="text-muted">timcook@gmail.com</p>
                      <p class="text-info mb-0 fw-medium">Designer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 grid-margin grid-margin-md-0">
              <div class="card">
                <div class="card-body">
                  <div class="wrapper d-flex align-items-center justify-content-start justify-content-sm-center flex-wrap">
                    <img src="https://via.placeholder.com/36x36" alt="image" class="profile-pic">
                    <div class="wrapper ms-4">
                      <p class="fw-medium">Sarah Graves</p>
                      <p class="text-muted">Sarah@gmail.com</p>
                      <p class="text-info mb-0 fw-medium">Developer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-body">
                  <div class="wrapper d-flex align-items-center justify-content-start justify-content-sm-center flex-wrap">
                    <img src="https://via.placeholder.com/36x36" alt="image" class="profile-pic">
                    <div class="wrapper ms-4">
                      <p class="fw-medium">David Grey</p>
                      <p class="text-muted">David@gmail.com</p>
                      <p class="text-info mb-0 fw-medium">Support Lead</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> --}}
        </div>

    </div>


    <!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('salesChart').getContext('2d');
    const labels = @json($salesChart->pluck('date'));
    const data = @json($salesChart->pluck('total'));

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Sales Last 30 Days',
                data: data,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.3,
                fill: false
            }]
        },
        options: {
            responsive: true
        }
    });
</script>
    @endsection