@extends('layouts.app')

@section('title', 'Inventory Health')

@section('content')
<div class="card mb-3">
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-6 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Inventory Health Dashboard</h5>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 border-start border-4 border-primary">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-primary">Total Items</h6>
                <h2 class="text-700">1,248</h2>
                <p class="mb-0 text-muted">Active inventory items</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-boxes fa-2x text-primary"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 border-start border-4 border-warning">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-warning">Low Stock Items</h6>
                <h2 class="text-700">23</h2>
                <p class="mb-0 text-muted">Items below reorder level</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-exclamation-triangle fa-2x text-warning"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 border-start border-4 border-danger">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-danger">Out of Stock</h6>
                <h2 class="text-700">7</h2>
                <p class="mb-0 text-muted">Items completely out of stock</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-times-circle fa-2x text-danger"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xxl-3">
        <div class="card h-100 border-start border-4 border-success">
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <div>
                <h6 class="text-success">Total Value</h6>
                <h2 class="text-700">$845K</h2>
                <p class="mb-0 text-muted">Current inventory value</p>
              </div>
              <div class="align-self-center">
                <span class="fas fa-dollar-sign fa-2x text-success"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-xxl-6">
        <div class="card h-100">
          <div class="card-header">
            <h6 class="mb-0">Top Moving Items</h6>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th>Item</th>
                    <th>Current Stock</th>
                    <th>Units Moved</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Product A</td>
                    <td>150</td>
                    <td>45/week</td>
                    <td><span class="badge badge-soft-success">Good</span></td>
                  </tr>
                  <tr>
                    <td>Product B</td>
                    <td>25</td>
                    <td>30/week</td>
                    <td><span class="badge badge-soft-warning">Low Stock</span></td>
                  </tr>
                  <tr>
                    <td>Product C</td>
                    <td>0</td>
                    <td>20/week</td>
                    <td><span class="badge badge-soft-danger">Out of Stock</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xxl-6">
        <div class="card h-100">
          <div class="card-header">
            <h6 class="mb-0">Inventory by Category</h6>
          </div>
          <div class="card-body">
            <div class="d-flex justify-content-between py-2">
              <span>Electronics</span>
              <span><strong>$245K</strong> (29%)</span>
            </div>
            <div class="progress mb-3" style="height: 6px;">
              <div class="progress-bar bg-primary" style="width: 29%"></div>
            </div>

            <div class="d-flex justify-content-between py-2">
              <span>Accessories</span>
              <span><strong>$180K</strong> (21%)</span>
            </div>
            <div class="progress mb-3" style="height: 6px;">
              <div class="progress-bar bg-success" style="width: 21%"></div>
            </div>

            <div class="d-flex justify-content-between py-2">
              <span>Components</span>
              <span><strong>$220K</strong> (26%)</span>
            </div>
            <div class="progress mb-3" style="height: 6px;">
              <div class="progress-bar bg-info" style="width: 26%"></div>
            </div>

            <div class="d-flex justify-content-between py-2">
              <span>Raw Materials</span>
              <span><strong>$200K</strong> (24%)</span>
            </div>
            <div class="progress mb-3" style="height: 6px;">
              <div class="progress-bar bg-warning" style="width: 24%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection