@extends('layouts.app')

@section('content')
<div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800">Pending Collection Approvals</h2>
    
    <table class="w-full text-left border-collapse border border-gray-200">
        <thead>
            <tr class="bg-gray-100 border-b">
                <th class="p-3 border">Date</th>
                <th class="p-3 border">RSM Name</th>
                <th class="p-3 border">Dealer Name</th>
                <th class="p-3 border">Amount</th>
                <th class="p-3 border">Mode</th>
                <th class="p-3 border">Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($pendingCollections as $collection)
                <tr class="border-b">
                    <td class="p-3 border">{{ $collection->collection_date }}</td>
                    <td class="p-3 border">{{ $collection->rsm->name }}</td>
                    <td class="p-3 border">{{ $collection->dealer->name }}</td>
                    <td class="p-3 border font-bold text-green-600">{{ number_format($collection->amount, 2) }}</td>
                    <td class="p-3 border">{{ strtoupper($collection->payment_mode) }}</td>
                    <td class="p-3 border">
                        <form method="POST" action="{{ route('approval.process', $collection->id) }}">
                            @csrf
                            <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700">
                                Approve
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="p-4 text-center text-gray-500">No pending approvals found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <div class="mt-4">
        {{ $pendingCollections->links() }}
    </div>
</div>
@endsection