@extends('layouts.app')

@section('title', TranslationHelper::transFromDatabase('Inventory.EditItemTitle', __('تعديل الصنف')))

@section('content')
<div class="container m-auto p-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2l font-semibold text-black">{{ TranslationHelper::transFromDatabase('Inventory.EditItemTitle', __('تعديل الصنف')) }}: {{ $item->name }}</h1>
        <a href="{{ route('inventory.items.index') }}" class="bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 p-4 rounded inline-flex items-center">
            <span>{{ TranslationHelper::transFromDatabase('Inventory.BackToItems', __('العودة لقائمة الأصناف')) }}</span>
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 p-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('inventory.items.update', $item) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="mb-4">
                    <label for="name" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ItemName', __('اسم الصنف')) }} <span class="text-red-600">*</span></label>
                    <input type="text" id="name" name="name" value="{{ old('name', $item->name) }}" required
                        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="code" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ItemCode', __('كود الصنف')) }}</label>
                    <input type="text" id="code" name="code" value="{{ old('code', $item->code) }}"
                        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="eta_item_code" class="block text-black font-bold mb-2">{{ __('كود الضرائب المصرية (GS1/EGS)') }}</label>
                    <input type="text" id="eta_item_code" name="eta_item_code" value="{{ old('eta_item_code', $item->eta_item_code) }}"
                        placeholder="EG-113456789-XXXX"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                    <p class="text-xs text-black mt-1">أدخل كود GS1 أو كود EGS المرتبط بهذا الصنف في مصلحة الضرائب المصرية</p>
                </div>

                <!-- بيانات الصيدلية -->
                <div class="col-span-2 border-t pt-6 mt-4">
                    <h3 class="text-lg font-semibold text-black mb-4 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 class="mb-4">
                            <label for="scientific_name" class="block text-black font-bold mb-2">{{ __('الاسم العلمي') }}</label>
                            <input type="text" id="scientific_name" name="scientific_name" value="{{ old('scientific_name', $item->scientific_name) }}"
                                placeholder="{{ __('أدخل الاسم العلمي') }}"
                                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="dosage_form" class="block text-black font-bold mb-2">{{ __('الشكل الدوائي') }}</label>
                            <input type="text" id="dosage_form" name="dosage_form" value="{{ old('dosage_form', $item->dosage_form) }}"
                                placeholder="e.g. Tablet, Syrup"
                                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="strength" class="block text-black font-bold mb-2">{{ __('التركيز') }}</label>
                            <input type="text" id="strength" name="strength" value="{{ old('strength', $item->strength) }}"
                                placeholder="e.g. 500mg"
                                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="flex items-center mb-4">
                            <input type="checkbox" id="is_controlled" name="is_controlled" value="1" {{ old('is_controlled', $item->is_controlled) ? 'checked' : '' }}
                                class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500">
                            <label for="is_controlled" class="mr-2 text-black font-bold">{{ __('دواء مراقب؟') }}</label>
                        </div>
                    </div>
                </div>

                <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', $item->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', $item->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', $item->purchase_price) }}" 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', $item->sale_price) }}" 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', $item->min_quantity) }}" 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', $item->max_quantity) }}" 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', $item->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', $item->is_active) ? '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.ItemUnits', __('وحدات الصنف')) }}</h3>
                <div id="units-container">
                    @foreach($item->units as $inde => $itemUnit)
                    <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[{{ $inde }}][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 }}" {{ $itemUnit->unit_id == $unit->id ? 'selected' : '' }}>
                                        {{ $unit->name }}
                                    </option>
                                @endforeach
                            </select>
                            <input type="hidden" name="item_units[{{ $inde }}][id]" value="{{ $itemUnit->id }}">
                        </div>
                        <div>
                            <label class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ConversionFactor', __('معامل التحويل')) }}</label>
                            <input type="number" name="item_units[{{ $inde }}][conversion_factor]" value="{{ $itemUnit->conversion_factor }}" 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[{{ $inde }}][purchase_price]" value="{{ $itemUnit->purchase_price }}" 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[{{ $inde }}][sale_price]" value="{{ $itemUnit->sale_price }}" 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>
                        @if($inde > 0)
                        <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>
                        @endif
                    </div>
                    @endforeach
                </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.UpdateItem', __('تحديث الصنف')) }}
                </button>
            </div>
        </form>
    </div>
</div>

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

        // إضافة حدث الحذف للأزرار الموجودة
        document.querySelectorAll('.remove-unit').forEach(button => {
            button.addEventListener('click', function() {
                this.closest('.unit-row').remove();
            });
        });

        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">الوحدة</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">معامل التحويل</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">سعر الشراء</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">سعر البيع</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>حذف</span>
                    </button>
                </div>
            `;

            unitsContainer.appendChild(unitRow);
            unitInde++;

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