@extends('admin.layouts.app')

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

@section('content')
@php
    $categories = $categories ?? collect();
    $brands = $brands ?? collect();
    $suppliers = $suppliers ?? collect();
    $sizes = $sizes ?? collect();
    $colors = $colors ?? collect();
    $units = $units ?? collect();
@endphp

<div class="page-shell">
    <div class="page-head">
        <div>
            <h1 class="page-title">Add Product</h1>
            <div class="page-subtitle">Use clean master data, barcode, and pricing so stock and reports stay accurate.</div>
        </div>
        <a href="{{ route('admin.products.index') }}" class="btn btn-light">Back to List</a>
    </div>

    <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="grid-3">
            <div class="card">
                <label for="product_name">Product Name</label>
                <input type="text" id="product_name" name="product_name" value="{{ old('product_name') }}" required>
            </div>

            <div class="card">
                <label for="product_code">Product Code</label>
                <input type="text" id="product_code" name="product_code" value="{{ old('product_code') }}">
            </div>

            <div class="card">
                <label for="barcode">Barcode</label>
                <input type="text" id="barcode" name="barcode" value="{{ old('barcode') }}">
            </div>

            <div class="card">
                <label for="category">Category</label>
                <select id="category" name="category">
                    <option value="">Select</option>
                    @foreach($categories as $item)
                        <option value="{{ $item->name }}" @selected(old('category') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="brand">Brand</label>
                <select id="brand" name="brand">
                    <option value="">Select</option>
                    @foreach($brands as $item)
                        <option value="{{ $item->name }}" @selected(old('brand') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="supplier_name">Supplier</label>
                <select id="supplier_name" name="supplier_name">
                    <option value="">Select</option>
                    @foreach($suppliers as $item)
                        <option value="{{ $item->name }}" @selected(old('supplier_name') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="size">Size</label>
                <select id="size" name="size">
                    <option value="">Select</option>
                    @foreach($sizes as $item)
                        <option value="{{ $item->name }}" @selected(old('size') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="color">Color</label>
                <select id="color" name="color">
                    <option value="">Select</option>
                    @foreach($colors as $item)
                        <option value="{{ $item->name }}" @selected(old('color') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="unit">Unit</label>
                <select id="unit" name="unit">
                    <option value="">Select</option>
                    @foreach($units as $item)
                        <option value="{{ $item->name }}" @selected(old('unit') == $item->name)>{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="card">
                <label for="stock_quantity">Opening Stock</label>
                <input type="number" id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" min="0">
            </div>

            <div class="card">
                <label for="pack_size">Pack Size</label>
                <input type="text" id="pack_size" name="pack_size" value="{{ old('pack_size') }}" placeholder="e.g. 1 Pc">
            </div>

            <div class="card">
                <label for="status">Status</label>
                <select id="status" name="status">
                    <option value="Active" @selected(old('status', 'Active') == 'Active')>Active</option>
                    <option value="Inactive" @selected(old('status') == 'Inactive')>Inactive</option>
                </select>
            </div>

            <div class="card">
                <label for="original_price">Cost Price</label>
                <input type="number" step="0.01" id="original_price" name="original_price" value="{{ old('original_price', 0) }}">
            </div>

            <div class="card">
                <label for="selling_price">Selling Price</label>
                <input type="number" step="0.01" id="selling_price" name="selling_price" value="{{ old('selling_price', 0) }}">
            </div>

            <div class="card">
                <label for="image">Image</label>
                <input type="file" id="image" name="image" accept="image/*">
            </div>
        </div>

        <div class="grid-2" style="margin-top:12px;">
            <div class="card">
                <label for="description">Description</label>
                <textarea id="description" name="description" rows="6">{{ old('description') }}</textarea>
            </div>

            <div class="card">
                <div class="page-subtitle" style="margin-bottom:10px;">Preview</div>

                <div style="font-size:24px;font-weight:700;margin-bottom:4px;" id="preview_product_name">Product name</div>
                <div class="muted" id="preview_product_code">Code: Auto/Manual</div>
                <div class="muted" id="preview_barcode">Barcode: Will use product code if empty</div>
                <hr style="border:none;border-top:1px solid var(--border);margin:14px 0;">
                <div class="muted">Keep master names clean so reporting stays accurate.</div>

                <div class="form-actions">
                    <button type="submit" class="btn primary">Save Product</button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-light">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
(function () {
    var nameInput = document.getElementById('product_name');
    var codeInput = document.getElementById('product_code');
    var barcodeInput = document.getElementById('barcode');

    var previewName = document.getElementById('preview_product_name');
    var previewCode = document.getElementById('preview_product_code');
    var previewBarcode = document.getElementById('preview_barcode');

    function refreshPreview() {
        if (previewName) {
            previewName.textContent = nameInput && nameInput.value.trim() ? nameInput.value.trim() : 'Product name';
        }

        if (previewCode) {
            previewCode.textContent = 'Code: ' + ((codeInput && codeInput.value.trim()) ? codeInput.value.trim() : 'Auto/Manual');
        }

        if (previewBarcode) {
            previewBarcode.textContent = 'Barcode: ' + ((barcodeInput && barcodeInput.value.trim()) ? barcodeInput.value.trim() : 'Will use product code if empty');
        }
    }

    [nameInput, codeInput, barcodeInput].forEach(function (el) {
        if (el) {
            el.addEventListener('input', refreshPreview);
        }
    });

    refreshPreview();
})();
</script>
@endsection