@extends('layouts.app')

@section('title', 'Stock List')
@section('page', 'inventory')
@section('inventoryNav', 'stock-list')

@php
  $statusVariant = fn ($s) => match ($s) {
    'In stock' => 'success',
    'Low stock' => 'warning',
    'Out of stock' => 'danger',
    'Inactive' => 'neutral',
    default => 'neutral',
  };
@endphp

@section('content')
  @include('partials.inventory-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="stock-list-table"
    class="catalog-table stock-table"
    title="Stock List"
    subtitle="On-hand inventory across warehouses."
    search-placeholder="Search stock..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#stockItemModal" data-stock-add>
        <i class="bi bi-plus-lg"></i> Add Stock
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="warehouse" aria-label="Warehouse">
        <option value="">All Warehouses</option>
        @foreach ($warehouses as $warehouse)
          <option value="{{ $warehouse->name }}" @selected($defaultWarehouse && (int) $defaultWarehouse->id === (int) $warehouse->id)>{{ $warehouse->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>In stock</option>
        <option>Low stock</option>
        <option>Out of stock</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats justify-content-start">
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-box-seam-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total SKUs</p>
                <p class="product-kpi__value">{{ $totalSkus }}</p>
                <p class="product-kpi__meta">Tracked in inventory</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-check-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">In Stock</p>
                <p class="product-kpi__value">{{ $inStock }}</p>
                <p class="product-kpi__meta">Healthy stock levels</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-exclamation-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Low Stock</p>
                <p class="product-kpi__value">{{ $lowStock }}</p>
                <p class="product-kpi__meta">Need restocking</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--danger">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-x-circle-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Out of Stock</p>
                <p class="product-kpi__value">{{ $outOfStock }}</p>
                <p class="product-kpi__meta">Currently unavailable</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--inactive">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-cash-stack"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Stock Value</p>
                <p class="product-kpi__value">{{ number_format($totalStockValue, 2) }}</p>
                <p class="product-kpi__meta">Qty × avg cost</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Product" col="name" />
      <x-data-table-th label="Code" col="code" />
      <x-data-table-th label="Category" col="category" />
      <x-data-table-th label="Warehouse" col="warehouse" />
      <x-data-table-th label="Unit" col="unit" />
      <x-data-table-th label="Qty" col="qty" sort-type="number" />
      <x-data-table-th label="AVG COST" col="average_cost" sort-type="number" />
      <x-data-table-th label="Total" col="total" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($stockItems as $item)
        @php
          $label = $item->stockLabel();
          $total = (float) $item->qty * (float) $item->average_cost;
        @endphp
        <tr data-id="{{ $item->id }}">
          <td data-col="name" class="cell-primary">
            <span class="inv-cell">
              <span class="inv-cell__icon" aria-hidden="true"><i class="bi bi-box-seam"></i></span>
              <span class="inv-cell__name">{{ $item->name }}</span>
            </span>
          </td>
          <td data-col="code">{{ $item->code }}</td>
          <td data-col="category">{{ $item->category?->name ?? '—' }}</td>
          <td data-col="warehouse">{{ $item->warehouse?->name ?? '—' }}</td>
          <td data-col="unit">
            @if ($item->unit)
              <span class="product-unit">{{ $item->unit->short }}</span>
            @else
              —
            @endif
          </td>
          <td data-col="qty">{{ $item->qty }}</td>
          <td data-col="average_cost">{{ number_format((float) $item->average_cost, 2) }}</td>
          <td data-col="total">{{ number_format($total, 2) }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($label)">{{ $label }}</x-badge></td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-edt-action="edit"
                data-backend
                data-stock-edit
                data-id="{{ $item->id }}"
                data-code="{{ $item->code }}"
                data-name="{{ $item->name }}"
                data-inventory-category-id="{{ $item->inventory_category_id }}"
                data-warehouse-id="{{ $item->warehouse_id }}"
                data-unit-id="{{ $item->unit_id }}"
                data-qty="{{ $item->qty }}"
                data-min-qty="{{ $item->min_qty }}"
                data-average-cost="{{ $item->average_cost }}"
                data-status="{{ $item->status }}"
                data-linked-product="{{ $productsByCode->has(strtoupper(trim($item->code))) ? '1' : '0' }}"
                data-product-category-id="{{ $productsByCode->get(strtoupper(trim($item->code)))?->category_id }}"
                data-update-url="{{ route('inventory.stock.update', $item) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--transfer"
                title="Stock Transfer"
                aria-label="Stock Transfer"
                data-stock-transfer
                data-id="{{ $item->id }}"
                data-code="{{ $item->code }}"
                data-name="{{ $item->name }}"
                data-warehouse-id="{{ $item->warehouse_id }}"
                data-warehouse-name="{{ $item->warehouse?->name }}"
                data-qty="{{ $item->qty }}"
              >
                <i class="bi bi-arrow-left-right" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-edt-action="delete"
                data-backend
                data-delete-open
                data-delete-url="{{ route('inventory.stock.destroy', $item) }}"
                data-delete-label="{{ $item->name }}"
                data-delete-type="stock item"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="11" class="text-center text-muted py-4">No stock items yet. Add your first stock item.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="stockItemModal" tabindex="-1" aria-labelledby="stockItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <form id="stock-item-form" method="post" action="{{ route('inventory.stock.store') }}" data-store-url="{{ route('inventory.stock.store') }}">
          @csrf
          <input type="hidden" name="_method" id="stock_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="stockItemModalLabel">Add stock</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label" for="stock_code">Code</label>
                <input type="text" class="form-control" id="stock_code" name="code" required value="{{ old('code') }}">
              </div>
              <div class="col-md-8">
                <label class="form-label" for="stock_name">Product name</label>
                <input type="text" class="form-control" id="stock_name" name="name" required value="{{ old('name') }}">
              </div>
              <div class="col-md-4">
                <label class="form-label" for="stock_category">Category</label>
                <select class="form-select" id="stock_category" name="inventory_category_id">
                  <option value="">Select category</option>
                  @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected((string) old('inventory_category_id') === (string) $category->id)>{{ $category->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="stock_warehouse">Warehouse</label>
                <select class="form-select" id="stock_warehouse" name="warehouse_id" required>
                  <option value="">Select warehouse</option>
                  @foreach ($warehouses as $warehouse)
                    <option value="{{ $warehouse->id }}" @selected((string) old('warehouse_id') === (string) $warehouse->id)>{{ $warehouse->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="stock_unit">Unit</label>
                <select class="form-select" id="stock_unit" name="unit_id">
                  <option value="">Select unit</option>
                  @foreach ($units as $unit)
                    <option value="{{ $unit->id }}" @selected((string) old('unit_id') === (string) $unit->id)>{{ $unit->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="stock_qty">Qty</label>
                <input type="number" class="form-control" id="stock_qty" name="qty" min="0" value="{{ old('qty', 0) }}" data-stock-qty-input>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="stock_min_qty">Minimum Qty</label>
                <input type="number" class="form-control" id="stock_min_qty" name="min_qty" min="0" value="{{ old('min_qty', 0) }}" data-stock-min-qty-input>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="stock_average_cost">Average Cost</label>
                <input type="number" class="form-control" id="stock_average_cost" name="average_cost" min="0" step="0.01" value="{{ old('average_cost', 0) }}">
              </div>
              <div class="col-md-3">
                <label class="form-label" for="stock_status">Record status</label>
                <select class="form-select" id="stock_status" name="status" data-stock-record-status>
                  <option value="Active" @selected(old('status', 'Active') === 'Active')>Active</option>
                  <option value="Inactive" @selected(old('status') === 'Inactive')>Inactive</option>
                </select>
              </div>
              <div class="col-12">
                <p class="form-text mb-1">Stock status updates automatically from Qty + Minimum Qty.</p>
                <span id="stock_status_preview" class="ui-badge ui-badge--success">In stock</span>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value="1"
                    id="stock_add_to_product"
                    name="add_to_product"
                    @checked(old('add_to_product'))
                    data-stock-add-to-product
                  >
                  <label class="form-check-label" for="stock_add_to_product">
                    Add to product stock
                  </label>
                </div>
                <p class="form-text mb-0">Uses the same item code for Products. If a product name already exists with a different code, saving will fail.</p>
              </div>
              <div class="col-md-6{{ old('add_to_product') ? '' : ' d-none' }}" id="stock_product_category_wrap" data-stock-product-category-wrap>
                <label class="form-label" for="stock_product_category">Product category</label>
                <select class="form-select" id="stock_product_category" name="product_category_id">
                  <option value="">Select category</option>
                  @foreach ($productCategories as $category)
                    <option value="{{ $category->id }}" @selected((string) old('product_category_id') === (string) $category->id)>{{ $category->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="stockTransferModal" tabindex="-1" aria-labelledby="stockTransferModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="stock-transfer-form" method="post" action="{{ route('inventory.transfers.store') }}">
          @csrf
          <input type="hidden" name="stock_item_id" id="st_stock_item_id" value="">
          <input type="hidden" name="redirect_to" value="transfers">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="stockTransferModalLabel">Stock transfer</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label" for="st_item_label">Item</label>
                <input type="text" class="form-control" id="st_item_label" value="" readonly>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="st_from_warehouse">From warehouse</label>
                <input type="text" class="form-control" id="st_from_warehouse" value="" readonly>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="st_available_qty">Available qty</label>
                <input type="text" class="form-control" id="st_available_qty" value="" readonly>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="st_to_warehouse">To warehouse</label>
                <select class="form-select" id="st_to_warehouse" name="to_warehouse_id" required>
                  <option value="">Select warehouse</option>
                  @foreach ($warehouses as $warehouse)
                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="st_qty">Transfer qty</label>
                <input type="number" class="form-control" id="st_qty" name="qty" min="1" value="1" required>
              </div>
              <div class="col-12">
                <label class="form-label" for="st_notes">Notes</label>
                <textarea class="form-control" id="st_notes" name="notes" rows="2" placeholder="Optional notes"></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Transfer</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete stock item</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this item</strong>? This action cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/css/pages/inventory.css') }}" rel="stylesheet">
@endpush

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