@extends('layouts.fans')

@section('content')
<div class="container mx-auto p-6 md:p-10 bg-gray-50 min-h-screen">
    <h1 class="text-4xl font-extrabold text-gray-900 mb-8 text-center">Your Transactions</h1>

    <!-- Spending Chart Section -->
    <div class="bg-white p-8 rounded-lg shadow-lg mb-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-6 border-b pb-4">Spending Patterns</h2>
        <div class="relative h-96">
            <canvas id="spendingChart"></canvas>
        </div>
    </div>

    <!-- Transactions Table Section -->
    <div class="bg-white p-8 rounded-lg shadow-lg">
        <h2 class="text-3xl font-bold text-gray-800 mb-6 border-b pb-4">All Transactions</h2>
        @if ($transactions->isEmpty())
            <p class="text-gray-600">You have no transactions yet.</p>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white rounded-lg shadow overflow-hidden">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Transaction ID</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Ticket No.</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Match</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Category</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Block</th>
                            <th class="py-3 px-4 text-right text-sm font-semibold text-gray-700">Amount</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $transaction)
                            <tr class="border-b border-gray-200 hover:bg-gray-50">
                                <td class="py-3 px-4 text-gray-800">{{ $transaction->txn_id }}</td>
                                <td class="py-3 px-4 text-gray-800">{{ $transaction->ticket->ticket_number ?? 'N/A' }}</td>
                                <td class="py-3 px-4 text-gray-800">{{ $transaction->ticket->match->home_team ?? 'N/A' }} vs {{ $transaction->ticket->match->away_team ?? 'N/A' }}</td>
                                <td class="py-3 px-4 text-gray-800">{{ ucfirst($transaction->ticket->category ?? 'N/A') }}</td>
                                <td class="py-3 px-4 text-gray-800">{{ $transaction->ticket->seat->block ?? 'N/A' }}</td>
                                <td class="py-3 px-4 text-right text-gray-800">${{ number_format($transaction->amount, 2) }}</td>
                                <td class="py-3 px-4 text-gray-800">{{ \Carbon\Carbon::parse($transaction->created_at)->format('M d, Y H:i') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('spendingChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [{
                    label: 'Monthly Spending',
                    data: {!! json_encode($chartData) !!},
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Amount Spent ($)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Month'
                        }
                    }
                }
            }
        });
    });
</script>

@endsection
