@extends('layouts.app')

@section('title', 'إنشاء طلب شراء داخلي جديد')

@section('content')
<div class="min-h-screen bg-slate-50 py-6 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Compact Header -->
        <div class="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-black">إنشاء طلب شراء داخلي جديد</h1>
                <p class="text-black text-sm">أضف أصناف جديدة لطلب شراء داخلي</p>
            </div>
            <a href="{{ route('purchase-requisitions.index') }}" class="inline-flex items-center px-4 py-2 bg-white text-black font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 border border-gray-300 shadow-sm">
                <i class="fas fa-arrow-right ml-2 text-xs"></i>
                <span>العودة</span>
            </a>
        </div>

        @if ($errors->any())
        <div class="bg-red-50 border-r-4 border-red-500 p-3 mb-6 rounded-l-lg shadow-sm">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                </div>
                <div class="mr-3">
                    <p class="text-red-700 font-medium text-sm">حدث خطأ في البيانات المدخلة:</p>
                    <ul class="mt-1 list-disc list-inside text-red-600 text-xs">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <form action="{{ route('purchase-requisitions.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Main Info Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6 overflow-hidden">
                <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 ml-2"></i>
                    <h2 class="text-base font-bold text-black">معلومات الطلب الأساسية</h2>
                </div>
                
                <div class="p-6 space-y-6">
                    <!-- Description Field - Full Width for better readability -->
                    <div>
                        <label for="description" class="block text-sm font-bold text-black mb-1.5 flex items-center">
                            <span>وصف الطلب *</span>
                            <span class="mr-1 text-xs font-normal text-black font-sans">(الغرض الأساسي من الشراء)</span>
                        </label>
                        <textarea id="description" name="description" rows="2" class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all @error('description') border-red-500 @enderror" required placeholder="أدخل وصفاً موجزاً للطلب">{{ old('description') }}</textarea>
                        @error('description')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2 border-t border-gray-50">
                        <!-- Right Side fields -->
                        <div class="space-y-4">
                            <div>
                                <label for="cost_center_id" class="block text-sm font-bold text-black mb-1.5">مركز التكلفة العام</label>
                                <select id="cost_center_id" name="cost_center_id" class="select2 w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all bg-white">
                                    <option value="">اختر مركز تكلفة (اختياري)</option>
                                    @foreach($costCenters as $center)
                                    <option value="{{ $center->id }}" {{ old('cost_center_id') == $center->id ? 'selected' : '' }}>{{ $center->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label for="attachment" class="block text-sm font-bold text-black mb-1.5">إرفاق مستند (اختياري)</label>
                                <div class="relative">
                                    <input type="file" id="attachment" name="attachment" class="hidden" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                                    <label for="attachment" class="flex items-center justify-between w-full px-4 py-2 text-sm border border-gray-300 rounded-lg cursor-pointer bg-white hover:bg-gray-50 transition-all group">
                                        <span id="file-name-text" class="text-black">اختر ملفاً لرفعه...</span>
                                        <i class="fas fa-upload text-blue-500 group-hover:scale-110 transition-transform"></i>
                                    </label>
                                </div>
                                <p class="text-[10px] text-black mt-1">PDF, JPG, PNG, DOC (Max 10MB)</p>
                            </div>
                        </div>

                        <!-- Left Side fields -->
                        <div class="space-y-4">
                            <div>
                                <label for="notes" class="block text-sm font-bold text-black mb-1.5">ملاحظات إضافية</label>
                                <textarea id="notes" name="notes" rows="4" class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all" placeholder="أدخل أي تفاصيل فنية أو ملاحظات إضافية">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Items Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                    <div class="flex items-center">
                        <i class="fas fa-list text-green-600 ml-2"></i>
                        <h2 class="text-base font-bold text-black">الأصناف المطلوبة</h2>
                    </div>
                    <button type="button" class="inline-flex items-center px-3 py-1.5 bg-green-600 text-white text-xs font-semibold rounded-lg hover:bg-green-700 transition-all shadow-sm" onclick="addItemRow()">
                        <i class="fas fa-plus ml-1.5"></i>
                        <span>إضافة صنف</span>
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-right border-collapse">
                        <thead>
                            <tr class="bg-gray-50/50 text-black text-xs font-bold uppercase border-b border-gray-200">
                                <th class="px-4 py-3 min-w-[200px]">الصنف *</th>
                                <th class="px-4 py-3 w-32">الكمية *</th>
                                <th class="px-4 py-3 w-40">الوحدة *</th>
                                <th class="px-4 py-3 w-44">السعر التقديري</th>
                                <th class="px-4 py-3">مركز التكلفة</th>
                                <th class="px-4 py-3 w-16 text-center">حذف</th>
                            </tr>
                        </thead>
                        <tbody id="itemsContainer" class="divide-y divide-gray-100">
                            @forelse(old('items', [[]]) as $index => $item)
                            <tr class="itemRow hover:bg-gray-50/30 transition-colors">
                                <td class="px-3 py-2">
                                    <select name="items[{{ $index }}][item_id]" class="select2 w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                                        <option value="">اختر صنف</option>
                                        @foreach($items as $it)
                                        <option value="{{ $it->id }}" {{ old("items.{$index}.item_id") == $it->id ? 'selected' : '' }}>{{ $it->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2">
                                    <input type="number" name="items[{{ $index }}][quantity]" step="0.01" min="0.01" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500" value="{{ old("items.{$index}.quantity") }}" required placeholder="0.00">
                                </td>
                                <td class="px-3 py-2">
                                    <select name="items[{{ $index }}][unit_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                                        <option value="">اختر وحدة</option>
                                        @foreach($units as $unit)
                                        <option value="{{ $unit->id }}" {{ old("items.{$index}.unit_id") == $unit->id ? 'selected' : '' }}>{{ $unit->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="relative">
                                        <input type="number" name="items[{{ $index }}][estimated_unit_price]" step="0.01" min="0" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 pr-8" value="{{ old("items.{$index}.estimated_unit_price") }}" placeholder="0.00">
                                        <span class="absolute left-3 top-1.5 text-black text-xs">ر.س</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <select name="items[{{ $index }}][cost_center_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white">
                                        <option value="">مركز التكلفة</option>
                                        @foreach($costCenters as $center)
                                        <option value="{{ $center->id }}" {{ old("items.{$index}.cost_center_id") == $center->id ? 'selected' : '' }}>{{ $center->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2 text-center">
                                    <button type="button" class="text-red-400 hover:text-red-600 transition-colors p-2" onclick="removeItemRow(this)">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr class="itemRow hover:bg-gray-50/30 transition-colors">
                                <td class="px-3 py-2">
                                    <select name="items[0][item_id]" class="select2 w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                                        <option value="">اختر صنف</option>
                                        @foreach($items as $it)
                                        <option value="{{ $it->id }}">{{ $it->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2">
                                    <input type="number" name="items[0][quantity]" step="0.01" min="0.01" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500" required placeholder="0.00">
                                </td>
                                <td class="px-3 py-2">
                                    <select name="items[0][unit_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                                        <option value="">اختر وحدة</option>
                                        @foreach($units as $unit)
                                        <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="relative">
                                        <input type="number" name="items[0][estimated_unit_price]" step="0.01" min="0" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 pr-8" placeholder="0.00">
                                        <span class="absolute left-3 top-1.5 text-black text-xs">ر.س</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">
                                    <select name="items[0][cost_center_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white">
                                        <option value="">مركز التكلفة</option>
                                        @foreach($costCenters as $center)
                                        <option value="{{ $center->id }}">{{ $center->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-3 py-2 text-center">
                                    <button type="button" class="text-red-400 hover:text-red-600 transition-colors p-2" onclick="removeItemRow(this)">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <!-- Footer for items section -->
                <div class="px-5 py-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center text-xs text-black">
                    <p>* جميع الحقول المؤشرة بالنجمة مطلوبة</p>
                    <p>إجمالي الأصناف: <span id="itemsCount" class="font-bold text-blue-600">1</span></p>
                </div>
            </div>

            <!-- Submission Actions -->
            <div class="mt-8 flex items-center justify-end gap-4">
                <a href="{{ route('purchase-requisitions.index') }}" class="px-6 py-2.5 text-black font-bold hover:bg-gray-200 rounded-xl transition-all">
                    إلغاء
                </a>
                <button type="submit" class="inline-flex items-center px-8 py-2.5 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all shadow-md hover:shadow-lg">
                    <i class="fas fa-check-circle ml-2"></i>
                    <span>إرسال طلب الشراء</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Update items count
    function updateItemsCount() {
        const count = document.querySelectorAll('.itemRow').length;
        document.getElementById('itemsCount').textContent = count;
    }

    function addItemRow() {
        const container = document.getElementById('itemsContainer');
        const rowCount = container.querySelectorAll('.itemRow').length;
        
        const newRow = document.createElement('tr');
        newRow.className = 'itemRow hover:bg-gray-50/30 transition-colors';
        newRow.innerHTML = `
            <td class="px-3 py-2">
                <select name="items[${rowCount}][item_id]" class="select2 w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                    <option value="">اختر صنف</option>
                    @foreach($items as $it)
                    <option value="{{ $it->id }}">{{ $it->name }}</option>
                    @endforeach
                </select>
            </td>
            <td class="px-3 py-2">
                <input type="number" name="items[${rowCount}][quantity]" step="0.01" min="0.01" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500" required placeholder="0.00">
            </td>
            <td class="px-3 py-2">
                <select name="items[${rowCount}][unit_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" required>
                    <option value="">اختر وحدة</option>
                    @foreach($units as $unit)
                    <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                    @endforeach
                </select>
            </td>
            <td class="px-3 py-2">
                <div class="relative">
                    <input type="number" name="items[${rowCount}][estimated_unit_price]" step="0.01" min="0" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 pr-8" placeholder="0.00">
                    <span class="absolute left-3 top-1.5 text-black text-xs">ر.س</span>
                </div>
            </td>
            <td class="px-3 py-2">
                <select name="items[${rowCount}][cost_center_id]" class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white">
                    <option value="">مركز التكلفة</option>
                    @foreach($costCenters as $center)
                    <option value="{{ $center->id }}">{{ $center->name }}</option>
                    @endforeach
                </select>
            </td>
            <td class="px-3 py-2 text-center">
                <button type="button" class="text-red-400 hover:text-red-600 transition-colors p-2" onclick="removeItemRow(this)">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>
        `;
        
        container.appendChild(newRow);

        // Initialize Select2 for the new row
        $(newRow).find('.select2').select2({
            theme: 'bootstrap-5',
            width: '100%',
            dir: document.documentElement.dir || 'rtl'
        });

        updateItemsCount();
    }

    function removeItemRow(button) {
        const container = document.getElementById('itemsContainer');
        if (container.querySelectorAll('.itemRow').length > 1) {
            button.closest('.itemRow').remove();
            updateItemsCount();
        } else {
            alert('يجب أن يحتوي الطلب على صنف واحد على الأقل');
        }
    }

    // Attachment file name display
    document.getElementById('attachment')?.addEventListener('change', function(e) {
        const fileName = e.target.files[0]?.name;
        const fileNameDisplay = document.getElementById('file-name-text');
        if (fileName) {
            fileNameDisplay.textContent = fileName;
            fileNameDisplay.classList.remove('text-black');
            fileNameDisplay.classList.add('text-blue-600', 'font-bold');
        } else {
            fileNameDisplay.textContent = 'اختر ملفاً لرفعه...';
            fileNameDisplay.classList.remove('text-blue-600', 'font-bold');
            fileNameDisplay.classList.add('text-black');
        }
    });

    // Initialize count
    document.addEventListener('DOMContentLoaded', function() {
        updateItemsCount();
    });
</script>
@endsection