@extends('layouts.epelcon')
@section('title', 'Expenses')

@section('content')
<div x-data="{ add: false }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Expenses</h1>
            <p class="text-sm text-slate-500">Operational spend tracking and approvals.</p>
        </div>
        <button @click="add = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Record expense</button>
    </div>

    <div class="mb-5 grid gap-3 sm:grid-cols-3">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">This month (approved)</p><p class="mt-1 text-2xl font-extrabold text-rose-600">@money($summary['month'])</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Pending approval</p><p class="mt-1 text-2xl font-extrabold text-amber-600">{{ $summary['pending'] }} <span class="text-sm font-bold text-slate-400">(@money($summary['pending_amount']))</span></p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200">
            <p class="mb-2 text-xs font-bold uppercase text-slate-400">Top categories (month)</p>
            @foreach ($byCategory->take(3) as $cat)
                <div class="flex justify-between text-xs"><span class="text-slate-600">{{ $cat->category }}</span><span class="font-bold text-slate-900">@money($cat->total)</span></div>
            @endforeach
        </div>
    </div>

    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        @foreach (['' => 'All', 'pending' => 'Pending', 'approved' => 'Approved', 'paid' => 'Paid', 'rejected' => 'Rejected'] as $value => $label)
            <a href="{{ route('epelcon.expenses.index', array_filter(['status' => $value])) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('status', '') === $value ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }}</a>
        @endforeach
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[760px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Date</th><th class="px-4 py-3">Description</th><th class="px-4 py-3">Category</th><th class="px-4 py-3 text-right">Amount</th><th class="px-4 py-3">Status</th><th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($expenses as $expense)
                @php $badge = ['pending'=>'amber','approved'=>'sky','paid'=>'emerald','rejected'=>'rose'][$expense->status]; @endphp
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 text-slate-500">{{ $expense->expense_date->format('j M Y') }}</td>
                    <td class="px-4 py-3"><p class="font-bold text-slate-800">{{ $expense->description }}</p><p class="font-mono text-[11px] text-slate-400">{{ $expense->code }} · by {{ $expense->recorder->name ?? '—' }}</p></td>
                    <td class="px-4 py-3 text-slate-600">{{ $expense->category }}</td>
                    <td class="px-4 py-3 text-right font-extrabold text-slate-900">@money($expense->amount)</td>
                    <td class="px-4 py-3"><span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ $expense->status }}</span></td>
                    <td class="px-4 py-3">
                        @if (auth()->user()->hasRole('admin', 'manager', 'accountant'))
                            <div class="flex justify-end gap-1.5">
                                @if ($expense->status === 'pending')
                                    <form method="POST" action="{{ route('epelcon.expenses.status', $expense) }}">@csrf<input type="hidden" name="status" value="approved">
                                        <button class="rounded-lg bg-emerald-50 px-2.5 py-1.5 text-[11px] font-bold text-emerald-700 hover:bg-emerald-100">Approve</button></form>
                                    <form method="POST" action="{{ route('epelcon.expenses.status', $expense) }}">@csrf<input type="hidden" name="status" value="rejected">
                                        <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-600 hover:bg-rose-100">Reject</button></form>
                                @elseif ($expense->status === 'approved')
                                    <form method="POST" action="{{ route('epelcon.expenses.status', $expense) }}">@csrf<input type="hidden" name="status" value="paid">
                                        <button class="rounded-lg bg-slate-900 px-2.5 py-1.5 text-[11px] font-bold text-white hover:bg-slate-700">Mark paid</button></form>
                                @endif
                            </div>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-10 text-center text-slate-400">No expenses found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-5">{{ $expenses->links() }}</div>

    {{-- Add expense modal --}}
    <div x-cloak x-show="add" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false"></div>
        <div x-show="add" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Record expense</h2>
            <form method="POST" action="{{ route('epelcon.expenses.store') }}" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span>
                    <input name="description" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Category</span>
                    <select name="category" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($categories as $category)<option>{{ $category }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Amount ({{ $CUR }})</span>
                    <input type="number" step="0.01" min="0.01" name="amount" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Date</span>
                    <input type="date" name="expense_date" value="{{ today()->toDateString() }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Paid via</span>
                    <select name="payment_method" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach (['cash', 'transfer', 'card', 'pos'] as $m)<option value="{{ $m }}">{{ ucfirst($m) }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Vendor</span>
                    <input name="vendor_name" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Receipt no.</span>
                    <input name="receipt_no" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Department</span>
                    <input name="department" placeholder="e.g. Kitchen" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="col-span-2 flex justify-end gap-2">
                    <button type="button" @click="add = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save expense</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
