@extends('layouts.app')

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

@section('content')
@can('create_products')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Add 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.store') }}" enctype="multipart/form-data">
        @csrf
        <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') }}" 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') }}"
                    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">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('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') == $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') }}"
                    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') }}"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500"
                    placeholder="Auto-generated if empty">
            </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') }}"
                    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">
                    <option value="piece" {{ old('unit') == 'piece' ? 'selected' : '' }}>Piece</option>
                    <option value="strip" {{ old('unit') == 'strip' ? 'selected' : '' }}>Strip</option>
                    <option value="bottle" {{ old('unit') == 'bottle' ? 'selected' : '' }}>Bottle</option>
                    <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                    <option value="tube" {{ old('unit') == 'tube' ? 'selected' : '' }}>Tube</option>
                    <option value="vial" {{ old('unit') == 'vial' ? 'selected' : '' }}>Vial</option>
                </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') }}" 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') }}" 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') }}" 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') }}"
                            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') }}"
                            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', 0) }}" 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', 10) }}" 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') }}"
                    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', true) ? 'selected' : '' }}>Active</option>
                    <option value="0">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')">
                <img id="imagePreview" class="mt-2 h-32 w-32 object-cover rounded-lg border hidden">
            </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') }}</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">Assign initial stock to branches (optional).</p>
                <div class="space-y-2">
                    @foreach($branches as $branch)
                    <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 }}"
                            {{ in_array($branch->id, old('branches', [])) ? '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="{{ old('branch_quantities.' . $branch->id, 0) }}" 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> Save Product
            </button>
        </div>
    </form>
</div>

@endcan
@endsection