@extends('layouts.admin')
@section('page-title','Inventory')

@section('topbar-actions')
  <a href="{{ route('admin.products.create') }}" class="btn btn-primary">+ Add Product</a>
@endsection

@section('content')

{{-- LOW STOCK ALERTS --}}
@if($outStock->isNotEmpty())
  <div class="alert red">
    🚨 <div><strong>{{ $outStock->count() }} product(s) are OUT OF STOCK:</strong>
    {{ $outStock->map(fn($p)=>$p->emoji.' '.$p->name)->join(', ') }}</div>
  </div>
@endif
@if($lowStock->isNotEmpty())
  <div class="alert amber">
    ⚠️ <div><strong>{{ $lowStock->count() }} product(s) running LOW (≤ threshold):</strong>
    {{ $lowStock->map(fn($p)=>$p->emoji.' '.$p->name.' ('.$p->stock.')')->join(', ') }}</div>
  </div>
@endif

{{-- KPIs --}}
<div class="kpi-grid kpi-grid-4" style="margin-bottom:24px">
  <div class="kpi"><div class="kpi-label">Total SKUs</div><div class="kpi-value">{{ $summary['total'] }}</div></div>
  <div class="kpi green"><div class="kpi-label">In Stock</div><div class="kpi-value">{{ $summary['in_stock'] }}</div></div>
  <div class="kpi amber"><div class="kpi-label">Low Stock</div><div class="kpi-value">{{ $summary['low_stock'] }}</div></div>
  <div class="kpi red"><div class="kpi-label">Out of Stock</div><div class="kpi-value">{{ $summary['out_of_stock'] }}</div></div>
</div>

{{-- STOCK VALUE BY CATEGORY --}}
<div class="grid3" style="margin-bottom:24px">
  @foreach($stockByCategory as $cat)
  <div class="card" style="padding:18px 22px">
    <div style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink2);margin-bottom:6px">{{ ucfirst($cat->category) }}</div>
    <div style="font-family:var(--font-d);font-size:22px;font-weight:700">${{ number_format($cat->stock_value,2) }}</div>
    <div style="font-size:12px;color:var(--ink2);margin-top:4px">{{ number_format($cat->total_units) }} units at cost</div>
  </div>
  @endforeach
</div>

{{-- FILTER + SEARCH --}}
<div class="card">
  <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center">
    <form method="GET" action="{{ route('admin.inventory.index') }}" style="display:flex;gap:8px;flex:1;flex-wrap:wrap">
      <input type="hidden" name="filter" value="{{ $filter }}">
      <input type="text" name="search" value="{{ $search }}" class="form-input" placeholder="Search products…" style="max-width:260px;margin-bottom:0">
      <button type="submit" class="btn btn-ghost">🔍 Search</button>
      @if($search)<a href="{{ route('admin.inventory.index',['filter'=>$filter]) }}" class="btn btn-ghost">✕ Clear</a>@endif
    </form>
    @foreach(['all'=>'All','good'=>'In Stock','low'=>'Low Stock','out'=>'Out of Stock'] as $val=>$label)
      <a href="{{ route('admin.inventory.index',['filter'=>$val,'search'=>$search]) }}"
         class="btn {{ $filter===$val ? 'btn-primary' : 'btn-ghost' }}" style="padding:7px 14px;font-size:13px">{{ $label }}</a>
    @endforeach
  </div>

  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>Cost</th>
        <th>Sale Price</th>
        <th>Margin</th>
        <th>Stock</th>
        <th>Level</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @forelse($products as $product)
      @php
        $status = $product->stock_status;
        $statusMap = ['in_stock'=>['green','In Stock'],'low_stock'=>['amber','Low Stock'],'out_of_stock'=>['red','Out of Stock']];
        [$cls,$label] = $statusMap[$status];
        $maxStock = 100;
        $pct = $maxStock > 0 ? min(100, round($product->stock / $maxStock * 100)) : 0;
        $barColor = $cls === 'red' ? 'var(--red)' : ($cls === 'amber' ? 'var(--amber)' : 'var(--green)');
      @endphp
      <tr>
        <td>{{ $product->emoji }} <strong>{{ $product->name }}</strong></td>
        <td><span class="badge blue">{{ $product->category }}</span></td>
        <td>${{ number_format($product->cost_price,2) }}</td>
        <td>${{ number_format($product->price,2) }}</td>
        <td><span style="color:var(--green);font-weight:700">{{ $product->margin_percent }}%</span></td>
        <td><strong>{{ number_format($product->stock) }}</strong> units</td>
        <td style="width:130px">
          <div class="progress-bar">
            <div class="progress-fill" style="width:{{ $pct }}%;background:{{ $barColor }}"></div>
          </div>
          <div style="font-size:10px;color:var(--ink2);margin-top:3px">threshold: {{ $product->low_stock_threshold }}</div>
        </td>
        <td><span class="badge {{ $cls }}">{{ $label }}</span></td>
        <td>
          <button class="btn btn-ghost btn-sm" onclick="openRestock({{ $product->id }},'{{ addslashes($product->name) }}',{{ $product->stock }},{{ $product->low_stock_threshold }})">
            + Restock
          </button>
        </td>
      </tr>
      @empty
        <tr><td colspan="9" style="text-align:center;color:var(--ink2);padding:40px">No products found.</td></tr>
      @endforelse
    </tbody>
  </table>

  <div>{{ $products->links() }}</div>
</div>

@endsection

@push('modals')
<div class="modal-overlay" id="restockModal">
  <div class="modal" style="max-width:420px">
    <div class="modal-header">
      <div class="modal-title">Restock Product</div>
      <button class="modal-close" onclick="document.getElementById('restockModal').classList.remove('open')">✕</button>
    </div>
    <div style="margin-bottom:16px;padding:14px;background:var(--surface2);border-radius:10px">
      <div style="font-size:12px;color:var(--ink2)">Product</div>
      <div style="font-weight:700;font-size:16px" id="rstName">—</div>
      <div style="font-size:13px;color:var(--ink2);margin-top:4px">Current stock: <strong id="rstCurrent">—</strong></div>
    </div>
    <form id="restockForm" method="POST">
      @csrf @method('PATCH')
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Qty to Add *</label>
          <input type="number" name="qty" class="form-input" placeholder="50" min="1" required>
        </div>
        <div class="form-group">
          <label class="form-label">New Low-Stock Alert</label>
          <input type="number" name="threshold" id="rstThreshold" class="form-input" placeholder="10" min="1">
        </div>
      </div>
      <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px">
        <button type="button" class="btn btn-ghost" onclick="document.getElementById('restockModal').classList.remove('open')">Cancel</button>
        <button type="submit" class="btn btn-green">✅ Restock</button>
      </div>
    </form>
  </div>
</div>
@endpush

@push('scripts')
<script>
function openRestock(id, name, current, threshold) {
  document.getElementById('rstName').textContent    = name;
  document.getElementById('rstCurrent').textContent = current;
  document.getElementById('rstThreshold').value     = threshold;
  document.getElementById('restockForm').action     = `/admin/inventory/${id}/restock`;
  document.getElementById('restockModal').classList.add('open');
}
document.getElementById('restockModal').addEventListener('click', function(e) {
  if (e.target === this) this.classList.remove('open');
});
</script>
@endpush