@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">Consumer Price Index (CPI)</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>Consumer Price Index (CPI)</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="all" 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="cpiChart" 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 Consumer Price Index (CPI)?</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The Consumer Price Index (CPI) is a vital economic measure representing
                        the average change over time in the prices paid by consumers for a market basket of consumer
                        goods and services. The CPI is a key indicator of inflation and reflects the cost of living,
                        making it a significant measure for both economic analysts and traders. Since it is used to
                        assess price changes associated with the cost of living, it is also a critical input for
                        economic policy and central bank decision-making.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Methodology</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The CPI is calculated to represent the average price change over time,
                        tracking the prices of a specific set of goods and services. The basket of goods and services,
                        which includes categories like food, transportation, healthcare, and education, is periodically
                        reviewed and adjusted to reflect changing consumer habits. Prices are collected regularly from a
                        broad range of retail and service establishments. The index then compares the price changes in
                        this basket to a base year, providing a clear depiction of how prices have evolved over time.
                    </p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Global Relevance</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">Globally, the CPI is a universally acknowledged economic indicator,
                        although the specific goods and services in the basket might vary from country to country to
                        reflect local consumption patterns. This variance highlights the index’s flexibility in
                        representing the cost of living in different economies. As an economic barometer, the CPI is
                        instrumental for policymakers, investors, and corporations in making informed decisions, as it
                        directly impacts interest rates, monetary policies, and market trends.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Interpretation</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">While the CPI is a coincident indicator, it’s essential to understand
                        its role in economic analysis. It doesn’t predict future economic trends but rather reflects
                        current economic conditions. The CPI is best interpreted as a confirmation tool, verifying
                        whether the trends forecasted by leading indicators are manifesting in the real economy. A
                        rising CPI indicates increasing inflation, affecting purchasing power and interest rates, while
                        a falling CPI suggests deflationary pressures. Understanding these dynamics helps in making
                        informed decisions in financial markets and assessing economic health.</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 () {
    // Call the main function after the document is ready
    initializeChart();

    function initializeChart() {
        var ctx = document.getElementById('cpiChart').getContext('2d');
        var cpiChart;
        var fetchedData; // Variable to store the fetched data

        // Fetch the data when the page initially loads
        fetchCPIData();

        function fetchCPIData() {
            var apiUrl = "{{ url('/get-cpi-data') }}";
            $.ajax({
                url: apiUrl,
                type: 'GET',
                success: function (response) {
                    console.log('Fetched data:', response);
                    fetchedData = response.observations;
                    updateChart('all');
                },
                error: function (error) {
                    console.log('Error fetching CPI data:', error);
                }
            });
        }

        function updateChart(yearRange) {
            console.log('Updating chart with year range:', yearRange);

            if (!fetchedData) {
                console.log('No data fetched yet. Cannot update chart.');
                return;
            }

            var filteredData;
            if (yearRange === 'all') {
                filteredData = fetchedData;
            } else {
                var startYear = new Date().getFullYear() - parseInt(yearRange);
                filteredData = fetchedData.filter(function (observation) {
                    var observationYear = new Date(observation.date).getFullYear();
                    return observationYear >= startYear;
                });
            }

            if (filteredData.length === 0) {
                console.log('No data available for the selected year range.');
                return;
            }

            var labels = filteredData.map(function (observation) {
                var date = new Date(observation.date);
                return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
            });
            var values = filteredData.map(function (observation) {
                return observation.value;
            });

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

            cpiChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'CPI Data',
                        data: values,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderWidth: 2
                    }]
                },
                options: {
                    scales: {
                        x: {
                            ticks: {
                                maxRotation: 0, // Rotate x-axis labels if needed
                                autoSkip: true, // Automatically skip labels to fit
                                maxTicksLimit: 12, // Maximum number of visible ticks on the x-axis
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        var yearRangeInputs = $('input[name="years"]');
        var downloadCSVButton = $('#downloadCSV');

        yearRangeInputs.on('change', function () {
            var yearRange = $(this).val();
            updateChart(yearRange);
        });

        downloadCSVButton.on('click', function () {
            downloadCSV();
        });

        var defaultYearRange = 'all';
        updateChart(defaultYearRange);

        function downloadCSV() {
            if (!fetchedData) {
                console.log('No data fetched yet. Cannot download CSV.');
                return;
            }

            var csvContent = "Date,Value\n";

            fetchedData.forEach(function (observation) {
                var date = new Date(observation.date);
                var formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
                csvContent += formattedDate + "," + observation.value + "\n";
            });

            var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            var link = document.createElement('a');

            if (navigator.msSaveBlob) {
                navigator.msSaveBlob(blob, 'CPI.csv');
            } else {
                link.href = URL.createObjectURL(blob);
                link.download = 'CPI.csv';
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
});

    // window.onload = function () {

    //     var limit = 10000;    // increase number of dataPoints by increasing the limit
    //     var y = 100;
    //     var data = [];
    //     var dataSeries = { type: "line" };
    //     var dataPoints = [];
    //     for (var i = 0; i < limit; i += 1) {
    //         y += Math.round(Math.random() * 10 - 5);
    //         dataPoints.push({
    //             x: i,
    //             y: y
    //         });
    //     }
    //     dataSeries.dataPoints = dataPoints;
    //     data.push(dataSeries);

    //     // Better to construct options first and then pass it as a parameter
    //     var options = {
    //         zoomEnabled: true,
    //         animationEnabled: true,
    //         title: {
    //             text: "Try Zooming - Panning"
    //         },
    //         data: data  // random data
    //     };

    //     $("#cpiChart").CanvasJSChart(options);

    //     // Additional code to integrate with Chart.js
    //     var ctx = document.getElementById('cpiChart').getContext('2d');
    //     var cpiChart;
    //     var fetchedData; // Variable to store the fetched data

    //     // Fetch the data when the page initially loads
    //     fetchCPIData();

    //     function fetchCPIData() {
    //         // Your API URL here
    //         var apiUrl = "{{ url('/get-cpi-data') }}";
    //         $.ajax({
    //             url: apiUrl,
    //             type: 'GET',
    //             success: function (response) {
    //                 console.log('Fetched data:', response);
    //                 fetchedData = response.observations;
    //                 updateChart('all');
    //             },
    //             error: function (error) {
    //                 console.log('Error fetching CPI data:', error);
    //             }
    //         });
    //     }

    //     function updateChart(yearRange) {
    //         console.log('Updating chart with year range:', yearRange);

    //         if (!fetchedData) {
    //             console.log('No data fetched yet. Cannot update chart.');
    //             return;
    //         }

    //         var filteredData;
    //         if (yearRange === 'all') {
    //             filteredData = fetchedData;
    //         } else {
    //             var startYear = new Date().getFullYear() - parseInt(yearRange) + 1;
    //             filteredData = fetchedData.filter(function (observation) {
    //                 var observationYear = new Date(observation.date).getFullYear();
    //                 return observationYear >= startYear;
    //             });
    //         }

    //         if (filteredData.length === 0) {
    //             console.log('No data available for the selected year range.');
    //             return;
    //         }

    //         var labels = filteredData.map(function (observation) {
    //             var date = new Date(observation.date);
    //             return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
    //         });
    //         var values = filteredData.map(function (observation) {
    //             return observation.value;
    //         });

    //         if (cpiChart) {
    //             cpiChart.destroy();
    //         }

    //         cpiChart = new Chart(ctx, {
    //             type: 'line',
    //             data: {
    //                 labels: labels,
    //                 datasets: [{
    //                     label: 'CPI Data',
    //                     data: values,
    //                     borderColor: 'rgba(75, 192, 192, 1)',
    //                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
    //                     borderWidth: 2
    //                 }]
    //             },
    //             options: {
    //                 scales: {
    //                     x: {
    //                         ticks: {
    //                             maxRotation: 0, // Rotate x-axis labels if needed
    //                             autoSkip: true, // Automatically skip labels to fit
    //                             maxTicksLimit: 12, // Maximum number of visible ticks on the x-axis
    //                         }
    //                     },
    //                     y: {
    //                         beginAtZero: true
    //                     }
    //                 }
    //             }
    //         });
    //     }

    //     var yearRangeInputs = $('input[name="years"]');
    //     var downloadCSVButton = $('#downloadCSV');

    //     yearRangeInputs.on('change', function () {
    //         var yearRange = $(this).val();
    //         updateChart(yearRange);
    //     });

    //     downloadCSVButton.on('click', function () {
    //         downloadCSV();
    //     });

    //     var defaultYearRange = 'all';
    //     updateChart(defaultYearRange);

    //     function downloadCSV() {
    //         if (!fetchedData) {
    //             console.log('No data fetched yet. Cannot download CSV.');
    //             return;
    //         }

    //         var csvContent = "Date,Value\n";

    //         fetchedData.forEach(function (observation) {
    //             var date = new Date(observation.date);
    //             var formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
    //             csvContent += formattedDate + "," + observation.value + "\n";
    //         });

    //         var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    //         var link = document.createElement('a');

    //         if (navigator.msSaveBlob) {
    //             navigator.msSaveBlob(blob, 'CPI.csv');
    //         } else {
    //             link.href = URL.createObjectURL(blob);
    //             link.download = 'CPI.csv';
    //             link.style.visibility = 'hidden';
    //             document.body.appendChild(link);
    //             link.click();
    //             document.body.removeChild(link);
    //         }
    //     }
    // }
</script>

@endsection