@extends('layouts.app')
@section('title', 'الفواتير')
@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 opacity-50" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSMzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">BILLS</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">الفواتير</h1>
            <p class="text-white/70 text-sm mt-1">إدارة جميع الفواتير</p>
        </div>
        <button onclick="document.getElementById('addModal').classList.remove('hidden')"
                class="px-5 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-semibold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 flex items-center gap-2 cursor-pointer">
            <span>+</span> إضافة فاتورة
        </button>
    </div>
</div>

@if (session('success'))
    <div class="mb-5 p-4 rounded-[14px] bg-success/10 border border-success/20 text-success text-sm font-semibold flex items-center gap-2">✅ {{ session('success') }}</div>
@endif

@if (session('error'))
    <div class="mb-5 p-4 rounded-[14px] bg-danger/10 border border-danger/20 text-danger text-sm font-semibold flex items-center gap-2">❌ {{ session('error') }}</div>
@endif

@if ($errors->any())
    <div class="mb-5 p-4 rounded-[14px] bg-danger/10 border border-danger/20 text-danger text-sm font-semibold flex items-center gap-2">❌ {{ $errors->first() }}</div>
@endif

<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-secondary-600"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">إجمالي الفواتير الشهرية</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ number_format($totalMonthly, 2) }} USD</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-secondary-500/10 flex items-center justify-center text-lg shrink-0">📊</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-accent-500"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">العدد الإجمالي</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $bills instanceof \Illuminate\Pagination\LengthAwarePaginator ? $bills->total() : $bills->count() }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg shrink-0">📋</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-danger"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">مستحقة خلال يومين</p>
                <p class="text-2xl font-display font-extrabold text-danger mt-0.5">{{ $dueBills->count() }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-danger/10 flex items-center justify-center text-lg shrink-0">🔔</div>
        </div>
    </div>
</div>

<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-display font-bold text-primary-900 text-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">📋</span> قائمة الفواتير الدورية</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">العنوان</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">النوع</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">المبلغ</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">الدورية</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">الاستحقاق القادم</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">الحالة</th>
                    <th class="px-4 py-3.5 text-xs font-semibold text-muted tracking-wide">إجراءات</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($bills as $bill)
                    <tr class="hover:bg-surface/50 transition-colors">
                        <td class="px-4 py-3.5 font-semibold text-primary-900">{{ $bill->title }}</td>
                        <td class="px-4 py-3.5">
                            @if (($bill->type ?? 'recurring') === 'variable')
                                <span class="text-xs px-2 py-1 rounded-full bg-purple-50 text-purple-700 border border-purple-200 font-medium">متغيرة</span>
                            @else
                                <span class="text-xs px-2 py-1 rounded-full bg-secondary-50 text-secondary-600 border border-secondary-200 font-medium">متكررة</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5">{{ number_format($bill->amount, 2) }} {{ $bill->currency }}</td>
                        <td class="px-4 py-3.5">
                            @if ($bill->frequency)
                                <span class="text-xs px-2 py-1 rounded-full bg-secondary-50 text-secondary-600 border border-secondary-200 font-medium">
                                    {{ ['monthly'=>'شهري','weekly'=>'أسبوعي','daily'=>'يومي'][$bill->frequency] ?? $bill->frequency }}
                                </span>
                            @else
                                <span class="text-xs text-muted">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 text-sm {{ $bill->next_due_date && \Carbon\Carbon::parse($bill->next_due_date)->isPast() ? 'text-danger font-bold' : 'text-muted' }}">
                            {{ $bill->next_due_date ? \Carbon\Carbon::parse($bill->next_due_date)->format('Y-m-d') : '—' }}
                        </td>
                        <td class="px-4 py-3.5">
                            @php $approval = $bill->approval_status ?? 'approved'; @endphp
                            @if ($approval === 'pending_approval')
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-yellow-50 text-yellow-700 border border-yellow-200">⏳ بانتظار الموافقة</span>
                            @elseif ($approval === 'rejected')
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-red-50 text-red-700 border border-red-200">🚫 مرفوض</span>
                            @elseif (($bill->type ?? 'recurring') === 'variable' && in_array($bill->id, $paidBillIds))
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-blue-50 text-blue-700 border border-blue-200">✅ تم الدفع</span>
                            @elseif (!$bill->is_active)
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-gray-100 text-gray-500 border border-gray-200">موقوف</span>
                            @elseif (($bill->type ?? 'recurring') === 'recurring' && $bill->next_due_date && \Carbon\Carbon::parse($bill->next_due_date)->isFuture() && in_array($bill->id, $paidBillIds))
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-blue-50 text-blue-700 border border-blue-200">✅ تم الدفع</span>
                            @else
                                <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-green-50 text-green-700 border border-green-200">نشط</span>
                            @endif
                        </td>
                        <td class="px-4 py-3.5">
                            @php
                                $isActive = $bill->is_active && ($bill->approval_status ?? 'approved') === 'approved';
                                $isDue = $bill->next_due_date && \Carbon\Carbon::parse($bill->next_due_date)->lte(now());
                                $isVariable = ($bill->type ?? 'recurring') === 'variable';
                                $hasBeenPaid = in_array($bill->id, $paidBillIds);
                                $canPay = $isActive && ($isVariable ? true : (!$hasBeenPaid || $isDue));
                                $isPaid = $isActive && !$isVariable && $hasBeenPaid && !$isDue;
                            @endphp
                            <div class="flex gap-1">
                                @if ($canPay)
                                <button onclick="document.getElementById('payModal{{ $bill->id }}').classList.remove('hidden')"
                                        class="text-xs px-2.5 py-1.5 rounded-lg bg-accent-500 text-white hover:bg-accent-600 cursor-pointer transition-all font-medium">💳 دفع</button>
                                <div id="payModal{{ $bill->id }}" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
                                    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-6 w-full max-w-sm mx-4" onclick="event.stopPropagation()">
                                        <div class="flex items-center justify-between mb-4">
                                            <h3 class="text-base font-bold text-primary-900">تأكيد الدفع</h3>
                                            <button onclick="document.getElementById('payModal{{ $bill->id }}').classList.add('hidden')" class="w-7 h-7 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
                                        </div>
                                        <p class="text-sm text-muted mb-2">هل أنت متأكد من دفع هذه الفاتورة؟</p>
                                        <div class="bg-surface rounded-xl p-3 mb-4 text-sm">
                                            <div class="flex justify-between mb-1"><span class="text-muted">العنوان:</span><span class="font-semibold text-primary-900">{{ $bill->title }}</span></div>
                                            <div class="flex justify-between mb-1"><span class="text-muted">المبلغ:</span><span class="font-semibold text-primary-900">{{ number_format($bill->amount, 2) }} {{ $bill->currency }}</span></div>
                                            <div class="flex justify-between"><span class="text-muted">الخزنة:</span><span class="font-semibold text-primary-900">{{ $cashboxes->firstWhere('id', $bill->cashbox_id)->name ?? '—' }}</span></div>
                                        </div>
                                        <div class="flex gap-3">
                                            <button onclick="document.getElementById('payModal{{ $bill->id }}').classList.add('hidden')"
                                                    class="flex-1 px-4 py-2.5 rounded-xl text-sm font-bold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all cursor-pointer">إلغاء</button>
                                            <form method="POST" action="{{ route('finance.recurring.pay', $bill->id) }}" class="flex-1">
                                                @csrf
                                                <button type="submit" onclick="this.disabled=true;this.textContent='جاري الدفع...';this.form.submit()" class="w-full px-4 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all cursor-pointer">تأكيد الدفع</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if ($approval !== 'rejected')
                                <form method="POST" action="{{ route('finance.recurring.toggle', $bill->id) }}" class="inline">
                                    @csrf
                                    <button type="submit"
                                            class="text-xs px-2.5 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all cursor-pointer font-medium">
                                        {{ $bill->is_active ? '⏸️ إيقاف' : '▶️ تفعيل' }}
                                    </button>
                                </form>
                                @endif
                                @if ($approval === 'rejected')
                                <button onclick="document.getElementById('deleteModal{{ $bill->id }}').classList.remove('hidden')"
                                        class="text-xs px-2.5 py-1.5 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition-all cursor-pointer font-medium">🗑️ حذف</button>
                                <div id="deleteModal{{ $bill->id }}" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
                                    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-6 w-full max-w-sm mx-4" onclick="event.stopPropagation()">
                                        <div class="flex items-center justify-between mb-4">
                                            <h3 class="text-base font-bold text-primary-900">تأكيد الحذف</h3>
                                            <button onclick="document.getElementById('deleteModal{{ $bill->id }}').classList.add('hidden')" class="w-7 h-7 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
                                        </div>
                                        <p class="text-sm text-muted mb-6">هل أنت متأكد من حذف هذه الفاتورة المرفوضة؟</p>
                                        <div class="flex gap-3">
                                            <button onclick="document.getElementById('deleteModal{{ $bill->id }}').classList.add('hidden')"
                                                    class="flex-1 px-4 py-2.5 rounded-xl text-sm font-bold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all cursor-pointer">إلغاء</button>
                                            <form method="POST" action="{{ route('finance.recurring.delete', $bill->id) }}" class="flex-1">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="w-full px-4 py-2.5 bg-red-500 text-white rounded-xl text-sm font-bold hover:bg-red-600 transition-all cursor-pointer">تأكيد الحذف</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-4 py-12 text-center"><div class="text-4xl mb-3">📭</div><p class="text-muted text-sm font-semibold">لا توجد فواتير</p></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if (method_exists($bills, 'links'))<div class="px-5 py-4 border-t border-gray-100">{{ $bills->links() }}</div>@endif
</div>

@if ($customCategories->count() > 0)
<div class="bg-white rounded-[16px] border border-gray-200 p-5 mb-6 shadow-sm">
    <div class="flex items-center gap-2 mb-3">
        <span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">🏷️</span>
        <h3 class="font-display font-bold text-primary-900 text-sm">إدارة التصنيفات المضافة</h3>
    </div>
    <p class="text-xs text-muted mb-3">التصنيفات اللي أضفتها بنفسك. تقدر تخفيها لو ضفتها بالغلط.</p>
    <div class="flex flex-wrap gap-2">
        @foreach ($customCategories as $cat)
        <div class="flex items-center gap-1.5 bg-surface border border-gray-200 rounded-xl px-3 py-1.5 text-sm">
            <span>{{ $cat }}</span>
            <form method="POST" action="{{ route('finance.recurring.deleteCategory') }}" class="inline" onsubmit="return confirm('إخفاء التصنيف &quot;{{ $cat }}&quot;؟')">
                @csrf
                <input type="hidden" name="category" value="{{ $cat }}">
                <button type="submit" class="text-danger hover:text-red-700 cursor-pointer text-xs leading-none p-0.5" title="إخفاء التصنيف">✕</button>
            </form>
        </div>
        @endforeach
    </div>
</div>
@endif

<div id="addModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg">➕</div>
                <h2 class="text-lg font-bold text-primary-900">فاتورة جديدة</h2>
            </div>
            <button onclick="document.getElementById('addModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 hover:text-text flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('finance.recurring.store') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-2">نوع الفاتورة</label>
                <div class="grid grid-cols-2 gap-3" id="typeCards">
                    <label class="relative cursor-pointer type-card" onclick="document.getElementById('typeRecurring').checked=true;toggleTypeFields();document.querySelectorAll('.type-card').forEach(c=>c.classList.remove('ring-2','ring-accent-500','border-accent-500','bg-accent-50'));this.classList.add('ring-2','ring-accent-500','border-accent-500','bg-accent-50')">
                        <input type="radio" name="type" value="recurring" id="typeRecurring" checked onchange="toggleTypeFields()" class="sr-only">
                        <div class="rounded-xl border-2 border-gray-200 p-4 text-center transition-all">
                            <div class="text-2xl mb-1.5">🔄</div>
                            <div class="text-sm font-bold text-primary-900">فاتورة متكررة</div>
                            <div class="text-[0.65rem] text-muted mt-0.5">شهرية / أسبوعية / يومية</div>
                        </div>
                    </label>
                    <label class="relative cursor-pointer type-card" onclick="document.getElementById('typeVariable').checked=true;toggleTypeFields();document.querySelectorAll('.type-card').forEach(c=>c.classList.remove('ring-2','ring-accent-500','border-accent-500','bg-accent-50'));this.classList.add('ring-2','ring-accent-500','border-accent-500','bg-accent-50')">
                        <input type="radio" name="type" value="variable" id="typeVariable" onchange="toggleTypeFields()" class="sr-only">
                        <div class="rounded-xl border-2 border-gray-200 p-4 text-center transition-all">
                            <div class="text-2xl mb-1.5">⚡</div>
                            <div class="text-sm font-bold text-primary-900">فاتورة متغيرة</div>
                            <div class="text-[0.65rem] text-muted mt-0.5">مرة واحدة فقط</div>
                        </div>
                    </label>
                </div>
            </div>
            <script>document.getElementById('typeRecurring').checked&&document.querySelector('.type-card:first-child').classList.add('ring-2','ring-accent-500','border-accent-500','bg-accent-50')</script>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">العنوان</label>
                <input type="text" name="title" required placeholder="مثال: إيجار المكتب..."
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">المبلغ</label>
                    <input type="number" step="0.01" name="amount" required placeholder="0.00"
                           class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">العملة</label>
                    <select name="currency" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                        <option value="EGP" selected>🇪🇬 EGP</option>
                        <option value="USD">🇺🇸 USD</option>
                        <option value="TRY">🇹🇷 TRY</option>
                        <option value="EUR">🇪🇺 EUR</option>
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">التصنيف</label>
                    <select name="category" id="categorySelect" onchange="toggleNewCategory()"
                            class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                        @foreach ($categories as $cat)
                            <option value="{{ $cat }}" class="py-1">{{ $cat }}</option>
                        @endforeach
                        <option value="أخرى" style="color:#db2777;font-weight:600;border-top:1px dashed #ddd">➕ إضافة تصنيف جديد...</option>
                    </select>
                    <div id="newCategoryWrap" class="hidden mt-2">
                        <input type="text" id="newCategoryInput" placeholder="اكتب اسم التصنيف الجديد..."
                               class="w-full rounded-xl border border-accent-500 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 transition-all">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-muted mb-1.5">الخزنة</label>
                    <select name="cashbox_id" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                        @foreach($cashboxes as $cb)
                            <option value="{{ $cb->id }}">{{ $cb->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div id="frequencyField">
                    <label class="block text-xs font-semibold text-muted mb-1.5">الدورية</label>
                    <select name="frequency" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                        <option value="monthly">شهري</option>
                        <option value="weekly">أسبوعي</option>
                        <option value="daily">يومي</option>
                    </select>
                </div>
                <div id="nextDueField">
                    <label class="block text-xs font-semibold text-muted mb-1.5">تاريخ الاستحقاق القادم</label>
                    <input type="text" name="next_due_date" required
                           class="datepicker w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">ملاحظات</label>
                <input type="text" name="notes" maxlength="500" placeholder="ملاحظات إضافية..."
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div id="approvalNotice" class="mb-4 p-3 rounded-xl bg-yellow-100 border-2 border-yellow-400 text-xs text-yellow-900 font-semibold hidden">
                ⚠️ الفواتير المتكررة تتطلب موافقة الإدارة قبل إتمام الدفع.
            </div>
            <div id="variableNotice" class="mb-4 p-3 rounded-xl bg-indigo-100 border-2 border-indigo-400 text-xs text-indigo-900 font-semibold hidden">
                💡 الفواتير المتغيرة تُدفع مرة واحدة ولا تحتاج موافقة إدارة.
            </div>
            <button type="button" onclick="this.disabled=true;this.form.submit()"
                    class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm shadow-accent-500/20 flex items-center justify-center gap-2 cursor-pointer">
                <span>➕</span> إضافة الفاتورة
            </button>
        </form>
    </div>
</div>

<script>
function toggleTypeFields() {
    const isVar = document.querySelector('input[name="type"]:checked')?.value === 'variable';
    document.getElementById('frequencyField').style.display = isVar ? 'none' : 'block';
    document.getElementById('nextDueField').style.display = isVar ? 'none' : 'block';
    document.getElementById('approvalNotice').classList.toggle('hidden', isVar);
    document.getElementById('variableNotice').classList.toggle('hidden', !isVar);
    const cat = document.getElementById('categorySelect');
    cat.value = isVar ? 'عدادات' : 'إيجار';
}

function toggleNewCategory() {
    var sel = document.getElementById('categorySelect');
    var wrap = document.getElementById('newCategoryWrap');
    var input = document.getElementById('newCategoryInput');
    if (sel.value === 'أخرى') {
        sel.removeAttribute('name');
        input.name = 'category';
        wrap.classList.remove('hidden');
        input.focus();
    } else {
        input.name = '';
        sel.name = 'category';
        wrap.classList.add('hidden');
    }
}
</script>
@endsection