@extends('layouts.app')

@section('title', 'Add Product')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">Add Product</h1>
    <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">Back</a>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('products.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Image (optional)</label>
                    <input type="file" name="image" class="form-control" accept="image/*">
                    @error('image')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required autofocus>
                    @error('name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Category</label>
                    <select name="category_id" class="form-select">
                        <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-4">
                    <label class="form-label">Size</label>
                    <input type="text" name="size" class="form-control" value="{{ old('size') }}" placeholder="S, M, L, XL">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Color</label>
                    <input type="text" name="color" class="form-control" value="{{ old('color') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Barcode</label>
                    <div class="input-group">
                        <input type="text" name="barcode" id="barcodeInput" class="form-control" value="{{ old('barcode') }}" placeholder="Leave empty to auto-generate">
                        <button type="button" class="btn btn-outline-secondary" id="generateBarcodeBtn" title="Generate unique barcode">Generate</button>
                    </div>
                    <small class="text-muted">Leave empty to auto-generate on save (e.g. FM000001).</small>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Purchase Price</label>
                    <input type="number" name="purchase_price" class="form-control" value="{{ old('purchase_price', 0) }}" min="0" step="0.01">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Selling Price</label>
                    <input type="number" name="selling_price" class="form-control" value="{{ old('selling_price', 0) }}" min="0" step="0.01">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Quantity</label>
                    <input type="number" name="quantity" class="form-control" value="{{ old('quantity', 0) }}" min="0">
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Save Product</button>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var btn = document.getElementById('generateBarcodeBtn');
    var input = document.getElementById('barcodeInput');
    if (!btn || !input) return;
    btn.addEventListener('click', function() {
        btn.disabled = true;
        btn.textContent = '…';
        fetch('{{ route("products.suggest-barcode") }}', { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(d) {
                input.value = d.barcode || '';
                input.focus();
            })
            .finally(function() {
                btn.disabled = false;
                btn.textContent = 'Generate';
            });
    });
});
</script>
@endpush
@endsection