@extends('layouts.app')
@section('title','Product Master')
@section('content')
<div class="pagetop"><div><div class="eyebrow">ERP / PRODUCTS</div><h1>Product Master</h1><p class="desc">Company products are stored once and can appear in multiple catalogs.</p></div><div class="product-actions"><a class="btn" href="{{ route('erp.products.import') }}"><i class="fa-solid fa-file-import" aria-hidden="true"></i> Import Excel</a>@if($canCreate)<button type="button" class="btn primary" id="add-product-toggle" aria-controls="add-product-panel" aria-expanded="{{ isset($errors) && $errors->any()?'true':'false' }}"><i class="fa-solid fa-plus" aria-hidden="true"></i> Add Product</button>@endif</div></div>
@if(session('success'))<div class="panel" style="padding:14px;margin-bottom:16px">{{ session('success') }}</div>@endif
@if(isset($errors) && $errors->any())<div class="panel" style="padding:14px;margin-bottom:16px;color:#b42318">{{ $errors->first() }}</div>@endif
@if($canCreate)<div id="add-product-panel" class="panel" style="padding:22px;margin-bottom:18px;{{ isset($errors) && $errors->any()?'':'display:none' }}"><h2>Add product</h2><form method="POST" action="{{ route('erp.products.store') }}" class="erp-fields">@csrf<label>SKU<input name="sku" required maxlength="100"></label><label>Product name<input name="name" required maxlength="240"></label><label>Barcode<input name="barcode"></label><label>Brand<input name="brand"></label><label>Category<select name="category_id"><option value="">Uncategorized</option>@foreach($categories as $c)<option value="{{ $c->id }}">{{ $c->parent_id?'↳ ':'' }}{{ $c->name }}</option>@endforeach</select></label><label>Price (AED)<input name="price" type="number" step="0.01" min="0" value="0" required></label><button class="btn primary">Save product</button></form></div>@endif
<div class="panel" style="padding:20px"><form method="GET" class="erp-search"><input type="search" name="q" value="{{ request('q') }}" placeholder="Search SKU, barcode or product name"><button class="btn">Search</button></form><div style="overflow:auto"><table class="data"><thead><tr><th>Photo</th><th>SKU</th><th>Name</th><th>Barcode</th><th>Brand</th><th>Price</th></tr></thead><tbody>@forelse($products as $p)<tr><td>@if($p->image_url)<img src="{{ $p->image_url }}" alt="" style="width:52px;height:52px;object-fit:contain">@endif</td><td><a href="{{ route('erp.products.edit',$p->id) }}">{{ $p->sku }}</a></td><td>{{ $p->name }}</td><td>{{ $p->barcode }}</td><td>{{ $p->brand }}</td><td>{{ number_format($p->price,2) }} {{ $p->currency }}</td></tr>@empty<tr><td colspan="6">No products found.</td></tr>@endforelse</tbody></table></div>{{ $products->links() }}</div>
<script>document.getElementById('add-product-toggle')?.addEventListener('click',function(){const panel=document.getElementById('add-product-panel');const show=panel.style.display==='none';panel.style.display=show?'block':'none';this.setAttribute('aria-expanded',String(show));if(show)panel.querySelector('input[name="sku"]')?.focus();});</script>
<style>.pagetop{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.product-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-left:auto}.product-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}@media(max-width:550px){.product-actions{width:100%;justify-content:stretch;margin-left:0}.product-actions .btn{flex:1}}.erp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}.erp-fields label{display:grid;gap:7px;font-size:13px;font-weight:600}.erp-fields input,.erp-fields select,.erp-search input{width:100%;min-height:43px;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--paper);color:var(--text)}.erp-search{display:flex;gap:10px;margin-bottom:18px}.erp-search input{max-width:420px}@media(max-width:850px){.erp-fields{grid-template-columns:1fr 1fr}}@media(max-width:550px){.erp-fields{grid-template-columns:1fr}}</style>
@endsection