@extends('layouts.app')

@section('title', TranslationHelper::transFromDatabase('Inventory.CreateItemTitle', __('إضافة صنف جديد')))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        
        <!-- رأس الصفحة -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">{{ TranslationHelper::transFromDatabase('Inventory.CreateItemTitle', __('إضافة صنف جديد')) }}</h1>
                    <p class="text-black">{{ TranslationHelper::transFromDatabase('Inventory.CreateItemSubtitle', __('أضف صنفاً جديداً إلى النظام بسهولة')) }}</p>
                </div>
                <a href="{{ route('inventory.items.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-black font-semibold rounded-lg hover:bg-gray-200 transition-all duration-200">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>{{ TranslationHelper::transFromDatabase('General.Back', __('العودة')) }}</span>
                </a>
            </div>
        </div>

        <!-- رسائل التنبيه -->
        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="mr-3">
                        <h3 class="text-red-700 font-semibold mb-2">{{ TranslationHelper::transFromDatabase('General.FormErrors', __('يوجد أخطاء في النموذج')) }}</h3>
                        <ul class="list-disc list-inside text-red-600 text-sm space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif
        
        <!-- رسالة النجاح (إن وجدت) -->
        @if(session('success'))
            <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-500 text-xl"></i>
                    </div>
                    <div class="mr-3">
                        <p class="text-green-700 font-medium">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- النموذج -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-8">

        <form action="{{ route('inventory.items.store') }}" method="POST" class="space-y-6">
            @csrf
            
            <!-- البيانات الأساسية -->
            <div>
                <h3 class="text-lg font-semibold text-black mb-4 pb-3 border-b-2 border-blue-500">
                    <i class="fas fa-box ml-2 text-blue-600"></i>{{ TranslationHelper::transFromDatabase('General.BasicInfo', __('البيانات الأساسية')) }}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- اسم الصنف -->
                    <div>
                        <label for="name" class="block text-black font-semibold mb-2">
                            {{ TranslationHelper::transFromDatabase('Inventory.ItemName', __('اسم الصنف')) }} <span class="text-red-600">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            value="{{ old('name') }}" 
                            required
                            placeholder="{{ TranslationHelper::transFromDatabase('Inventory.EnterItemName', __('أدخل اسم الصنف')) }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                        >
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- كود الصنف -->
                    <div>
                        <label for="code" class="block text-black font-semibold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ItemCode', __('كود الصنف')) }}</label>
                        <input 
                            type="text" 
                            id="code" 
                            name="code" 
                            value="{{ old('code') }}"
                            placeholder="{{ TranslationHelper::transFromDatabase('Inventory.EnterItemCodeOptional', __('أدخل كود الصنف (اختياري)')) }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                        >
                        @error('code')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- كود الضرائب المصرية -->
                    <div>
                        <label for="eta_item_code" class="block text-black font-semibold mb-2">{{ __('كود الضرائب المصرية (GS1/EGS)') }}</label>
                        <input 
                            type="text" 
                            id="eta_item_code" 
                            name="eta_item_code" 
                            value="{{ old('eta_item_code') }}"
                            placeholder="EG-113456789-XXXX"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                        >
                        <p class="text-xs text-black mt-1">أدخل كود GS1 أو كود EGS المرتبط بهذا الصنف في مصلحة الضرائب المصرية</p>
                        @error('eta_item_code')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- بيانات الصيدلية -->
                <h3 class="text-lg font-semibold text-black mb-4 mt-8 pb-3 border-b-2 border-green-500">
                    <i class="fas fa-pills ml-2 text-green-600"></i>{{ __('بيانات الصيدلية (اختياري)') }}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- الاسم العلمي -->
                    <div>
                        <label for="scientific_name" class="block text-black font-semibold mb-2">{{ __('الاسم العلمي') }}</label>
                        <input 
                            type="text" 
                            id="scientific_name" 
                            name="scientific_name" 
                            value="{{ old('scientific_name') }}"
                            placeholder="{{ __('أدخل الاسم العلمي') }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"
                        >
                        @error('scientific_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- الشكل الدوائي -->
                    <div>
                        <label for="dosage_form" class="block text-black font-semibold mb-2">{{ __('الشكل الدوائي') }}</label>
                        <input 
                            type="text" 
                            id="dosage_form" 
                            name="dosage_form" 
                            value="{{ old('dosage_form') }}"
                            placeholder="e.g. Tablet, Syrup"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"
                        >
                        @error('dosage_form')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- التركيز -->
                    <div>
                        <label for="strength" class="block text-black font-semibold mb-2">{{ __('التركيز') }}</label>
                        <input 
                            type="text" 
                            id="strength" 
                            name="strength" 
                            value="{{ old('strength') }}"
                            placeholder="e.g. 500mg"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all"
                        >
                        @error('strength')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- دواء مراقب -->
                    <div class="flex items-center">
                        <label class="inline-flex items-center cursor-pointer mt-6">
                            <input type="checkbox" name="is_controlled" value="1" {{ old('is_controlled') ? 'checked' : '' }} class="rounded border-gray-300 text-green-600 shadow-sm focus:ring-green-500">
                            <span class="mr-2 text-black font-semibold">{{ __('دواء مراقب؟') }}</span>
                        </label>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8 pt-6 border-t">

                <div class="mb-4">
                    <label for="primary_unit_id" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.PrimaryUnit', __('الوحدة الأساسية')) }} <span class="text-red-600">*</span></label>
                    <select id="primary_unit_id" name="primary_unit_id" required
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        <option value="">{{ TranslationHelper::transFromDatabase('Inventory.SelectPrimaryUnit', __('اختر الوحدة الأساسية')) }}</option>
                        @foreach($units as $unit)
                            <option value="{{ $unit->id }}" {{ old('primary_unit_id') == $unit->id ? 'selected' : '' }}>
                                {{ $unit->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-4">
                    <label for="account_id" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.StockAccount', __('حساب المخزون')) }}</label>
                    <select id="account_id" name="account_id"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        <option value="">{{ TranslationHelper::transFromDatabase('Inventory.SelectAccount', __('اختر الحساب')) }}</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->name }} ({{ $account->code }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-4">
                    <label for="purchase_price" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.PurchasePrice', __('سعر الشراء')) }}</label>
                    <input type="number" id="purchase_price" name="purchase_price" value="{{ old('purchase_price', 0) }}" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label for="sale_price" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.SalePrice', __('سعر البيع')) }}</label>
                    <input type="number" id="sale_price" name="sale_price" value="{{ old('sale_price', 0) }}" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label for="min_quantity" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.MinStockLevel', __('الحد الأدنى للمخزون')) }}</label>
                    <input type="number" id="min_quantity" name="min_quantity" value="{{ old('min_quantity', 0) }}" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label for="max_quantity" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.MaxStockLevel', __('الحد الأقصى للمخزون')) }}</label>
                    <input type="number" id="max_quantity" name="max_quantity" value="{{ old('max_quantity', 0) }}" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4 col-span-2">
                    <label for="description" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('General.Description', __('الوصف')) }}</label>
                    <textarea id="description" name="description" rows="3"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">{{ old('description') }}</textarea>
                </div>

                <div class="mb-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                            class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500">
                        <label for="is_active" class="mr-2 text-black font-bold">{{ TranslationHelper::transFromDatabase('Status.Active', __('نشط')) }}</label>
                    </div>
                </div>
            </div>

            <div class="mt-8 border-t pt-6">
                <h3 class="text-lg font-semibold text-black mb-4">{{ TranslationHelper::transFromDatabase('Inventory.AdditionalItemUnits', __('وحدات الصنف الإضافية')) }}</h3>
                <div id="units-container">
                    <div class="unit-row grid grid-cols-1 md:grid-cols-4 gap-4 mb-4 pb-4 border-b">
                        <div>
                            <label class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.Unit', __('الوحدة')) }}</label>
                            <select name="item_units[0][unit_id]"
                                class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                                <option value="">{{ TranslationHelper::transFromDatabase('Inventory.SelectUnit', __('اختر الوحدة')) }}</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ConversionFactor', __('معامل التحويل')) }}</label>
                            <input type="number" name="item_units[0][conversion_factor]" value="1" step="0.01" min="0.01"
                                class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        </div>
                        <div>
                            <label class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.PurchasePrice', __('سعر الشراء')) }}</label>
                            <input type="number" name="item_units[0][purchase_price]" value="0" step="0.01" min="0"
                                class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        </div>
                        <div>
                            <label class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.SalePrice', __('سعر البيع')) }}</label>
                            <input type="number" name="item_units[0][sale_price]" value="0" step="0.01" min="0"
                                class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        </div>
                    </div>
                </div>
                <button type="button" id="add-unit" class="mt-2 bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 p-4 rounded inline-flex items-center">
                    <span>{{ TranslationHelper::transFromDatabase('Inventory.AddAnotherUnit', __('إضافة وحدة أخرى')) }}</span>
                </button>
            </div>

            <div class="flex items-center justify-end mt-6">
                <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                    {{ TranslationHelper::transFromDatabase('Inventory.SaveItem', __('حفظ الصنف')) }}
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let unitInde = 1;
        const addUnitButton = document.getElementById('add-unit');
        const unitsContainer = document.getElementById('units-container');

        addUnitButton.addEventListener('click', function() {
            const unitRow = document.createElement('div');
            unitRow.className = 'unit-row grid grid-cols-1 md:grid-cols-4 gap-4 mb-4 pb-4 border-b';

            const unitOptions = Array.from(document.querySelectorAll('#units-container .unit-row:first-child select option'))
                .map(option => `<option value="${option.value}">${option.textContent}</option>`)
                .join('');

            unitRow.innerHTML = `
                <div>
                    <label class="block text-black font-bold mb-2">${'{{ TranslationHelper::transFromDatabase('Inventory.Unit', __('الوحدة')) }}'}</label>
                    <select name="item_units[${unitInde}][unit_id]"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                        ${unitOptions}
                    </select>
                </div>
                <div>
                    <label class="block text-black font-bold mb-2">${'{{ TranslationHelper::transFromDatabase('Inventory.ConversionFactor', __('معامل التحويل')) }}'}</label>
                    <input type="number" name="item_units[${unitInde}][conversion_factor]" value="1" step="0.01" min="0.01"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div>
                    <label class="block text-black font-bold mb-2">${'{{ TranslationHelper::transFromDatabase('Inventory.PurchasePrice', __('سعر الشراء')) }}'}</label>
                    <input type="number" name="item_units[${unitInde}][purchase_price]" value="0" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div>
                    <label class="block text-black font-bold mb-2">${'{{ TranslationHelper::transFromDatabase('Inventory.SalePrice', __('سعر البيع')) }}'}</label>
                    <input type="number" name="item_units[${unitInde}][sale_price]" value="0" step="0.01" min="0"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>
                <div class="col-span-4 flex justify-end">
                    <button type="button" class="remove-unit text-red-600 hover:text-red-800">
                        <span>${'{{ TranslationHelper::transFromDatabase('General.Delete', __('حذف')) }}'}</span>
                    </button>
                </div>
            `;

            unitsContainer.appendChild(unitRow);
            unitInde++;

            // إضافة حدث الحذف للزر الجديد
            unitRow.querySelector('.remove-unit').addEventListener('click', function() {
                unitRow.remove();
            });
        });
    });
</script>
@endpush
@endsection