@extends('layouts.app')

@section('title', 'Payment Transfers - Pharmacy Management')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Payment Transfers</h1>
        <p class="text-gray-600">Transfer funds between payment accounts</p>
    </div>
    @can('create_payment_transfers')
    <a href="{{ route('payment-transfers.create') }}" class="bg-brand-600 text-white px-4 py-2 rounded-lg hover:bg-brand-700 flex items-center gap-2">
        <i class="fas fa-plus"></i> New Transfer
    </a>
    @endcan
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs text-gray-500 mb-1">Search</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search description..."
                class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-brand-500 focus:ring-brand-500">
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">Status</label>
            <select name="status" class="rounded-lg border border-gray-300 px-3 py-2 text-sm">
                <option value="">All</option>
                <option value="pending" {{ request('status')=='pending'?'selected':'' }}>Pending</option>
                <option value="approved" {{ request('status')=='approved'?'selected':'' }}>Approved</option>
                <option value="rejected" {{ request('status')=='rejected'?'selected':'' }}>Rejected</option>
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">From</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="rounded-lg border border-gray-300 px-3 py-2 text-sm">
        </div>
        <div>
            <label class="block text-xs text-gray-500 mb-1">To</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="rounded-lg border border-gray-300 px-3 py-2 text-sm">
        </div>
        <button type="submit" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 text-sm">
            <i class="fas fa-search mr-1"></i> Filter
        </button>
    </form>
</div>

<div class="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <p class="text-sm text-gray-600">Total Transferred</p>
        <p class="text-2xl font-bold text-indigo-600">${{ number_format($totalAmount, 2) }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <p class="text-sm text-gray-600">Pending</p>
        <p class="text-2xl font-bold text-yellow-600">{{ $transfers->where('status', 'pending')->count() }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <p class="text-sm text-gray-600">Approved</p>
        <p class="text-2xl font-bold text-green-600">{{ $transfers->where('status', 'approved')->count() }}</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
        <p class="text-sm text-gray-600">Rejected</p>
        <p class="text-2xl font-bold text-gray-600">{{ $transfers->where('status', 'rejected')->count() }}</p>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reference</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">From</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">To</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Amount</th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase">Status</th>
                    @canany(['approve_payment_transfers', 'edit_payment_transfers', 'delete_payment_transfers'])
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    @endcanany
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($transfers as $transfer)
                    <tr class="hover:bg-brand-50/30 transition-colors">
                        <td class="px-6 py-4 text-sm font-medium text-brand-600">{{ $transfer->reference_no }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">
                            <p class="font-medium">{{ $transfer->description ?? '-' }}</p>
                            @if($transfer->notes)
                                <p class="text-xs text-gray-500 truncate max-w-[200px]">{{ Str::limit($transfer->notes, 50) }}</p>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $transfer->fromAccount?->name ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $transfer->toAccount?->name ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ displayDate($transfer->transfer_date) }}</td>
                        <td class="px-6 py-4 text-sm text-right font-medium text-indigo-600">${{ number_format($transfer->amount, 2) }}</td>
                        <td class="px-6 py-4 text-center">
                            @php
                                $colors = ['pending' => 'bg-yellow-100 text-yellow-800', 'approved' => 'bg-green-100 text-green-800', 'rejected' => 'bg-red-100 text-red-800'];
                            @endphp
                            <span class="px-2 py-1 text-xs {{ $colors[$transfer->status] }} rounded-full capitalize">{{ $transfer->status }}</span>
                        </td>
                        @canany(['approve_payment_transfers', 'edit_payment_transfers', 'delete_payment_transfers'])
                        <td class="px-6 py-4 text-right text-sm font-medium">
                            @can('approve_payment_transfers')
                            @if($transfer->status === 'pending')
                                <form action="{{ route('payment-transfers.approve', $transfer) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="text-green-600 hover:text-green-900 mr-2" title="Approve"><i class="fas fa-check-circle"></i></button>
                                </form>
                                <form action="{{ route('payment-transfers.reject', $transfer) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="text-orange-600 hover:text-orange-900 mr-2" title="Reject"><i class="fas fa-times-circle"></i></button>
                                </form>
                            @endif
                            @endcan
                            @can('edit_payment_transfers')
                            <a href="{{ route('payment-transfers.edit', $transfer) }}" class="text-brand-600 hover:text-brand-800 mr-2 p-1 hover:bg-brand-100 rounded transition-colors"><i class="fas fa-edit"></i></a>
                            @endcan
                            @can('delete_payment_transfers')
                            <form action="{{ route('payment-transfers.destroy', $transfer) }}" method="POST" class="inline" onsubmit="return confirm('Delete this transfer?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 p-1 hover:bg-red-100 rounded transition-colors"><i class="fas fa-trash"></i></button>
                            </form>
                            @endcan
                        </td>
                        @endcanany
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-6 py-8 text-center text-gray-500">No transfers found</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="p-4 border-t border-gray-200">
        {{ $transfers->withQueryString()->links() }}
    </div>
</div>
@endsection