@extends('layouts.app')

@section('title', 'إنشاء طلب مبيعات')

@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-7xl mx-auto">
        <form action="{{ route('sales-requisitions.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-8 flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">إنشاء طلب مبيعات جديد</h1>
                    <p class="text-black">أدخل تفاصيل الطلب والأصناف المطلوبة</p>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('sales-requisitions.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-black bg-white hover:bg-gray-50 focus:outline-none">
                        إلغاء
                    </a>
                </div>
            </div>

            <div class="space-y-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- المعلومات الأساسية -->
                    <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 h-full">
                        <h2 class="text-xl font-semibold text-black mb-6 flex items-center">
                            <i class="fas fa-info-circle ml-2 text-blue-500"></i>
                            المعلومات الأساسية
                        </h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-black mb-2">العميل (اختياري)</label>
                                <select name="customer_id" class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">-- اختر عميل (لطلب عميل محدد) --</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-black mb-2">مركز التكلفة</label>
                                <select name="cost_center_id" class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">
                                    <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 class="md:col-span-2">
                                <label class="block text-sm font-medium text-black mb-2">وصف الطلب / الغرض</label>
                                <textarea name="description" rows="3" class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500" required>{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- المرفقات والملاحظات -->
                    <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100 h-full">
                        <h2 class="text-xl font-semibold text-black mb-6 flex items-center">
                            <i class="fas fa-paperclip ml-2 text-blue-500"></i>
                            المرفقات والملاحظات
                        </h2>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-black mb-2">مرفق الطلب</label>
                                <input type="file" name="attachment" class="w-full text-sm text-black file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-black mb-2">ملاحظات إضافية</label>
                                <textarea name="notes" rows="4" class="w-full rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- الأصناف -->
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100" x-data="itemManager()">
                    <h2 class="text-xl font-semibold text-black mb-6 flex items-center">
                        <i class="fas fa-list ml-2 text-blue-500"></i>
                        الأصناف المطلوبة
                    </h2>

                    <div class="overflow-x-auto">
                        <table class="w-full mb-6">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="px-4 py-3 text-right text-xs font-bold text-black uppercase tracking-wider w-1/3">الصنف</th>
                                    <th class="px-4 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">الكمية</th>
                                    <th class="px-4 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">الوحدة</th>
                                    <th class="px-4 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">السعر المتوقع</th>
                                    <th class="px-4 py-3 text-center text-xs font-bold text-black uppercase tracking-wider">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <template x-for="(item, index) in items" :key="index">
                                    <tr>
                                        <td class="px-4 py-3">
                                            <select :name="`items[${index}][item_id]`" class="w-full rounded-md border-gray-300 text-sm" required>
                                                <option value="">اختر صنف</option>
                                                @foreach($items as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="px-4 py-3">
                                            <input type="number" :name="`items[${index}][quantity]`" step="0.01" class="w-full rounded-md border-gray-300 text-sm" required>
                                        </td>
                                        <td class="px-4 py-3">
                                            <select :name="`items[${index}][unit_id]`" class="w-full rounded-md border-gray-300 text-sm" required>
                                                @foreach($units as $unit)
                                                    <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="px-4 py-3">
                                            <input type="number" :name="`items[${index}][unit_price]`" step="0.01" class="w-full rounded-md border-gray-300 text-sm">
                                        </td>
                                        <td class="px-4 py-3 text-center">
                                            <button type="button" @click="removeItem(index)" class="text-red-600 hover:text-red-900">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                    <div class="flex items-center justify-between border-t border-gray-100 pt-6">
                        <button type="button" @click="addItem()" class="inline-flex items-center px-4 py-2 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors duration-150">
                            <i class="fas fa-plus ml-2"></i>
                            إضافة صنف
                        </button>

                        <div class="flex gap-3">
                            <button type="submit" class="inline-flex items-center px-10 py-3 bg-blue-600 border border-transparent rounded-lg shadow-lg text-base font-bold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-150 transform hover:-translate-y-0.5">
                                <i class="fas fa-save ml-2"></i>
                                حفظ الطلب
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function itemManager() {
    return {
        items: [{item_id: '', quantity: 1, unit_id: '', unit_price: ''}],
        addItem() {
            this.items.push({item_id: '', quantity: 1, unit_id: '', unit_price: ''});
        },
        removeItem(index) {
            if (this.items.length > 1) {
                this.items.splice(index, 1);
            }
        }
    }
}
</script>
@endsection