@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $currency = \App\Models\Setting::currencyLabel($locale);

    $productsData = $products->map(fn ($p) => [
        'id' => $p->id,
        'name' => $isRtl && $p->name_ar ? $p->name_ar : $p->name,
        'price' => (float) $p->selling_price,
    ])->values();

    $plansData = $plans->map(fn ($pl) => [
        'id' => $pl->id,
        'name' => $isRtl && $pl->name_ar ? $pl->name_ar : $pl->name,
        'price' => (float) $pl->price,
    ])->values();

    $defaultItems = [
        ['product_id' => '', 'membership_plan_id' => '', 'description' => '', 'quantity' => 1, 'unit_price' => 0],
    ];
@endphp

@section('title', $isRtl ? 'فاتورة جديدة' : 'New Invoice')

@section('content')
<div class="max-w-6xl mx-auto space-y-8"
     x-data="{
        products: @json($productsData),
        plans: @json($plansData),
        items: @json(old('items', $defaultItems)),
        discount_percent: @json(old('discount_percent', 0)),
        tax_rate: @json(old('tax_rate', $taxRate)),
        addItem() {
            this.items.push({ product_id: '', membership_plan_id: '', description: '', quantity: 1, unit_price: 0 });
            this.$nextTick(() => window.lucide && lucide.createIcons());
        },
        removeItem(i) {
            if (this.items.length <= 1) return;
            this.items.splice(i, 1);
        },
        onProduct(i) {
            const id = this.items[i].product_id;
            if (!id) return;
            const p = this.products.find(x => String(x.id) === String(id));
            if (!p) return;
            this.items[i].membership_plan_id = '';
            if (!this.items[i].description) this.items[i].description = p.name;
            this.items[i].unit_price = p.price ?? 0;
        },
        onPlan(i) {
            const id = this.items[i].membership_plan_id;
            if (!id) return;
            const pl = this.plans.find(x => String(x.id) === String(id));
            if (!pl) return;
            this.items[i].product_id = '';
            if (!this.items[i].description) this.items[i].description = pl.name;
            this.items[i].unit_price = pl.price ?? 0;
        },
        subtotal() {
            return this.items.reduce((t, it) => t + (parseFloat(it.quantity) || 0) * (parseFloat(it.unit_price) || 0), 0);
        },
        discountAmount() {
            return this.subtotal() * ((parseFloat(this.discount_percent) || 0) / 100);
        },
        taxable() {
            return this.subtotal() - this.discountAmount();
        },
        taxAmount() {
            return this.taxable() * ((parseFloat(this.tax_rate) || 0) / 100);
        },
        total() {
            return this.taxable() + this.taxAmount();
        }
     }">

    <div class="flex items-center gap-3">
        <a href="{{ route('invoices.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
            <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
        </a>
        <div>
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'إنشاء فاتورة' : 'Create Invoice' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'إنشاء فاتورة مبيعات/اشتراك/خدمة' : 'Create a sale/subscription/service invoice' }}</p>
        </div>
    </div>

    <form action="{{ route('invoices.store') }}" method="POST" class="space-y-8">
        @csrf

        @if($errors->any())
            <div class="bg-rose-50 border-2 border-rose-200 rounded-3xl p-6 text-rose-700">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-5 h-5 text-white"></i>
                    </div>
                    <p class="font-bold">{{ $isRtl ? 'يرجى تصحيح الأخطاء التالية:' : 'Please fix the following errors:' }}</p>
                </div>
                <ul class="list-disc {{ $isRtl ? 'pr-6' : 'pl-6' }} space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'معلومات الفاتورة' : 'Invoice Details' }}</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'النوع' : 'Type' }} *</label>
                    <select name="type" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="sale" {{ old('type', 'sale') === 'sale' ? 'selected' : '' }}>{{ $isRtl ? 'مبيعات' : 'Sale' }}</option>
                        <option value="subscription" {{ old('type') === 'subscription' ? 'selected' : '' }}>{{ $isRtl ? 'اشتراك' : 'Subscription' }}</option>
                        <option value="service" {{ old('type') === 'service' ? 'selected' : '' }}>{{ $isRtl ? 'خدمة' : 'Service' }}</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'العضو (اختياري)' : 'Member (optional)' }}</label>
                    <select name="member_id"
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="">{{ $isRtl ? 'بدون عضو' : 'No member' }}</option>
                        @foreach($members as $m)
                            <option value="{{ $m->id }}" {{ old('member_id') == $m->id ? 'selected' : '' }}>
                                {{ $m->full_name }} - {{ $m->member_id }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ الفاتورة' : 'Invoice Date' }} *</label>
                    <input type="date" name="invoice_date" required value="{{ old('invoice_date', now()->format('Y-m-d')) }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ الاستحقاق' : 'Due Date' }}</label>
                    <input type="date" name="due_date" value="{{ old('due_date') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'اسم العميل (غير عضو)' : 'Customer name (non-member)' }}</label>
                    <input type="text" name="customer_name" value="{{ old('customer_name') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'رقم الهاتف' : 'Phone' }}</label>
                    <input type="text" name="customer_phone" value="{{ old('customer_phone') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'البريد الإلكتروني' : 'Email' }}</label>
                    <input type="email" name="customer_email" value="{{ old('customer_email') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الرقم الضريبي' : 'Tax number' }}</label>
                    <input type="text" name="customer_tax_number" value="{{ old('customer_tax_number') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'العنوان' : 'Address' }}</label>
                <input type="text" name="customer_address" value="{{ old('customer_address') }}"
                       class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
            </div>
        </div>

        <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
            <div class="p-6 border-b-2 border-slate-200 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'بنود الفاتورة' : 'Invoice Items' }}</h2>
                    <p class="text-slate-500 text-sm mt-1">{{ $isRtl ? 'أضف منتج/خطة أو أدخل وصفاً وسعراً' : 'Pick product/plan or enter a custom description and price' }}</p>
                </div>
                <button type="button" @click="addItem()"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    {{ $isRtl ? 'إضافة بند' : 'Add item' }}
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-50 border-b-2 border-slate-200">
                        <tr class="text-sm font-bold text-slate-700">
                            <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }}">{{ $isRtl ? 'المنتج' : 'Product' }}</th>
                            <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }}">{{ $isRtl ? 'الخطة' : 'Plan' }}</th>
                            <th class="px-6 py-4 text-{{ $isRtl ? 'right' : 'left' }}">{{ $isRtl ? 'الوصف' : 'Description' }} *</th>
                            <th class="px-6 py-4 text-center">{{ $isRtl ? 'الكمية' : 'Qty' }} *</th>
                            <th class="px-6 py-4 text-center">{{ $isRtl ? 'سعر الوحدة' : 'Unit price' }} *</th>
                            <th class="px-6 py-4 text-center">{{ $isRtl ? 'الإجمالي' : 'Total' }}</th>
                            <th class="px-6 py-4 text-center">{{ $isRtl ? 'حذف' : 'Remove' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <template x-for="(item, index) in items" :key="index">
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 min-w-[240px]">
                                    <select x-model="item.product_id" @change="onProduct(index)" :name="`items[${index}][product_id]`"
                                            class="w-full px-3 py-2 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                                        <option value="">{{ $isRtl ? '—' : '—' }}</option>
                                        <template x-for="p in products" :key="p.id">
                                            <option :value="p.id" x-text="p.name"></option>
                                        </template>
                                    </select>
                                </td>
                                <td class="px-6 py-4 min-w-[220px]">
                                    <select x-model="item.membership_plan_id" @change="onPlan(index)" :name="`items[${index}][membership_plan_id]`"
                                            class="w-full px-3 py-2 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                                        <option value="">{{ $isRtl ? '—' : '—' }}</option>
                                        <template x-for="pl in plans" :key="pl.id">
                                            <option :value="pl.id" x-text="pl.name"></option>
                                        </template>
                                    </select>
                                </td>
                                <td class="px-6 py-4 min-w-[320px]">
                                    <input type="text" required x-model="item.description" :name="`items[${index}][description]`"
                                           class="w-full px-3 py-2 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <input type="number" min="1" step="1" required x-model="item.quantity" :name="`items[${index}][quantity]`"
                                           class="w-24 text-center px-3 py-2 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="relative w-40 mx-auto">
                                        <input type="number" min="0" step="0.01" required x-model="item.unit_price" :name="`items[${index}][unit_price]`"
                                               class="w-full {{ $isRtl ? 'pl-14' : 'pr-14' }} text-center px-3 py-2 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                                        <span class="absolute {{ $isRtl ? 'left-3' : 'right-3' }} top-1/2 -translate-y-1/2 text-xs font-bold text-slate-500">{{ $currency }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center font-black text-slate-800 whitespace-nowrap">
                                    <span x-text="(((parseFloat(item.quantity)||0)*(parseFloat(item.unit_price)||0))).toFixed(2)"></span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <button type="button" @click="removeItem(index)"
                                            class="p-2 rounded-xl transition-colors"
                                            :class="items.length <= 1 ? 'bg-slate-100 text-slate-400 cursor-not-allowed' : 'bg-rose-100 hover:bg-rose-200 text-rose-700'"
                                            :disabled="items.length <= 1">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <div class="p-6 border-t-2 border-slate-200 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'خصم (%)' : 'Discount (%)' }}</label>
                        <input type="number" name="discount_percent" min="0" max="100" step="0.01" x-model="discount_percent"
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الضريبة (%)' : 'Tax rate (%)' }} *</label>
                        <input type="number" name="tax_rate" min="0" step="0.01" required x-model="tax_rate"
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                    </div>
                </div>

                <div class="bg-slate-50 rounded-2xl border border-slate-200 p-5 space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-slate-600">{{ $isRtl ? 'المجموع الفرعي' : 'Subtotal' }}</span>
                        <span class="font-black text-slate-800"><span x-text="subtotal().toFixed(2)"></span> <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-600">{{ $isRtl ? 'الخصم' : 'Discount' }}</span>
                        <span class="font-black text-slate-800"><span x-text="discountAmount().toFixed(2)"></span> <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-600">{{ $isRtl ? 'الضريبة' : 'Tax' }}</span>
                        <span class="font-black text-slate-800"><span x-text="taxAmount().toFixed(2)"></span> <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                    </div>
                    <div class="flex justify-between pt-2 border-t border-slate-200">
                        <span class="font-black text-slate-900">{{ $isRtl ? 'الإجمالي' : 'Total' }}</span>
                        <span class="font-black text-slate-900 text-lg"><span x-text="total().toFixed(2)"></span> <span class="text-xs text-slate-500">{{ $currency }}</span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'ملاحظات وشروط' : 'Notes & Terms' }}</h2>
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'ملاحظات' : 'Notes' }}</label>
                <textarea name="notes" rows="3"
                          class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('notes') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الشروط' : 'Terms' }}</label>
                <textarea name="terms" rows="3"
                          class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('terms') }}</textarea>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('invoices.index') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                {{ $isRtl ? 'إلغاء' : 'Cancel' }}
            </a>
            <button type="submit" class="px-7 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/20 transition-all inline-flex items-center gap-2">
                <i data-lucide="check" class="w-5 h-5"></i>
                {{ $isRtl ? 'حفظ الفاتورة' : 'Save Invoice' }}
            </button>
        </div>
    </form>
</div>
@endsection