@extends('layouts.app')

@section('title', 'Low Stock')
@section('page', 'inventory')
@section('inventoryNav', 'low-stock')

@php
  $items = [
    ['id' => 5, 'sku' => 'ING-204', 'name' => 'Salmon Fillet', 'warehouse' => 'Cold Store', 'qty' => 4, 'reorder' => 12, 'deficit' => 8, 'status' => 'Critical'],
    ['id' => 6, 'sku' => 'ING-088', 'name' => 'Truffle Oil', 'warehouse' => 'Dry Store', 'qty' => 2, 'reorder' => 6, 'deficit' => 4, 'status' => 'Critical'],
    ['id' => 7, 'sku' => 'BEV-031', 'name' => 'Lemonade Base', 'warehouse' => 'Dry Store', 'qty' => 9, 'reorder' => 20, 'deficit' => 11, 'status' => 'Warning'],
    ['id' => 18, 'sku' => 'ING-303', 'name' => 'Basil Pesto', 'warehouse' => 'Cold Store', 'qty' => 0, 'reorder' => 5, 'deficit' => 5, 'status' => 'Out'],
    ['id' => 29, 'sku' => 'PRD-1031', 'name' => 'Seasonal Special', 'warehouse' => 'Downtown', 'qty' => 0, 'reorder' => 5, 'deficit' => 5, 'status' => 'Out'],
    ['id' => 31, 'sku' => 'ING-501', 'name' => 'Heavy Cream', 'warehouse' => 'Cold Store', 'qty' => 3, 'reorder' => 8, 'deficit' => 5, 'status' => 'Warning'],
    ['id' => 32, 'sku' => 'ING-502', 'name' => 'Parmesan', 'warehouse' => 'Cold Store', 'qty' => 1, 'reorder' => 4, 'deficit' => 3, 'status' => 'Critical'],
    ['id' => 33, 'sku' => 'PRD-1040', 'name' => 'Soup of the Day', 'warehouse' => 'Kitchen Prep', 'qty' => 5, 'reorder' => 10, 'deficit' => 5, 'status' => 'Warning'],
    ['id' => 34, 'sku' => 'ING-510', 'name' => 'Sourdough Buns', 'warehouse' => 'Dry Store', 'qty' => 6, 'reorder' => 24, 'deficit' => 18, 'status' => 'Warning'],
    ['id' => 35, 'sku' => 'BEV-044', 'name' => 'Cold Brew Concentrate', 'warehouse' => 'Cold Store', 'qty' => 2, 'reorder' => 8, 'deficit' => 6, 'status' => 'Critical'],
    ['id' => 36, 'sku' => 'ING-520', 'name' => 'Avocado', 'warehouse' => 'Cold Store', 'qty' => 7, 'reorder' => 15, 'deficit' => 8, 'status' => 'Warning'],
    ['id' => 37, 'sku' => 'ING-521', 'name' => 'Cherry Tomatoes', 'warehouse' => 'Cold Store', 'qty' => 4, 'reorder' => 10, 'deficit' => 6, 'status' => 'Warning'],
  ];
  $variant = fn ($s) => match ($s) {
    'Critical', 'Out' => 'danger',
    'Warning' => 'warning',
    default => 'neutral',
  };
@endphp

@section('content')
  <div class="app-content__header">
    <div>
      <h1 class="page-title">Low Stock</h1>
      <p class="page-subtitle">Items at or below reorder point</p>
    </div>
    <div class="app-content__actions">
      <button type="button" class="btn btn-outline-secondary"><i class="bi bi-bell"></i><span class="d-none d-sm-inline"> Notify buyers</span></button>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#adjustModal"><i class="bi bi-sliders"></i><span class="d-none d-sm-inline"> Adjust stock</span></button>
    </div>
  </div>

  @include('partials.inventory-nav')

  <x-data-table id="low-stock-table" title="Low stock alerts" subtitle="Prioritized by deficit vs reorder point" :page-size="10">
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Severity">
        <option value="">All severities</option>
        <option>Critical</option><option>Warning</option><option>Out</option>
      </select>
    </x-slot:filters>
    <x-slot:head>
      <x-data-table-th label="SKU" col="sku" :filterable="true" />
      <x-data-table-th label="Product" col="name" :filterable="true" />
      <x-data-table-th label="Warehouse" col="warehouse" :filterable="true" />
      <x-data-table-th label="On hand" col="qty" sort-type="number" />
      <x-data-table-th label="Reorder at" col="reorder" sort-type="number" />
      <x-data-table-th label="Deficit" col="deficit" sort-type="number" />
      <x-data-table-th label="Severity" col="status" :filterable="true" type="select" filter-options="Critical|Warning|Out" />
    </x-slot:head>
    <x-slot:body>
      @foreach ($items as $item)
        <tr data-id="{{ $item['id'] }}">
          <td data-col="sku" class="cell-primary">{{ $item['sku'] }}</td>
          <td data-col="name">{{ $item['name'] }}</td>
          <td data-col="warehouse">{{ $item['warehouse'] }}</td>
          <td data-col="qty">{{ $item['qty'] }}</td>
          <td data-col="reorder">{{ $item['reorder'] }}</td>
          <td data-col="deficit">{{ $item['deficit'] }}</td>
          <td data-col="status"><x-badge :variant="$variant($item['status'])">{{ $item['status'] }}</x-badge></td>
          <td data-edt-actions><x-action-dropdown :id="$item['id']" /></td>
        </tr>
      @endforeach
    </x-slot:body>
  </x-data-table>

  <x-ui-modal id="adjustModal" title="Adjust low stock item" form-id="quick-adjust-form" size="md">
    <div class="row g-3">
      <div class="col-12"><label class="form-label" for="adj_sku">SKU</label><input type="text" class="form-control" id="adj_sku" name="sku" required></div>
      <div class="col-md-6">
        <label class="form-label" for="adj_type">Type</label>
        <select class="form-select" id="adj_type" name="type"><option value="in">Stock in (+)</option><option value="count">Count correction</option></select>
      </div>
      <div class="col-md-6"><label class="form-label" for="adj_qty">Quantity</label><input type="number" class="form-control" id="adj_qty" name="qty" min="1" value="1" required></div>
    </div>
  </x-ui-modal>
@endsection

@push('scripts')
  <script src="{{ asset('assets/js/pages/inventory.js') }}"></script>
@endpush