@extends('layouts.app')
@section('title','New Product')@section('page-title','New Product')
@section('content')
<div class="page-header">
    <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('products.index') }}">Products</a></li><li class="breadcrumb-item active">New</li></ol></nav>
    <h1>Add New Product</h1>
</div>
<form action="{{ route('products.store') }}" method="POST">
@csrf
<div class="row g-4">
<div class="col-12 col-xl-8">
<div class="card mb-4"><div class="card-body p-4">
    <h6 class="fw-700 mb-4" style="font-family:'Space Grotesk',sans-serif;">Product Details</h6>
    <div class="row g-3">
        <div class="col-md-4"><label class="form-label">SKU *</label><input type="text" name="sku" class="form-control @error('sku') is-invalid @enderror" value="{{ old('sku') }}" required><div class="invalid-feedback">@error('sku'){{ $message }}@enderror</div></div>
        <div class="col-md-8"><label class="form-label">Product Name *</label><input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required></div>
        <div class="col-md-6"><label class="form-label">Category *</label><select name="category_id" class="form-select" required><option value="">— Select —</option>@foreach($categories as $c)<option value="{{ $c->id }}" {{ old('category_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select></div>
        <div class="col-md-6"><label class="form-label">Branch *</label><select name="branch_id" class="form-select" required>@if(!auth()->user()->isAdmin())<option value="{{ auth()->user()->branch_id }}" selected>{{ auth()->user()->branch?->name }}</option>@else<option value="">— Select Branch —</option>@foreach($branches as $b)<option value="{{ $b->id }}" {{ old('branch_id')==$b->id?'selected':'' }}>{{ $b->code }} — {{ $b->name }}</option>@endforeach@endif</select></div>
        <div class="col-md-6"><label class="form-label">Supplier</label><select name="supplier_id" class="form-select"><option value="">— No Supplier —</option>@foreach($suppliers as $s)<option value="{{ $s->id }}" {{ old('supplier_id')==$s->id?'selected':'' }}>{{ $s->name }}</option>@endforeach</select></div>
        <div class="col-md-3"><label class="form-label">Unit</label><input type="text" name="unit" class="form-control" value="{{ old('unit','pcs') }}" placeholder="pcs, kg, pair..."></div>
        <div class="col-md-3"><label class="form-label">Exchange Rate</label><input type="number" name="exchange_rate" class="form-control" value="{{ old('exchange_rate','168') }}" step="0.01" min="0"></div>
        <div class="col-12"><label class="form-label">Description</label><textarea name="description" class="form-control" rows="2">{{ old('description') }}</textarea></div>
    </div>
</div></div>
<div class="card"><div class="card-body p-4">
    <h6 class="fw-700 mb-4" style="font-family:'Space Grotesk',sans-serif;">Pricing &amp; Stock</h6>
    <div class="row g-3">
        <div class="col-md-3"><label class="form-label">Cost Price (LRD) *</label><input type="number" name="cost_price_local" id="cl" class="form-control" value="{{ old('cost_price_local',0) }}" step="0.01" min="0" oninput="calcMargin()" required></div>
        <div class="col-md-3"><label class="form-label">Cost Price (USD) *</label><input type="number" name="cost_price_usd" id="cu" class="form-control" value="{{ old('cost_price_usd',0) }}" step="0.0001" min="0" oninput="calcMargin()" required></div>
        <div class="col-md-3"><label class="form-label">Sell Price (LRD) *</label><input type="number" name="selling_price_local" id="sl" class="form-control" value="{{ old('selling_price_local',0) }}" step="0.01" min="0" oninput="calcMargin()" required></div>
        <div class="col-md-3"><label class="form-label">Sell Price (USD) *</label><input type="number" name="selling_price_usd" id="su" class="form-control" value="{{ old('selling_price_usd',0) }}" step="0.0001" min="0" oninput="calcMargin()" required></div>
        <div class="col-md-4"><label class="form-label">Opening Stock *</label><input type="number" name="quantity_in_stock" class="form-control" value="{{ old('quantity_in_stock',0) }}" min="0" required></div>
        <div class="col-md-4"><label class="form-label">Reorder Level *</label><input type="number" name="reorder_level" class="form-control" value="{{ old('reorder_level',10) }}" min="0" required></div>
        <div class="col-md-4 d-flex align-items-end"><div id="marginBadge" class="w-100 text-center p-3 rounded-3" style="background:var(--page-bg);font-size:13px;"><div class="text-muted" style="font-size:11px;">Gross Margin</div><div id="marginVal" class="fw-800 mt-1" style="font-size:22px;">—</div></div></div>
    </div>
    <div class="d-flex gap-3 mt-4">
        <button type="submit" class="btn btn-brand px-5"><i class="bi bi-check-lg me-2"></i>Save Product</button>
        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
    </div>
</div></div>
</div>
</div>
</form>
@endsection
@push('scripts')
<script>
function calcMargin() {
    const cu = parseFloat(document.getElementById('cu').value) || 0;
    const su = parseFloat(document.getElementById('su').value) || 0;
    const el = document.getElementById('marginVal');
    if (su <= 0) { el.textContent = '—'; return; }
    const m = ((su - cu) / su * 100).toFixed(1);
    el.textContent = m + '%';
    el.style.color = m >= 25 ? '#06D6A0' : m >= 10 ? 'var(--brand)' : 'var(--danger-c)';
}
calcMargin();
</script>
@endpush