<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء فاتورة') }}</h1>
        <a href="{{ route('invoices.list') }}" wire:navigate
           class="text-gray-600 hover:text-gray-800 text-sm font-medium">
            {{ __('العودة للفواتير') }}
        </a>
    </div>

    {{-- Flash Messages --}}
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    <form wire:submit="save">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
            {{-- Main Form --}}
            <div class="lg:col-span-2 space-y-4 sm:space-y-6">
                {{-- Client Info --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('بيانات العميل') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المشترك') }}</label>
                            <select wire:model.live="participant_id"
                                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                <option value="">{{ __('اختر مشترك (اختياري)') }}</option>
                                @foreach($participants as $participant)
                                <option value="{{ $participant->id }}">
                                    {{ $participant->person?->name_ar ?? __('بدون اسم') }}
                                    @if($participant->participant_number)
                                    - {{ $participant->participant_number }}
                                    @endif
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم العميل') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="contact_name"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   placeholder="{{ __('اسم العميل') }}">
                            @error('contact_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الهاتف') }}</label>
                            <input type="text" wire:model="contact_phone" dir="ltr"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   placeholder="01xxxxxxxxx">
                        </div>
                    </div>
                </div>

                {{-- Items --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('عناصر الفاتورة') }}</h2>
                        <button type="button" wire:click="addItem"
                                class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 text-sm font-medium">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            {{ __('إضافة عنصر') }}
                        </button>
                    </div>

                    <div class="space-y-3">
                        @foreach($items as $index => $item)
                        <div class="flex flex-col sm:flex-row items-start gap-3 p-3 bg-gray-50 rounded-lg" wire:key="item-{{ $index }}">
                            <div class="flex-1 w-full grid grid-cols-1 sm:grid-cols-6 gap-3">
                                <div class="sm:col-span-3">
                                    <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الوصف') }}</label>
                                    <input type="text" wire:model="items.{{ $index }}.description"
                                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                           placeholder="{{ __('وصف العنصر') }}">
                                    @error("items.{$index}.description") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الكمية') }}</label>
                                    <input type="number" wire:model="items.{{ $index }}.quantity" min="1" dir="ltr"
                                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                    @error("items.{$index}.quantity") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                </div>
                                <div class="sm:col-span-2">
                                    <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('سعر الوحدة (ج.م)') }}</label>
                                    <input type="number" wire:model="items.{{ $index }}.unit_price" min="0" step="0.01" dir="ltr"
                                           class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                           placeholder="0.00">
                                    @error("items.{$index}.unit_price") <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            @if(count($items) > 1)
                            <button type="button" wire:click="removeItem({{ $index }})"
                                    class="mt-6 p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @error('items') <p class="mt-2 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Dates & Notes --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('التواريخ والملاحظات') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الإصدار') }} <span class="text-red-500">*</span></label>
                            <input type="date" wire:model="issue_date" dir="ltr"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            @error('issue_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الاستحقاق') }} <span class="text-red-500">*</span></label>
                            <input type="date" wire:model="due_date" dir="ltr"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            @error('due_date') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
                            <textarea wire:model="notes" rows="3"
                                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                      placeholder="{{ __('ملاحظات إضافية...') }}"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar Summary --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 sticky top-6">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('ملخص الفاتورة') }}</h2>

                    <div class="space-y-3">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">{{ __('المجموع الفرعي') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($this->subtotal, 2) }} {{ __('ج.م') }}</span>
                        </div>

                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الخصم (ج.م)') }}</label>
                            <input type="number" wire:model.live="discount_amount" min="0" step="0.01" dir="ltr"
                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   placeholder="0.00">
                        </div>

                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الضريبة (ج.م)') }}</label>
                            <input type="number" wire:model.live="tax_amount" min="0" step="0.01" dir="ltr"
                                   class="w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   placeholder="0.00">
                        </div>

                        <div class="border-t border-gray-200 pt-3">
                            <div class="flex justify-between text-base font-bold">
                                <span class="text-gray-800">{{ __('الإجمالي') }}</span>
                                <span class="text-blue-600" dir="ltr">{{ number_format($this->total, 2) }} {{ __('ج.م') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6">
                        <button type="submit"
                                wire:loading.attr="disabled"
                                wire:target="save"
                                class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                            <span wire:loading.remove wire:target="save">{{ __('إنشاء الفاتورة') }}</span>
                            <span wire:loading wire:target="save">
                                <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            </span>
                            <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
