@extends('layouts.app')

@section('title', 'Low Stock Alerts')

@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">Low Stock Alerts</h5>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="alert alert-warning" role="alert">
      <strong><span class="fas fa-exclamation-triangle me-2"></span>Attention!</strong>
      You have 23 items that are running low on stock and need immediate attention.
    </div>

    <div class="table-responsive">
      <table class="table table-striped">
        <thead class="table-dark">
          <tr>
            <th>Item Code</th>
            <th>Item Name</th>
            <th>Current Stock</th>
            <th>Reorder Level</th>
            <th>Difference</th>
            <th>Last Sale</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-warning">
            <td>ITEM001</td>
            <td>Product A - Premium Grade</td>
            <td class="text-danger fw-bold">5</td>
            <td>50</td>
            <td class="text-danger">-45</td>
            <td>2 days ago</td>
            <td>
              <button class="btn btn-sm btn-primary">Reorder</button>
            </td>
          </tr>
          <tr class="table-warning">
            <td>ITEM002</td>
            <td>Product B - Standard</td>
            <td class="text-danger fw-bold">12</td>
            <td>25</td>
            <td class="text-danger">-13</td>
            <td>1 day ago</td>
            <td>
              <button class="btn btn-sm btn-primary">Reorder</button>
            </td>
          </tr>
          <tr class="table-warning">
            <td>ITEM003</td>
            <td>Component X</td>
            <td class="text-danger fw-bold">3</td>
            <td>100</td>
            <td class="text-danger">-97</td>
            <td>3 hours ago</td>
            <td>
              <button class="btn btn-sm btn-primary">Reorder</button>
            </td>
          </tr>
          <tr class="table-danger">
            <td>ITEM004</td>
            <td>Critical Component Y</td>
            <td class="text-danger fw-bold">0</td>
            <td>20</td>
            <td class="text-danger">-20</td>
            <td>1 hour ago</td>
            <td>
              <button class="btn btn-sm btn-danger">Urgent Reorder</button>
            </td>
          </tr>
          <tr class="table-warning">
            <td>ITEM005</td>
            <td>Accessory Z</td>
            <td class="text-warning fw-bold">8</td>
            <td>30</td>
            <td class="text-warning">-22</td>
            <td>5 hours ago</td>
            <td>
              <button class="btn btn-sm btn-primary">Reorder</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="row mt-4">
      <div class="col-md-6">
        <div class="card border-warning">
          <div class="card-header bg-warning text-dark">
            <h6 class="mb-0"><span class="fas fa-chart-pie me-2"></span>Alert Summary</h6>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mb-0">
              <li class="d-flex justify-content-between py-1">
                <span>Critical (0 stock):</span>
                <span class="badge badge-soft-danger">7 items</span>
              </li>
              <li class="d-flex justify-content-between py-1">
                <span>Low stock:</span>
                <span class="badge badge-soft-warning">16 items</span>
              </li>
              <li class="d-flex justify-content-between py-1">
                <span>Total alerts:</span>
                <span class="badge badge-soft-info">23 items</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card border-info">
          <div class="card-header bg-info text-white">
            <h6 class="mb-0"><span class="fas fa-cog me-2"></span>Quick Actions</h6>
          </div>
          <div class="card-body">
            <div class="d-grid gap-2">
              <button class="btn btn-outline-primary btn-sm">Generate Purchase Orders</button>
              <button class="btn btn-outline-success btn-sm">Email Suppliers</button>
              <button class="btn btn-outline-info btn-sm">Export Alert Report</button>
              <button class="btn btn-outline-warning btn-sm">Update Reorder Levels</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection