@extends('layouts.app')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">Edit 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.update', $product) }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Image (optional)</label>
                    @if($product->image_url)
                        <div class="mb-2">
                            <img src="{{ $product->image_url }}" alt="Current" class="rounded" style="max-width: 120px; max-height: 120px; object-fit: cover; border: 1px solid var(--fm-border);">
                            <span class="d-block small text-muted mt-1">Current image. Upload a new file to replace.</span>
                        </div>
                    @endif
                    <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', $product->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', $product->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', $product->size) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Color</label>
                    <input type="text" name="color" class="form-control" value="{{ old('color', $product->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', $product->barcode) }}" placeholder="Leave empty to auto-generate">
                        <button type="button" class="btn btn-outline-secondary" id="generateBarcodeBtn" title="Generate unique barcode">Generate</button>
                    </div>
                    @if($product->barcode)
                        <div class="mt-2">
                            <img src="{{ route('products.barcode', $product) }}" alt="Barcode" style="max-height: 44px; width: auto;">
                        </div>
                    @endif
                </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', $product->purchase_price) }}" 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', $product->selling_price) }}" 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', $product->quantity) }}" min="0">
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Update 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