@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-semibold text-gray-700 flex items-center">
            <i class="fas fa-hands-helping text-blue-500 mr-3"></i> Social Fund Expenses
        </h2>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-br from-red-500 to-red-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Total Withdrawals</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($totalExpenses, 2) }}</p>
                </div>
                <i class="fas fa-money-bill-wave text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">{{ $totalCount }} transactions</p>
        </div>

        <div class="bg-gradient-to-br from-purple-600 to-purple-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Rambirambi</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($summary['rambirambi']->total ?? 0, 2) }}</p>
                </div>
                <i class="fas fa-dove text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">{{ $summary['rambirambi']->count ?? 0 }} payouts &middot; bereavement</p>
        </div>

        <div class="bg-gradient-to-br from-emerald-600 to-emerald-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Baraka ya Watoto</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($summary['baraka_ya_watoto']->total ?? 0, 2) }}</p>
                </div>
                <i class="fas fa-baby text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">{{ $summary['baraka_ya_watoto']->count ?? 0 }} payouts &middot; child blessing</p>
        </div>

        <div class="bg-gradient-to-br from-amber-500 to-amber-400 text-white p-6 rounded-2xl shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm opacity-90">Meeting Expenses</p>
                    <p class="text-2xl font-bold mt-1">{{ number_format($summary['meeting_expense']->total ?? 0, 2) }}</p>
                </div>
                <i class="fas fa-users text-3xl opacity-75"></i>
            </div>
            <p class="text-xs mt-3 opacity-80">{{ $summary['meeting_expense']->count ?? 0 }} entries</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300 mb-6">
        <form method="GET" action="{{ route('expenses.index') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-search text-gray-400 mr-1"></i> Search
                </label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Name, occasion, description..."
                    class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-filter text-gray-400 mr-1"></i> Category
                </label>
                <select name="category" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All categories</option>
                    <option value="rambirambi" @selected(request('category') === 'rambirambi')>Rambirambi</option>
                    <option value="baraka_ya_watoto" @selected(request('category') === 'baraka_ya_watoto')>Baraka ya Watoto</option>
                    <option value="meeting_expense" @selected(request('category') === 'meeting_expense')>Meeting Expense</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-alt text-gray-400 mr-1"></i> From
                </label>
                <input type="date" name="start_date" value="{{ request('start_date') }}"
                    class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-alt text-gray-400 mr-1"></i> To
                </label>
                <input type="date" name="end_date" value="{{ request('end_date') }}"
                    class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div class="md:col-span-5 flex justify-end gap-2 pt-2">
                @if(request()->anyFilled(['search','category','start_date','end_date']))
                    <a href="{{ route('expenses.index') }}"
                        class="bg-gray-200 text-gray-700 px-5 py-2.5 rounded-full hover:bg-gray-300 transition flex items-center">
                        <i class="fas fa-times mr-2"></i> Clear
                    </a>
                @endif
                <button type="submit"
                    class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2.5 rounded-full shadow-md hover:from-blue-700 hover:to-blue-600 transition flex items-center">
                    <i class="fas fa-search mr-2"></i> Apply Filters
                </button>
            </div>
        </form>
    </div>
<!-- <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
        <i class="fas fa-list-ol text-gray-400 mr-1"></i> Rows per page
    </label>
    <select name="per_page" onchange="this.form.submit()"
        class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option value="10" @selected($perPage === 10)>10</option>
        <option value="15" @selected($perPage === 15)>15</option>
        <option value="25" @selected($perPage === 25)>25</option>
        <option value="50" @selected($perPage === 50)>50</option>
        <option value="100" @selected($perPage === 100)>100</option>
    </select>
</div> -->
    <!-- Results -->
    <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-300 mb-8 overflow-hidden">
        @if($expenses->isEmpty())
            <div class="text-center text-gray-500 py-12">
                <i class="fas fa-folder-open text-4xl mb-3"></i>
                <p class="text-lg">No expenses match your filters.</p>
            </div>
        @else
            <table class="min-w-full table-auto border-collapse">
                <thead class="bg-blue-500 text-white">
                    <tr>
                        <th class="py-3 px-4 text-left rounded-tl-lg">Date</th>
                        <th class="py-3 px-4 text-left">Category</th>
                        <th class="py-3 px-4 text-left">Amount</th>
                        <th class="py-3 px-4 text-left rounded-tr-lg">Description</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    @foreach ($expenses as $expense)
                        @php
                            $isRambirambi = str_starts_with($expense->description, 'Rambirambi');
                            $isBaraka = str_starts_with($expense->description, 'Baraka ya watoto');
                            $isMeeting = str_starts_with($expense->description, 'Meeting expense');
                        @endphp
                        <tr class="border-t hover:bg-gray-50 transition">
                            <td class="py-3 px-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($expense->created_at)->format('d M Y') }}</td>
                            <td class="py-3 px-4">
                                @if($isRambirambi)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-700">
                                        <i class="fas fa-dove mr-1"></i> Rambirambi
                                    </span>
                                @elseif($isBaraka)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">
                                        <i class="fas fa-baby mr-1"></i> Baraka ya Watoto
                                    </span>
                                @elseif($isMeeting)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">
                                        <i class="fas fa-users mr-1"></i> Meeting
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">
                                        <i class="fas fa-receipt mr-1"></i> Other
                                    </span>
                                @endif
                            </td>
                            <td class="py-3 px-4 font-semibold text-red-600 whitespace-nowrap">
                                - {{ number_format(abs($expense->amount), 2) }}
                            </td>
                            <td class="py-3 px-4 text-gray-600">{{ $expense->description }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-6">{{ $expenses->links() }}</div>
        @endif
    </div>
</div>
@endsection