@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">Composite Leading Indicator (CLI)</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>Composite Leading Indicator (CLI)</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="cliChart" 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 Composite Leading Indicator (CLI)?</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The Composite Leading Indicator (CLI) is an essential tool for
                        forecasting economic trends, offering early signals of turning points in business cycles
                        worldwide. It’s a vital resource for traders and analysts seeking insights into future economic
                        activities.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Methodology</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The CLI methodology integrates various economic indicators like order
                        books, building permits, and consumer sentiment. These indicators are standardized, creating a
                        composite measure. An important aspect of the CLI is the reference value of 100, which
                        represents the long-term average economic performance. Values above 100 indicate above-trend
                        growth, while values below 100 suggest below-trend growth. This reference point is crucial for
                        comparing current economic performance against historical averages, providing a clear and
                        quantifiable measure of economic momentum.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Global Relevance</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">As a globally encompassing indicator, the CLI offers comparative
                        insights into economic patterns across different countries. Its universal approach enables users
                        to gauge economic performance on a global scale, facilitating a more diversified approach to
                        economic analysis and trading strategy development.</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 CLI involves understanding its position relative to
                        the trend. A rising CLI suggests an improving economic outlook, whereas a declining CLI may
                        indicate a potential slowdown. However, it’s crucial for users to consider this data in
                        conjunction with other economic indicators and market factors for a well-rounded analysis.</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('cliChart').getContext('2d');
        var cliChart;
        var fetchedData; // Variable to store the fetched data

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

        function fetchcliData() {
            var apiUrl = "{{ url('/get-cli-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 cli 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 (cliChart) {
                cliChart.destroy();
            }
            
            cliChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'cli 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, 'cli.csv');
            } else {
                link.href = URL.createObjectURL(blob);
                link.download = 'cli.csv';
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
});

</script>

@endsection


@endsection