@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. Employment Situation</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. Employment Situation</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="usesChart" 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. Employment Situation?</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">The U.S. Employment Situation is a crucial economic indicator,
                        providing a snapshot of the labor market in the United States. It encompasses various metrics,
                        including job additions, work hours, and wage data. This indicator is integral for traders and
                        economists to gauge the current health of the U.S. 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 U.S. Employment Situation is compiled through comprehensive surveys
                        and statistical methods. The Bureau of Labor Statistics conducts monthly surveys across diverse
                        sectors, gathering data on employment, unemployment, and wages. This thorough methodology
                        ensures accuracy and reliability, making it a trusted source for market analysts and investors.
                    </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 leading global economy, the U.S.’s labor market dynamics
                        significantly impact the worldwide economic landscape. The U.S. Employment Situation, as a
                        reflective indicator, provides crucial insights into current economic trends. It significantly
                        influences foreign exchange rates, international trade policies, and global market sentiments.
                        Its release is keenly observed by financial markets around the world.</p>
                </div>
                <div class="col-12">
                    <h3 class="main-indi-head">Interpretation</h3>
                </div>
                <div class="col-12">
                    <p class="main-indi-content">This indicator is best understood as a coincident indicator, reflecting
                        the current state of the economy rather than predicting future trends. It verifies whether the
                        trends suggested by leading indicators are manifesting in the labor market. Traders use this
                        information to make informed decisions, aligning their strategies with the existing economic
                        conditions rather than speculative forecasts.</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('usesChart').getContext('2d');
        var usesChart;
        var fetchedData; // Variable to store the fetched data

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

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

</script>

@endsection
@endsection