<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('expenses.rent.list') }}" wire:navigate
           class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800">
            <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="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
            {{ __('سجل الإيجارات') }}
        </a>
    </div>

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

    <form wire:submit="save" class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
            {{-- Facility --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('المنشأة') }} <span class="text-red-500">*</span></label>
                <select wire:model.live="facility_id" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                    <option value="">{{ __('اختر المنشأة') }}</option>
                    @foreach($facilities as $f)
                    <option value="{{ $f->id }}">
                        {{ $f->name_ar }}
                        @if($f->monthly_rental_cost)
                            ({{ format_money($f->monthly_rental_cost) }}/{{ __('شهر') }})
                        @endif
                    </option>
                    @endforeach
                </select>
                @error('facility_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Period --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('الشهر') }} <span class="text-red-500">*</span></label>
                <input type="month" wire:model="period" dir="ltr"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                @error('period') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Amount --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('المبلغ (ج.م)') }} <span class="text-red-500">*</span></label>
                <input type="number" wire:model="amount_display" dir="ltr" step="0.01" min="0"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5" placeholder="0.00">
                @error('amount_display') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Payment Method --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('طريقة الدفع') }} <span class="text-red-500">*</span></label>
                <select wire:model.live="payment_method" class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                    <option value="cheque">{{ __('شيك') }}</option>
                    <option value="cash">{{ __('نقدي') }}</option>
                    <option value="bank_transfer">{{ __('تحويل بنكي') }}</option>
                    <option value="card">{{ __('بطاقة') }}</option>
                    <option value="other">{{ __('أخرى') }}</option>
                </select>
                @error('payment_method') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Cheque fields (shown when payment_method is cheque) --}}
            @if($payment_method === 'cheque')
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('رقم الشيك') }} <span class="text-red-500">*</span></label>
                <input type="text" wire:model="cheque_number" dir="ltr"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                @error('cheque_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('تاريخ الشيك') }} <span class="text-red-500">*</span></label>
                <input type="date" wire:model="cheque_date" dir="ltr"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                @error('cheque_date') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('البنك') }} <span class="text-red-500">*</span></label>
                <input type="text" wire:model="bank_name"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5" placeholder="{{ __('مثال: البنك الأهلي') }}">
                @error('bank_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            @endif

            {{-- Recipient --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('المستلم') }}</label>
                <input type="text" wire:model="recipient_name"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5" placeholder="{{ __('اسم المؤجر / المالك') }}">
                @error('recipient_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Payment Date --}}
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('تاريخ الدفع') }} <span class="text-red-500">*</span></label>
                <input type="date" wire:model="payment_date" dir="ltr"
                       class="w-full rounded-lg border-gray-300 text-sm py-2.5">
                @error('payment_date') <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 text-gray-600 mb-1">{{ __('ملاحظات') }}</label>
                <textarea wire:model="notes" rows="2"
                          class="w-full rounded-lg border-gray-300 text-sm py-2.5"></textarea>
            </div>
        </div>

        {{-- Submit --}}
        <div class="mt-6 flex justify-end">
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition text-sm font-medium disabled:opacity-50">
                <span wire:loading.remove wire:target="save">{{ __('تسجيل الدفعة') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
