@extends('layouts.app')
@section('title', 'Expense | ' . ($expense->description ?? ''))
@section('content')
@php
    $categories = ['Utilities','Medical Supplies','Drugs/Pharmacy','Salaries/Locum','Repairs','Transport','Rent','Food/Catering','Insurance','Other'];
    $paid    = (float) $expense->payments->sum('amount');
    $balance = $expense->balance ?? max(0, (float) $expense->amount - $paid);
    $esc = ['pending'=>'badge-warning','partially_paid'=>'badge-info','paid'=>'badge-success','overdue'=>'badge-danger','cancelled'=>'badge-gray'];
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div class="flex items-center gap-3">
        <a href="{{ route('expenses.index') }}" class="btn-secondary text-xs flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back
        </a>
        <div>
            <h1 class="text-lg font-bold text-gray-900">Expense</h1>
            <p class="text-xs text-gray-400">{{ $expense->date?->format('d M Y') }} · {{ $expense->supplier->name ?? $expense->vendor ?? '—' }}</p>
        </div>
    </div>
    @if($canDelete)
    <form method="POST" action="{{ route('expenses.destroy', $expense) }}" onsubmit="return confirm('Delete this expense{{ $paid > 0 ? ' and its '.$expense->payments->count().' recorded payment(s)' : '' }}? This cannot be undone.')">
        @csrf @method('DELETE')
        <button type="submit" class="text-xs text-red-700 bg-red-50 border border-red-200 px-3 py-1.5 rounded hover:bg-red-100 font-semibold">Delete Expense</button>
    </form>
    @endif
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 rounded-lg px-3 py-2 mb-3 text-xs text-green-800">{{ session('success') }}</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Edit / details --}}
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl border shadow-sm p-5">
            <h2 class="text-sm font-bold text-gray-800 mb-4">{{ $canManage ? 'Edit Expense' : 'Expense Details' }}</h2>

            @if($canManage)
            <form method="POST" action="{{ route('expenses.update', $expense) }}">
                @csrf @method('PUT')
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Date *</label>
                        <input type="date" name="date" value="{{ old('date', $expense->date?->format('Y-m-d')) }}" required class="form-input no-flatpickr">
                    </div>
                    <div>
                        <label class="form-label">Category *</label>
                        <select name="category" required class="form-input">
                            @foreach($categories as $c)
                                <option value="{{ $c }}" @selected(old('category', $expense->category) === $c)>{{ $c }}</option>
                            @endforeach
                            @if($expense->category && !in_array($expense->category, $categories))
                                <option value="{{ $expense->category }}" selected>{{ $expense->category }}</option>
                            @endif
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Supplier / Payee</label>
                        <select name="supplier_id" class="form-input">
                            <option value="">— None / legacy ({{ $expense->vendor ?? 'n/a' }}) —</option>
                            @foreach($suppliers as $s)
                                <option value="{{ $s->id }}" @selected((int) old('supplier_id', $expense->supplier_id) === $s->id)>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Amount (KES) *</label>
                        <input type="number" step="0.01" min="0.01" name="amount" value="{{ old('amount', $expense->amount) }}" required class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">Description *</label>
                        <input type="text" name="description" value="{{ old('description', $expense->description) }}" required class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Due Date</label>
                        <input type="date" name="due_date" value="{{ old('due_date', $expense->due_date?->format('Y-m-d')) }}" class="form-input no-flatpickr">
                    </div>
                    <div>
                        <label class="form-label">Invoice / Reference</label>
                        <input type="text" name="invoice_reference" value="{{ old('invoice_reference', $expense->invoice_reference) }}" class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" rows="2" class="form-input">{{ old('notes', $expense->notes) }}</textarea>
                    </div>
                </div>
                @if($paid > 0)
                <p class="text-[11px] text-gray-400 mt-3">Amount paid (KES {{ number_format($paid) }}) is recorded from payments and isn't edited here — changing the amount recomputes the balance.</p>
                @endif
                <div class="flex justify-end mt-4">
                    <button type="submit" class="btn-primary text-sm">Save Changes</button>
                </div>
            </form>
            @else
            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
                <div><dt class="text-xs text-gray-400">Date</dt><dd class="font-medium">{{ $expense->date?->format('d M Y') }}</dd></div>
                <div><dt class="text-xs text-gray-400">Category</dt><dd class="font-medium">{{ $expense->category }}</dd></div>
                <div><dt class="text-xs text-gray-400">Supplier / Payee</dt><dd class="font-medium">{{ $expense->supplier->name ?? $expense->vendor ?? '—' }}</dd></div>
                <div><dt class="text-xs text-gray-400">Amount</dt><dd class="font-medium">KES {{ number_format($expense->amount) }}</dd></div>
                <div class="sm:col-span-2"><dt class="text-xs text-gray-400">Description</dt><dd class="font-medium">{{ $expense->description }}</dd></div>
                @if($expense->notes)<div class="sm:col-span-2"><dt class="text-xs text-gray-400">Notes</dt><dd>{{ $expense->notes }}</dd></div>@endif
            </dl>
            @endif
        </div>
    </div>

    {{-- Summary + payments --}}
    <div>
        <div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs text-gray-400">Status</span>
                <span class="badge {{ $esc[$expense->status ?? 'pending'] ?? 'badge-gray' }}">{{ ucfirst(str_replace('_',' ', $expense->status ?? 'pending')) }}</span>
            </div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-gray-500">Amount</span><span class="font-semibold">KES {{ number_format($expense->amount) }}</span></div>
                <div class="flex justify-between"><span class="text-gray-500">Paid</span><span class="text-green-600 font-semibold">KES {{ number_format($paid) }}</span></div>
                <div class="flex justify-between border-t pt-2"><span class="text-gray-500">Balance</span><span class="{{ $balance > 0 ? 'text-red-600 font-bold' : 'font-semibold' }}">KES {{ number_format($balance) }}</span></div>
            </div>
        </div>

        <div class="bg-white rounded-xl border shadow-sm p-5">
            <h3 class="text-sm font-bold text-gray-800 mb-3">Payments</h3>
            @forelse($expense->payments->sortByDesc('payment_date') as $p)
                <div class="flex items-center justify-between text-xs border-b border-gray-50 py-2 last:border-0">
                    <div>
                        <p class="font-medium text-gray-700">KES {{ number_format($p->amount) }} · {{ ucfirst(str_replace('_',' ', $p->payment_method)) }}</p>
                        <p class="text-gray-400">{{ $p->payment_date?->format('d M Y') }}{{ $p->reference_number ? ' · '.$p->reference_number : '' }}{{ $p->payer ? ' · '.$p->payer->name : '' }}</p>
                    </div>
                </div>
            @empty
                <p class="text-xs text-gray-400">No payments recorded yet.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection