@extends('layouts.app')

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

@section('title', $isRtl ? 'قيد جديد' : 'New Journal Entry')

@section('content')
<div class="max-w-6xl mx-auto space-y-8"
     x-data="{
        lines: [
            { account_id: '', debit: '', credit: '', description: '' },
            { account_id: '', debit: '', credit: '', description: '' },
        ],
        addLine() { this.lines.push({ account_id: '', debit: '', credit: '', description: '' }); },
        removeLine(i) { if (this.lines.length > 2) this.lines.splice(i, 1); },
        totalDebit() { return this.lines.reduce((t, l) => t + (parseFloat(l.debit) || 0), 0); },
        totalCredit() { return this.lines.reduce((t, l) => t + (parseFloat(l.credit) || 0), 0); },
        balanced() { return Math.abs(this.totalDebit() - this.totalCredit()) < 0.0001; }
     }">

    <div class="flex items-center gap-3">
        <a href="{{ route('accounting.journal') }}" 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 Journal Entry' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'يجب أن يكون مجموع المدين = مجموع الدائن' : 'Total debit must equal total credit' }}</p>
        </div>
    </div>

    <form action="{{ route('accounting.journal.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">
            <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 ? 'تاريخ القيد' : 'Entry Date' }} *</label>
                    <input type="date" name="entry_date" required value="{{ old('entry_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 ? 'النوع' : 'Type' }} *</label>
                    <input type="text" name="type" required value="{{ old('type', 'manual') }}"
                           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"
                           placeholder="{{ $isRtl ? 'مثال: manual' : 'e.g. manual' }}">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'المرجع' : 'Reference' }}</label>
                    <input type="text" name="reference" value="{{ old('reference') }}"
                           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 ? 'الوصف' : 'Description' }} *</label>
                    <input type="text" name="description" required value="{{ old('description') }}"
                           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 ? 'ملاحظات' : 'Notes' }}</label>
                <textarea name="notes" rows="2"
                          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>

        <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 ? 'بنود القيد' : 'Entry Lines' }}</h2>
                    <p class="text-slate-500 text-sm mt-1">{{ $isRtl ? 'أضف على الأقل سطرين' : 'Add at least 2 lines' }}</p>
                </div>
                <button type="button" @click="addLine()"
                        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-5 h-5"></i>
                    {{ $isRtl ? 'إضافة سطر' : 'Add Line' }}
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-100 text-slate-700 text-sm">
                        <tr>
                            <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الحساب' : 'Account' }}</th>
                            <th class="text-{{ $isRtl ? 'left' : 'right' }} px-6 py-4 font-bold">{{ $isRtl ? 'مدين' : 'Debit' }}</th>
                            <th class="text-{{ $isRtl ? 'left' : 'right' }} px-6 py-4 font-bold">{{ $isRtl ? 'دائن' : 'Credit' }}</th>
                            <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الوصف' : 'Description' }}</th>
                            <th class="px-6 py-4"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <template x-for="(line, index) in lines" :key="index">
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 min-w-[260px]">
                                    <select required x-model="line.account_id" :name="`lines[${index}][account_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 ? 'اختر الحساب' : 'Select account' }}</option>
                                        @foreach($accounts as $acc)
                                            <option value="{{ $acc->id }}">{{ $acc->code }} - {{ $isRtl ? ($acc->name_ar ?: $acc->name) : $acc->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="relative min-w-[140px]">
                                        <input type="number" step="0.01" min="0" x-model="line.debit" :name="`lines[${index}][debit]`"
                                               class="w-full {{ $isRtl ? 'pl-14' : 'pr-14' }} 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">
                                    <div class="relative min-w-[140px]">
                                        <input type="number" step="0.01" min="0" x-model="line.credit" :name="`lines[${index}][credit]`"
                                               class="w-full {{ $isRtl ? 'pl-14' : 'pr-14' }} 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 min-w-[260px]">
                                    <input type="text" x-model="line.description" :name="`lines[${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"
                                           placeholder="{{ $isRtl ? 'اختياري' : 'Optional' }}">
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <button type="button" @click="removeLine(index)" :disabled="lines.length <= 2"
                                            class="p-2 rounded-xl transition-colors"
                                            :class="lines.length <= 2 ? 'bg-slate-100 text-slate-400 cursor-not-allowed' : 'bg-rose-100 hover:bg-rose-200 text-rose-700'">
                                        <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 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="text-sm">
                    <p class="text-slate-600">
                        {{ $isRtl ? 'إجمالي المدين:' : 'Total Debit:' }}
                        <span class="font-black text-slate-800" x-text="totalDebit().toFixed(2)"></span>
                        <span class="text-xs text-slate-500">{{ $currency }}</span>
                    </p>
                    <p class="text-slate-600 mt-1">
                        {{ $isRtl ? 'إجمالي الدائن:' : 'Total Credit:' }}
                        <span class="font-black text-slate-800" x-text="totalCredit().toFixed(2)"></span>
                        <span class="text-xs text-slate-500">{{ $currency }}</span>
                    </p>
                </div>
                <div class="px-4 py-3 rounded-2xl border"
                     :class="balanced() ? 'bg-emerald-50 border-emerald-200 text-emerald-700' : 'bg-rose-50 border-rose-200 text-rose-700'">
                    <span class="font-bold" x-text="balanced() ? '{{ $isRtl ? 'متوازن' : 'Balanced' }}' : '{{ $isRtl ? 'غير متوازن' : 'Not balanced' }}'"></span>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('accounting.journal') }}" 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"
                    :disabled="!balanced()"
                    :class="!balanced() ? 'opacity-50 cursor-not-allowed' : ''">
                <i data-lucide="check" class="w-5 h-5"></i>
                {{ $isRtl ? 'حفظ القيد' : 'Save Entry' }}
            </button>
        </div>
    </form>
</div>
@endsection