@extends('layouts.app')

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

@section('title', $isRtl ? 'المصروفات' : 'Expenses')

@section('content')
<div class="space-y-8">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'المصروفات' : 'Expenses' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'تسجيل وإدارة المصروفات' : 'Record and manage expenses' }}</p>
        </div>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('expenses.categories') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="folder" class="w-5 h-5"></i>
                {{ $isRtl ? 'التصنيفات' : 'Categories' }}
            </a>
            <a href="{{ route('expenses.report') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
                {{ $isRtl ? 'تقرير' : 'Report' }}
            </a>
            <a href="{{ route('expenses.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 Expense' }}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg: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 ? 'إجمالي هذا الشهر' : 'This Month' }}</p>
            <p class="text-3xl font-black text-slate-800 mt-1">{{ number_format((float)($stats['total_this_month'] ?? 0), 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
        </div>
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
            <p class="text-sm text-slate-500">{{ $isRtl ? 'إجمالي الشهر الماضي' : 'Last Month' }}</p>
            <p class="text-3xl font-black text-slate-800 mt-1">{{ number_format((float)($stats['total_last_month'] ?? 0), 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
        </div>
        <div class="bg-rose-50 rounded-3xl border-2 border-rose-200 p-6">
            <p class="text-sm text-rose-700">{{ $isRtl ? 'عدد المصروفات' : 'Expenses Count' }}</p>
            <p class="text-3xl font-black text-rose-700 mt-1">{{ $expenses->total() }}</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 class="min-w-[220px]">
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'التصنيف' : 'Category' }}</label>
                <select name="category_id" class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                    <option value="">{{ $isRtl ? 'الكل' : 'All' }}</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ (string)request('category_id') === (string)$cat->id ? 'selected' : '' }}>
                            {{ $isRtl && $cat->name_ar ? $cat->name_ar : $cat->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'من' : 'From' }}</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                       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="date_to" value="{{ request('date_to') }}"
                       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('expenses.index') }}" 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 ? 'التاريخ' : 'Date' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'العنوان' : 'Title' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'التصنيف' : 'Category' }}</th>
                        <th class="text-{{ $isRtl ? 'left' : 'right' }} px-6 py-4 font-bold">{{ $isRtl ? 'المبلغ' : 'Amount' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الطريقة' : 'Method' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'إجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($expenses as $expense)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4 text-sm text-slate-700">{{ $expense->expense_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="px-6 py-4">
                                <a href="{{ route('expenses.show', $expense) }}" class="font-bold text-slate-800 hover:text-emerald-700">
                                    {{ $expense->title }}
                                </a>
                                @if($expense->description)
                                    <p class="text-xs text-slate-400 mt-1 line-clamp-1">{{ $expense->description }}</p>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-slate-700">
                                <span class="px-3 py-1.5 rounded-full text-xs font-bold"
                                      style="background-color: {{ ($expense->category->color ?? '#e2e8f0') }}20; color: {{ $expense->category->color ?? '#334155' }};">
                                    {{ $isRtl && ($expense->category->name_ar ?? null) ? $expense->category->name_ar : ($expense->category->name ?? '—') }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-{{ $isRtl ? 'left' : 'right' }}">
                                <span class="font-black text-slate-800">{{ number_format((float)$expense->amount, 2) }}</span>
                                <span class="text-xs text-slate-500">{{ $currency }}</span>
                            </td>
                            <td class="px-6 py-4 text-sm text-slate-700">{{ $expense->payment_method }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('expenses.show', $expense) }}" 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>
                                    <a href="{{ route('expenses.edit', $expense) }}" class="p-2 bg-blue-100 hover:bg-blue-200 rounded-xl transition-colors">
                                        <i data-lucide="pencil" class="w-4 h-4 text-blue-700"></i>
                                    </a>
                                    <form action="{{ route('expenses.destroy', $expense) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'حذف المصروف؟' : 'Delete this expense?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 bg-rose-100 hover:bg-rose-200 rounded-xl transition-colors">
                                            <i data-lucide="trash-2" class="w-4 h-4 text-rose-700"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @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="receipt" class="w-8 h-8 text-slate-400"></i>
                                </div>
                                <p class="text-slate-500">{{ $isRtl ? 'لا توجد مصروفات' : 'No expenses found' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    @if(isset($stats['by_category']) && is_iterable($stats['by_category']))
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8">
            <h2 class="text-xl font-black text-slate-800 mb-5">{{ $isRtl ? 'حسب التصنيف (هذا الشهر)' : 'By Category (This Month)' }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($stats['by_category'] as $c)
                    <div class="p-5 rounded-2xl border border-slate-200 bg-slate-50">
                        <div class="flex items-center justify-between gap-4">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-10 h-10 rounded-xl" style="background-color: {{ ($c['color'] ?? '#e2e8f0') }}20;"></div>
                                <p class="font-bold text-slate-800 truncate">{{ $c['name'] ?? '—' }}</p>
                            </div>
                            <p class="font-black text-slate-800">{{ number_format((float)($c['total'] ?? 0), 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>
@endsection