<!DOCTYPE html>
<html lang="en" data-bs-theme="light">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Personal finance dashboard showing income, expenses, and transactions">
    <title>FinanceTracker | Investments</title>

    <link rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css}">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  
    <style>
        :root {
            --positive-bg: rgba(40, 167, 69, 0.12);
            --negative-bg: rgba(220, 53, 69, 0.12);
        }
        body { background-color: #f8f9fc; }
        .chart-area { position: relative; min-height: 260px; }
        .card { border: none; border-radius: 0.75rem; }
        .card-header { background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
    </style>
</head>

<body id="page-top">
    <div id="wrapper">
        <div th:replace="~{fragments/sidebar-nav :: sidebar-nav}"></div>

        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                <div th:replace="~{fragments/topbar :: topbar}"></div>

                <div class="container-fluid px-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="mb-0">Investments</h3>
                    </div>

                    <div class="row mb-4">
                        <div th:each="rate : ${currRates}" class="col-lg-2 col-md-3 col-sm-4 mb-2 text-center">
                            <span th:replace="~{fragments/investments/curr-badges :: curr-pill(currRate=${rate})}"></span>
                        </div>
                    </div>

                    <div class="row m-1 p-1">
                        <div class="col-lg-12">
                            <div class="card shadow">
                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fw-bold text-primary">Historical Rates</span>
                                        
                                        <form id="historicalRatesControls" class="d-flex gap-2">
                                            <div class="btn-group" role="group">
                                                <input type="radio" name="duration" value="WEEK" class="btn-check" id="opt1" checked 
                                                       hx-get="/historicalRates" hx-target="#HistoricalRatesChartContainer" hx-include="#historicalRatesControls">
                                                <label class="btn btn-outline-secondary btn-sm" for="opt1">Week</label>

                                                <input type="radio" name="duration" value="MONTH" class="btn-check" id="opt2" 
                                                       hx-get="/historicalRates" hx-target="#HistoricalRatesChartContainer" hx-include="#historicalRatesControls">
                                                <label class="btn btn-outline-secondary btn-sm" for="opt2">Month</label>

                                                <input type="radio" name="duration" value="YEAR" class="btn-check" id="opt3" 
                                                       hx-get="/historicalRates" hx-target="#HistoricalRatesChartContainer" hx-include="#historicalRatesControls">
                                                <label class="btn btn-outline-secondary btn-sm" for="opt3">Year</label>
                                            </div>

                                            <select class="form-select form-select-sm" name="currencyChange" style="width: auto;"
                                                hx-get="/historicalRates" hx-target="#HistoricalRatesChartContainer" hx-include="#historicalRatesControls">
                                                <option th:each="currency : ${allCurrencies}"
                                                    th:selected="${currency.code == 'USD'}"
                                                    th:value="${currency.code}"
                                                    th:text="${currency.code + ' - ' + currency.currencyName}">
                                                </option>
                                            </select>
                                        </form>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="HistoricalRatesChartContainer" th:fragment="HistoricalRatesChart" style="height: 350px; width: 100%;">
                                        <canvas id="HistoricalRatesChart"></canvas>
                                        <script th:inline="javascript">
                                            (function() {
                                                const ctx = document.getElementById('HistoricalRatesChart');
                                                // Destroy existing chart instance to prevent memory leaks and scaling issues
                                                const existingChart = Chart.getChart(ctx);
                                                if (existingChart) {
                                                    existingChart.destroy();
                                                }

                                                new Chart(ctx, {
                                                    type: 'line',
                                                    data: {
                                                        labels: /*[[${labels}]]*/ [],
                                                        datasets: [{
                                                            label: 'Rates',
                                                            data: /*[[${historicalRates}]]*/ [],
                                                            borderColor: '#2E7D32',
                                                            backgroundColor: 'rgba(46,125,50,0.15)',
                                                            borderWidth: 2,
                                                            fill: true,
                                                            tension: 0.1
                                                        }]
                                                    },
                                                    options: {
                                                        responsive: true,
                                                        maintainAspectRatio: false,
                                                        animation: { duration: 500 },
                                                        scales: {
                                                            y: {
                                                                beginAtZero: false,
                                                                ticks: {
                                                                    callback: v => v.toLocaleString()
                                                                }
                                                            }
                                                        }
                                                    }
                                                });
                                            })();
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:replace="~{fragments/footer :: footer}"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>