@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">Retail Sales</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>Retail Sales</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="rsChart" 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 Retail Sales?</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">Retail Sales is an important economic indicator that measures the total
                        receipts of retail stores. It provides insights into consumer spending behavior, an essential
                        aspect of a country’s economic activity. While not typically a large percentage of a country’s
                        GDP, changes in Retail Sales can offer valuable clues about consumer confidence and spending
                        patterns within an economy.</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 for calculating Retail Sales involves aggregating the
                        revenue generated by retailers of all sizes across a country. This data is usually collected on
                        a monthly basis and adjusted for seasonal variations to provide a more accurate reflection of
                        underlying trends. The indicator encompasses a broad range of retail sectors, from food and
                        beverage to clothing and electronics, offering a comprehensive view of consumer spending. While
                        Retail Sales are generally reported as total revenue, the European Commission is a notable
                        exception. It publishes the data of European countries as an index, allowing for easier
                        comparison between their economies.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Global Relevance</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">Retail Sales hold immense global relevance as they are a key barometer
                        of economic activity across different countries. High retail sales figures typically indicate a
                        thriving economy with confident consumers, while declining numbers can signal economic downturns
                        or reduced consumer confidence. This indicator is closely monitored by policymakers, investors,
                        and businesses worldwide, as it impacts global markets and economic strategies.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Interpretation</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">As a lagging indicator, Retail Sales should not be used for predicting
                        future economic trends. Instead, it provides valuable feedback on the state of the economy,
                        particularly in terms of consumer spending and confidence. It helps in validating the
                        projections made by leading indicators. For instance, if leading indicators suggest economic
                        growth, an increase in Retail Sales can confirm that the growth is materializing as increased
                        consumer spending. Retail Sales can also offer some insights into the immediate impacts of
                        certain fiscal policies on consumer behavior, though it is not a comprehensive measure of fiscal
                        policy effectiveness.</p>
                </div>
            </div>
        </div>
    </section>
</main>


@section('script')

<!-- 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('rsChart').getContext('2d');
        var rsChart;
        var fetchedData; // Variable to store the fetched data

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

        function fetchrsData() {
            var apiUrl = "{{ url('/get-rs-data') }}";
            $.ajax({
                url: apiUrl,
                type: 'GET',
                success: function (response) {
                    console.log('Fetched data:', response);
                    fetchedData = response.observations;
                    updateChart('all'); // Update the chart with the default "all" range
                },
                error: function (error) {
                    console.log('Error fetching RS 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;
            }

            // Filter the data based on the selected year range
            var filteredData;
            if (yearRange === 'all') {
                filteredData = fetchedData; // Use all data
            } 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 (rsChart) {
                rsChart.destroy();
            }
            
            rsChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'RS Growth',
                        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 () {
            var selectedYearRange = $('input[name="years"]:checked').val();
            downloadCSV(selectedYearRange);
        });

        // Initial chart load with the "all time" option
        var defaultYearRange = 'all'; // Set the default year range to "all time"
        updateChart(defaultYearRange);

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

            var csvContent = "Date,Value\n";

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

            filteredData.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, 'RS.csv');
            } else {
                link.href = URL.createObjectURL(blob);
                link.download = 'RS.csv';
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
});

</script>

@endsection
@endsection