@extends('layouts.app')

@push('styles')
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5.min.css" rel="stylesheet" />
<style>
    .select2-container--bootstrap-5.select2-container--open .select2-dropdown {
        border-color: rgb(59, 130, 246);
    }
    .select2-container--bootstrap-5 .select2-selection--single {
        min-height: 2.375rem;
        border-color: rgb(209, 213, 219);
    }
    .select2-container--bootstrap-5.select2-container--focus .select2-selection--single {
        border-color: rgb(59, 130, 246);
        box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        padding: 0.5rem 0.75rem;
        height: 2.375rem;
        display: flex;
        align-items: center;
    }
</style>
@endpush

@section('content')
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-black">إنشاء إذن استلام جديد</h1>
            <a href="{{ route('inventory.receipts.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-black rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                العودة للقائمة
            </a>
        </div>

        <form action="{{ route('inventory.receipts.store') }}" method="POST">
            @csrf

            <!-- Document Details -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div>
                    <label for="document_number" class="block text-sm font-medium text-black mb-1">رقم المستند</label>
                    <input type="text" id="document_number" name="document_number" value="{{ old('document_number', $nextReceiptNumber) }}" readonly class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                    @error('document_number')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="document_date" class="block text-sm font-medium text-black mb-1">تاريخ المستند</label>
                    <input type="date" id="document_date" name="document_date" value="{{ old('document_date', date('Y-m-d')) }}" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                    @error('document_date')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="to_warehouse_id" class="block text-sm font-medium text-black mb-1">المخزن المستلم</label>
                    <select id="to_warehouse_id" name="to_warehouse_id" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                        <option value="">اختر المخزن</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}" {{ old('to_warehouse_id') == $warehouse->id ? 'selected' : '' }}>{{ $warehouse->name }}</option>
                        @endforeach
                    </select>
                    @error('to_warehouse_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mb-6">
                <label for="notes" class="block text-sm font-medium text-black mb-1">ملاحظات</label>
                <textarea id="notes" name="notes" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">{{ old('notes') }}</textarea>
                @error('notes')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Document Items -->
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-black">الأصناف</h2>
                    <button type="button" id="add-item" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md">
                        <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        إضافة صنف جديد
                    </button>
                </div>
                
                <!-- محسّن: تصميم جدول أفضل مع توزيع مساحة أفضل -->
                <div class="border border-gray-200 rounded-lg overflow-hidden shadow-lg bg-white">
                    <div class="overflow-x-auto">
                        <table class="w-full table-fixed" id="items-table">
                            <thead>
                                <tr class="bg-gray-800 text-white">
                                    <th scope="col" class="px-2 py-4 text-right text-xs font-bold uppercase tracking-wider w-[20%]">الصنف</th>
                                    <th scope="col" class="px-2 py-4 text-right text-xs font-bold uppercase tracking-wider w-[10%]">الوحدة</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[8%]">الكمية</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[10%]">رقم التشغيلة</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[12%]">تاريخ الانتهاء</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[10%]">التكلفة</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[10%]">الإجمالي</th>
                                    <th scope="col" class="px-2 py-4 text-right text-xs font-bold uppercase tracking-wider">ملاحظات</th>
                                    <th scope="col" class="px-2 py-4 text-center text-xs font-bold uppercase tracking-wider w-[50px]">حذف</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 bg-white" id="items-container">
                                <!-- Items will be added here dynamically -->
                            </tbody>
                            <tfoot class="bg-gray-50 border-t-2 border-gray-200">
                                <tr>
                                    <td colspan="4" class="px-4 py-4 text-left text-sm font-bold text-black">الإجمالي الكلي:</td>
                                    <td class="px-2 py-4 text-center text-lg font-black text-blue-700 bg-blue-50" id="total-cost">0.00</td>
                                    <td colspan="2"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                
                @error('item_ids')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
                
                @error('item_ids.*')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center px-6 py-3 bg-primary-600 text-white text-base font-bold rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-lg transition-all transform hover:-translate-y-0.5">
                    <svg class="h-6 w-6 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    حفظ المستند
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Item Template -->
<template id="item-template">
    <tr class="item-row hover:bg-blue-50/50 transition-colors">
        <td class="px-2 py-3 align-top">
            <select name="item_ids[]" required class="item-select block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm">
                <option value="">اختر الصنف</option>
                @foreach($items as $item)
                    <option value="{{ $item->id }}" data-primary-unit="{{ $item->primary_unit_id }}">{{ $item->name }}</option>
                @endforeach
            </select>
        </td>
        <td class="px-2 py-3 align-top">
            <select name="unit_ids[]" required class="unit-select block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm">
                <option value="">اختر الوحدة</option>
            </select>
        </td>
        <td class="px-2 py-3 align-top">
            <input type="number" name="quantities[]" step="0.01" min="0.01" required class="quantity-input block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm text-center font-medium" placeholder="0.00">
        </td>
        <td class="px-2 py-3 align-top">
            <input type="text" name="batch_numbers[]" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm text-center" placeholder="التشغيلة">
        </td>
        <td class="px-2 py-3 align-top">
            <input type="date" name="expiry_dates[]" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm text-center">
        </td>
        <td class="px-2 py-3 align-top">
            <input type="number" name="unit_costs[]" step="0.01" min="0" required class="cost-input block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm text-center font-medium" placeholder="0.00">
        </td>
        <td class="px-2 py-3 align-top">
            <input type="number" step="0.01" readonly class="total-input block w-full rounded-md border-transparent bg-blue-50/50 shadow-sm text-sm text-center font-bold text-blue-800" placeholder="0.00">
        </td>
        <td class="px-2 py-3 align-top">
            <textarea name="item_notes[]" rows="1" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm py-1 resize-y" placeholder="إضافة ملاحظة..."></textarea>
        </td>
        <td class="px-2 py-3 align-top text-center">
            <button type="button" class="remove-item text-red-400 hover:text-red-700 hover:bg-red-50 rounded-full p-2 transition-all" title="حذف الصنف">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
            </button>
        </td>
    </tr>
</template>

@endsection

@push('scripts')
<!-- jQuery (required for Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // إضافة أول صف افتراضي
        addItemRow();
        
        // إضافة مستمع لزر إضافة صنف
        document.getElementById('add-item').addEventListener('click', addItemRow);
        
        // ✅ حذف صنف
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) {
                const row = e.target.closest('.item-row');
                if (document.querySelectorAll('.item-row').length > 1) {
                    row.remove();
                    updateTotalCost();
                } else {
                    alert('يجب أن يحتوي المستند على صنف واحد على الأقل');
                }
            }
        });
        
        // ✅ تحديث الوحدات عند تغيير الصنف (يعمل مع Select2 بشكل صحيح)
        // استخدام 'change' بدلاً من 'change.select2' للحصول على event delegation صحيح
        $(document).on('change', '.item-select', function() {
            console.log('✅ تغيير الصنف تم تفعيله');
            const selectElement = this;
            const row = $(selectElement).closest('.item-row');
            const unitSelect = row.find('.unit-select');
            const itemId = $(selectElement).val();
            
            console.log('معرف الصنف المختار:', itemId);
            
            unitSelect.html('<option value="">اختر الوحدة</option>');
            unitSelect.prop('disabled', true);
            
            if (itemId) {
                const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const endpoint = '{{ route("inventory.items.units.api", ":itemId") }}'.replace(':itemId', itemId);
                
                console.log('🔄 جاري استدعاء الوحدات من:', endpoint);
                
                fetch(endpoint, {
                    headers: {
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('📡 استجابة HTTP:', response.status);
                    if (!response.ok) {
                        throw new Error('HTTP Error: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('📦 البيانات المستقبلة:', data);
                    
                    if (data.success && data.data && data.data.length > 0) {
                        console.log('✅ تم جلب', data.data.length, 'وحدات بنجاح');
                        unitSelect.html('<option value="">اختر الوحدة</option>');
                        
                        data.data.forEach(unit => {
                            const option = document.createElement('option');
                            option.value = unit.id;
                            option.textContent = unit.unit_name;
                            if (unit.is_default) {
                                option.selected = true;
                                console.log('📌 تم تعيين الوحدة الافتراضية:', unit.unit_name);
                            }
                            unitSelect.append(option);
                        });
                        
                        unitSelect.prop('disabled', false);
                        
                        // إعادة تهيئة Select2 للقائمة الثانية (الوحدات) إذا كانت مهيأة
                        if (unitSelect.hasClass('select2-hidden-accessible')) {
                            console.log('🔄 إعادة تهيئة Select2 للوحدات');
                            unitSelect.select2('destroy');
                            setTimeout(() => {
                                unitSelect.select2({
                                    dir: 'rtl',
                                    language: 'ar',
                                    allowClear: true,
                                    placeholder: 'اختر الوحدة',
                                    width: '100%',
                                    theme: 'bootstrap-5'
                                });
                            }, 50);
                        }
                    } else {
                        console.warn('⚠️ لا توجد وحدات للصنف:', itemId);
                        unitSelect.html('<option value="">لا توجد وحدات</option>');
                        unitSelect.prop('disabled', true);
                    }
                })
                .catch(error => {
                    console.error('❌ خطأ في جلب الوحدات:', error);
                    console.error('التفاصيل:', error.message);
                    unitSelect.html('<option value="">خطأ في تحميل الوحدات</option>');
                    unitSelect.prop('disabled', true);
                });
            } else {
                console.log('⏭️ لم يتم تحديد صنف');
            }
        });
        
        // حساب الإجمالي عند تغيير الكمية أو التكلفة
        document.addEventListener('input', function(e) {
            if (e.target.classList.contains('quantity-input') || e.target.classList.contains('cost-input')) {
                const row = e.target.closest('.item-row');
                const qty = parseFloat(row.querySelector('.quantity-input').value) || 0;
                const cost = parseFloat(row.querySelector('.cost-input').value) || 0;
                row.querySelector('.total-input').value = (qty * cost).toFixed(2);
                updateTotalCost();
            }
        });
        
        // إضافة صف جديد
        function addItemRow() {
            const template = document.getElementById('item-template');
            const container = document.getElementById('items-container');
            const newRow = document.importNode(template.content, true);
            container.appendChild(newRow);
            
            // ✅ تهيئة Select2 للصنف الجديد بعد إضافته
            setTimeout(() => {
                const lastSelect = container.querySelector('.item-select:last-of-type');
                if (lastSelect && !$(lastSelect).hasClass('select2-hidden-accessible')) {
                    console.log('🎨 تهيئة Select2 للصنف الجديد');
                    $(lastSelect).select2({
                        dir: 'rtl',
                        language: 'ar',
                        allowClear: true,
                        placeholder: 'اختر الصنف',
                        width: '100%',
                        theme: 'bootstrap-5'
                    });
                }
                
                // تهيئة Select2 للوحدات أيضاً إذا لزم الأمر
                const lastUnitSelect = container.querySelector('.unit-select:last-of-type');
                if (lastUnitSelect && !$(lastUnitSelect).hasClass('select2-hidden-accessible')) {
                    console.log('🎨 تهيئة Select2 للوحدات');
                    $(lastUnitSelect).select2({
                        dir: 'rtl',
                        language: 'ar',
                        allowClear: true,
                        placeholder: 'اختر الوحدة',
                        width: '100%',
                        theme: 'bootstrap-5'
                    });
                }
            }, 100);
        }
        
        // تحديث إجمالي التكلفة
        function updateTotalCost() {
            let total = 0;
            document.querySelectorAll('.total-input').forEach(input => {
                total += parseFloat(input.value) || 0;
            });
            document.getElementById('total-cost').textContent = total.toFixed(2);
        }
        
        // ✅ تهيئة Select2 على جميع الأصناف الموجودة بالفعل
        console.log('🎨 تهيئة Select2 الأولية');
        $('.item-select').select2({
            dir: 'rtl',
            language: 'ar',
            allowClear: true,
            placeholder: 'اختر الصنف',
            width: '100%',
            theme: 'bootstrap-5'
        });
        
        // تهيئة Select2 للوحدات أيضاً
        $('.unit-select').select2({
            dir: 'rtl',
            language: 'ar',
            allowClear: true,
            placeholder: 'اختر الوحدة',
            width: '100%',
            theme: 'bootstrap-5'
        });
    });
</script>
@endpush