@extends('layouts.app')
@section('content')
<div class="max-w-6xl mx-auto p-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-semibold">Landlord Payments</h1>
        <a href="{{ route('landlords.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded">Create Payment</a>
    </div>
    <div class="grid grid-cols-3 gap-4 mb-4">
        <div class="p-4 bg-white rounded shadow text-sm"><div class="text-xs text-gray-500">Total</div><div class="text-lg font-semibold">{{ number_format($totalExp, 2) }}</div></div>
        <div class="p-4 bg-white rounded shadow text-sm"><div class="text-xs text-gray-500">Paid</div><div class="text-lg font-semibold">{{ number_format($totalPaid, 2) }}</div></div>
        <div class="p-4 bg-white rounded shadow text-sm"><div class="text-xs text-gray-500">Remaining</div><div class="text-lg font-semibold">{{ number_format($remaining, 2) }}</div></div>
    </div>
    <div class="bg-white rounded shadow overflow-hidden">
        <table class="min-w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Date</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Landlord</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">Amount</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($payments as $e)
                <tr>
                    <td class="px-4 py-2">{{ $e->expense_date->format('Y-m-d') }}</td>
                    <td class="px-4 py-2">{{ $e->vendor?->name }}</td>
                    <td class="px-4 py-2 text-right">{{ number_format($e->amount, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection