@extends('layouts.app')
@section('title', 'Materials & Inventory')

@php
  $f = $filters ?? [];
  $stats = $stats ?? [];
  $stockBadge = function (string $label): string {
    return match ($label) {
      'Critical', 'Expired' => 'r',
      'Low', 'Reorder', 'Expiring Soon' => 'a',
      default => 'g',
    };
  };
@endphp

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-boxes-stacked text-blue-600 mr-1.5"></i>Materials &amp; Inventory</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Track all materials across all sites</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('inventory.import.materials.template') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import"></i> Import</a>
      <a href="{{ route('inventory.export.excel') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Excel</a>
      <a href="{{ route('inventory.export.pdf') }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> PDF</a>
      <button type="button" onclick="document.getElementById('inv_ov_stockin').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-arrow-down"></i> Stock In</button>
      <button type="button" onclick="document.getElementById('inv_ov_issue').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-arrow-right-from-bracket"></i> Issue</button>
      <button type="button" onclick="document.getElementById('inv_ov_material').classList.add('open')" class="ba inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-plus"></i> Add Item</button>
    </div>
  </div>

  @if($errors->any())
    <div class="card p-3 mb-4 border-red-100 bg-red-50 text-red-700 text-[13px]">{{ $errors->first() }}</div>
  @endif
  @if(session('success'))
    <div class="card p-3 mb-4 border-emerald-100 bg-emerald-50 text-emerald-800 text-[13px]">{{ session('success') }}</div>
  @endif
  @if(is_array(session('material_import_errors')) && count(session('material_import_errors')))
    <div class="card p-3 mb-4 border-amber-100 bg-amber-50 text-amber-900 text-[12px]">
      <p class="font-bold mb-1">Import row notes</p>
      <ul class="list-disc pl-4 space-y-0.5">
        @foreach(array_slice(session('material_import_errors'), 0, 25) as $err)
          <li>{{ $err }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Materials</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ $stats['total_materials'] ?? 0 }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Low Stock Alerts</p>
      <p class="text-[22px] font-bold text-amber-600 mt-2">{{ $stats['low_stock'] ?? 0 }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Stock Value</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($stats['stock_value'] ?? 0) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Expiring Soon</p>
      <p class="text-[22px] font-bold text-amber-600 mt-2">{{ $stats['expiring_soon'] ?? 0 }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Stock lines (30 days)</p>
    </div>
  </div>

  @include('inventory.partials.subnav', ['invActive' => 'materials'])

  <div id="materials" class="scroll-mt-4">
    <form method="get" action="{{ route('inventory.index') }}" class="card p-4 mb-4 flex flex-col xl:flex-row flex-wrap gap-3 xl:items-end border-slate-200">
      <div class="min-w-[160px] flex-1">
        <label class="fl text-[10px]">Search</label>
        <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="Name, SKU, category…" class="fi">
      </div>
      <div class="min-w-[130px]">
        <label class="fl text-[10px]">Category</label>
        <select name="category" class="fi">
          <option value="">All</option>
          @foreach($categories as $cat)
            <option value="{{ $cat }}" @selected(($f['category'] ?? '') === $cat)>{{ $cat }}</option>
          @endforeach
        </select>
      </div>
      <div class="min-w-[130px]">
        <label class="fl text-[10px]">Stock status</label>
        <select name="status_filter" class="fi">
          <option value="all" @selected(($f['status_filter'] ?? 'all') === 'all')>All</option>
          <option value="OK" @selected(($f['status_filter'] ?? '') === 'OK')>OK</option>
          <option value="Low" @selected(($f['status_filter'] ?? '') === 'Low')>Low</option>
          <option value="Critical" @selected(($f['status_filter'] ?? '') === 'Critical')>Critical</option>
          <option value="Reorder" @selected(($f['status_filter'] ?? '') === 'Reorder')>Reorder</option>
          <option value="Expiring Soon" @selected(($f['status_filter'] ?? '') === 'Expiring Soon')>Expiring Soon</option>
          <option value="Expired" @selected(($f['status_filter'] ?? '') === 'Expired')>Expired</option>
        </select>
      </div>
      <div class="min-w-[120px]">
        <label class="fl text-[10px]">Material status</label>
        <select name="material_status" class="fi">
          <option value="Active" @selected(($f['material_status'] ?? 'Active') === 'Active')>Active</option>
          <option value="Inactive" @selected(($f['material_status'] ?? '') === 'Inactive')>Inactive</option>
          <option value="all" @selected(($f['material_status'] ?? '') === 'all')>All</option>
        </select>
      </div>
      <div class="min-w-[140px]">
        <label class="fl text-[10px]">Supplier</label>
        <select name="supplier_id" class="fi">
          <option value="">All</option>
          @foreach($suppliers as $s)
            <option value="{{ $s->id }}" @selected((string)($f['supplier_id'] ?? '') === (string)$s->id)>{{ $s->company_name }}</option>
          @endforeach
        </select>
      </div>
      <div class="min-w-[120px]">
        <label class="fl text-[10px]">Sort</label>
        <select name="sort" class="fi">
          <option value="name" @selected(($f['sort'] ?? '') === 'name')>Name</option>
          <option value="current_stock" @selected(($f['sort'] ?? '') === 'current_stock')>Stock quantity</option>
          <option value="stock_value" @selected(($f['sort'] ?? '') === 'stock_value')>Stock value</option>
          <option value="minimum_stock_level" @selected(($f['sort'] ?? '') === 'minimum_stock_level')>Minimum stock</option>
          <option value="updated_at" @selected(($f['sort'] ?? '') === 'updated_at')>Last updated</option>
        </select>
      </div>
      <div class="min-w-[90px]">
        <label class="fl text-[10px]">Direction</label>
        <select name="direction" class="fi">
          <option value="asc" @selected(($f['direction'] ?? 'asc') === 'asc')>Asc</option>
          <option value="desc" @selected(($f['direction'] ?? '') === 'desc')>Desc</option>
        </select>
      </div>
      <div class="flex gap-2">
        <button type="submit" class="ba" style="padding:8px 14px;font-size:13px;border-radius:9px">Apply</button>
        <a href="{{ route('inventory.index') }}" class="bs no-underline inline-flex items-center" style="padding:8px 14px;font-size:13px;border-radius:9px">Clear</a>
      </div>
    </form>

    <div class="card p-0 border-slate-200 overflow-hidden card-has-table mb-8">
      @if($materials->isEmpty())
        <div class="p-12 text-center">
          <i class="fa-solid fa-boxes-stacked text-4xl text-slate-200 mb-3"></i>
          <p class="font-bold text-slate-700">No materials found</p>
          <p class="text-slate-400 text-[12px] mt-1 max-w-md mx-auto">Add your first material or import materials from Excel.</p>
          <div class="flex flex-wrap justify-center gap-2 mt-5">
            <button type="button" onclick="document.getElementById('inv_ov_material').classList.add('open')" class="ba" style="padding:8px 16px;font-size:13px;border-radius:9px"><i class="fa-solid fa-plus mr-1"></i>Add Item</button>
            <a href="{{ route('inventory.import.materials.template') }}" class="bs no-underline inline-flex items-center gap-1" style="padding:8px 16px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import"></i>Import Materials</a>
          </div>
        </div>
      @else
        <table>
          <thead>
            <tr class="border-b border-slate-100">
              <th class="th">Material</th>
              <th class="th">SKU</th>
              <th class="th">Category</th>
              <th class="th">Stock</th>
              <th class="th">Min</th>
              <th class="th">Unit</th>
              <th class="th">Stock value</th>
              <th class="th">Expiry</th>
              <th class="th">Status</th>
              <th class="th text-right">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($materials as $m)
              @php
                $health = $m->stockLevelLabel();
                $bc = $stockBadge($health);
                $availLines = $m->stockLines->where('status', 'Available')->where('quantity_available', '>', 0);
                $expLine = $m->is_expirable ? $availLines->filter(fn ($l) => $l->expiry_date)->sortBy('expiry_date')->first() : null;
              @endphp
              <tr>
                <td class="td">
                  <span class="font-semibold text-slate-800">{{ $m->name }}</span>
                  @if($m->description)
                    <p class="text-[11px] text-slate-400 mt-0.5 line-clamp-2">{{ $m->description }}</p>
                  @endif
                </td>
                <td class="td text-slate-500 font-mono text-[12px]">{{ $m->sku ?: '—' }}</td>
                <td class="td text-slate-500">{{ $m->category ?: '—' }}</td>
                <td class="td font-semibold text-slate-700">{{ rtrim(rtrim((string) $m->current_stock, '0'), '.') }}</td>
                <td class="td text-slate-500">{{ rtrim(rtrim((string) $m->minimum_stock_level, '0'), '.') }}</td>
                <td class="td text-slate-500">{{ $m->unit_of_measure }}</td>
                <td class="td text-slate-700">{{ \App\Support\Format::mwkDecimal($m->stock_value) }}</td>
                <td class="td text-[12px]">
                  @if(! $m->is_expirable)
                    <span class="text-slate-400">Not expirable</span>
                  @elseif($expLine && $expLine->expiry_date)
                    @php $ed = $expLine->expiry_date; $isPast = $ed->isPast(); $soon = ! $isPast && $ed->lte(now()->addDays(30)); @endphp
                    <span class="{{ $isPast ? 'text-red-600 font-semibold' : ($soon ? 'text-amber-600 font-medium' : 'text-slate-600') }}">{{ $ed->format('M j, Y') }}</span>
                  @else
                    <span class="text-slate-400">—</span>
                  @endif
                </td>
                <td class="td">
                  <span class="badge {{ $bc }}">{{ $health }}</span>
                  <span class="badge s ml-1">{{ $m->status }}</span>
                </td>
                <td class="td text-right whitespace-nowrap">
                  <a href="{{ route('inventory.materials.show', $m) }}" class="bsm b text-[11px] no-underline" style="padding:4px 8px">View</a>
                  <a href="{{ route('inventory.materials.show', $m) }}#edit" class="bsm s text-[11px] no-underline" style="padding:4px 8px">Edit</a>
                  <button type="button" class="bsm r text-[11px]" style="padding:4px 8px" onclick="invPrefillIssue({{ $m->id }})">Issue</button>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
        <div class="p-3 border-t border-slate-100">{{ $materials->links() }}</div>
      @endif
    </div>
  </div>

  <div class="flex flex-wrap gap-2 mb-4">
    <button type="button" onclick="document.getElementById('inv_ov_return').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-rotate-left"></i> Return</button>
    <button type="button" onclick="document.getElementById('inv_ov_adjust').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-sliders"></i> Adjustment</button>
    <button type="button" onclick="document.getElementById('inv_ov_import').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-solid fa-file-import"></i> Upload import</button>
  </div>

  <div id="expiry-alerts" class="scroll-mt-4 space-y-5">
    <p class="text-[15px] font-bold text-slate-900">Expiry &amp; stock alerts</p>

    <div class="card p-5 border-slate-200">
      <p class="font-bold text-slate-800 mb-3 text-[13px]">Critical stock</p>
      @include('inventory.partials.alert-materials-table', ['rows' => $criticalMaterials, 'empty' => 'No critical items.'])
    </div>
    <div class="card p-5 border-slate-200">
      <p class="font-bold text-slate-800 mb-3 text-[13px]">Low stock</p>
      @include('inventory.partials.alert-materials-table', ['rows' => $lowStockMaterials, 'empty' => 'No low-stock items.'])
    </div>
    <div class="card p-5 border-slate-200">
      <p class="font-bold text-slate-800 mb-3 text-[13px]">Expiring soon (30 days)</p>
      @include('inventory.partials.alert-expiry-table', ['rows' => $expiringLines, 'showWriteOff' => false])
    </div>
    <div class="card p-5 border-slate-200">
      <p class="font-bold text-red-700 mb-3 text-[13px]">Expired on hand</p>
      @include('inventory.partials.alert-expiry-table', ['rows' => $expiredLines, 'showWriteOff' => true])
    </div>
  </div>
</div>

{{-- Add material --}}
<div id="inv_ov_material" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:560px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Add material</p>
      <button type="button" onclick="document.getElementById('inv_ov_material').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.materials.store') }}" class="p-5 space-y-3">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3">
        <div class="sm:col-span-2"><label class="fl">Material name</label><input name="name" class="fi" required maxlength="255"></div>
        <div><label class="fl">SKU</label><input name="sku" class="fi" maxlength="100" placeholder="Optional"></div>
        <div><label class="fl">Unit of measure</label><input name="unit_of_measure" class="fi" required maxlength="50"></div>
        <div class="sm:col-span-2"><label class="fl">Description</label><textarea name="description" class="fi" rows="2" maxlength="2000"></textarea></div>
        <div><label class="fl">Category</label><input name="category" class="fi" maxlength="100"></div>
        <div><label class="fl">Storage location</label><input name="storage_location" class="fi" maxlength="255"></div>
        <div><label class="fl">Minimum stock</label><input type="number" step="0.001" min="0" name="minimum_stock_level" class="fi" required value="0"></div>
        <div><label class="fl">Reorder level</label><input type="number" step="0.001" min="0" name="reorder_level" class="fi"></div>
        <div><label class="fl">Reorder qty</label><input type="number" step="0.001" min="0" name="reorder_quantity" class="fi"></div>
        <div><label class="fl">Default supplier</label>
          <select name="default_supplier_id" class="fi"><option value="">—</option>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->company_name }}</option>@endforeach</select>
        </div>
        <div class="flex items-center gap-2 pt-6"><input type="hidden" name="is_expirable" value="0"><input type="checkbox" name="is_expirable" value="1" id="m_exp" class="rounded border-slate-300"><label for="m_exp" class="text-[13px] text-slate-600">Expirable</label></div>
        <div><label class="fl">Status</label>
          <select name="status" class="fi" required><option value="Active">Active</option><option value="Inactive">Inactive</option></select>
        </div>
      </div>
      <div class="flex justify-end gap-2 pt-4">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_material').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save material</button>
      </div>
    </form>
  </div>
</div>

{{-- Stock in --}}
<div id="inv_ov_stockin" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(720px,96vw)">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Stock in / receive</p>
      <button type="button" onclick="document.getElementById('inv_ov_stockin').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.stock-in') }}" class="p-5" id="form_stockin">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3 mb-4">
        <div><label class="fl">Supplier</label>
          <select name="supplier_id" class="fi"><option value="">—</option>@foreach($suppliers as $s)<option value="{{ $s->id }}">{{ $s->company_name }}</option>@endforeach</select>
        </div>
        <div><label class="fl">Purchase order</label>
          <select name="inventory_purchase_order_id" class="fi"><option value="">—</option>@foreach($openPurchaseOrders as $po)<option value="{{ $po->id }}">{{ $po->po_number }} — {{ $po->supplier?->company_name }}</option>@endforeach</select>
        </div>
        <div><label class="fl">Received date</label><input type="date" name="received_date" class="fi" required value="{{ now()->format('Y-m-d') }}"></div>
        <div><label class="fl">Reference</label><input name="reference" class="fi" maxlength="100"></div>
        <div class="sm:col-span-2"><label class="fl">Notes</label><input name="notes" class="fi" maxlength="1000"></div>
      </div>
      <p class="text-[12px] font-bold text-slate-700 mb-2">Lines</p>
      <div class="overflow-x-auto border border-slate-100 rounded-xl">
        <table class="text-[12px]">
          <thead><tr class="bg-slate-50"><th class="th">Material</th><th class="th">Qty</th><th class="th">Unit cost</th><th class="th">Batch</th><th class="th">Lot</th><th class="th">Expiry</th><th class="th">Location</th><th></th></tr></thead>
          <tbody id="inv_stockin_body">
            <tr data-inv-line>
              <td class="td">
                <select name="lines[0][material_id]" class="fi inv-sel-mat" required>@foreach($materialOptions as $opt)<option value="{{ $opt->id }}" data-exp="{{ $opt->is_expirable ? '1' : '0' }}">{{ $opt->name }}</option>@endforeach</select>
              </td>
              <td class="td"><input type="number" step="0.001" min="0.001" name="lines[0][quantity]" class="fi" required></td>
              <td class="td"><input type="number" step="0.01" min="0" name="lines[0][unit_cost]" class="fi" required></td>
              <td class="td"><input name="lines[0][batch_number]" class="fi" maxlength="100"></td>
              <td class="td"><input name="lines[0][lot_number]" class="fi" maxlength="100"></td>
              <td class="td"><input type="date" name="lines[0][expiry_date]" class="fi inv-line-exp"></td>
              <td class="td"><input name="lines[0][storage_location]" class="fi" maxlength="255"></td>
              <td class="td"><button type="button" class="bs text-[11px] inv-rm-line" style="display:none">✕</button></td>
            </tr>
          </tbody>
        </table>
      </div>
      <button type="button" class="bs mt-2 text-[12px]" id="inv_stockin_add">+ Add line</button>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_stockin').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save stock in</button>
      </div>
    </form>
  </div>
</div>

{{-- Issue --}}
<div id="inv_ov_issue" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(680px,96vw)">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Issue materials</p>
      <button type="button" onclick="document.getElementById('inv_ov_issue').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.issue') }}" class="p-5">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3 mb-4">
        <div class="sm:col-span-2"><label class="fl">Project</label>
          <select name="project_id" id="inv_issue_project" class="fi" required>@foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select>
        </div>
        <div><label class="fl">Issue date</label><input type="date" name="issue_date" class="fi" required value="{{ now()->format('Y-m-d') }}"></div>
        <div><label class="fl">Reference</label><input name="reference" class="fi" maxlength="100"></div>
        <div class="sm:col-span-2"><label class="fl">Notes</label><input name="notes" class="fi" maxlength="1000"></div>
      </div>
      <table class="text-[12px] border border-slate-100 rounded-xl overflow-hidden">
        <thead><tr class="bg-slate-50"><th class="th">Material</th><th class="th">Qty</th><th class="th">Available</th></tr></thead>
        <tbody id="inv_issue_body">
          <tr data-inv-line>
            <td class="td">
              <select name="lines[0][material_id]" class="fi inv-issue-mat">@foreach($materialOptions as $opt)<option value="{{ $opt->id }}" data-stock="{{ $opt->current_stock }}" data-uom="{{ $opt->unit_of_measure }}">{{ $opt->name }}</option>@endforeach</select>
            </td>
            <td class="td"><input type="number" step="0.001" min="0.001" name="lines[0][quantity]" class="fi" required></td>
            <td class="td text-slate-500 inv-issue-avail">—</td>
          </tr>
        </tbody>
      </table>
      <button type="button" class="bs mt-2 text-[12px]" id="inv_issue_add">+ Add line</button>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_issue').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Issue materials</button>
      </div>
    </form>
  </div>
</div>

{{-- Return --}}
<div id="inv_ov_return" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(680px,96vw)">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Return materials</p>
      <button type="button" onclick="document.getElementById('inv_ov_return').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.return') }}" class="p-5">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3 mb-4">
        <div class="sm:col-span-2"><label class="fl">Project</label><select name="project_id" class="fi" required>@foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
        <div><label class="fl">Return date</label><input type="date" name="return_date" class="fi" required value="{{ now()->format('Y-m-d') }}"></div>
        <div><label class="fl">Reference</label><input name="reference" class="fi" maxlength="100"></div>
        <div class="sm:col-span-2"><label class="fl">Notes / reason</label><input name="notes" class="fi" required maxlength="1000"></div>
      </div>
      <table class="text-[12px] border border-slate-100 rounded-xl overflow-hidden">
        <thead><tr class="bg-slate-50"><th class="th">Material</th><th class="th">Qty</th><th class="th">Unit cost</th><th class="th">Condition</th><th class="th">Location</th></tr></thead>
        <tbody id="inv_return_body">
          <tr data-inv-line>
            <td class="td"><select name="lines[0][material_id]" class="fi">@foreach($materialOptions as $opt)<option value="{{ $opt->id }}">{{ $opt->name }}</option>@endforeach</select></td>
            <td class="td"><input type="number" step="0.001" min="0.001" name="lines[0][quantity]" class="fi" required></td>
            <td class="td"><input type="number" step="0.01" min="0" name="lines[0][unit_cost]" class="fi" required></td>
            <td class="td"><select name="lines[0][condition]" class="fi"><option>Good</option><option>Damaged</option></select></td>
            <td class="td"><input name="lines[0][storage_location]" class="fi" maxlength="255"></td>
          </tr>
        </tbody>
      </table>
      <button type="button" class="bs mt-2 text-[12px]" id="inv_return_add">+ Add line</button>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_return').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Save return</button>
      </div>
    </form>
  </div>
</div>

{{-- Adjustment --}}
<div id="inv_ov_adjust" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:min(720px,96vw)">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Stock adjustment</p>
      <button type="button" onclick="document.getElementById('inv_ov_adjust').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.adjustment') }}" class="p-5">
      @csrf
      <div class="grid sm:grid-cols-2 gap-3 mb-4">
        <div><label class="fl">Date</label><input type="date" name="adjustment_date" class="fi" required value="{{ now()->format('Y-m-d') }}"></div>
        <div><label class="fl">Type</label>
          <select name="type" class="fi" required>
            <option value="{{ \App\Models\StockMovement::TYPE_ADJUSTMENT_IN }}">Adjustment in</option>
            <option value="{{ \App\Models\StockMovement::TYPE_ADJUSTMENT_OUT }}">Adjustment out</option>
            <option value="{{ \App\Models\StockMovement::TYPE_DAMAGE }}">Damage</option>
          </select>
        </div>
        <div class="sm:col-span-2"><label class="fl">Reason</label><input name="reason" class="fi" required maxlength="1000"></div>
        <div class="sm:col-span-2"><label class="fl">Reference</label><input name="reference" class="fi" maxlength="100"></div>
      </div>
      <table class="text-[12px] border border-slate-100 rounded-xl overflow-hidden">
        <thead><tr class="bg-slate-50"><th class="th">Material</th><th class="th">Qty</th><th class="th">Unit cost (in)</th><th class="th">Stock line ID</th><th class="th">Expiry (in)</th></tr></thead>
        <tbody id="inv_adj_body">
          <tr data-inv-line>
            <td class="td"><select name="lines[0][material_id]" class="fi">@foreach($materialOptions as $opt)<option value="{{ $opt->id }}">{{ $opt->name }}</option>@endforeach</select></td>
            <td class="td"><input type="number" step="0.001" min="0.001" name="lines[0][quantity]" class="fi" required></td>
            <td class="td"><input type="number" step="0.01" min="0" name="lines[0][unit_cost]" class="fi"></td>
            <td class="td"><input name="lines[0][material_stock_line_id]" class="fi" placeholder="Optional"></td>
            <td class="td"><input type="date" name="lines[0][expiry_date]" class="fi"></td>
          </tr>
        </tbody>
      </table>
      <button type="button" class="bs mt-2 text-[12px]" id="inv_adj_add">+ Add line</button>
      <p class="text-[11px] text-slate-400 mt-2">For adjustment out / damage / expiry write-off, optionally set stock line ID to target a batch.</p>
      <div class="flex justify-end gap-2 mt-4">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_adjust').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Post adjustment</button>
      </div>
    </form>
  </div>
</div>

{{-- Import file --}}
<div id="inv_ov_import" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="width:480px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Import materials</p>
      <button type="button" onclick="document.getElementById('inv_ov_import').classList.remove('open')" class="rounded-lg w-7 h-7 bg-slate-100 text-slate-500 border-0 cursor-pointer">&times;</button>
    </div>
    <form method="post" action="{{ route('inventory.import.materials') }}" enctype="multipart/form-data" class="p-5">
      @csrf
      <label class="fl">Excel / CSV file</label>
      <input type="file" name="file" class="fi" required accept=".xlsx,.csv">
      <p class="text-[11px] text-slate-400 mt-2"><a href="{{ route('inventory.import.materials.template') }}" class="text-blue-600">Download template</a></p>
      <div class="flex justify-end gap-2 mt-5">
        <button type="button" class="bs" onclick="document.getElementById('inv_ov_import').classList.remove('open')">Cancel</button>
        <button type="submit" class="bp">Upload</button>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  function reindex(tbody, nameKey) {
    var rows = tbody.querySelectorAll('tr[data-inv-line]');
    rows.forEach(function (tr, i) {
      tr.querySelectorAll('[name]').forEach(function (el) {
        el.name = el.name.replace(new RegExp(nameKey + '\\[\\d+\\]'), nameKey + '[' + i + ']');
      });
    });
    rows.forEach(function (tr) {
      var rm = tr.querySelector('.inv-rm-line');
      if (rm) rm.style.display = rows.length > 1 ? 'inline-block' : 'none';
    });
  }
  function wireStockInRow(tr) {
    var sel = tr.querySelector('.inv-sel-mat');
    var exp = tr.querySelector('.inv-line-exp');
    if (!sel || !exp) return;
    function sync() {
      var opt = sel.options[sel.selectedIndex];
      var need = opt && opt.getAttribute('data-exp') === '1';
      exp.required = !!need;
    }
    sel.addEventListener('change', sync);
    sync();
  }
  function wireIssueRow(tr) {
    var sel = tr.querySelector('.inv-issue-mat');
    var av = tr.querySelector('.inv-issue-avail');
    if (!sel || !av) return;
    function sync() {
      var opt = sel.options[sel.selectedIndex];
      if (!opt) return;
      av.textContent = (opt.getAttribute('data-stock') || '0') + ' ' + (opt.getAttribute('data-uom') || '');
    }
    sel.addEventListener('change', sync);
    sync();
  }
  function cloneStockIn() {
    var tb = document.getElementById('inv_stockin_body');
    var tr = tb.querySelector('tr[data-inv-line]:last-of-type').cloneNode(true);
    tr.querySelectorAll('input').forEach(function (el) { el.value = ''; });
    tb.appendChild(tr);
    reindex(tb, 'lines');
    wireStockInRow(tr);
  }
  function cloneIssue() {
    var tb = document.getElementById('inv_issue_body');
    var tr = tb.querySelector('tr[data-inv-line]:last-of-type').cloneNode(true);
    tr.querySelectorAll('input').forEach(function (el) { el.value = ''; });
    tb.appendChild(tr);
    reindex(tb, 'lines');
    wireIssueRow(tr);
  }
  function cloneReturn() {
    var tb = document.getElementById('inv_return_body');
    var tr = tb.querySelector('tr[data-inv-line]:last-of-type').cloneNode(true);
    tr.querySelectorAll('input').forEach(function (el) { el.value = ''; });
    tb.appendChild(tr);
    reindex(tb, 'lines');
  }
  function cloneAdj() {
    var tb = document.getElementById('inv_adj_body');
    var tr = tb.querySelector('tr[data-inv-line]:last-of-type').cloneNode(true);
    tr.querySelectorAll('input').forEach(function (el) { el.value = ''; });
    tb.appendChild(tr);
    reindex(tb, 'lines');
  }

  document.querySelectorAll('#inv_stockin_body tr[data-inv-line]').forEach(wireStockInRow);
  document.getElementById('inv_stockin_add')?.addEventListener('click', cloneStockIn);
  document.getElementById('inv_stockin_body')?.addEventListener('click', function (e) {
    if (!e.target.classList.contains('inv-rm-line')) return;
    var tr = e.target.closest('tr');
    var tb = document.getElementById('inv_stockin_body');
    if (tb.querySelectorAll('tr[data-inv-line]').length <= 1) return;
    tr.remove();
    reindex(tb, 'lines');
  });

  document.querySelectorAll('#inv_issue_body tr[data-inv-line]').forEach(wireIssueRow);
  document.getElementById('inv_issue_add')?.addEventListener('click', cloneIssue);
  document.getElementById('inv_return_add')?.addEventListener('click', cloneReturn);
  document.getElementById('inv_adj_add')?.addEventListener('click', cloneAdj);

  window.invPrefillIssue = function (materialId) {
    var ov = document.getElementById('inv_ov_issue');
    var sel = ov.querySelector('#inv_issue_body tr[data-inv-line] select.inv-issue-mat');
    if (sel) sel.value = String(materialId);
    if (sel) sel.dispatchEvent(new Event('change'));
    ov.classList.add('open');
  };

  window.invWriteOffLine = function (btn) {
    var url = btn.getAttribute('data-writeoff-url');
    var reason = prompt('Reason for write-off (required):');
    if (!reason || !reason.trim()) return;
    var f = document.createElement('form');
    f.method = 'POST';
    f.action = url;
    var csrf = document.createElement('input');
    csrf.type = 'hidden';
    csrf.name = '_token';
    csrf.value = window.csrfToken;
    f.appendChild(csrf);
    var r = document.createElement('input');
    r.type = 'hidden';
    r.name = 'reason';
    r.value = reason.trim();
    f.appendChild(r);
    document.body.appendChild(f);
    f.submit();
  };

  @if(!empty($openModal))
  document.addEventListener('DOMContentLoaded', function () {
    var m = @json($openModal);
    if (m === 'stockin') document.getElementById('inv_ov_stockin')?.classList.add('open');
    if (m === 'issue') document.getElementById('inv_ov_issue')?.classList.add('open');
    if (m === 'material') document.getElementById('inv_ov_material')?.classList.add('open');
  });
  @endif
})();
</script>
@endpush