@extends('layouts.portal')
@section('title', 'Payment History')
@section('page_title', 'Payment History')
@section('page_subtitle', 'View all payment transactions and client payment status')
@section('sidebar')
@include('admin.partials.sidebar', ['active' => 'payments'])
@endsection
@section('content')
<div class="min-h-screen bg-gray-50 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">💰 Payment History</h1>
<p class="text-gray-600 mt-2">View and manage all payment transactions and invoices</p>
</div>
<div class="flex space-x-3">
<a href="{{ route('admin.payment.approval') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"><i class="fas fa-check-circle mr-2"></i>Payment Approval</a>
</div>
</div>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
<div class="flex items-center">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-check text-green-600 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-600">Clients Paid</p>
<p class="text-2xl font-bold text-gray-800">{{ $payments->where('payment_status', 'paid')->pluck('client_id')->unique()->count() }}</p>
</div>
</div>
</div>

<div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
<div class="flex items-center">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-hourglass-half text-yellow-600 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-600">Clients Pending</p>
<p class="text-2xl font-bold text-gray-800">{{ $payments->where('payment_status', 'processing')->pluck('client_id')->unique()->count() }}</p>
</div>
</div>
</div>

<div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-file-invoice text-blue-600 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-600">Invoices Raised</p>
<p class="text-2xl font-bold text-gray-800">{{ $payments->whereNotNull('invoice_number')->count() }}</p>
</div>
</div>
</div>

<div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
<div class="flex items-center">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-times text-red-600 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-600">Failed</p>
<p class="text-2xl font-bold text-gray-800">{{ $payments->where('payment_status', 'failed')->count() }}</p>
</div>
</div>
</div>

<div class="bg-white rounded-lg shadow p-6 border-l-4 border-purple-500">
<div class="flex items-center">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-dollar-sign text-purple-600 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-600">Total Revenue</p>
<p class="text-2xl font-bold text-gray-800">RM{{ number_format($payments->where('payment_status', 'paid')->sum('package_price'), 2) }}</p>
</div>
</div>
</div>
</div>

<!-- Payments Table -->
<div class="bg-white rounded-lg shadow">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-semibold text-gray-900">All Payments</h2>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gradient-to-r from-gray-50 to-gray-100">
<tr>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Payment ID</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Client</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Package</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Amount</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Payment Mode</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Invoice Status</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Payment Status</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse($payments as $payment)
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-sm font-bold text-blue-600">#{{ $payment->id }}</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">{{ $payment->client->full_name ?? ($payment->client->first_name . ' ' . $payment->client->last_name) ?? 'N/A' }}</div>
<div class="text-sm text-gray-500">{{ $payment->client->email ?? 'N/A' }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">{{ $payment->package_name ?? 'Basic Package' }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-bold text-gray-900">RM{{ number_format($payment->package_price ?? 0, 2) }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-3 py-1 text-xs font-semibold rounded-full 
@if($payment->payment_method === 'credit_card')
bg-blue-100 text-blue-800
@elseif($payment->payment_method === 'bank_transfer')
bg-purple-100 text-purple-800
@elseif($payment->payment_method === 'check')
bg-green-100 text-green-800
@else
bg-gray-100 text-gray-800
@endif
">
<i class="fas 
@if($payment->payment_method === 'credit_card')
fa-credit-card
@elseif($payment->payment_method === 'bank_transfer')
fa-university
@elseif($payment->payment_method === 'check')
fa-check
@else
fa-money-bill
@endif
mr-1"></i>
{{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? 'N/A')) }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
@if($payment->invoice_number)
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1"></i> Raised (#{{ $payment->invoice_number }})
</span>
@else
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
<i class="fas fa-times-circle mr-1"></i> Not Raised
</span>
@endif
</td>
<td class="px-6 py-4 whitespace-nowrap">
@if($payment->payment_status === 'paid')
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
<i class="fas fa-check-circle mr-1"></i> Paid
</span>
@elseif($payment->payment_status === 'processing')
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
<i class="fas fa-spinner fa-spin mr-1"></i> Processing
</span>
@elseif($payment->payment_status === 'failed')
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
<i class="fas fa-times-circle mr-1"></i> Failed
</span>
@else
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">{{ ucfirst($payment->payment_status ?? 'Unknown') }}</span>
@endif
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{{ $payment->updated_at->format('d M Y H:i') }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-center">
<div class="flex items-center justify-center space-x-2">
<!-- View Invoice Button -->
@if($payment->invoice_number)
<button onclick="showInvoiceModal({{ $payment->id }}, '{{ $payment->invoice_number }}', '{{ $payment->client->full_name ?? ($payment->client->first_name . ' ' . $payment->client->last_name) }}', 'RM{{ number_format($payment->package_price, 2) }}')" 
        class="inline-flex items-center px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors font-medium text-sm"
        title="View Invoice">
<i class="fas fa-file-pdf mr-1"></i> Invoice
</button>
@endif

<!-- View Payment Details -->
<a href="{{ route('admin.invoices.details', $payment->id) }}" 
   class="inline-flex items-center px-3 py-1.5 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors font-medium text-sm"
   title="View Details">
<i class="fas fa-eye mr-1"></i> View
</a>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="9" class="px-6 py-4 text-center">
<div class="py-8">
<i class="fas fa-credit-card text-4xl text-gray-300 mb-4"></i>
<p class="text-lg font-medium text-gray-900">No payments found</p>
<p class="text-gray-500">No payment transactions have been recorded yet.</p>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>

<!-- Pagination -->
@if($payments->hasPages())
<div class="px-6 py-4 border-t border-gray-200">
{{ $payments->links('pagination::tailwind') }}
</div>
@endif
</div>
</div>
</div>

<!-- Invoice Modal -->
<div id="invoiceModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
<h3 class="text-lg font-bold text-gray-900" id="invoiceTitle">Invoice Details</h3>
<button onclick="closeInvoiceModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>

<div class="p-6" id="invoiceContent">
<div class="text-center py-8">
<i class="fas fa-file-pdf text-6xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Loading invoice...</p>
</div>
</div>

<div class="border-t border-gray-200 px-6 py-4 flex gap-3 justify-end">
<button onclick="closeInvoiceModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Close</button>
<button onclick="printInvoice()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<i class="fas fa-print mr-2"></i> Print
</button>
</div>
</div>
</div>

<script>
function showInvoiceModal(paymentId, invoiceNumber, clientName, amount) {
const modal = document.getElementById('invoiceModal');
const content = document.getElementById('invoiceContent');
const title = document.getElementById('invoiceTitle');

title.textContent = `Invoice #${invoiceNumber}`;

// Create invoice HTML
const invoiceHTML = `
<div class="invoice-content">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-900">INVOICE</h1>
<p class="text-gray-600 mt-2">#${invoiceNumber}</p>
</div>

<div class="grid grid-cols-2 gap-8 mb-8">
<div>
<h3 class="font-bold text-gray-900 mb-2">Bill To:</h3>
<p class="font-semibold text-gray-900">${clientName}</p>
<p class="text-gray-600 text-sm">Payment ID: #${paymentId}</p>
</div>
<div class="text-right">
<h3 class="font-bold text-gray-900 mb-2">Invoice Details:</h3>
<p class="text-gray-600">Date: ${new Date().toLocaleDateString()}</p>
<p class="text-gray-600">Status: <span class="text-green-600 font-bold">Paid</span></p>
</div>
</div>

<table class="w-full mb-8">
<thead class="bg-gray-100">
<tr>
<th class="text-left px-4 py-2 text-sm font-semibold text-gray-900">Description</th>
<th class="text-right px-4 py-2 text-sm font-semibold text-gray-900">Amount</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-4 py-3 text-gray-900">Professional Will Drafting & Services</td>
<td class="text-right px-4 py-3 font-bold text-gray-900">${amount}</td>
</tr>
</tbody>
</table>

<div class="border-t-2 border-gray-900 pt-4">
<div class="flex justify-end">
<div class="w-48">
<div class="flex justify-between font-bold text-gray-900 mb-4">
<span>Total Amount:</span>
<span>${amount}</span>
</div>
<div class="flex justify-between text-green-600 font-bold text-lg">
<span>Paid:</span>
<span>${amount}</span>
</div>
</div>
</div>
</div>

<div class="mt-12 pt-8 border-t border-gray-300 text-center text-sm text-gray-600">
<p>Thank you for your business!</p>
<p class="mt-2">This is an automated invoice. For inquiries, please contact support.</p>
</div>
</div>
`;

content.innerHTML = invoiceHTML;
modal.classList.remove('hidden');
}

function closeInvoiceModal() {
document.getElementById('invoiceModal').classList.add('hidden');
}

function printInvoice() {
const content = document.querySelector('.invoice-content').innerHTML;
const printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Invoice Print</title>');
printWindow.document.write('<style>body { font-family: Arial; margin: 20px; } .invoice-content { padding: 20px; }</style>');
printWindow.document.write('</head><body>');
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}

// Close modal when clicking outside
document.getElementById('invoiceModal')?.addEventListener('click', function(e) {
if(e.target.id === 'invoiceModal') {
closeInvoiceModal();
}
});
</script>

@endsection