@extends('layouts.app')
@section('title', isset($product) ? 'Edit Product' : 'Add Product')
@section('page-title', isset($product) ? 'Edit Product' : 'Add Product')

@section('content')
<div x-data="productForm()" class="max-w-4xl space-y-6">

    <form method="POST"
          action="{{ isset($product) ? route('products.update', $product) : route('products.store') }}"
          enctype="multipart/form-data">
        @csrf
        @if(isset($product)) @method('PUT') @endif

        {{-- Basic Info --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Basic Information</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <div class="sm:col-span-2">
                    <label class="form-label">Product / Service Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $product->name ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full" required>
                    @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="form-label">Type <span class="text-red-500">*</span></label>
                    <select name="type" x-model="type" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                        <option value="product" {{ old('type', $product->type ?? 'product') === 'product' ? 'selected' : '' }}>Product (Physical Good)</option>
                        <option value="service" {{ old('type', $product->type ?? '') === 'service' ? 'selected' : '' }}>Service</option>
                    </select>
                </div>

                <div>
                    <label class="form-label">Category</label>
                    <div class="flex gap-2">
                        <select name="category_id" class="form-input border border-gray-300 rounded-lg px-3 py-2 flex-1">
                            <option value="">— None —</option>
                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" @click="addCategory()" class="btn-secondary px-3 py-2 text-xs">+ New</button>
                    </div>
                </div>

                <div>
                    <label class="form-label">SKU / Item Code</label>
                    <input type="text" name="sku" value="{{ old('sku', $product->sku ?? '') }}"
                           placeholder="e.g. ITEM-001"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>

                <div>
                    <label class="form-label">Unit <span class="text-red-500">*</span></label>
                    <select name="unit" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                        @foreach($units as $unit)
                        <option value="{{ $unit }}" {{ old('unit', $product->unit ?? 'pcs') === $unit ? 'selected' : '' }}>{{ strtoupper($unit) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="sm:col-span-2">
                    <label class="form-label">Description</label>
                    <textarea name="description" rows="2"
                              class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">{{ old('description', $product->description ?? '') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Pricing & GST --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Pricing & GST</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                <div>
                    <label class="form-label">Purchase Price (₹)</label>
                    <input type="number" name="purchase_price" step="0.01" min="0"
                           value="{{ old('purchase_price', $product->purchase_price ?? '0') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>

                <div>
                    <label class="form-label">Selling Price (₹) <span class="text-red-500">*</span></label>
                    <input type="number" name="selling_price" step="0.01" min="0" required
                           value="{{ old('selling_price', $product->selling_price ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full"
                           @input="calcPrice()">
                </div>

                <div>
                    <label class="form-label">MRP (₹)</label>
                    <input type="number" name="mrp" step="0.01" min="0"
                           value="{{ old('mrp', $product->mrp ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>

                <div>
                    <label class="form-label">GST Rate (%) <span class="text-red-500">*</span></label>
                    <select name="gst_rate" x-model="gstRate" @change="calcPrice()"
                            class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                        @foreach($gstRates as $rate)
                        <option value="{{ $rate }}" {{ old('gst_rate', $product->gst_rate ?? 18) == $rate ? 'selected' : '' }}>{{ $rate }}%</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="form-label">HSN / SAC Code</label>
                    <input type="text" name="hsn_sac_code" maxlength="8"
                           value="{{ old('hsn_sac_code', $product->hsn_sac_code ?? '') }}"
                           placeholder="{{ old('type', $product->type ?? 'product') === 'service' ? 'SAC code' : 'HSN code' }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    <p class="text-xs text-gray-400 mt-1">Required for GST compliance</p>
                </div>

                <div>
                    <label class="form-label">CESS Rate (%)</label>
                    <input type="number" name="cess_rate" step="0.01" min="0"
                           value="{{ old('cess_rate', $product->cess_rate ?? '0') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>

                <div class="sm:col-span-3 flex items-center gap-6">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="gst_inclusive" value="0">
                        <input type="checkbox" name="gst_inclusive" value="1"
                               {{ old('gst_inclusive', $product->gst_inclusive ?? false) ? 'checked' : '' }}
                               @change="calcPrice()"
                               class="w-4 h-4 text-indigo-600 rounded border-gray-300">
                        <span class="text-sm text-gray-700">Selling price is GST inclusive</span>
                    </label>
                </div>

                {{-- Price preview --}}
                <div class="sm:col-span-3 p-3 bg-indigo-50 rounded-lg">
                    <p class="text-xs text-indigo-600 font-medium mb-1">Price Summary</p>
                    <div class="flex gap-6 text-sm">
                        <span class="text-gray-600">Base: <strong x-text="'₹' + basePrice"></strong></span>
                        <span class="text-gray-600">GST (<span x-text="gstRate + '%'"></span>): <strong x-text="'₹' + gstAmt"></strong></span>
                        <span class="text-gray-600">Total: <strong class="text-indigo-700" x-text="'₹' + totalPrice"></strong></span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Inventory --}}
        <div class="card" x-show="type === 'product'">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Inventory</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="sm:col-span-3">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="track_inventory" value="0">
                        <input type="checkbox" name="track_inventory" value="1"
                               {{ old('track_inventory', $product->track_inventory ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-indigo-600 rounded border-gray-300">
                        <span class="text-sm text-gray-700">Track inventory for this product</span>
                    </label>
                </div>
                <div>
                    <label class="form-label">Opening / Current Stock</label>
                    <input type="number" name="stock_quantity" step="0.001" min="0"
                           value="{{ old('stock_quantity', $product->stock_quantity ?? '0') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Low Stock Alert Qty</label>
                    <input type="number" name="low_stock_alert" step="0.001" min="0"
                           value="{{ old('low_stock_alert', $product->low_stock_alert ?? '5') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
            </div>
        </div>

        {{-- Image & Status --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Image & Status</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Product Image</label>
                    @if(isset($product) && $product->image_url)
                    <div class="mb-2">
                        <img src="{{ $product->image_url }}" class="h-16 w-16 rounded-lg object-cover border border-gray-200">
                    </div>
                    @endif
                    <input type="file" name="image" accept="image/*"
                           class="block w-full text-sm text-gray-500 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>
                <div class="flex items-end">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1"
                               {{ old('is_active', $product->is_active ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-indigo-600 rounded border-gray-300">
                        <span class="text-sm text-gray-700">Active (visible for invoicing)</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center gap-3">
            <button type="submit" class="btn-primary">
                {{ isset($product) ? 'Update Product' : 'Create Product' }}
            </button>
            <a href="{{ route('products.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function productForm() {
    return {
        type: '{{ old('type', $product->type ?? 'product') }}',
        gstRate: {{ old('gst_rate', $product->gst_rate ?? 18) }},
        basePrice: '0.00',
        gstAmt: '0.00',
        totalPrice: '0.00',
        calcPrice() {
            const sp  = parseFloat(document.querySelector('[name=selling_price]')?.value || 0);
            const inc = document.querySelector('[name=gst_inclusive]:checked');
            const r   = parseFloat(this.gstRate) / 100;
            if (inc) {
                this.basePrice  = (sp / (1 + r)).toFixed(2);
                this.gstAmt     = (sp - parseFloat(this.basePrice)).toFixed(2);
                this.totalPrice = sp.toFixed(2);
            } else {
                this.basePrice  = sp.toFixed(2);
                this.gstAmt     = (sp * r).toFixed(2);
                this.totalPrice = (sp + sp * r).toFixed(2);
            }
        },
        addCategory() {
            const name = prompt('Category name:');
            if (!name) return;
            fetch('{{ route('products.categories.store') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                body: JSON.stringify({ name })
            }).then(r => r.json()).then(d => {
                const sel = document.querySelector('[name=category_id]');
                const opt = new Option(d.category.name, d.category.id, true, true);
                sel.add(opt);
                alert(d.message);
            });
        }
    }
}
</script>
@endpush