@extends('admin.layout')

@section('title', 'Payments')

@section('admin-content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Payments</h1>
    <p class="text-gray-500 mt-1">Manage customer payments</p>
</div>

<div class="bg-white rounded-2xl shadow-card overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">User</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Order</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Amount</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Method</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Status</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Date</th>
                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @foreach($payments as $payment)
            <tr class="hover:bg-gray-50 transition-all">
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 text-sm font-bold">
                            {{ strtoupper(substr($payment->user->name, 0, 1)) }}
                        </div>
                        <span class="ml-2 text-gray-900">{{ $payment->user->name }}</span>
                    </div>
                </td>
                <td class="px-6 py-4 text-gray-600">{{ $payment->order->order_number }}</td>
                <td class="px-6 py-4 font-bold text-green-600">₦{{ number_format($payment->amount, 0) }}</td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                        {{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <span class="px-3 py-1 rounded-full text-xs font-medium 
                        @if($payment->status === 'confirmed') bg-green-100 text-green-600
                        @elseif($payment->status === 'rejected') bg-red-100 text-red-600
                        @else bg-yellow-100 text-yellow-600 @endif">
                        {{ ucfirst($payment->status) }}
                    </span>
                </td>
                <td class="px-6 py-4 text-gray-500 text-sm">{{ $payment->created_at->format('M d, Y') }}</td>
                <td class="px-6 py-4">
                    <button type="button" onclick="viewProof('{{ $payment->id }}')" class="text-primary-600 hover:text-primary-800 font-medium text-sm mr-2">
                        <i class="fas fa-eye mr-1"></i> View Proof
                    </button>
                    @if($payment->status === 'pending')
                    <div class="inline-flex items-center space-x-2">
                        <form method="POST" action="{{ route('admin.payments.confirm', $payment) }}">
                            @csrf
                            <button type="submit" class="px-3 py-1.5 bg-green-500 text-white text-sm font-medium rounded-lg hover:bg-green-600 transition-all">Confirm</button>
                        </form>
                        <form method="POST" action="{{ route('admin.payments.reject', $payment) }}">
                            @csrf
                            <button type="submit" class="px-3 py-1.5 bg-red-500 text-white text-sm font-medium rounded-lg hover:bg-red-600 transition-all">Reject</button>
                        </form>
                    </div>
                    @else
                    <span class="text-gray-400">-</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $payments->links() }}
</div>

<div id="proofModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full mx-4 overflow-hidden">
        <div class="flex items-center justify-between p-4 border-b">
            <h3 class="text-lg font-semibold text-gray-900">Payment Proof</h3>
            <button onclick="closeProofModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-4">
            <div id="proofContent"></div>
        </div>
    </div>
</div>

<script>
const paymentProofs = {};
@foreach($payments as $payment)
paymentProofs['{{ $payment->id }}'] = {
    user: '{{ $payment->user->name }}',
    order: '{{ $payment->order->order_number }}',
    amount: '{{ number_format($payment->amount, 0) }}',
    method: '{{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}',
    ref: '{{ $payment->reference_number ?? "N/A" }}',
    image: '{{ $payment->proof_image ? asset("storage/" . $payment->proof_image) : "" }}',
    date: '{{ $payment->created_at->format("M d, Y H:i") }}'
};
@endforeach

function viewProof(id) {
    const proof = paymentProofs[id];
    if (!proof || !proof.image) {
        alert('No proof image uploaded');
        return;
    }
    
    document.getElementById('proofContent').innerHTML = `
        <div class="bg-gray-50 rounded-lg p-4 mb-4">
            <p class="text-sm text-gray-600"><span class="font-medium">User:</span> ${proof.user}</p>
            <p class="text-sm text-gray-600"><span class="font-medium">Order:</span> ${proof.order}</p>
            <p class="text-sm text-gray-600"><span class="font-medium">Amount:</span> ₦${proof.amount}</p>
            <p class="text-sm text-gray-600"><span class="font-medium">Method:</span> ${proof.method}</p>
            <p class="text-sm text-gray-600"><span class="font-medium">Reference:</span> ${proof.ref}</p>
            <p class="text-sm text-gray-600"><span class="font-medium">Date:</span> ${proof.date}</p>
        </div>
        <img src="${proof.image}" alt="Payment Proof" class="w-full rounded-lg">
    `;
    document.getElementById('proofModal').classList.remove('hidden');
}

function closeProofModal() {
    document.getElementById('proofModal').classList.add('hidden');
}

document.getElementById('proofModal').addEventListener('click', function(e) {
    if (e.target === this) closeProofModal();
});
</script>
@endsection