@extends('layouts.app')

@section('title', 'إنشاء فاتورة مبيعات')
@section('page_title', 'إنشاء فاتورة مبيعات ضريبية')

@section('content')
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm max-w-5xl"
      x-data="{
        items: [
            { product_id: '', quantity: 1, price: 0 }
        ],
        products: @json($products),
        taxRate: {{ $tenant->tax_rate }},
        addItem() {
            this.items.push({ product_id: '', quantity: 1, price: 0 });
        },
        removeItem(index) {
            if (this.items.length > 1) {
                this.items.splice(index, 1);
            }
        },
        updatePrice(item) {
            const prod = this.products.find(p => p.id == item.product_id);
            if (prod) {
                item.price = parseFloat(prod.sale_price);
            } else {
                item.price = 0;
            }
        },
        get subtotal() {
            return this.items.reduce((sum, item) => sum + (parseFloat(item.quantity || 0) * parseFloat(item.price || 0)), 0);
        },
        get taxAmount() {
            return this.subtotal * (this.taxRate / 100);
        },
        get total() {
            return this.subtotal + this.taxAmount;
        }
     }">

    <div class="mb-6">
        <h3 class="font-extrabold text-slate-800 dark:text-white text-base">فاتورة مبيعات جديدة</h3>
        <p class="text-xs text-slate-400 mt-1">يحتسب النظام ضريبة القيمة المضافة بنسبة {{ number_format($tenant->tax_rate, 2) }}% تلقائياً ويولد قيود اليومية للعهد أو مديونيات العملاء فور الحفظ</p>
    </div>

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

        <!-- General Info -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">العميل</label>
                <select name="customer_id" required class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
                    <option value="">-- اختر العميل --</option>
                    @foreach($customers as $cust)
                        <option value="{{ $cust->id }}">{{ $cust->name }} (الرصيد الحالي: {{ number_format($cust->balance, 2) }} {{ $tenant->currency }})</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">طريقة الدفع</label>
                <select name="payment_method" required class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
                    <option value="credit">آجل (على الحساب)</option>
                    <option value="cash">نقداً (خزينة رئيسية)</option>
                    <option value="bank">تحويل بنكي</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">تاريخ الفاتورة</label>
                <input type="date" name="invoice_date" required value="{{ date('Y-m-d') }}"
                       class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">تاريخ الاستحقاق</label>
                <input type="date" name="due_date" required value="{{ date('Y-m-d', strtotime('+30 days')) }}"
                       class="w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
            </div>
        </div>

        <!-- Invoice Items Table -->
        <div class="overflow-x-auto rounded-2xl border border-slate-100 dark:border-slate-700/40">
            <table class="w-full text-right text-xs">
                <thead class="bg-slate-50 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 font-bold border-b border-slate-100 dark:border-slate-700/40">
                    <tr>
                        <th class="p-4 w-1/2">المنتج السلعي / المتاح بالمخازن</th>
                        <th class="p-4 w-1/6">الكمية</th>
                        <th class="p-4 w-1/6">سعر الوحدة</th>
                        <th class="p-4 text-left w-1/6">الإجمالي الفرعي</th>
                        <th class="p-4 text-center w-12">إجراء</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700/40">
                    <template x-for="(item, index) in items" :key="index">
                        <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-700/10">
                            <!-- Product select -->
                            <td class="p-3">
                                <select :name="'items['+index+'][product_id]'" x-model="item.product_id" @change="updatePrice(item)" required
                                        class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-slate-800 dark:text-white">
                                    <option value="">-- اختر المنتج --</option>
                                    <template x-for="p in products" :key="p.id">
                                        <option :value="p.id" x-text="p.name + ' (المتاح: ' + p.stock_quantity + ' ' + p.unit + ')'"></option>
                                    </template>
                                </select>
                            </td>

                            <!-- Quantity -->
                            <td class="p-3">
                                <input type="number" step="0.01" min="0.01" :name="'items['+index+'][quantity]'" x-model.number="item.quantity" required
                                       class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-left font-mono text-slate-800 dark:text-white">
                            </td>

                            <!-- Sale Price -->
                            <td class="p-3">
                                <input type="number" step="0.01" min="0" :name="'items['+index+'][price]'" x-model.number="item.price" required
                                       class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs outline-none focus:ring-1 focus:ring-primary-500 text-left font-mono text-slate-800 dark:text-white">
                            </td>

                            <!-- Line subtotal -->
                            <td class="p-3 text-left font-mono font-semibold text-slate-700 dark:text-slate-300">
                                <span x-text="((item.quantity || 0) * (item.price || 0)).toFixed(2)">0.00</span> {{ $tenant->currency }}
                            </td>

                            <!-- Remove item btn -->
                            <td class="p-3 text-center">
                                <button type="button" @click="removeItem(index)" :disabled="items.length <= 1"
                                        class="text-red-500 hover:text-red-600 disabled:text-slate-300 dark:disabled:text-slate-600 text-sm">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- Add item trigger -->
        <div>
            <button type="button" @click="addItem" class="inline-flex items-center gap-2 px-3 py-2 border border-dashed border-primary-500 hover:bg-primary-50 dark:hover:bg-primary-950/20 text-primary-500 rounded-xl text-xs font-bold transition-all">
                <i class="fa-solid fa-plus"></i> إضافة سطر جديد للفاتورة
            </button>
        </div>

        <!-- Totals summary block -->
        <div class="flex justify-end pt-4">
            <div class="w-80 bg-slate-50 dark:bg-slate-700/40 border border-slate-100 dark:border-slate-600/30 rounded-2xl p-4 space-y-3.5 text-xs text-slate-500 dark:text-slate-400">
                <div class="flex items-center justify-between">
                    <span>الإجمالي الخاضع للضريبة:</span>
                    <span class="font-mono font-bold text-slate-800 dark:text-white"><span x-text="subtotal.toFixed(2)">0.00</span> {{ $tenant->currency }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span>ضريبة القيمة المضافة (<span x-text="taxRate"></span>%):</span>
                    <span class="font-mono font-bold text-slate-800 dark:text-white"><span x-text="taxAmount.toFixed(2)">0.00</span> {{ $tenant->currency }}</span>
                </div>
                <div class="flex items-center justify-between font-bold text-sm text-slate-800 dark:text-white pt-2.5 border-t border-dashed border-slate-200 dark:border-slate-600">
                    <span>المبلغ المستحق النهائي:</span>
                    <span class="font-mono text-primary-600 dark:text-primary-400"><span x-text="total.toFixed(2)">0.00</span> {{ $tenant->currency }}</span>
                </div>
            </div>
        </div>

        <!-- Action buttons -->
        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('sales.invoices') }}" class="px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-2xl text-xs font-bold transition-all">إلغاء</a>
            <button type="submit"
                    class="px-5 py-3 bg-primary-600 hover:bg-primary-500 text-white rounded-2xl text-xs font-bold shadow-md shadow-primary-500/10 hover:shadow-primary-500/20 transition-all">
                تأكيد الفاتورة والترحيل الفوري
            </button>
        </div>
    </form>
</div>
@endsection