@extends('front.layout.app')
@section('content')

<main>

    <section class="indi-banner">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="indi-ban-head">U.S. Treasury Yield Spread</h1>
                </div>
                <div class="col-12">
                    <p class="indi-ban-para">Overall measure of economic performance.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="indicators">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-6">
                    <h4>U.S. Treasury Yield Spread</h4>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="text-end">
                        <a href="#">View Indicator Description</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="indi-form">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="">
                        <div class="row gy-4">
                            <div class="col-12 col-lg-4">
                                <div class="diff-form">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" class="country">
                                        <option value="china">China</option>
                                        <option value="united States (US)" selected>United States (US)</option>
                                        <option value="australia">Australia</option>
                                        <option value="argentina">Argentina</option>
                                        <option value="canada">Canada</option>
                                    </select>
                                </div>
                            </div>
                              <!-- <div class="col-12 col-lg-4">
                                <div class="diff-form">
                                    <label for="component">Component</label>
                                    <select name="component" id="component" class="component">
                                        <option value="total">Total</option>
                                        <option value="total">Total</option>
                                        <option value="total">Total</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-lg-4">
                                <div class="diff-form">
                                    <label for="measure">Measure</label>
                                    <select name="measure" id="measure" class="measure">
                                        <option value="value">Value</option>
                                        <option value="value 1">Value 1</option>
                                        <option value="value 2">Value 2</option>
                                    </select>
                                </div>
                            </div> -->
                            <div class="col-12 col-lg-4">
                                <div class="form-radio text-center">
                                    <input type="radio" name="years" class="year-checkbox" value="300" checked>
                                    <label for="all">ALL</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="25">
                                    <label for="25y">25Y</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="10">
                                    <label for="10y">10Y</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="5">
                                    <label for="5y">5Y</label>
                                    <input type="radio" name="years" class="year-checkbox" value="3">
                                    <label for="3y">3Y</label>
                                    <input type="radio" name="years" class="year-checkbox" value="1">
                                    <label for="1y">1Y</label>
                                </div>
                            </div>
                              <!-- <div class="col-12 col-lg-4">
                                <div class="text-center">
                                    <label for="average">Moving Average:</label>
                                    <select name="average" id="average" class="average">
                                        <option value="average">off</option>
                                        <option value="average">on</option>
                                    </select>
                                </div>
                            </div> -->
                            <div class="col-12 col-lg-4">
                                <div class="text-center">
                                      <button id="downloadCSV">Download CSV</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <section class="indi-graph">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- <img src="images/indigraph.png" alt=""> -->
                    <!--<div id="chartContainer1" style="height: 600px; width: 100%;"></div>-->
                    <canvas id="tysChart" width="800" height="400"></canvas>
                </div>
            </div>
        </div>
    </section>


    <section class="faq-links">
        <div class="container">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p>Sources: <a href="#"> Organisation for Economic Co-operation and Development (OECD);</a> <a
                                href="#"> U.S.
                                Bureau of Economic Analysis</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="indi-f-aq">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Additional Indicator Details
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <p>Unit: National currency</p>
                                    <p>Multiplier: Millions</p>
                                    <p>Adjustment: Seasonally adjusted; United States seasonally adjusted annual rate
                                    </p>
                                    <p>Note: The base year used to calculate real GDP varies by country.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="indi-content">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h3 class="main-indi-head pad-acc">What is U.S. Treasury Yield Spread?</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The U.S. Treasury Yield Spread is a critical financial indicator that
                        measures the difference in yields between short-term and long-term U.S. government bonds. This
                        spread is a key metric for gauging investor sentiment and the economic outlook within the United
                        States. It serves as a crucial tool for understanding the nuances of the U.S. bond market and
                        broader economic conditions.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Methodology</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The methodology of calculating the Treasury Yield Spread involves
                        comparing the yields of two Treasury bonds with different maturities, typically between
                        long-term (like 10-year bonds) and short-term (such as 2-year bonds) debt. The yield represents
                        the return an investor will receive by holding the bond until maturity. The spread is calculated
                        as the difference in yields, expressed in basis points. A widening spread often indicates
                        investor optimism about economic growth, while a narrowing spread might signal concerns about
                        economic slowdown.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Global Relevance</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">While the U.S. Treasury Yield Spread is focused on U.S. government
                        bonds, its implications are globally significant. As the U.S. economy plays a central role in
                        the global financial system, changes in this spread can influence worldwide economic trends,
                        affecting everything from global stock markets to foreign exchange rates. Investors and analysts
                        across countries closely monitor this spread to gauge global economic health and make informed
                        decisions in diversified portfolios.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Interpretation</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">Interpreting the Treasury Yield Spread is crucial for gauging economic
                        outlooks. A wider spread suggests market optimism, forecasting growth and inflation, while a
                        narrower or negative spread signals potential economic downturns. A critical aspect is “bear
                        steepening,” where the spread widens as long-term bond yields rise faster than short-term
                        yields, often due to inflation expectations or anticipated tighter monetary policy. This
                        phenomenon is a vital indicator for investors, suggesting a shift towards a less favorable
                        economic environment.</p>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Include Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Include Chart.js adapter for Moment.js -->
<script src="https://unpkg.com/chartjs-adapter-moment@latest/dist/chartjs-adapter-moment.min.js"></script>
    

<script>
        
        $(document).ready(function () {
            // Initialize variables to store fetched data and selected year range
            var fetchedData = null;
            var selectedYearRangeTYS = { start: 0, end: new Date().getFullYear() };

            // Get references to elements
            var ctx = document.getElementById('tysChart').getContext('2d');
            var yearRangeInputs = $('input[name="years"]');
            var downloadCSVButton = $('#downloadCSV');

            // Define the Chart instance
            var tysChart;

            // Fetch and update chart data
            function fetchDataAndDrawChart() {
                // Define the API URL based on the selected year range
                var apiUrl = "{{ url('/get-filtered-tys-data') }}";
                if (selectedYearRangeTYS.start !== 0 || selectedYearRangeTYS.end !== new Date().getFullYear()) {
                    apiUrl += '?years=' + selectedYearRangeTYS.start + '-' + selectedYearRangeTYS.end;
                }
                console.log('Fetching data from API:', apiUrl);

                $.ajax({
                    url: apiUrl,
                    type: 'GET',
                    success: function (response) {
                        console.log('Received response:', response);

                        if (response.observations && response.observations.length > 0) {
                            fetchedData = response.observations;
                            updateChart();
                        } else {
                            console.log('No data found in response. Handle this case appropriately.');
                        }
                    },
                    error: function (error) {
                        console.log('Error fetching TYS data:', error);
                    }
                });
            }

            // Update the chart based on fetched data and selected year range
            function updateChart() {
                console.log('Updating chart with year range:', selectedYearRangeTYS);

                if (!fetchedData) {
                    console.log('No data fetched yet. Fetching data...');
                    fetchDataAndDrawChart();
                    return;
                }

                // Filter the data based on the selected year range
                var filteredData = fetchedData.filter(observation => {
                    var year = new Date(observation.date).getFullYear();
                    return year >= selectedYearRangeTYS.start && year <= selectedYearRangeTYS.end;
                });

                // Group observations by year and month
                var groupedData = {};
                filteredData.forEach(observation => {
                    var date = new Date(observation.date);
                    var year = date.getFullYear();
                    var month = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
                    var key = month ;

                    if (!groupedData[key]) {
                        groupedData[key] = [];
                    }

                    groupedData[key].push(observation.value);
                });

                // Extract labels and datasets from grouped data
                var labels = Object.keys(groupedData);
                var datasets = [];

                for (var key in groupedData) {
                    var data = groupedData[key];
                    var averageValue = data.reduce((a, b) => a + b, 0) / data.length;
                    datasets.push(averageValue.toFixed(2));
                }

                console.log('Labels (Month):', labels);
                console.log('Values:', datasets);

                if (tysChart) {
                    tysChart.destroy();
                }

                tysChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'TYS Growth',
                            data: datasets,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: 'TYS Growth for ' + selectedYearRangeTYS.start + '-' + selectedYearRangeTYS.end,
                                font: {
                                    size: 18
                                }
                            }
                        },
                        scales: {
                            x: {
                                ticks: {
                                    maxRotation: 0,
                                    autoSkip: true,
                                    maxTicksLimit: 12
                                }
                            },
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // Event handler for year range input change
            yearRangeInputs.on('change', function () {
                var yearRange = $(this).val();
                if (yearRange === 'all-tys') {
                    selectedYearRangeTYS.start = 0;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                } else if (yearRange === '25') {
                    selectedYearRangeTYS.start = new Date().getFullYear() - 25;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                } else if (yearRange === '10') {
                    selectedYearRangeTYS.start = new Date().getFullYear() - 10;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                } else if (yearRange === '5') {
                    selectedYearRangeTYS.start = new Date().getFullYear() - 5;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                } else if (yearRange === '3') {
                    selectedYearRangeTYS.start = new Date().getFullYear() - 3;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                } else if (yearRange === '1') {
                    selectedYearRangeTYS.start = new Date().getFullYear() - 1;
                    selectedYearRangeTYS.end = new Date().getFullYear();
                }

                updateChart(); // Update the chart with the selected year range
            });

            // Event handler for CSV download button click
            downloadCSVButton.on('click', function () {
                downloadCSV();
            });

            // Function to download CSV data
            function downloadCSV() {
                if (!fetchedData) {
                    console.log('No data fetched yet. Cannot download CSV.');
                    return;
                }
            
                // Filter the data based on the selected year range
                var filteredData = fetchedData.filter(observation => {
                    var year = new Date(observation.date).getFullYear();
                    return year >= selectedYearRangeTYS.start && year <= selectedYearRangeTYS.end;
                });
            
                var csvContent = "Date,Value\n";
            
                // Iterate through all the months within the selected year range
                for (var year = selectedYearRangeTYS.start; year <= selectedYearRangeTYS.end; year++) {
                    for (var month = 0; month < 12; month++) {
                        // Format the date as "Month Year" (e.g., "Jan 2023")
                        var formattedDate = new Date(year, month, 1).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
                        
                        // Find data for the current month and year, if available
                        var observation = filteredData.find(obs => {
                            var obsYear = new Date(obs.date).getFullYear();
                            var obsMonth = new Date(obs.date).getMonth();
                            return obsYear === year && obsMonth === month;
                        });
            
                        // If data is found, add it to the CSV; otherwise, add an empty value
                        if (observation) {
                            csvContent += formattedDate + "," + observation.value + "\n";
                        } else {
                            csvContent += formattedDate + ",\n";
                        }
                    }
                }
            
                var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                var link = document.createElement('a');
            
                if (navigator.msSaveBlob) { // IE 10+
                    navigator.msSaveBlob(blob, 'TYS.csv');
                } else {
                    link.href = URL.createObjectURL(blob);
                    link.download = 'TYS.csv';
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }

            // Initial chart load
            fetchDataAndDrawChart();
        });


    
</script>


@endsection