@extends('layouts.app')
@section('title', $product->exists ? __('Edit Product') : __('Add Item'))
@section('content')
@php
    $conversionRows = old('conversions', $product->unitConversions?->map(fn ($conversion) => ['unit' => $conversion->unit, 'factor' => $conversion->factor])->values()->all() ?? []);
@endphp
<div class="simple-note mb-3"><strong><i class="fa-solid fa-box-open me-2"></i>{{ __('Add Item') }}</strong><div class="small">{{ __('Only product name, unit and prices are required. Other fields can stay simple.') }}</div></div>
<form method="POST" action="{{ $product->exists ? route('products.update',$product) : route('products.store') }}">@csrf @if($product->exists)@method('PUT')@endif
    <div class="card">
        <div class="card-body p-4">
            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="row g-3">
                        <div class="col-md-7"><label class="form-label">{{ __('Product Name') }} *</label><input name="name" class="form-control form-control-lg" value="{{ old('name',$product->name) }}" placeholder="مثلاً Solar Panel 580W" required></div>
                        <div class="col-md-5"><label class="form-label">SKU</label><input name="sku" class="form-control form-control-lg" value="{{ old('sku',$product->sku) }}" placeholder="{{ __('Auto') }}"></div>
                        <div class="col-md-6"><label class="form-label">{{ __('Category') }}</label><select name="category_id" class="form-select"><option value="">—</option>@foreach($categories as $category)<option value="{{ $category->id }}" @selected(old('category_id',$product->category_id)==$category->id)>{{ $category->name }}</option>@endforeach</select></div>
                        <div class="col-md-6"><label class="form-label">{{ __('Base / Sale Unit') }}</label><select name="unit" class="form-select">@foreach($units as $unit)<option value="{{ $unit->short_name }}" @selected(old('unit',$product->unit ?: 'pc')===$unit->short_name)>{{ $unit->name }} ({{ $unit->short_name }})</option>@endforeach</select><small class="text-muted">{{ __('Stock is stored in this unit.') }}</small></div>
                        <div class="col-md-6"><label class="form-label">{{ __('Default Purchase Unit') }}</label><select name="purchase_unit" class="form-select">@foreach($units as $unit)<option value="{{ $unit->short_name }}" @selected(old('purchase_unit',$product->purchase_unit ?: $product->unit ?: 'pc')===$unit->short_name)>{{ $unit->name }} ({{ $unit->short_name }})</option>@endforeach</select></div>
                        <div class="col-md-6"><label class="form-label">{{ __('Purchase Unit Factor') }}</label><input name="purchase_unit_factor" type="number" step="0.0001" min="0.0001" class="form-control" value="{{ old('purchase_unit_factor',$product->purchase_unit_factor ?? 1) }}"><small class="text-muted">{{ __('Example: 1 sack = 160 pao, enter 160.') }}</small></div>
                        <div class="col-12"><label class="form-label">{{ __('Description') }}</label><textarea name="description" class="form-control" rows="3" placeholder="{{ __('Optional') }}">{{ old('description',$product->description) }}</textarea></div>
                        <div class="col-12">
                            <div class="border rounded-4 p-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div>
                                        <h6 class="mb-1">{{ __('Retail Unit Conversions') }}</h6>
                                        <small class="text-muted">{{ __('Example: 1 charak = 4 pao. Add charak here, not inside the sale invoice.') }}</small>
                                    </div>
                                    <button type="button" id="add-conversion" class="btn btn-light btn-sm"><i class="fa-solid fa-plus"></i> {{ __('Add Unit') }}</button>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-sm align-middle mb-0" id="conversion-table">
                                        <thead><tr><th>{{ __('Sale Unit') }}</th><th>{{ __('1 Unit = Base Qty') }}</th><th></th></tr></thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border rounded-4 p-3 h-100 bg-light">
                        <h6 class="mb-3"><i class="fa-solid fa-lightbulb text-success me-2"></i>{{ __('Simple Help') }}</h6>
                        <p class="help-text mb-2">{{ __('Retail') }} = {{ __('normal customer price') }}</p>
                        <p class="help-text mb-2">{{ __('Wholesale') }} = {{ __('shopkeeper/dealer price') }}</p>
                        <p class="help-text mb-0">{{ __('Opening / Current Stock') }} = {{ __('available quantity now in the base unit') }}</p>
                    </div>
                </div>
                <div class="col-md-3"><label class="form-label">{{ __('Opening / Current Stock') }}</label><input name="stock_quantity" type="number" step="0.01" class="form-control" value="{{ old('stock_quantity',$product->stock_quantity ?? 0) }}" required></div>
                <div class="col-md-3"><label class="form-label">{{ __('Low Stock Alert At') }}</label><input name="low_stock_at" type="number" step="0.01" class="form-control" value="{{ old('low_stock_at',$product->low_stock_at ?? 0) }}" required></div>
                <div class="col-md-2"><label class="form-label">{{ __('Cost Price') }}</label><input name="cost_price" type="number" step="0.01" min="0" class="form-control" value="{{ old('cost_price',$product->cost_price ?? 0) }}" required></div>
                <div class="col-md-2"><label class="form-label">{{ __('Retail Price') }}</label><input name="retail_price" type="number" step="0.01" min="0" class="form-control" value="{{ old('retail_price',$product->retail_price ?? 0) }}" required></div>
                <div class="col-md-2"><label class="form-label">{{ __('Wholesale Price') }}</label><input name="wholesale_price" type="number" step="0.01" min="0" class="form-control" value="{{ old('wholesale_price',$product->wholesale_price ?? 0) }}" required></div>
                <div class="col-12"><div class="form-check"><input name="is_active" value="1" class="form-check-input" type="checkbox" id="active" @checked(old('is_active',$product->exists ? $product->is_active : true))><label class="form-check-label" for="active">{{ __('Available for sale') }}</label></div></div>
            </div>
        </div>
        <div class="card-footer bg-white text-end"><a href="{{ route('products.index') }}" class="btn btn-light">{{ __('Cancel') }}</a><button class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i>{{ __('Save Product') }}</button></div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const conversionUnits = @json($units->map(fn($unit) => ['short' => $unit->short_name, 'name' => $unit->name])->values());
const initialConversions = @json($conversionRows);
let conversionIndex = 0;
const conversionBody = document.querySelector('#conversion-table tbody');

function conversionUnitOptions(selected = '') {
    return conversionUnits.map(unit => `<option value="${unit.short}" ${unit.short === selected ? 'selected' : ''}>${unit.name} (${unit.short})</option>`).join('');
}

function addConversionRow(row = null) {
    const index = conversionIndex++;
    conversionBody.insertAdjacentHTML('beforeend', `<tr><td><select name="conversions[${index}][unit]" class="form-select form-select-sm">${conversionUnitOptions(row?.unit || '')}</select></td><td><input name="conversions[${index}][factor]" type="number" step="0.0001" min="0.0001" class="form-control form-control-sm" value="${row?.factor || 1}"></td><td class="text-end"><button type="button" class="btn btn-light btn-sm text-danger remove-conversion"><i class="fa-solid fa-xmark"></i></button></td></tr>`);
    conversionBody.lastElementChild.querySelector('.remove-conversion').addEventListener('click', event => event.currentTarget.closest('tr').remove());
}

document.querySelector('#add-conversion').addEventListener('click', () => addConversionRow());
initialConversions.forEach(row => addConversionRow(row));
</script>
@endpush