@extends('admin.layouts.app')
@section('title', $product->exists ? 'Edit Product' : 'Add Product')
@section('content')
<div class="page-head"><div><h1 class="page-title">{{ $product->exists ? 'Edit Product' : 'Add Product' }}</h1><div class="page-subtitle">Base inventory always saves in pcs. Unit, dozen, packet, box — everything converts to pcs automatically.</div></div><a href="{{ route('admin.products.index') }}" class="btn btn-outline-primary">Back to List</a></div>
<form method="POST" action="{{ $product->exists ? route('admin.products.update',$product) : route('admin.products.store') }}" enctype="multipart/form-data">
@csrf @if($product->exists) @method('PUT') @endif
<div class="row g-4">
<div class="col-lg-8"><div class="card card-body"><div class="row g-3">
<div class="col-md-6"><label class="form-label">Product Name</label><input class="form-control" name="product_name" value="{{ old('product_name',$product->product_name) }}" required></div>
<div class="col-md-3"><label class="form-label">Product Code</label><input class="form-control" name="product_code" value="{{ old('product_code',$product->product_code) }}" required></div>
<div class="col-md-3"><label class="form-label">Barcode</label><input class="form-control" name="barcode" value="{{ old('barcode',$product->barcode) }}"></div>
<div class="col-md-4"><label class="form-label">Category</label><select class="form-select" name="category_id" id="category_id"><option value="">Select</option>@foreach($categories as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('category_id',$product->category_id)==$item->id || old('category',$product->category)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="category" id="category_name" value="{{ old('category',$product->category) }}"></div>
<div class="col-md-4"><label class="form-label">Brand</label><select class="form-select" name="brand_id" id="brand_id"><option value="">Select</option>@foreach($brands as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('brand_id',$product->brand_id)==$item->id || old('brand',$product->brand)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="brand" id="brand_name" value="{{ old('brand',$product->brand) }}"></div>
<div class="col-md-4"><label class="form-label">Supplier</label><select class="form-select" name="supplier_id" id="supplier_id"><option value="">Select</option>@foreach($suppliers as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('supplier_id',$product->supplier_id)==$item->id || old('supplier_name',$product->supplier_name)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="supplier_name" id="supplier_name" value="{{ old('supplier_name',$product->supplier_name) }}"></div>
<div class="col-md-4"><label class="form-label">Size</label><select class="form-select" name="size_id" id="size_id"><option value="">Select</option>@foreach($sizes as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('size_id',$product->size_id)==$item->id || old('size',$product->size)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="size" id="size_name" value="{{ old('size',$product->size) }}"></div>
<div class="col-md-4"><label class="form-label">Color</label><select class="form-select" name="color_id" id="color_id"><option value="">Select</option>@foreach($colors as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('color_id',$product->color_id)==$item->id || old('color',$product->color)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="color" id="color_name" value="{{ old('color',$product->color) }}"></div>
<div class="col-md-4"><label class="form-label">Unit</label><select class="form-select" name="unit_id" id="unit_id"><option value="">Select</option>@foreach($units as $item)<option value="{{ $item->id }}" data-name="{{ $item->name }}" @selected(old('unit_id',$product->unit_id)==$item->id || old('unit',$product->unit)==$item->name)>{{ $item->name }}</option>@endforeach</select><input type="hidden" name="unit" id="unit_name" value="{{ old('unit',$product->unit) }}"></div>
<div class="col-md-4"><label class="form-label">1 Selected Unit = কত pcs</label><input class="form-control" type="number" min="1" name="unit_value_in_base" id="unit_value_in_base" value="{{ old('unit_value_in_base', $product->unit_value_in_base ?? 1) }}" required><input type="hidden" name="base_unit" value="pcs"></div>
<div class="col-md-4"><label class="form-label">Opening Stock (Selected Unit)</label><input class="form-control" type="number" step="0.01" min="0" name="stock_quantity" value="{{ old('stock_quantity', $product->exists ? $product->display_stock_quantity : 0) }}"></div>
<div class="col-md-4"><label class="form-label">Current Inventory (pcs)</label><input class="form-control" value="{{ (int) ($product->stock_quantity ?? 0) }} pcs" readonly></div>
<div class="col-md-4"><label class="form-label">Pack Size / Note</label><input class="form-control" name="units" id="units_note" value="{{ old('units',$product->units) }}" placeholder="e.g. 1 Packet = 24 pcs"></div>
<div class="col-md-4"><label class="form-label">Cost Price (per selected unit)</label><input class="form-control" type="number" step="0.01" min="0" name="original_price" value="{{ old('original_price',$product->original_price ?? 0) }}"></div>
<div class="col-md-4"><label class="form-label">Selling Price (per selected unit)</label><input class="form-control" type="number" step="0.01" min="0" name="selling_price" value="{{ old('selling_price',$product->selling_price ?? 0) }}"></div>
<div class="col-md-6"><label class="form-label">Image</label><input class="form-control" type="file" name="image"></div>
<div class="col-md-3"><label class="form-label">Status</label><select class="form-select" name="status"><option value="Active" @selected(old('status',$product->status ?? 'Active')==='Active')>Active</option><option value="Inactive" @selected(old('status',$product->status)==='Inactive')>Inactive</option></select></div>
<div class="col-12"><label class="form-label">Description</label><textarea class="form-control" rows="4" name="description">{{ old('description',$product->description) }}</textarea></div>
</div></div></div>
<div class="col-lg-4"><div class="card card-body"><h5>Conversion Preview</h5>@if($product->image)<img src="{{ asset('storage/'.$product->image) }}" style="width:100%;max-height:240px;object-fit:cover;border-radius:18px;margin-bottom:12px">@endif<div class="summary-box"><div style="font-weight:800">{{ old('product_name',$product->product_name ?: 'Product name') }}</div><div style="font-size:13px;color:#667085">Code: {{ old('product_code',$product->product_code ?: 'Auto/Manual') }}</div><div style="font-size:13px;color:#667085">Inventory base unit: pcs</div><hr><div id="conversion_preview_text">1 unit = {{ old('unit_value_in_base', $product->unit_value_in_base ?? 1) }} pcs</div><div class="mt-2" style="font-size:13px;color:#667085">Purchase and sales entry both selected unit-এ হবে, কিন্তু stock save হবে pcs-এ।</div></div><div class="mt-3 d-grid gap-2"><button class="btn btn-primary">{{ $product->exists ? 'Update Product' : 'Save Product' }}</button><a href="{{ route('admin.products.index') }}" class="btn btn-outline-primary">Cancel</a></div></div></div>
</div></form>
<script>
function syncSelect(selectId, hiddenId){const el=document.getElementById(selectId);const hidden=document.getElementById(hiddenId);if(!el||!hidden)return;const apply=()=>{hidden.value=el.options[el.selectedIndex]?.dataset?.name||'';updateConversionText();};el.addEventListener('change',apply);apply();}
function updateConversionText(){const unitName=document.getElementById('unit_name')?.value||'unit';const factor=document.getElementById('unit_value_in_base')?.value||1;const text=`1 ${unitName} = ${factor} pcs`;const p=document.getElementById('conversion_preview_text');if(p)p.textContent=text;const note=document.getElementById('units_note');if(note && !note.dataset.edited){note.value=text;}}
['category','brand','supplier','size','color','unit'].forEach(k=>syncSelect(k+'_id',k+'_name'));
document.getElementById('unit_value_in_base')?.addEventListener('input', updateConversionText);
document.getElementById('units_note')?.addEventListener('input', function(){this.dataset.edited='1';});
updateConversionText();
</script>
@endsection
