@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-6xl 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">تحويل إلى سند تسليم</h1>
                    <p class="text-black">عرض السعر: {{ $salesQuotation->quotation_number }} | العميل: {{ $salesQuotation->customer->name ?? '' }}</p>
                </div>
                <a href="{{ route('sales-quotations.show', $salesQuotation) }}" class="inline-flex items-center px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition-all duration-200">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>العودة</span>
                </a>
            </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">
                        <p class="text-red-700 font-medium">حدث خطأ في البيانات المدخلة:</p>
                        <ul class="mt-2 list-disc list-inside text-red-600 text-sm">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <form action="{{ route('sales-quotations.store-delivery-note', $salesQuotation) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Quotation Summary -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-xl font-semibold">بيانات عرض السعر</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-sm text-black mb-1">رقم العرض</p>
                            <p class="text-lg font-semibold text-black">{{ $salesQuotation->quotation_number }}</p>
                        </div>
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-sm text-black mb-1">العميل</p>
                            <p class="text-lg font-semibold text-black">{{ $salesQuotation->customer->name ?? 'غير محدد' }}</p>
                        </div>
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-sm text-black mb-1">إجمالي العرض</p>
                            <p class="text-lg font-semibold text-blue-600">{{ number_format($salesQuotation->total_amount, 2) }} ريال</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delivery Settings -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-xl font-semibold">إعدادات سند التسليم</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="warehouse_id" class="block text-sm font-medium text-black mb-2">
                                <i class="fas fa-warehouse text-blue-600 ml-1"></i>
                                المستودع (الصرف من) *
                            </label>
                            <select id="warehouse_id" name="warehouse_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition select2" data-placeholder="-- اختر مستودع --">
                                <option value="">-- اختر مستودع --</option>
                                @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ old('warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                                    {{ $warehouse->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('warehouse_id')
                            <p class="text-red-600 text-sm mt-1"><i class="fas fa-exclamation-circle ml-1"></i>{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="delivery_date" class="block text-sm font-medium text-black mb-2">
                                <i class="fas fa-calendar text-blue-600 ml-1"></i>
                                تاريخ التسليم *
                            </label>
                            <input type="date" id="delivery_date" name="delivery_date" value="{{ old('delivery_date', date('Y-m-d')) }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
                            @error('delivery_date')
                            <p class="text-red-600 text-sm mt-1"><i class="fas fa-exclamation-circle ml-1"></i>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Items -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-xl font-semibold">
                        <i class="fas fa-boxes ml-1"></i>
                        الأصناف ({{ $salesQuotation->items->count() }})
                    </h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-4 py-3 text-right text-sm font-semibold text-black">اسم الصنف</th>
                                <th class="px-4 py-3 text-center text-sm font-semibold text-black">الوحدة</th>
                                <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية في العرض</th>
                                <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية المسلمة</th>
                                <th class="px-4 py-3 text-center text-sm font-semibold text-black">المقبول</th>
                                <th class="px-4 py-3 text-center text-sm font-semibold text-black">المرفوض</th>
                                <th class="px-4 py-3 text-right text-sm font-semibold text-black">سبب الرفض</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($salesQuotation->items as $index => $item)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-4 py-3">
                                    <span class="font-medium text-black">{{ $item->item->name ?? 'غير محدد' }}</span>
                                    <input type="hidden" name="items[{{ $index }}][quotation_item_id]" value="{{ $item->id }}">
                                </td>
                                <td class="px-4 py-3 text-center text-black">{{ $item->unit->name ?? '-' }}</td>
                                <td class="px-4 py-3 text-center text-black font-medium">{{ $item->quantity }}</td>
                                <td class="px-4 py-3 text-center">
                                    <input type="number" name="items[{{ $index }}][quantity_delivered]"
                                        id="delivered_{{ $index }}"
                                        step="0.01" min="0" max="{{ $item->quantity }}"
                                        value="{{ old('items.'.$index.'.quantity_delivered', $item->quantity) }}"
                                        class="w-24 px-2 py-1 border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 text-center"
                                        onchange="updateAccepted(this, {{ $index }})">
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <input type="number" name="items[{{ $index }}][quantity_accepted]"
                                        id="accepted_{{ $index }}"
                                        step="0.01" min="0"
                                        value="{{ old('items.'.$index.'.quantity_accepted', $item->quantity) }}"
                                        class="w-24 px-2 py-1 border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 text-center"
                                        onchange="calculateRejected(this, {{ $index }})">
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <input type="number" name="items[{{ $index }}][quantity_rejected]"
                                        id="rejected_{{ $index }}"
                                        step="0.01" min="0" value="0" readonly
                                        class="w-24 px-2 py-1 border border-gray-100 bg-gray-50 rounded text-center text-red-600 font-medium">
                                </td>
                                <td class="px-4 py-3">
                                    <input type="text" name="items[{{ $index }}][rejection_reason]"
                                        placeholder="سبب الرفض..."
                                        value="{{ old('items.'.$index.'.rejection_reason') }}"
                                        class="w-full px-3 py-1 border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 text-sm">
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center text-black">لا توجد أصناف في هذا العرض</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Notes & Attachment -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h2 class="text-xl font-semibold">معلومات إضافية</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="notes" class="block text-sm font-medium text-black mb-2">
                            <i class="fas fa-comment-dots text-blue-600 ml-1"></i>
                            ملاحظات
                        </label>
                        <textarea id="notes" name="notes" rows="3" placeholder="أدخل أي ملاحظات..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition resize-none">{{ old('notes', $salesQuotation->notes) }}</textarea>
                    </div>
                    <div>
                        <label for="attachment" class="block text-sm font-medium text-black mb-2">
                            <i class="fas fa-paperclip text-blue-600 ml-1"></i>
                            مرفق
                        </label>
                        <input type="file" id="attachment" name="attachment" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-between gap-4">
                <a href="{{ route('sales-quotations.show', $salesQuotation) }}" class="inline-flex items-center px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition-all duration-200">
                    <i class="fas fa-times ml-2"></i>
                    <span>إلغاء</span>
                </a>

                <button type="submit" class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                    <i class="fas fa-truck ml-2"></i>
                    <span>إنشاء سند التسليم</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function updateAccepted(input, index) {
    const delivered = parseFloat(input.value) || 0;
    const acceptedInput = document.getElementById('accepted_' + index);
    const rejectedInput = document.getElementById('rejected_' + index);
    acceptedInput.value = delivered;
    rejectedInput.value = 0;
    acceptedInput.max = delivered;
}

function calculateRejected(input, index) {
    const acceptedInput = input;
    const deliveredInput = document.getElementById('delivered_' + index);
    const rejectedInput = document.getElementById('rejected_' + index);
    const delivered = parseFloat(deliveredInput.value) || 0;
    const accepted = parseFloat(acceptedInput.value) || 0;
    const rejected = Math.max(0, delivered - accepted);
    rejectedInput.value = rejected.toFixed(2);
}
</script>
@endsection