@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">{{ $indicator->banner_heading ? $indicator->banner_heading : '' }}</h1>
                </div>
                <div class="col-12">
                    <p class="indi-ban-para">{{ $indicator->banner_desc ? $indicator->banner_desc : '' }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="indicators mt-4">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-6">
                    <h4>{{ $indicator->banner_heading ? $indicator->banner_heading : '' }}</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="javascript:;"  onsubmit="return false;">
                        <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)">United States (US)</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>
                         
                            <!-- <button id="downloadCSV">Download CSV</button> -->
                            <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="{{ $indicator->slug }}" width="800" height="400"></canvas>

                </div>
            </div>
        </div>
    </section>


    <section class="faq-links">
        <div class="container" bis_skin_checked="1">
            <div class="container" bis_skin_checked="1">
                <div class="row" bis_skin_checked="1">
                    <div class="col-12" bis_skin_checked="1">
                        <p>Sources: <a href="#"> {{ $indicator->sources ? $indicator->sources : '' }} </a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="indi-f-aq mb-4">
        <div class="container" bis_skin_checked="1">
            <div class="row" bis_skin_checked="1">
                <div class="col-12" bis_skin_checked="1">
                    <div class="accordion" id="accordionExample" bis_skin_checked="1">
                        <div class="accordion-item" bis_skin_checked="1">
                            <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" bis_skin_checked="1">
                                <div class="accordion-body" bis_skin_checked="1">
                                   {!! $indicator->additional_detail ? $indicator->additional_detail : '' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="indi-content">
        <div class="container" bis_skin_checked="1">
            <div class="row" bis_skin_checked="1">
                <!--<div class="col-12" bis_skin_checked="1">-->
                <!--    <h3 class="main-indi-head pad-acc">What is U.S. Employment Situation?</h3>-->
                <!--</div>-->
                <!--<div class="col-12" bis_skin_checked="1">-->
                <!--    <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" bis_skin_checked="1">-->
                <!--    <h3 class="main-indi-head">Methodology</h3>-->
                <!--</div>-->
                <!--<div class="col-12" bis_skin_checked="1">-->
                <!--    <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" bis_skin_checked="1">-->
                <!--    <h3 class="main-indi-head">Global Relevance</h3>-->
                <!--</div>-->
                <!--<div class="col-12" bis_skin_checked="1">-->
                <!--    <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" bis_skin_checked="1">-->
                <!--    <h3 class="main-indi-head">Interpretation</h3>-->
                <!--</div>-->
                <!--<div class="col-12" bis_skin_checked="1">-->
                <!--    <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>-->
                
                 <!--{!! $indicator->description ? $indicator->description : '' !!}-->
                 
                 
            </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 type="text/javascript">
    // Assuming you use Auth to check user status and a User model that includes a membership_id attribute
    window.AuthUser = @json(Auth::check());
    window.UserMembershipId = @json(Auth::check() ? Auth::user()->membership_id : null);
</script>

<script>

$(document).ready(function () {
    // Call the main function after the document is ready
    initializeChart();

    function initializeChart() {
        var ctx = document.getElementById('{{ $indicator->slug }}').getContext('2d');
        var gdpChart;
        var fetchedData; // Variable to store the fetched data

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

        function fetchGDPData() {
            var apiUrl = "{{ url('/get-indicator-chart-data') }}";
            var code = '{{ $indicator->code }}'
            $.ajax({
                url: apiUrl,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                data:{
                    indicatorCode:code,
                },
                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 GDP 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 (gdpChart) {
                gdpChart.destroy();
            }
            
            gdpChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '{{ $indicator->banner_heading }} 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 () {
            
        const loginUrl = '{{ url("/register") }}'; // Update with your actual login URL
        const membershipUrl = '{{ url("/pricing") }}'; // Update with your actual signup or subscription URL

        // Check if user data is fetched and if the user is logged in
        if (!window.AuthUser) {
            toastr.error('Please login or signup to download CSV.');
            setTimeout(function() {
                window.location.href = loginUrl;
            }, 2000); // Adjust delay time as needed
            return;
        }
        
       
    
        // Check if user's membership_id is 1
        if (window.UserMembershipId !== "2") {
            toastr.error('Please subscribe our premium plan to download unlimited CSV.');
            setTimeout(function() {
                window.location.href = membershipUrl;
            }, 3000); // Adjust delay time as needed
            return;
        }
            
            
            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, '{{ $indicator->banner_heading }}.csv');
            } else {
                link.href = URL.createObjectURL(blob);
                link.download = '{{ $indicator->banner_heading }}.csv';
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }
});

</script>

@endsection
@endsection