<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء فاتورة جديدة') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('إنشاء فاتورة يدوية لمشترك') }}</p>
        </div>
    </div>

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

    {{-- Step Indicator --}}
    @if(!$completed)
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            @php $steps = $this->getStepLabels(); @endphp
            @foreach($steps as $num => $label)
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <button wire:click="goToStep({{ $num }})"
                        @if($num >= $currentStep) disabled @endif
                        class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'cursor-default' }}">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors
                        {{ $num === $currentStep ? 'bg-blue-600 text-white' : '' }}
                        {{ $num < $currentStep ? 'bg-green-500 text-white' : '' }}
                        {{ $num > $currentStep ? 'bg-gray-200 text-gray-500' : '' }}">
                        @if($num < $currentStep)
                            <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="M5 13l4 4L19 7"/>
                            </svg>
                        @else
                            {{ $num }}
                        @endif
                    </div>
                    <span class="text-xs font-medium hidden sm:inline
                        {{ $num === $currentStep ? 'text-blue-600' : '' }}
                        {{ $num < $currentStep ? 'text-green-600' : '' }}
                        {{ $num > $currentStep ? 'text-gray-400' : '' }}">
                        {{ __($label) }}
                    </span>
                </button>
                @if(!$loop->last)
                <div class="flex-1 h-0.5 mx-3 {{ $num < $currentStep ? 'bg-green-500' : 'bg-gray-200' }}"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Step Content --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">

        {{-- Step 1: Client --}}
        @if($currentStep === 1)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('اختيار العميل') }}</h2>

            {{-- Participant Search --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث عن المشترك') }} <span class="text-red-500">*</span></label>
                <input type="text" wire:model.live.debounce.300ms="participantSearch"
                       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"
                       placeholder="{{ __('بحث بالاسم أو رقم المشترك أو الهاتف...') }}">
                @error('participantId') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Selected Participant --}}
            @if($participantId)
            <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-xl flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <span class="font-medium text-blue-800">{{ $participantName }}</span>
                </div>
                <button wire:click="$set('participantId', null)" class="text-blue-600 hover:text-blue-800 text-sm">
                    {{ __('تغيير') }}
                </button>
            </div>
            @endif

            {{-- Search Results --}}
            @if(strlen($participantSearch) >= 2 && !$participantId)
            <div class="space-y-2 mb-4" wire:loading.class="opacity-50">
                @forelse($searchResults as $result)
                <button wire:click="selectParticipant({{ $result->id }})"
                        class="w-full p-3 border border-gray-200 rounded-lg text-start hover:border-blue-300 hover:bg-blue-50 transition-all flex items-center justify-between">
                    <div>
                        <p class="font-medium text-gray-800">{{ $result->person?->name_ar }}</p>
                        <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
                            @if($result->participant_number)
                            <span dir="ltr">{{ $result->participant_number }}</span>
                            @endif
                            @if($result->person?->phone)
                            <span dir="ltr">{{ $result->person->phone }}</span>
                            @endif
                        </div>
                    </div>
                </button>
                @empty
                <p class="text-center text-gray-500 text-sm py-4">{{ __('لا توجد نتائج') }}</p>
                @endforelse
            </div>
            @endif

            {{-- Contact Details --}}
            @if($participantId)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم جهة الاتصال') }}</label>
                    <input type="text" wire:model="contactName"
                           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">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف جهة الاتصال') }}</label>
                    <input type="text" wire:model="contactPhone" 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">
                </div>
            </div>
            @endif
        </div>
        @endif

        {{-- Step 2: Items --}}
        @if($currentStep === 2)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('بنود الفاتورة') }}</h2>

            <div class="space-y-4">
                @foreach($items as $index => $item)
                <div class="border border-gray-200 rounded-lg p-4 relative">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-sm font-medium text-gray-600">{{ __('بند') }} {{ $index + 1 }}</span>
                        @if(count($items) > 1)
                        <button wire:click="removeItem({{ $index }})" type="button"
                                class="text-red-500 hover:text-red-700 text-sm">
                            <svg class="w-5 h-5" 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>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                        <div class="md:col-span-2">
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الوصف') }} <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="items.{{ $index }}.description"
                                   class="w-full px-3 py-2 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="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الكمية') }} <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="items.{{ $index }}.quantity" dir="ltr" min="1"
                                   class="w-full px-3 py-2 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="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('سعر الوحدة') }} ({{ __('ج.م') }}) <span class="text-red-500">*</span></label>
                            <input type="number" wire:model="items.{{ $index }}.unit_price" dir="ltr" step="0.01" min="0"
                                   class="w-full px-3 py-2 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="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    @if(($item['unit_price'] ?? 0) > 0 && ($item['quantity'] ?? 0) > 0)
                    <div class="mt-2 text-end text-sm text-gray-500">
                        {{ __('الإجمالي') }}: <span dir="ltr" class="font-medium">{{ number_format((float)$item['unit_price'] * (int)$item['quantity'], 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>

            <button wire:click="addItem" type="button"
                    class="mt-4 inline-flex items-center gap-2 px-4 py-2 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 text-sm font-medium transition-colors">
                <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>

            {{-- Subtotal Preview --}}
            @php
                $subtotalPreview = 0;
                foreach($items as $item) {
                    $subtotalPreview += ((float)($item['unit_price'] ?? 0)) * ((int)($item['quantity'] ?? 0));
                }
            @endphp
            @if($subtotalPreview > 0)
            <div class="mt-4 p-3 bg-gray-50 rounded-lg text-end">
                <span class="text-sm text-gray-600">{{ __('المجموع الفرعي') }}:</span>
                <span class="text-sm font-bold text-gray-800 ms-2" dir="ltr">{{ number_format($subtotalPreview, 2) }} {{ __('ج.م') }}</span>
            </div>
            @endif
        </div>
        @endif

        {{-- Step 3: Discount & Tax --}}
        @if($currentStep === 3)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('الخصم والضريبة') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Discount --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مبلغ الخصم') }}</label>
                    <div class="relative">
                        <input type="number" wire:model="discountAmount" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 pe-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('discountAmount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Tax --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('مبلغ الضريبة') }}</label>
                    <div class="relative">
                        <input type="number" wire:model="taxAmount" dir="ltr" step="0.01" min="0"
                               class="w-full px-4 py-2.5 pe-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00">
                        <span class="absolute end-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">{{ __('ج.م') }}</span>
                    </div>
                    @error('taxAmount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            {{-- Totals Preview --}}
            @php
                $subtotalCalc = 0;
                foreach($items as $item) {
                    $subtotalCalc += ((float)($item['unit_price'] ?? 0)) * ((int)($item['quantity'] ?? 0));
                }
                $discountCalc = (float)($discountAmount ?? 0);
                $taxCalc = (float)($taxAmount ?? 0);
                $totalCalc = $subtotalCalc - $discountCalc + $taxCalc;
            @endphp
            <div class="mt-6 p-4 bg-gray-50 rounded-lg space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">{{ __('المجموع الفرعي') }}</span>
                    <span class="font-medium" dir="ltr">{{ number_format($subtotalCalc, 2) }} {{ __('ج.م') }}</span>
                </div>
                @if($discountCalc > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-red-600">{{ __('الخصم') }} (-)</span>
                    <span class="font-medium text-red-600" dir="ltr">{{ number_format($discountCalc, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endif
                @if($taxCalc > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">{{ __('الضريبة') }} (+)</span>
                    <span class="font-medium" dir="ltr">{{ number_format($taxCalc, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endif
                <div class="flex justify-between text-sm pt-2 border-t border-gray-300">
                    <span class="font-bold text-gray-800">{{ __('الإجمالي') }}</span>
                    <span class="font-bold text-gray-800" dir="ltr">{{ number_format($totalCalc, 2) }} {{ __('ج.م') }}</span>
                </div>
            </div>
        </div>
        @endif

        {{-- Step 4: Dates --}}
        @if($currentStep === 4)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('تاريخ الاستحقاق والملاحظات') }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Issue Date --}}
                <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="issueDate" 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">
                    @error('issueDate') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Due Date --}}
                <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="dueDate" 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">
                    @error('dueDate') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Notes --}}
                <div class="md: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"
                              placeholder="{{ __('ملاحظات إضافية على الفاتورة...') }}"></textarea>
                    @error('notes') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        @endif

        {{-- Step 5: Review --}}
        @if($currentStep === 5 && !$completed)
        <div>
            <h2 class="text-lg font-semibold text-gray-800 mb-6">{{ __('مراجعة الفاتورة') }}</h2>

            <div class="space-y-4">
                {{-- Client Info --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('بيانات العميل') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('المشترك') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $participantName }}</dd>
                        </div>
                        @if($contactPhone)
                        <div>
                            <dt class="text-gray-500">{{ __('الهاتف') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $contactPhone }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Items Table --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('البنود') }}</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-start py-2 text-gray-600 font-medium">{{ __('الوصف') }}</th>
                                    <th class="text-center py-2 text-gray-600 font-medium">{{ __('الكمية') }}</th>
                                    <th class="text-end py-2 text-gray-600 font-medium">{{ __('السعر') }}</th>
                                    <th class="text-end py-2 text-gray-600 font-medium">{{ __('الإجمالي') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $item)
                                <tr class="border-b border-gray-100">
                                    <td class="py-2 text-gray-800">{{ $item['description'] }}</td>
                                    <td class="py-2 text-center text-gray-800" dir="ltr">{{ $item['quantity'] }}</td>
                                    <td class="py-2 text-end text-gray-800" dir="ltr">{{ number_format((float)$item['unit_price'], 2) }}</td>
                                    <td class="py-2 text-end font-medium text-gray-800" dir="ltr">{{ number_format((float)$item['unit_price'] * (int)$item['quantity'], 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Financial Summary --}}
                @php
                    $reviewSubtotal = 0;
                    foreach($items as $item) {
                        $reviewSubtotal += ((float)($item['unit_price'] ?? 0)) * ((int)($item['quantity'] ?? 0));
                    }
                    $reviewDiscount = (float)($discountAmount ?? 0);
                    $reviewTax = (float)($taxAmount ?? 0);
                    $reviewTotal = $reviewSubtotal - $reviewDiscount + $reviewTax;
                @endphp
                <div class="bg-blue-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('الملخص المالي') }}</h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">{{ __('المجموع الفرعي') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($reviewSubtotal, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @if($reviewDiscount > 0)
                        <div class="flex justify-between">
                            <span class="text-red-600">{{ __('الخصم') }}</span>
                            <span class="font-medium text-red-600" dir="ltr">-{{ number_format($reviewDiscount, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        @if($reviewTax > 0)
                        <div class="flex justify-between">
                            <span class="text-gray-600">{{ __('الضريبة') }}</span>
                            <span class="font-medium" dir="ltr">+{{ number_format($reviewTax, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between pt-2 border-t border-blue-200">
                            <span class="font-bold text-gray-800">{{ __('الإجمالي المستحق') }}</span>
                            <span class="font-bold text-blue-700 text-lg" dir="ltr">{{ number_format($reviewTotal, 2) }} {{ __('ج.م') }}</span>
                        </div>
                    </div>
                </div>

                {{-- Dates --}}
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-gray-600 mb-3">{{ __('التواريخ') }}</h3>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                        <div>
                            <dt class="text-gray-500">{{ __('تاريخ الإصدار') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $issueDate }}</dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">{{ __('تاريخ الاستحقاق') }}</dt>
                            <dd class="font-medium text-gray-800" dir="ltr">{{ $dueDate }}</dd>
                        </div>
                        @if($notes)
                        <div class="sm:col-span-2">
                            <dt class="text-gray-500">{{ __('ملاحظات') }}</dt>
                            <dd class="font-medium text-gray-800">{{ $notes }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
        @endif

        {{-- Success State --}}
        @if($completed)
        <div class="text-center py-8">
            <div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('تم إنشاء الفاتورة بنجاح') }}</h2>
            <p class="text-gray-500 mb-6">{{ __('تم إنشاء الفاتورة بحالة مسودة ويمكنك إرسالها للعميل') }}</p>
        </div>
        @endif

        {{-- Navigation Buttons --}}
        @if(!$completed)
        <div class="flex items-center justify-between mt-8 pt-4 border-t border-gray-200">
            @if($currentStep > 1)
            <button wire:click="previousStep" type="button"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 font-medium text-sm transition-colors">
                <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                {{ __('السابق') }}
            </button>
            @else
            <div></div>
            @endif

            @if($currentStep < $totalSteps)
            <button wire:click="nextStep" type="button"
                    wire:loading.attr="disabled" wire:target="nextStep"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-white bg-blue-600 rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
                <span wire:loading wire:target="nextStep">{{ __('جارٍ التحقق...') }}</span>
                <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="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            @else
            <button wire:click="confirm" type="button"
                    wire:loading.attr="disabled" wire:target="confirm"
                    class="inline-flex items-center gap-2 px-6 py-2.5 text-white bg-green-600 rounded-lg hover:bg-green-700 font-medium text-sm transition-colors">
                <span wire:loading.remove wire:target="confirm">{{ __('تأكيد إنشاء الفاتورة') }}</span>
                <span wire:loading wire:target="confirm">{{ __('جارٍ الحفظ...') }}</span>
            </button>
            @endif
        </div>
        @endif
    </div>
</div>
