@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Transaction History</h1>
        <p class="text-gray-600 mt-2">View all your payments and transactions</p>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-lg shadow p-6">
            <p class="text-gray-600 text-sm">Total Transactions</p>
            <p class="text-3xl font-bold text-blue-600">{{ $transactions->count() }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <p class="text-gray-600 text-sm">Total Paid</p>
            <p class="text-3xl font-bold text-green-600">€{{ number_format($transactions->where('status', 'paid')->sum('amount'), 2) }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <p class="text-gray-600 text-sm">Pending</p>
            <p class="text-3xl font-bold text-yellow-600">€{{ number_format($transactions->where('status', 'pending')->sum('amount'), 2) }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <p class="text-gray-600 text-sm">Refunded</p>
            <p class="text-3xl font-bold text-red-600">€{{ number_format($transactions->where('status', 'refunded')->sum('amount'), 2) }}</p>
        </div>
    </div>

    <!-- Transactions Table -->
    @if ($transactions->count() > 0)
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-100 border-b border-gray-200">
                <tr>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Transaction ID</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Booking</th>
                    <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Amount</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Date</th>
                    <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach ($transactions as $transaction)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm font-mono text-gray-900">
                        {{ substr($transaction->stripe_payment_intent_id, 0, 20) }}...
                    </td>
                    <td class="px-6 py-4 text-gray-600">
                        @if ($transaction->booking)
                            <a href="{{ route('bookings.show', $transaction->booking) }}" class="text-blue-600 hover:underline">
                                #{{ $transaction->booking->id }}
                            </a>
                        @else
                            <span class="text-gray-400">N/A</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-center font-semibold text-gray-900">
                        €{{ number_format($transaction->amount, 2) }}
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold 
                            {{ $transaction->status === 'paid' ? 'bg-green-100 text-green-800' : '' }}
                            {{ $transaction->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                            {{ $transaction->status === 'failed' ? 'bg-red-100 text-red-800' : '' }}
                            {{ $transaction->status === 'refunded' ? 'bg-blue-100 text-blue-800' : '' }}
                        ">
                            {{ ucfirst($transaction->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-gray-600">
                        {{ $transaction->created_at->format('d M Y H:i') }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        <button onclick="viewDetails({{ $transaction->id }})" class="text-blue-600 hover:text-blue-800 font-semibold text-sm">
                            View
                        </button>
                        @if ($transaction->status === 'paid' && !$transaction->refunded_at)
                        <button onclick="refundModal({{ $transaction->id }})" class="text-red-600 hover:text-red-800 font-semibold text-sm ml-2">
                            Refund
                        </button>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-8">
        {{ $transactions->links() }}
    </div>
    @else
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-12 text-center">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">No Transactions</h2>
        <p class="text-gray-600">You haven't made any payments yet.</p>
    </div>
    @endif
</div>

<!-- Refund Modal -->
<div id="refundModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg p-8 max-w-md w-full">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Request Refund</h3>
        <form id="refundForm" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-900 mb-2">Refund Reason</label>
                <textarea name="reason" required rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg font-semibold">
                    Request Refund
                </button>
                <button type="button" onclick="closeRefundModal()" class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 rounded-lg font-semibold">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    const refundModal = document.getElementById('refundModal');
    const refundForm = document.getElementById('refundForm');

    function refundModal(transactionId) {
        refundForm.action = `/payments/transaction/${transactionId}/refund`;
        refundModal.classList.remove('hidden');
    }

    function closeRefundModal() {
        refundModal.classList.add('hidden');
    }

    function viewDetails(transactionId) {
        alert('Transaction details view coming soon!');
    }
</script>
@endsection