@extends('layouts.app')

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

@section('title', $isRtl ? 'دفتر اليومية' : 'Journal')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('accounting.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 ? 'دفتر اليومية' : 'Journal' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl ? 'القيود المحاسبية' : 'Accounting journal entries' }}</p>
            </div>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('accounting.journal.create') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/20 transition-all">
                <i data-lucide="plus" class="w-5 h-5"></i>
                {{ $isRtl ? 'قيد جديد' : 'New Entry' }}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
            <p class="text-sm text-slate-500">{{ $isRtl ? 'إجمالي القيود' : 'Total Entries' }}</p>
            <p class="text-3xl font-black text-slate-800 mt-1">{{ $stats['total_entries'] ?? 0 }}</p>
        </div>
        <div class="bg-amber-50 rounded-3xl border-2 border-amber-200 p-6">
            <p class="text-sm text-amber-700">{{ $isRtl ? 'مسودات' : 'Draft' }}</p>
            <p class="text-3xl font-black text-amber-600 mt-1">{{ $stats['draft'] ?? 0 }}</p>
        </div>
        <div class="bg-emerald-50 rounded-3xl border-2 border-emerald-200 p-6">
            <p class="text-sm text-emerald-700">{{ $isRtl ? 'مرحّلة' : 'Posted' }}</p>
            <p class="text-3xl font-black text-emerald-600 mt-1">{{ $stats['posted'] ?? 0 }}</p>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الحالة' : 'Status' }}</label>
                <select name="status" class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                    <option value="">{{ $isRtl ? 'الكل' : 'All' }}</option>
                    <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>{{ $isRtl ? 'مسودة' : 'Draft' }}</option>
                    <option value="posted" {{ request('status') === 'posted' ? 'selected' : '' }}>{{ $isRtl ? 'مرحل' : 'Posted' }}</option>
                    <option value="reversed" {{ request('status') === 'reversed' ? 'selected' : '' }}>{{ $isRtl ? 'معكوس' : 'Reversed' }}</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'النوع' : 'Type' }}</label>
                <input type="text" name="type" value="{{ request('type') }}" placeholder="{{ $isRtl ? 'مثال: sale' : 'e.g. sale' }}"
                       class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'من' : 'From' }}</label>
                <input type="date" name="from_date" value="{{ request('from_date') }}"
                       class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
            </div>

            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'إلى' : 'To' }}</label>
                <input type="date" name="to_date" value="{{ request('to_date') }}"
                       class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
            </div>

            <div class="flex gap-3">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="filter" class="w-5 h-5"></i>
                    {{ $isRtl ? 'فلترة' : 'Filter' }}
                </button>
                <a href="{{ route('accounting.journal') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                    <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إعادة ضبط' : 'Reset' }}
                </a>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <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 ? 'رقم القيد' : 'Entry No.' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'التاريخ' : 'Date' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الوصف' : 'Description' }}</th>
                        <th class="text-{{ $isRtl ? 'left' : 'right' }} px-6 py-4 font-bold">{{ $isRtl ? 'الإجمالي' : 'Total' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'إجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($entries as $entry)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <a href="{{ route('accounting.journal.show', $entry) }}" class="font-mono font-bold text-slate-800 hover:text-emerald-700">
                                    {{ $entry->entry_number }}
                                </a>
                                <p class="text-xs text-slate-400 mt-1">{{ $entry->type }}</p>
                            </td>
                            <td class="px-6 py-4 text-sm text-slate-700">
                                {{ $entry->entry_date?->format('Y-m-d') ?? '—' }}
                            </td>
                            <td class="px-6 py-4">
                                <p class="font-semibold text-slate-800">{{ $entry->description }}</p>
                                <p class="text-xs text-slate-400 mt-1">{{ $isRtl ? 'بواسطة:' : 'By:' }} {{ $entry->createdBy->name ?? '—' }}</p>
                            </td>
                            <td class="px-6 py-4 text-{{ $isRtl ? 'left' : 'right' }}">
                                <p class="font-black text-slate-800">{{ number_format((float)$entry->total_debit, 2) }}</p>
                                <p class="text-xs text-slate-500">{{ $currency }}</p>
                            </td>
                            <td class="px-6 py-4 text-center">
                                @php
                                    $statusColors = [
                                        'draft' => 'bg-amber-100 text-amber-700',
                                        'posted' => 'bg-emerald-100 text-emerald-700',
                                        'reversed' => 'bg-rose-100 text-rose-700',
                                    ];
                                    $statusLabels = [
                                        'draft' => $isRtl ? 'مسودة' : 'Draft',
                                        'posted' => $isRtl ? 'مرحل' : 'Posted',
                                        'reversed' => $isRtl ? 'معكوس' : 'Reversed',
                                    ];
                                @endphp
                                <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $statusColors[$entry->status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $statusLabels[$entry->status] ?? $entry->status }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('accounting.journal.show', $entry) }}" class="p-2 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">
                                        <i data-lucide="eye" class="w-4 h-4 text-slate-600"></i>
                                    </a>

                                    @if($entry->status === 'draft')
                                        <form action="{{ route('accounting.journal.post', $entry) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'ترحيل القيد؟' : 'Post this entry?' }}')">
                                            @csrf
                                            <button type="submit" class="p-2 bg-emerald-100 hover:bg-emerald-200 rounded-xl transition-colors">
                                                <i data-lucide="check" class="w-4 h-4 text-emerald-700"></i>
                                            </button>
                                        </form>
                                    @endif

                                    @if($entry->status === 'posted')
                                        <button type="button" onclick="document.getElementById('reverse-{{ $entry->id }}').showModal()"
                                                class="p-2 bg-rose-100 hover:bg-rose-200 rounded-xl transition-colors">
                                            <i data-lucide="rotate-ccw" class="w-4 h-4 text-rose-700"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>

                        @if($entry->status === 'posted')
                            <dialog id="reverse-{{ $entry->id }}" class="rounded-2xl p-0 backdrop:bg-black/50">
                                <div class="p-6 w-[min(520px,calc(100vw-32px))]">
                                    <h3 class="font-black text-lg text-slate-800 mb-3">{{ $isRtl ? 'عكس القيد' : 'Reverse Entry' }}</h3>
                                    <p class="text-sm text-slate-500 mb-4">{{ $entry->entry_number }} — {{ $entry->description }}</p>
                                    <form action="{{ route('accounting.journal.reverse', $entry) }}" method="POST" class="space-y-4">
                                        @csrf
                                        <textarea name="reason" rows="3" required
                                                  class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-rose-500 focus:ring-4 focus:ring-rose-500/10 outline-none transition-all resize-none"
                                                  placeholder="{{ $isRtl ? 'سبب العكس...' : 'Reason...' }}"></textarea>
                                        <div class="flex gap-2">
                                            <button type="button" onclick="this.closest('dialog').close()"
                                                    class="flex-1 px-4 py-2 border border-slate-200 rounded-xl text-slate-700 hover:bg-slate-50">
                                                {{ $isRtl ? 'إلغاء' : 'Cancel' }}
                                            </button>
                                            <button type="submit" class="flex-1 px-4 py-2 bg-rose-600 text-white rounded-xl hover:bg-rose-700">
                                                {{ $isRtl ? 'عكس' : 'Reverse' }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </dialog>
                        @endif
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center">
                                <div class="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                    <i data-lucide="book-open" class="w-8 h-8 text-slate-400"></i>
                                </div>
                                <p class="text-slate-500">{{ $isRtl ? 'لا توجد قيود' : 'No entries found' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($entries->hasPages())
            <div class="px-6 py-4 border-t-2 border-slate-200">
                {{ $entries->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>
@endsection