@extends('front.layout.app')
@section('content')

<main>
    <style>
    canvas#spDataChart {
    background: #fff;
}

canvas#gdpDataChart {
    background: #fff;
}
    canvas#sp500Chart {
    background: #fff;
}
canvas#gdpChart {
    background: #fff;
}
        .wrapper{
  max-width: 450px;
  margin: 150px auto;
}

.real2 .wrapper .search-input{
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}

.real2 .search-input input {
    height: 55px;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 0 60px 0 20px;
    font-size: 17px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

.real2 .search-input.active input{
  border-radius: 5px 5px 0 0;
}

.real2 .search-input .autocom-box{
    padding: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
}

.real2 .search-input.active .autocom-box{
    padding: 0px 5px;
    opacity: 1;
    pointer-events: auto;
    overflow-x: hidden;
}

.real2 .autocom-box li{
    list-style: none;
    padding: 8px 12px;
    display: none;
    width: 100%;
    cursor: default;
    border-radius: 3px;
    margin: 2px;
    background: #fff;
}

.real2 .search-input.active .autocom-box li{
  display: block;
}
.real2 .autocom-box li:hover{
  background: #efefef;
}

.real2 .search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #e4ff4b;
  cursor: pointer;
}
button#downloadCSV {
    background: #2185f5;
    color: #fff;
    padding: 11px 20px;
    border-radius: 0;
    font-family: 'Poppins';
    font-size: 13px;
}

    </style>


    <section class="banner">
        <div class="main-slide">
            <div class="h-100 position-relative">
                <div class="container real ">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-12">
                            <ul class="real23">
                                
<div class="typing-container">
<span id="typing"></span>
<span class="cursor">|</span>
</div>
                            </ul>
                        </div>
                        <div class="banner-con">
                            <h2>Introducing the <br> <span>Economic Composite Index Builder</span> </h2>
                            <!--<div class="row">-->
                            <!--    <div class="col-12 col-lg-6">-->
                            <!--        <div class="inp-parent">-->
                            <!--            <i class="fa-sharp fa-solid fa-angle-down"></i>-->
                                        <!--<input type="text" placeholder="My New Index" style=" pointer-events:none;">-->
                            <!--               <input type="text" placeholder="Economic Sector" style=" pointer-events:none;">-->
                            <!--            <select class="form-select" aria-label="Default select example">-->
                            <!--                <option selected>Select Sector</option>-->
                            <!--                <option value="1">Technology</option>-->
                            <!--                <option value="2">Financial Services</option>-->
                            <!--                <option value="3">Healthcare</option>-->
                                            
                            <!--                <option value="1">Consumer Cyclical</option>-->
                            <!--                <option value="2">Industrials</option>-->
                            <!--                <option value="3">Communication Services</option>-->
                                            
                                            
                            <!--                <option value="1">Consumer Defensive</option>-->
                            <!--                <option value="2">Energy</option>-->
                            <!--                <option value="3">Basic Materials</option>-->
                                            
                            <!--                <option value="1">Real Estate</option>-->
                            <!--                <option value="2">Utilities</option>-->
                                        
                            <!--            </select>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--    <div class="col-12 col-lg-6">-->
                            <!--        <div class="inp-parent">-->
                            <!--            <i class="fa-sharp fa-solid fa-angle-down"></i>-->
                                        <!--<input type="text" placeholder="My First Index" style="pointer-events:none;">-->
                            <!--            <input type="text" placeholder="Economic Indicator" style="pointer-events:none;">-->
                            <!--            <select class="form-select" aria-label="Default select example">-->
                            <!--                <option selected>Select Indicator</option>-->
                            <!--                <option value="1">U.S. Treasury Yield Spread</option>-->
                            <!--                <option value="2">Purchasing Manager Index (PMI)</option>-->
                            <!--                <option value="3">S&amp;P 500</option>-->
                                            
                            <!--                 <option value="1">Composite Leading Indicator (CLI)</option>-->
                            <!--                <option value="2">U.S. Employment Situation</option>-->
                            <!--                <option value="3">U.S. Jobless Claims</option>-->
                                            
                            <!--                 <option value="1">Consumer Price Index (CPI)</option>-->
                            <!--                <option value="2">Producer Price Index (PPI)</option>-->
                            <!--                <option value="3">Real Gross Domestic Product (GDP)</option>-->
                                            
                                            
                            <!--                 <option value="1">Unemployment</option>-->
                            <!--                <option value="2">Retail Sales</option>-->
                                           
                            <!--            </select>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                            <div class="row">
                                <ul class="real2">
                                    <li class="lione">
                                        <label for="">Select Your Preferred Economic Indicators.</label>
                                        <div class="search-input">
                                            <input type="text" placeholder="GDP" id="firstInput" class="indicator-input">
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input">
                                            <input type="text" placeholder="US Treasery Yield" id="secondInput" class="indicator-input">
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input">
                                            <input type="text" placeholder="Unemployment" id="thirdInput" class="indicator-input">
                                            <div class="autocom-box"></div>
                                        </div>
                                    </li>

                                    <li class="litwo">
                                        <label for="">Weight Them Based On Your
                                            Desired Relative Importance.</label>
                                        <div class="img-div">
                                            <img src="{{ URL::asset('assets/front/images/pro.png') }}" class="img-line" alt="">
                                            <div class="cir">
                                                <i class="fa-solid fa-gear"></i>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="lithree">
                                        <label for="">Let The Tool Normalize, Compile and Show
                                            You The Composite Value In a Single Chart.</label>
                                        <!--<div id="economicChart" style=" width: 100%;"></div>-->
                                        <!-- Toggle Normalization Button -->
                                        <button id="toggleNormalization">Toggle Normalized Data</button>

                                        <canvas id="economicChart" style=" width: 100%; background: white;"></canvas>
                                        <div class="col-12">
                                            <div class="text-end">
                                                  <button id="downloadCSV" class="btn btn-primary my-2">Download CSV</button>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="btn-div text-center">
                                    <input type="button" class="build-index btn-rol" value="Build Index">
                                </div>
                            </div>

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

    <section class="three">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-4">
                    <div class="all">
                        <img src="{{ URL::asset('assets/front/images/one.png') }}" class="img-fluid" alt="">
                        <h3>26,000+ Indicators</h3>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="all ol">
                        <img src="{{ URL::asset('assets/front/images/two.png') }}" class="img-fluid" alt="">
                        <h3>Real-Time Market Indicators</h3>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="all">
                        <img src="{{ URL::asset('assets/front/images/three.png') }}" class="img-fluid" alt="">
                        <h3>CSV Data Downloads</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="benefits">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="ben-head text-center">
                        <h1>Benefits</h1>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/1.png') }}" alt="">
                        <h2>Customized Economic Analysis:</h2>
                        <p>Tailor economic insights to your specific needs. Choose from a diverse range of metrics, group them by sector, and build personalized charts that align with your unique analytical requirements.</p>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/2.png') }}" alt="">
                        <h2>Real-Time Market Monitoring:</h2>
                        <p>Stay ahead with real-time updates. Access live data for key indices like the S&P 500, allowing you to make informed decisions based on the latest economic trends.</p>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/3.png') }}" alt="">
                        <h2>Effortless Metric Comparison:</h2>
                        <p>Streamline your analysis with easy-to-use comparison charts. Evaluate multiple economic metrics side by side, gaining a comprehensive view of their impact on the economy. </p>
                    </div>
                </div>
                <div class="text-center mt-5">
                <a href="{{ route('benefits') }}" class="ok342">See all benefits</a>
                </div>
            </div>
        </div>
    </section>

    <section class="charts">
        <div class="container">
            <div class="row gy-5">
                <div class="col-12 col-lg-6">
                    <div class="chart-head">
                        <h1>Featured Default Charts</h1>
                    </div>
                </div>
                <div class="col-12 col-lg-6 ">
                    <div class="d-flex align-items-center justify-content-end h-100">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#home-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true">Bar Charts</button>
                            </li>
                            <!--<li class="nav-item" role="presentation">-->
                            <!--    <button class="nav-link" id="profile-tab" data-bs-toggle="tab"-->
                            <!--        data-bs-target="#profile-tab-pane" type="button" role="tab"-->
                            <!--        aria-controls="profile-tab-pane" aria-selected="false">Line Charts</button>-->
                            <!--</li>-->
                        </ul>
                    </div>

                </div>

                <div class="col-12">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                            aria-labelledby="home-tab" tabindex="0">
                            <div class="row gy-5">
                                <div class="col-12 col-lg-6">
                                    <div class="chart-img">
                                        <canvas id="sp500Chart"></canvas>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <div class="chart-img">
                                        <canvas id="gdpChart"></canvas>
                                    </div>
                                </div>
                           
                            </div>
                        </div>
                        <!--<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"-->
                        <!--    tabindex="0">-->
                        <!--    <div class="row gy-5">-->
                        <!--      <div class="col-12 col-lg-6">-->
                        <!--            <div class="chart-img">-->
                        <!--                <canvas id="spDataChart"></canvas>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--        <div class="col-12 col-lg-6">-->
                        <!--            <div class="chart-img">-->
                                      
                        <!--                <canvas id="gdpDataChart"></canvas>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="martop">
                    <div class="row gy-5">
                        <div class="col-12 col-lg-6">
                            <div class="market-img">
                                <img src="{{ URL::asset('assets/front/images/market.png') }}" alt="">
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="market-content">
                                <h3>Elevate Your Financial Wisdom</h3>
                                <p>Explore the Economic Composite Index Builder for Strategic Decision Making
                                    Excellence!</p>
                                <a href="{{ url('/page/es-252-quant-fund-lp-disclosures') }}">ES-252 Quant Fund, LP Disclosures</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="index">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1>My First Total Composite Index</h1>
                </div>
                <div class="col-12">
                    <p>(GDP, Housing Prices and Unemployment)</p>
                </div>
                <div class="col-12 mb-5">
                    <div id="chartContainer8" style="height: 600px; width: 100%;"></div>
                </div>
                <div class="col-12">
                    <div class="margin-top">
                        <a href="#">Explore Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

@section('script')

<script src="{{ asset('assets/front/js/suggestions.js') }}"></script>

<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 src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@latest"></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 () {
  const ctx = document.getElementById('economicChart').getContext('2d');
    
    if (window.economicChart && typeof window.economicChart.destroy === 'function') {
        window.economicChart.destroy();
    }

    window.economicChart = new Chart(ctx, {
    type: 'line', // Chart type
    data: {
        datasets: [] // No data for the empty chart
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    parser: 'YYYY',
                    unit: 'year',
                    tooltipFormat: 'YYYY',
                    displayFormats: {
                        year: 'YYYY'
                    }
                },
                title: {
                    display: true,
                    text: 'Date'
                },
                grid: {
                    display: false
                }
            },
            y: {
                min: 0,
                max: 100,
                ticks: {
                    callback: function(value) {
                        return value;
                    }
                },
                grid: {
                    display: true
                }
            }
        },
        elements: {
            line: {
                tension: 0.4
            },
            point: {
                radius: 0
            }
        },
        plugins: {
            legend: {
                display: false // No legend for an empty chart
            },
            tooltip: {
                enabled: false // Disable tooltips for an empty chart
            },
            zoom: {
                enabled: false // Disable zoom for an empty chart
            },
            title: { // Add title configuration here
                display: true,
                text: 'My First Total Composite Index',
                position: 'top',
                align: 'center',
                font: {
                    size: 18 // Adjust the font size as needed
                }
            }
        },
        responsive: true,
        maintainAspectRatio: true
    }
});


});

$(document).ready(function() {
    const chartColors = [
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255, 159, 64, 1)'
    ];
    let selectedIndicators = [];
    let chartDatasetsMap = {};
    let showNormalizedData = false;

    $('.autocom-box').on("click", "li", function() {
        const inputBox = $(this).closest(".search-input").find(".indicator-input");
        const indicatorName = $(this).text();
        const selectedValue = $(this).data("value");
    
        inputBox.val(indicatorName); // Set the input text
        inputBox.data("value", selectedValue); // Store the data-value
        $('.autocom-box').empty();
        $('.search-input').removeClass("active");
    });

    $('.build-index').on("click", function() {
        
         // Disable the button
        var button = document.querySelector(".build-index");
        button.disabled = true;

        // Enable the button after 2 seconds
        setTimeout(function() {
            button.disabled = false;
        }, 2000); // 2 seconds in milliseconds
        
        const loginUrl = '{{ url("/register") }}'; // Update with your actual login URL
        const membershipUrl = '{{ url("/pricing") }}'; 
        
        var checkCount =  localStorage.getItem('counting');
        
        if (window.AuthUser) {
            // alert('user login');
            
            if (window.UserMembershipId !== "1" && window.UserMembershipId !== "2") {
                console.log("UserMembershipId:", UserMembershipId);
    
                if (checkCount >= 15) {
                    toastr.error("You have reached your limit. Please subscribe to a membership to build your composite charts.");
                    
                    setTimeout(function() {
                        window.location.href = membershipUrl;
                    }, 3000); // Adjust delay time as needed
                    return;
                }
            }
                    
                    
        } else{
            if (checkCount >= 15) {
            toastr.error('You have reach your limit, Please login or signup to build your composite charts.');
            setTimeout(function() {
                window.location.href = loginUrl;
            }, 2000); // Adjust delay time as needed
            return;
            }
            
        }
        
        
        const firstIndicator = $('#firstInput').data("value");
        const secondIndicator = $('#secondInput').data("value");
        const thirdIndicator = $('#thirdInput').data("value");
        
        const firstIndicatorName = $('#firstInput').val().trim();
        const secondIndicatorName = $('#secondInput').val().trim();
        const thirdIndicatorName = $('#thirdInput').val().trim();
        
        console.log([firstIndicator, secondIndicator, thirdIndicator]);
    
        // Update selectedIndicators array
        selectedIndicators = []; // Reset the array
        if (firstIndicator) {
            selectedIndicators.push({ name: firstIndicatorName, value: firstIndicator });
        }
        if (secondIndicator) {
            selectedIndicators.push({ name: secondIndicatorName, value: secondIndicator });
        }
        if (thirdIndicator) {
            selectedIndicators.push({ name: thirdIndicatorName, value: thirdIndicator });
        }
        
        console.log('lenght == >', selectedIndicators.length);
        
        // if(selectedIndicators.length >= 3 ){
        
            $(".fa-solid.fa-gear").toggleClass("cirAdd");
            
            console.log(selectedIndicators);
        
        //     // Clear existing chart data from the datasets map
            chartDatasetsMap = {};
            
        //     // Fetch new data and build the chart
            selectedIndicators.forEach(indicator => {
                fetchDataForIndicator(indicator.value, indicator.name);
            });
            
            selectedIndicators = [];
        
        // }else{
        //     alert("Please Fill Out All Indicator Fields");
        // }
        
        
    });
    
  
    
    $('.indicator-input').on("input", function () {
        const userData = $(this).val().toLowerCase().trim();
        const suggBox = $(this).closest(".search-input").find(".autocom-box");
    
        if (userData === "") {
            suggBox.empty().closest(".search-input").removeClass("active");
            return;
        }
    
        // Make AJAX request to fetch filtered suggestions
        $.ajax({
            url: "{{ route('getIndicators') }}", // Adjust if your app is in a subdirectory
            type: 'GET',
            data: { query: userData },
            success: function(response) {
                showSuggestions(response.indicators, suggBox);
            },
            error: function() {
                console.error('Error fetching suggestions.');
            }
        });
    });
    
    function showSuggestions(list, suggBox) {
        let listData = list.map(data =>
            `<li data-value="${data.code}">${data.banner_heading}</li>`
        ).join('');
        suggBox.html(listData).closest(".search-input").addClass("active");
    }
    
    function processDataForChart(fetchedData) {
        const maxValue = Math.max(...fetchedData.map(observation => observation.value));
    
        let processedData = fetchedData.map(observation => {
            let scaledValue = observation.value; // Scale to percentage
            return {
                x: new Date(observation.date),
                y: scaledValue
            };
        });
    
        return processedData;
    }

    // Function to fetch data for a given indicator
    function fetchDataForIndicator(value, indicatorName) {
        $.ajax({
            type: "POST",
            url: "{{ url('/get-compiled-data') }}",
            headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}"},
            data: { selectedValue: value },
            success: function(response) {
                updateChartDatasets(indicatorName, response.observations);
            },
            error: function(err) {
                console.error("AJAX error:", err);
            }
        });
    }

    // function normalizeData(data) {
    //     // Convert each date to a Date object and ensure the data is sorted by date
    //     data.forEach(item => {
    //         item.x = new Date(item.x);
    //     });
    //     data.sort((a, b) => a.x - b.x);
    
    //     // Initialize an object to store the last seen value for each month
    //     const lastSeenMonthlyValues = {};
    
    //     // A function to generate keys for storing data
    //     const generateKey = (year, month) => `${year}-${month}`;
    
    //     // Populate lastSeenMonthlyValues with data for each month, or the last available month's data
    //     data.forEach(item => {
    //         const year = item.x.getFullYear();
    //         const month = item.x.getMonth(); // Month is 0-indexed (0 for January, 11 for December)
    
    //         // Fill in missing months with the last seen value
    //         for (let m = 0; m <= month; m++) {
    //             const key = generateKey(year, m);
    //             if (!lastSeenMonthlyValues[key]) {
    //                 lastSeenMonthlyValues[key] = item.y; // Use the current or last available value
    //             }
    //         }
    
    //         // Update the last seen value for the current month
    //         const key = generateKey(year, month);
    //         lastSeenMonthlyValues[key] = item.y;
    //     });
    
    //     // Calculate the percentage change for each month compared to the same month in the previous year
    //     let normalizedData = [];
    //     Object.keys(lastSeenMonthlyValues).forEach(key => {
    //         const [year, month] = key.split('-').map(Number);
    //         const previousYearKey = generateKey(year - 1, month);
    
    //         if (lastSeenMonthlyValues[previousYearKey] !== undefined) {
    //             const currentValue = lastSeenMonthlyValues[key];
    //             const previousValue = lastSeenMonthlyValues[previousYearKey];
    //             const difference = ((currentValue - previousValue) / previousValue);
    
    //             // Generate a new Date object for the current year and month
    //             const date = new Date(year, month);
    
    //             normalizedData.push({
    //                 x: date,
    //                 y: isNaN(difference) ? 0 : difference
    //             });
    //         }
    //     });
    
    //     // Ensure normalizedData is sorted by date, as manipulating objects might have altered the order
    //     normalizedData.sort((a, b) => a.x - b.x);
    
    //     return normalizedData;
    // }
    
    function normalizeData(data) {
    // Convert each date to a Date object and ensure the data is sorted by date
    data.forEach(item => {
        item.x = new Date(item.x);
    });
    data.sort((a, b) => a.x - b.x);

    // Initialize an object to store the last seen value for each month
    const lastSeenMonthlyValues = {};

    // A function to generate keys for storing data
    const generateKey = (year, month) => `${year}-${month}`;

    // Populate lastSeenMonthlyValues with data for each month, or the last available month's data
    data.forEach(item => {
        const year = item.x.getFullYear();
        const month = item.x.getMonth(); // Month is 0-indexed (0 for January, 11 for December)

        // Fill in missing months with the last seen value
        for (let m = 0; m <= month; m++) {
            const key = generateKey(year, m);
            if (!lastSeenMonthlyValues[key]) {
                lastSeenMonthlyValues[key] = item.y; // Use the current or last available value
            }
        }

        // Update the last seen value for the current month
        const key = generateKey(year, month);
        lastSeenMonthlyValues[key] = item.y;
    });

    // Calculate the actual value difference for each month compared to the same month in the previous year
    let normalizedData = [];
    Object.keys(lastSeenMonthlyValues).forEach(key => {
        const [year, month] = key.split('-').map(Number);
        const previousYearKey = generateKey(year - 1, month);

        if (lastSeenMonthlyValues[previousYearKey] !== undefined) {
            const currentValue = lastSeenMonthlyValues[key];
            const previousValue = lastSeenMonthlyValues[previousYearKey];
            const difference = currentValue - previousValue; // Calculate the actual difference

            // Generate a new Date object for the current year and month
            const date = new Date(year, month);

            normalizedData.push({
                x: date,
                y: difference // Use the actual difference
            });
        }
    });

    // Ensure normalizedData is sorted by date, as manipulating objects might have altered the order
    normalizedData.sort((a, b) => a.x - b.x);

    return normalizedData;
}
    
    // Modified: Fetch data for a given indicator and update chart datasets
    function updateChartDatasets(indicatorName, fetchedData) {
        if (fetchedData.length === 0) {
            console.log('No data available for', indicatorName);
            return;
        }
        // Note: Depending on your fetchedData structure, adjust the normalization logic as necessary
        const processedData = processDataForChart(fetchedData);
        const colorIndex = Object.keys(chartDatasetsMap).length % chartColors.length;

        chartDatasetsMap[indicatorName] = {
            label: indicatorName,
            data: showNormalizedData ? normalizeData(processedData) : processedData, // Use normalized data if flag is true
            borderColor: chartColors[colorIndex],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 2
        };
        renderChart();
    }

    // Toggle normalization button event listener
    $('#toggleNormalization').on('click', function() {
        showNormalizedData = !showNormalizedData; // Toggle the flag
    
        for (let key in chartDatasetsMap) {
            let dataset = chartDatasetsMap[key];
            let originalData = dataset.originalData || dataset.data; // Store or retrieve original data
    
            if (showNormalizedData) {
                // Store original data if not already stored
                if (!dataset.originalData) {
                    dataset.originalData = dataset.data;
                }
                // Apply the normalization
                dataset.data = normalizeData(dataset.data);
            } else {
                // Restore the original data
                dataset.data = originalData;
            }
        }
    
        renderChart(); // Re-render the chart with the updated datasets
    });

    // Modified: Render the chart with updated logic for normalization
    function renderChart() {
        const ctx = document.getElementById('economicChart').getContext('2d');
        
        // Destroy the existing chart if it exists
        if (window.economicChart) {
            window.economicChart.destroy();
        }
        
// Find minimum and maximum values across all datasets
let allValues = Object.values(chartDatasetsMap).flatMap(dataset => dataset.data.map(point => point.y));
let minValue = Math.min(...allValues);
let maxValue = Math.max(...allValues);

// Custom function to round values to the nearest desired interval (e.g., 5000)
function roundToNearestInterval(value, interval) {
    if(value >= 0) {
        return Math.ceil(value / interval) * interval;
    } else {
        return Math.floor(value / interval) * interval;
    }
}

// Apply the custom rounding function to your min and max values
let roundedMaxValue = roundToNearestInterval(maxValue, 5000);
let roundedMinValue = minValue < 0 ? roundToNearestInterval(minValue, 5000) : 0; // Adjust for negative min values


window.economicChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: Object.values(chartDatasetsMap).map(dataset => ({
            label: dataset.label,
            data: dataset.data,
            borderColor: dataset.borderColor,
            backgroundColor: dataset.backgroundColor,
            borderWidth: dataset.borderWidth
        }))
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    parser: 'YYYY-MM-DD', // Adjust according to your actual date format
                    unit: 'month',
                    tooltipFormat: 'll',
                    displayFormats: {
                        month: 'MMM YYYY'
                    }
                },
                title: {
                    display: true,
                    text: 'Date'
                },
                grid: {
                    display: false // Optionally hide the grid lines for a cleaner look
                }
            },
            y: {
                min: roundedMinValue, // Use the dynamically determined min value
                max: roundedMaxValue, // Use the dynamically determined max value
                ticks: {
                    // Define any specific tick configuration here
                    callback: function(value) {
                        return value.toLocaleString(); // Format numbers with commas (optional)
                    }
                },
                grid: {
                    display: true // Show the grid lines by default
                }
            }
        },
        elements: {
            line: {
                tension: 0.4 // Adjust for desired curve
            },
            point: {
                radius: 0 // Hide points for a line-only graph
            }
        },
        plugins: {
            legend: {
                display: true, // Show the legend
                position: 'top', // Place it at the top
            },
            tooltip: {
                mode: 'index',
                intersect: false
            },
            title: {
                display: true,
                text: 'My First Total Composite Index',
                position: 'top',
                align: 'center',
                font: {
                    size: 18 // Adjust the title font size as needed
                }
            }
        },
        responsive: true,
        maintainAspectRatio: true
    }
});
        // Your existing chart initialization code...
        // window.economicChart = new Chart(ctx, {
        //     type: 'line',
        //     data: { datasets: Object.values(chartDatasetsMap).map(dataset => ({
        //         label: dataset.label,
        //         data: dataset.data,
        //         borderColor: dataset.borderColor,
        //         backgroundColor: dataset.backgroundColor,
        //         borderWidth: dataset.borderWidth
        //     })) },
        //     options: {
        //         scales: {
        //             x: {
        //                 type: 'time',
        //                 time: {
        //                     parser: 'YYYY', // Use the appropriate format for your dates
        //                     unit: 'year',
        //                     tooltipFormat: 'YYYY',
        //                     displayFormats: {
        //                         year: 'YYYY'
        //                     }
        //                 },
        //                 title: {
        //                     display: true,
        //                     text: 'Date'
        //                 },
        //                 grid: {
        //                     display: false // Hide the grid lines for a cleaner look
        //                 }
        //             },
        //             y: {
        //                 min: showNormalizedData ? -100 : undefined, // Set min to -100 if normalized data is shown
        //                 max: showNormalizedData ? 100 : undefined, // End at 100%
        //                 ticks: {
        //                     callback: function(value) {
        //                         return value; // Append a '%' sign to y-axis labels
        //                     }
        //                 },
        //                 grid: {
        //                     display: true // Show the grid lines by default
        //                 }
        //             }
        //         },
        //         elements: {
        //             line: {
        //                 tension: 0.4 // Adjust line tension for a smoother curve, set to 0 for straight lines
        //             },
        //             point: {
        //                 radius: 0 // Hide points by setting radius to 0
        //             }
        //         },
        //         plugins: {
        //             legend: {
        //                 display: true, // Display the legend
        //                 position: 'top', // Position the legend at the top
        //             },
        //             tooltip: {
        //                 mode: 'index',
        //                 intersect: false
        //             },
        //             title: { // Add title configuration here
        //                 display: true,
        //                 text: 'My First Total Composite Index',
        //                 position: 'top',
        //                 align: 'center',
        //                 font: {
        //                     size: 18 // You can adjust the font size as needed
        //                 }
        //             }
        //         },
        //         responsive: true,
        //         maintainAspectRatio: true
        //     }
        // });
        
    // Retrieve the current count from local storage
    var counting = localStorage.getItem('counting');
    
    // If the counting variable is null, set it to 0
    if (counting === null) {
        counting = 0;
    } else {
        // If counting exists in local storage, convert it to a number
        counting = parseInt(counting);
    }
    
    // Increment the count
    counting++;
    
    // Store the updated count in local storage
    localStorage.setItem('counting', counting);
    console.log('counting ==>', counting)
    
    // Set a timeout to clear the count after 48 hours
    setTimeout(function() {
        localStorage.removeItem('counting');
    }, 48 * 60 * 60 * 1000); // 48 hours in milliseconds

    }
    
    
    function formatChartDataToCSV(chartDatasetsMap) {
        let csvContent = "data:text/csv;charset=utf-8,";
        csvContent += "Indicator,Date,Value\n"; // Add header row
    
        for (const [indicator, dataset] of Object.entries(chartDatasetsMap)) {
            const dataToExport = showNormalizedData ? normalizeData(dataset.originalData || dataset.data) : dataset.data;
            dataToExport.forEach(point => {
                let row = `${indicator},${point.x.toISOString().split('T')[0]},${point.y}`;
                csvContent += row + "\n";
            });
        }
    
        return csvContent;
    }
    
    function downloadCSV(csvContent, fileName) {
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", fileName);
        document.body.appendChild(link); // Required for Firefox
        link.click();
        document.body.removeChild(link);
    }
    
    
    $('#downloadCSV').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;
        }
        
        if (Object.keys(chartDatasetsMap).length === 0) {
            toastr.error('No data fetched yet. Cannot download CSV.');
            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;
        }
    
        
    
        const csvContent = formatChartDataToCSV(chartDatasetsMap);
        downloadCSV(csvContent, "chart-data.csv");
    });
});

</script>

<script>
    window.onload = function() {
        var chart8 = new CanvasJS.Chart("chartContainer8", {
            animationEnabled: true,
            title: {
                text: ""
            },
            axisX: {
                valueFormatString: "MMM"
            },
            axisY: {
                title: "",
                prefix: "$"
            },
            data: [{
                yValueFormatString: "$#,###",
                xValueFormatString: "MMMM",
                type: "spline",
                dataPoints: [{
                        x: new Date(2017, 0),
                        y: 25060
                    },
                    {
                        x: new Date(2017, 1),
                        y: 27980
                    },
                    {
                        x: new Date(2017, 2),
                        y: 33800
                    },
                    {
                        x: new Date(2017, 3),
                        y: 49400
                    },
                    {
                        x: new Date(2017, 4),
                        y: 40260
                    },
                    {
                        x: new Date(2017, 5),
                        y: 33900
                    },
                    {
                        x: new Date(2017, 6),
                        y: 48000
                    },
                    {
                        x: new Date(2017, 7),
                        y: 31500
                    },
                    {
                        x: new Date(2017, 8),
                        y: 32300
                    },
                    {
                        x: new Date(2017, 9),
                        y: 42000
                    },
                    {
                        x: new Date(2017, 10),
                        y: 52160
                    },
                    {
                        x: new Date(2017, 11),
                        y: 49400
                    }
                ]
            }]
        });
        chart8.render();
    }
    </script>
    

<script>


/// Featured Chart

//sp500Chart
$(document).ready(function () {
    initializeChart();

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

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

        function fetchsp500Data() {
            var apiUrl = "{{ url('/get-sp500-data') }}";
            $.ajax({
                url: apiUrl,
                type: 'GET',
                success: function (response) {
                    // console.log('Fetched data:', response);
                    fetchedData = response.observations;
                    updateChart(); // Update the chart
                },
                error: function (error) {
                    console.log('Error fetching sp500 data:', error);
                }
            });
        }

        function updateChart() {
           
           
    if (sp500Chart) {
    sp500Chart.destroy();
}

sp500Chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['USA', 'Russia', 'China', 'India', 'Australia', 'SA'], // Example country labels
        datasets: [
            {
                label: 'Anthracite and Bituminous',
                data: [120000, 150000, 180000, 160000, 170000, 130000], // Example data
                backgroundColor: 'rgba(0, 123, 255, 0.7)',
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 1
            },
            {
                label: 'SubBituminous and Lignite',
                data: [110000, 140000, 170000, 150000, 160000, 120000], // Example data
                backgroundColor: 'rgba(220, 53, 69, 0.7)',
                borderColor: 'rgba(220, 53, 69, 1)',
                borderWidth: 1
            }
        ]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: 'S&P 500', // Chart title
                font: {
                    size: 20
                }
            },
            legend: {
                display: true,
                position: 'bottom'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Value' // Y-axis title
                }
            },
            x: {
                title: {
                    display: true,
                    text: 'Country' // X-axis title
                }
            }
        }
    }
});
           
           
        }
    }
});

// gdpChart
$(document).ready(function () {
    initializeChart();

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

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

        function fetchGDPData() {
            var apiUrl = "{{ url('/get-filtered-gdp-data') }}"; // URL to fetch the GDP data
            $.ajax({
                url: apiUrl,
                type: 'GET',
                success: function (response) {
                    // console.log('Fetched GDP data:', response);
                    fetchedData = response.observations;
                    updateChart(); // Update the chart with the fetched data
                },
                error: function (error) {
                    console.log('Error fetching GDP data:', error);
                }
            });
        }

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

            // Replace these with your actual labels and GDP data
            var labels = ['USA', 'Russia', 'China', 'India', 'Australia', 'SA']; // Example country labels
            var gdpData1 = [21000, 15800, 14300, 9300, 12000, 3500]; // Example GDP data set 1
            var gdpData2 = [19000, 15000, 13800, 8400, 11500, 3100]; // Example GDP data set 2

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

            gdpChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'GDP Set 1',
                            data: gdpData1,
                            backgroundColor: 'rgba(0, 123, 255, 0.7)',
                            borderColor: 'rgba(0, 123, 255, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'GDP Set 2',
                            data: gdpData2,
                            backgroundColor: 'rgba(220, 53, 69, 0.7)',
                            borderColor: 'rgba(220, 53, 69, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: 'GDP Comparison', // Chart title
                            font: {
                                size: 20
                            }
                        },
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'GDP (in billions USD)' // Y-axis title
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Country' // X-axis title
                            }
                        }
                    }
                }
            });
        }
    }
});

</script>

<script>

$(document).ready(function () {
    fetchPMIData1();

    function fetchPMIData1() {
        var apiUrl = "{{ url('/get-pmi-data1') }}";
        $.ajax({
            url: apiUrl,
            type: 'GET',
            success: function (response) {
                console.log('Data fetched successfully', response);
                updateEconomicDataList(response);
            },
            error: function (error) {
                console.log('Error fetching data:', error);
            }
        });
    }

    function updateEconomicDataList(data) {
    var $list = $(".real23");
    $list.empty(); // Clear the list before adding new items

    // Define a mapping for the series IDs to their display names
    const seriesNames = {
        'GDP': 'GDP',
        'SP500': 'S&P500',
        'Nasdaq': 'Nasdaq',
        'DOW': 'DOW',
        'Gold': 'Gold'
    };

    // Iterate over the data object and create list items for each indicator
    $.each(seriesNames, function(key, displayName) {
        if (data[key] && data[key].observations.length > 1) {
            var observations = data[key].observations;
            var latestValue = observations[observations.length - 1].value;
            var previousValue = observations[observations.length - 2].value;
            var change = ((latestValue - previousValue) / previousValue) * 100;
            var changeFormatted = change.toFixed(2) + '%'; // Format to two decimal places

            // Determine if the change is positive or negative for conditional formatting
            var changeText = change >= 0 ? `+${changeFormatted}` : changeFormatted;

            // Append list item to the list
            $list.append(
                `<li>
                    <h3>${displayName}</h3>
                    <h5><span class="blink">${latestValue}</span></h5>
                    <p> <span class="blink">${changeText}</span> </p>
                </li>`
            );
        } else {
            // If there's no data for the key or not enough observations, append a message
            $list.append(
                `<li>
                    <h3>${displayName}</h3>
                    <h5>Data Not Available</h5>
                    <p>N/A</p>
                </li>`
            );
        }
    });
}

});


</script>

<script>
$(document).ready(function() {
  // Set an interval to toggle the blink class every 3 seconds
  setInterval(function() {
    $('.blink').toggleClass("blink-once");
  }, 2000); // 3000 milliseconds = 3 seconds
});


$(document).ready(function() {
  var text = "Loading Real-Time Values";
  var i = 0;
  var speed = 150; // Speed in milliseconds
  var delayAfter = 1000; // Delay after finishing before restarting in milliseconds

  function typeWriter() {
    if (i < text.length) {
      $('#typing').append(text.charAt(i));
      i++;
      setTimeout(typeWriter, speed);
    } else {
      // Wait a bit after typing is complete, then reset and start over
      setTimeout(function() {
        $('#typing').html('');
        i = 0;
        typeWriter();
      }, delayAfter);
    }
  }

  typeWriter(); // Start the typing effect
});


</script>





@endsection
@endsection