<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction History</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Include Chart.js -->
    <style>
        body {
            background-color: #f8f9fa;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-align: center;
        }

        .table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .table thead th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }

        .table tbody tr:hover {
            background-color: #e2e6ea;
        }

        .table tbody td {
            vertical-align: middle;
        }

        .amount-positive {
            color: rgb(0, 185, 0);
        }

        .amount-negative {
            color: red;
        }

        .btn-back {
            margin-top: 20px;
            background-color: #6c757d;
            color: white;
        }

        .btn-back:hover {
            background-color: #5a6268;
        }

        /* Set a fixed height for the chart */
        #transactionChart {
            width: 100%;
            /* Fill the width of the parent container */
            height: 400px;
            /* Fixed height */
        }

        .chart-container {
            position: relative;
            margin: auto;
            height: 400px;
            /* Set height for the chart container */
            width: 80%;
            /* Adjust width as needed */
        }
    </style>
</head>

<body class="bg-light">
    <div class="container mt-5">
        <h1>Transaction History for {{ user['username'] }}#{{ user['discriminator'] }}</h1>

        <!-- Chart Container -->
        <div class="chart-container">
            <canvas id="transactionChart"></canvas>
        </div>
        <form method="get" action="{{ url_for('transactions') }}">
            <label for="sort">Sort by:</label>
            <select name="sort" id="sort">
                <option value="date" {% if sort_by=='date' %}selected{% endif %}>Date</option>
                <option value="amount" {% if sort_by=='amount' %}selected{% endif %}>Amount</option>
                <!-- Add more sorting options as needed -->
            </select>

            <label for="order">Order:</label>
            <select name="order" id="order">
                <option value="asc" {% if order=='asc' %}selected{% endif %}>Ascending</option>
                <option value="desc" {% if order=='desc' %}selected{% endif %}>Descending</option>
            </select>

            <button type="submit">Sort</button>
        </form>


        <table class="table table-bordered mt-3">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                {% for transaction in transactions %}
                <tr>
                    <td>{{ transaction.TYPE }}</td>
                    <td class="{% if transaction.amount < 0 %}amount-negative{% else %}amount-positive{% endif %}">
                        ${{ transaction.amount }}</td>
                    <td>{{ transaction.TIME.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="3" class="text-center">No transactions found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <a href="{{ url_for('wallet') }}" class="btn btn-secondary mt-3">Back to Wallet</a>
    </div>

    <script>
        // Assuming `dates` and `totals` are provided correctly from Flask.
        const dates = {{ dates | tojson }};
        const totals = {{ totals | tojson }};

        // Log the dates and totals to the console for debugging
        console.log("Dates:", dates);
        console.log("Totals:", totals);

        // Ensure dates are properly formatted
        const formattedDates = dates.map(date => new Date(date).toLocaleDateString());

        // Chart.js code
        const ctx = document.getElementById('transactionChart').getContext('2d');
        const transactionChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: formattedDates,
                datasets: [{
                    label: 'Daily Transaction Totals',
                    data: totals,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true, // Maintain aspect ratio
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Amount ($)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>