@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="{ 
        lines: [
            { account_id: '', debit: 0, credit: 0, description: '' },
            { account_id: '', debit: 0, credit: 0, description: '' }
        ],
        addLine() {
            this.lines.push({ account_id: '', debit: 0, credit: 0, description: '' });
        },
        removeLine(index) {
            if (this.lines.length > 2) {
                this.lines.splice(index, 1);
            }
        },
        get totalDebit() {
            return this.lines.reduce((sum, line) => sum + parseFloat(line.debit || 0), 0);
        },
        get totalCredit() {
            return this.lines.reduce((sum, line) => sum + parseFloat(line.credit || 0), 0);
        },
        get isBalanced() {
            return Math.abs(this.totalDebit - this.totalCredit) < 0.001 && this.totalDebit > 0;
        }
     }">

    <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">يجب أن يتطابق إجمالي الطرف المدين مع إجمالي الطرف الدائن لترحيل القيد بنجاح</p>
    </div>

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

        <!-- General Data -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 mb-2">تاريخ القيد</label>
                <input type="date" name="entry_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-2xl text-xs focus:ring-1 focus:ring-primary-500 outline-none 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="text" name="description" required placeholder="مثال: تسوية مصاريف مكتبية نقدية أو إثبات عهدة مالية"
                       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-2xl text-xs focus:ring-1 focus:ring-primary-500 outline-none text-slate-800 dark:text-white">
            </div>
        </div>

        <!-- Journal Voucher Lines 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/3">الحساب المالي</th>
                        <th class="p-4 w-1/6">مدين (+)</th>
                        <th class="p-4 w-1/6">دائن (-)</th>
                        <th class="p-4 w-1/4">البيان الفرعي</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="(line, index) in lines" :key="index">
                        <tr class="hover:bg-slate-50/30 dark:hover:bg-slate-700/10">
                            <!-- Account select -->
                            <td class="p-3">
                                <select :name="'lines['+index+'][account_id]'" x-model="line.account_id" 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>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} - {{ $account->name }} ({{ $account->type === 'asset' || $account->type === 'expense' ? 'طبيعة مدينة' : 'طبيعة دائنة' }})</option>
                                    @endforeach
                                </select>
                            </td>

                            <!-- Debit input -->
                            <td class="p-3">
                                <input type="number" step="0.01" min="0" :name="'lines['+index+'][debit]'" x-model.number="line.debit"
                                       @input="if(line.debit > 0) line.credit = 0"
                                       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" placeholder="0.00">
                            </td>

                            <!-- Credit input -->
                            <td class="p-3">
                                <input type="number" step="0.01" min="0" :name="'lines['+index+'][credit]'" x-model.number="line.credit"
                                       @input="if(line.credit > 0) line.debit = 0"
                                       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" placeholder="0.00">
                            </td>

                            <!-- Line description -->
                            <td class="p-3">
                                <input type="text" :name="'lines['+index+'][description]'" x-model="line.description"
                                       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" placeholder="تفاصيل المعاملة السطرية">
                            </td>

                            <!-- Remove btn -->
                            <td class="p-3 text-center">
                                <button type="button" @click="removeLine(index)" :disabled="lines.length <= 2"
                                        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 Row trigger -->
        <div>
            <button type="button" @click="addLine" 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 & Balancer Alerts -->
        <div class="p-4 bg-slate-50 dark:bg-slate-700/40 border border-slate-100 dark:border-slate-600/30 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-6 text-xs">
                <div>
                    <span class="text-slate-400 font-bold">إجمالي المدين:</span>
                    <span class="font-mono font-bold text-slate-800 dark:text-white mr-1.5" x-text="totalDebit.toFixed(2)">0.00</span> <span class="text-slate-400">ر.س</span>
                </div>
                <div>
                    <span class="text-slate-400 font-bold">إجمالي الدائن:</span>
                    <span class="font-mono font-bold text-slate-800 dark:text-white mr-1.5" x-text="totalCredit.toFixed(2)">0.00</span> <span class="text-slate-400">ر.س</span>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <template x-if="isBalanced">
                    <span class="bg-emerald-500/10 text-emerald-500 text-xs px-3 py-1.5 rounded-full font-bold border border-emerald-500/20"><i class="fa-solid fa-circle-check mr-1.5"></i>القيد متوازن وجاهز للترحيل</span>
                </template>
                <template x-if="!isBalanced">
                    <span class="bg-red-500/10 text-red-500 text-xs px-3 py-1.5 rounded-full font-bold border border-red-500/20"><i class="fa-solid fa-triangle-exclamation mr-1.5"></i>القيد غير متوازن، الفرق: <span x-text="Math.abs(totalDebit - totalCredit).toFixed(2)">0.00</span> ر.س</span>
                </template>
            </div>
        </div>

        <!-- Submit btn -->
        <div class="flex items-center justify-end gap-3 pt-4">
            <a href="{{ route('accounting.journals') }}" 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" :disabled="!isBalanced"
                    class="px-5 py-3 bg-primary-600 hover:bg-primary-500 disabled:bg-slate-300 dark:disabled:bg-slate-700 text-white rounded-2xl text-xs font-bold shadow-md shadow-primary-500/10 hover:shadow-primary-500/20 disabled:shadow-none transition-all">
                ترحيل القيد محاسبياً
            </button>
        </div>
    </form>
</div>
@endsection