@extends('layouts.portal')

@section('title', 'Financial Transactions')
@section('page_title', 'Financial Transactions')
@section('page_subtitle', 'View and manage all payment transactions')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'finance-transactions'])
@endsection

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-900 via-red-800 to-red-900 rounded-xl p-8 text-white mb-4 shadow-xl animate-fade-in-up relative overflow-hidden min-h-[120px]">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
        
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold mb-2">Financial Transactions</h2>
                <p class="text-red-100 text-sm mb-3">View and manage all payment transactions</p>
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-white/20 backdrop-blur-sm">
                        <i class="fas fa-dollar-sign mr-2"></i>
                        Total Amount: RM{{ number_format($stats['total_amount'], 2) }}
                    </span>
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-green-400/30 backdrop-blur-sm">
                        <i class="fas fa-circle text-green-300 mr-2 text-xs"></i>
                        System Online
                    </span>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-exchange-alt text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Amount</h3>
                <i class="fas fa-dollar-sign text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['total_amount'], 2) }}</div>
            <div class="text-sm opacity-90">All transactions</div>
        </div>
        
        <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Completed</h3>
                <i class="fas fa-check-circle text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['completed_amount'], 2) }}</div>
            <div class="text-sm opacity-90">Successful payments</div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600 to-orange-600 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Pending</h3>
                <i class="fas fa-clock text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['pending_amount'], 2) }}</div>
            <div class="text-sm opacity-90">Awaiting processing</div>
        </div>
        
        <div class="bg-gradient-to-br from-red-600 to-red-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Failed</h3>
                <i class="fas fa-times-circle text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['failed_amount'], 2) }}</div>
            <div class="text-sm opacity-90">Failed transactions</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Filters</h3>
        </div>
        <div class="p-6">
            <form method="GET" action="{{ route('admin.finance.transactions') }}">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                    <div>
                        <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">Start Date</label>
                        <x-date-picker
                    name="start_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">End Date</label>
                        <x-date-picker
                    name="end_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
                    </div>
                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Status</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="status" name="status">
                            <option value="">All</option>
                            <option value="completed" {{ ($filters['status'] ?? '') == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="pending" {{ ($filters['status'] ?? '') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="failed" {{ ($filters['status'] ?? '') == 'failed' ? 'selected' : '' }}>Failed</option>
                        </select>
                    </div>
                    <div>
                        <label for="payment_method" class="block text-sm font-semibold text-gray-700 mb-2">Payment Method</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="payment_method" name="payment_method">
                            <option value="">All</option>
                            <option value="credit_card" {{ ($filters['payment_method'] ?? '') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                            <option value="bank_transfer" {{ ($filters['payment_method'] ?? '') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="cash" {{ ($filters['payment_method'] ?? '') == 'cash' ? 'selected' : '' }}>Cash</option>
                        </select>
                    </div>
                    <div>
                        <label for="client_id" class="block text-sm font-semibold text-gray-700 mb-2">Client</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="client_id" name="client_id">
                            <option value="">All Clients</option>
                            @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ ($filters['client_id'] ?? '') == $client->id ? 'selected' : '' }}>
                                {{ $client->full_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="flex items-center justify-between mt-4">
                    <div class="flex space-x-3">
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">
                            Apply Filters
                        </button>
                        <a href="{{ route('admin.finance.transactions') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                            Clear
                        </a>
                    </div>
                    <button type="button" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200" onclick="exportTransactions()">
                        <i class="fas fa-download mr-2"></i> Export Excel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Transactions</h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">ID</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Date</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Client</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Will ID</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Amount</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Payment Method</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transactions as $transaction)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 text-sm">{{ $transaction->id }}</td>
                            <td class="py-3 px-4 text-sm">{{ $transaction->paid_at?->format('M d, Y H:i') ?? 'N/A' }}</td>
                            <td class="py-3 px-4 text-sm">
                                @if($transaction->client)
                                    {{ $transaction->client->full_name }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">
                                @if($transaction->will)
                                    <a href="{{ route('admin.wills.show', $transaction->will->id) }}" class="text-red-600 hover:text-red-800">#{{ $transaction->will->id }}</a>
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm font-medium">RM{{ number_format($transaction->amount, 2) }}</td>
                            <td class="py-3 px-4 text-sm">{{ ucfirst(str_replace('_', ' ', $transaction->payment_method)) }}</td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                    {{ $transaction->status == 'completed' ? 'bg-green-100 text-green-800' : 
                                    ($transaction->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ ucfirst($transaction->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <div class="flex space-x-2">
                                    <button type="button" class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200" onclick="viewTransaction({{ $transaction->id }})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    @if($transaction->status == 'pending')
                                    <button type="button" class="px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 transition-colors duration-200" onclick="markCompleted({{ $transaction->id }})">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="flex items-center justify-between mt-4">
                <div class="text-sm text-gray-700">
                    Showing {{ $transactions->firstItem() }} to {{ $transactions->lastItem() }} of {{ $transactions->total() }} entries
                </div>
                {{ $transactions->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function exportTransactions() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('admin.finance.export.transactions') }}';
        
        // Add CSRF token
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        
        // Add filters
        const filters = ['start_date', 'end_date', 'status', 'payment_method', 'client_id'];
        filters.forEach(filter => {
            const element = document.getElementById(filter);
            if (element && element.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = filter;
                input.value = element.value;
                form.appendChild(input);
            }
        });
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
    
    function viewTransaction(id) {
        // Implement view transaction modal
        alert('View transaction details for ID: ' + id);
    }
    
    function markCompleted(id) {
        if (confirm('Are you sure you want to mark this transaction as completed?')) {
            // Implement mark as completed functionality
            alert('Mark transaction as completed for ID: ' + id);
        }
    }
</script>
@endpush