@extends('layouts.app')

@section('title', 'Edit Product - Pharmacy Management')

@section('content')
@can('edit_products')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Edit Product</h1>
    <a href="{{ route('products.index') }}" class="text-sm text-brand-600 hover:text-brand-800">&larr; Back to Products</a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-4xl">
    <form method="POST" action="{{ route('products.update', $product) }}" enctype="multipart/form-data">
        @csrf @method('PUT')
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Product Name *</label>
                <input type="text" name="name" value="{{ old('name', $product->name) }}" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Generic Name</label>
                <input type="text" name="generic_name" value="{{ old('generic_name', $product->generic_name) }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Category *</label>
                <select name="category_id" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Supplier</label>
                <select name="supplier_id"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    <option value="">Select Supplier</option>
                    @foreach($suppliers as $sup)
                        <option value="{{ $sup->id }}" {{ old('supplier_id', $product->supplier_id) == $sup->id ? 'selected' : '' }}>{{ $sup->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Batch No</label>
                <input type="text" name="batch_no" value="{{ old('batch_no', $product->batch_no) }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Barcode</label>
                <input type="text" name="barcode" value="{{ old('barcode', $product->barcode) }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
                <input type="date" name="expiry_date" value="{{ old('expiry_date', $product->expiry_date?->format('Y-m-d')) }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Unit *</label>
                <select name="unit" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    @foreach(['piece','strip','bottle','box','tube','vial'] as $unit)
                        <option value="{{ $unit }}" {{ old('unit', $product->unit) == $unit ? 'selected' : '' }}>{{ ucfirst($unit) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Cost Price *</label>
                <input type="number" name="cost_price" value="{{ old('cost_price', $product->cost_price) }}" step="0.01" min="0" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Selling Price *</label>
                <input type="number" name="selling_price" value="{{ old('selling_price', $product->selling_price) }}" step="0.01" min="0" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div class="md:col-span-2 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <h4 class="text-sm font-semibold text-yellow-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-tag"></i> Promotion (Optional)
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-yellow-700 mb-1">Promo Price</label>
                        <input type="number" name="promo_price" value="{{ old('promo_price', $product->promo_price) }}" step="0.01" min="0"
                            class="w-full rounded-lg border border-yellow-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500"
                            placeholder="Discounted price">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-yellow-700 mb-1">Start Date</label>
                        <input type="date" name="promo_start" value="{{ old('promo_start', $product->promo_start?->format('Y-m-d')) }}"
                            class="w-full rounded-lg border border-yellow-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-yellow-700 mb-1">End Date</label>
                        <input type="date" name="promo_end" value="{{ old('promo_end', $product->promo_end?->format('Y-m-d')) }}"
                            class="w-full rounded-lg border border-yellow-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    </div>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Quantity *</label>
                <input type="number" name="quantity" value="{{ old('quantity', $product->quantity) }}" min="0" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Reorder Level *</label>
                <input type="number" name="reorder_level" value="{{ old('reorder_level', $product->reorder_level) }}" min="0" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Manufacturer</label>
                <input type="text" name="manufacturer" value="{{ old('manufacturer', $product->manufacturer) }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="is_active"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">
                    <option value="1" {{ old('is_active', $product->is_active) ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ !old('is_active', $product->is_active) ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Product Image</label>
                <input type="file" name="image" accept="image/*"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100 focus:border-brand-500 focus:ring-brand-500"
                    onchange="document.getElementById('imagePreview').src = window.URL.createObjectURL(this.files[0]); document.getElementById('imagePreview').classList.remove('hidden')">
                <div class="mt-2 flex items-center gap-3">
                    @if($product->image)
                        <img id="imagePreview" src="{{ asset('uploads/products/' . $product->image) }}" class="h-32 w-32 object-cover rounded-lg border">
                        <label class="flex items-center gap-1.5 text-sm text-red-600 cursor-pointer">
                            <input type="checkbox" name="remove_image" value="1">
                            <i class="fas fa-trash-alt"></i> Remove image
                        </label>
                    @else
                        <img id="imagePreview" class="h-32 w-32 object-cover rounded-lg border hidden">
                    @endif
                </div>
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="3"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500">{{ old('description', $product->description) }}</textarea>
            </div>

            @if(auth()->user()->canAccessAllData() && $branches->count() > 0)
            <div class="md:col-span-2">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Branch Stock</h3>
                <p class="text-sm text-gray-500 mb-3">Manage branch stock quantities.</p>
                <div class="space-y-2">
                    @php $branchIds = $product->branches->pluck('id')->toArray(); @endphp
                    @foreach($branches as $branch)
                        @php
                            $pivotQty = $product->branches->where('id', $branch->id)->first()?->pivot?->quantity ?? 0;
                            $oldChecked = in_array($branch->id, old('branches', $branchIds));
                            $oldQty = old('branch_quantities.' . $branch->id, $pivotQty);
                        @endphp
                    <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
                        <input type="checkbox" name="branches[]" value="{{ $branch->id }}"
                            {{ $oldChecked ? 'checked' : '' }}
                            class="rounded border-gray-300 text-brand-600 focus:ring-brand-500 branch-checkbox">
                        <span class="text-sm font-medium text-gray-700 min-w-0 flex-1">{{ $branch->name }}</span>
                        <input type="number" name="branch_quantities[{{ $branch->id }}]" value="{{ $oldQty }}" min="0"
                            class="w-24 rounded-lg border border-gray-300 px-2 py-1.5 text-sm text-center branch-qty">
                    </label>
                    @endforeach
                </div>
            </div>
            @endif

        </div>
        <div class="mt-6 flex justify-end gap-3">
            <a href="{{ route('products.index') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Cancel</a>
            <button type="submit" class="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700">
                <i class="fas fa-save mr-1"></i> Update Product
            </button>
        </div>
    </form>
</div>
@endcan
@endsection